1

Тема: Годинниковий градієнт

Хай. Як пустити градієнт по годинниковій стрілці навколо якоїсь точки?
http://puu.sh/9uZbM/74b0331844.png
от тут 1 - це повністю непрозоро, а 0 - повністю прозоро, а треба зробити такий от градієнт від 1 до 0

Говоріть українською! Живіть українською! Відчувайте українською!

2

Re: Годинниковий градієнт

вже знайшов рішення

Говоріть українською! Живіть українською! Відчувайте українською!

3

Re: Годинниковий градієнт

FakiNyan написав:

вже знайшов рішення

Покажи рішення,самому цікаво.

4

Re: Годинниковий градієнт

Прихований текст

http://puu.sh/9vCb9/4137a045a3.jpg

Говоріть українською! Живіть українською! Відчувайте українською!

5

Re: Годинниковий градієнт

Ви хоч пишіть в чому то хочете робити.

бо можна так
<html>
<head>
<title>Angular Gradient Test</title>
<script type="text/javascript" src="graphics.js"></script>
<script type="text/javascript" src="math.js"></script>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
 
var halfWidth = canvas.width / 2;
var halfHeight = canvas.height / 2;
 
var gradientCenter = new Point(halfWidth, halfHeight);
var colors = [ [1, 0, 0, 1], // red
[0, 1, 0, 1], // green
[0, 0, 1, 1] // blue
];
 
var angularGradient = function(point) {
// figure out angle
var dir = point.sub(gradientCenter);
var angle = Math.atan2(dir.y, dir.x);
 
// wrap around as positive
if (dir.y < 0 ) {
angle += 2 * Math.PI;
}
 
// map to [0, 1] range
angle /= (2 * Math.PI);
 
// figure out which segments to interpolate
var angleRatio = angle * colors.length;
var index = Math.floor(angleRatio);
var leftColor = index == 0? colors[colors.length - 1]:
colors[index - 1];
 
var rightColor = colors[index];
 
// figure out interpolation factor
var lerpFac = angleRatio % 1;
 
return lerp(leftColor, rightColor, lerpFac);
}
 
process(canvas, angularGradient);
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>

6

Re: Годинниковий градієнт

https://github.com/google/closure-library - js бібліотеки тут.

7 Востаннє редагувалося FakiNyan (17.06.2014 12:33:32)

Re: Годинниковий градієнт

Vo_Vik написав:

Ви хоч пишіть в чому то хочете робити.

бо можна так
<html>
<head>
<title>Angular Gradient Test</title>
<script type="text/javascript" src="graphics.js"></script>
<script type="text/javascript" src="math.js"></script>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
 
var halfWidth = canvas.width / 2;
var halfHeight = canvas.height / 2;
 
var gradientCenter = new Point(halfWidth, halfHeight);
var colors = [ [1, 0, 0, 1], // red
[0, 1, 0, 1], // green
[0, 0, 1, 1] // blue
];
 
var angularGradient = function(point) {
// figure out angle
var dir = point.sub(gradientCenter);
var angle = Math.atan2(dir.y, dir.x);
 
// wrap around as positive
if (dir.y < 0 ) {
angle += 2 * Math.PI;
}
 
// map to [0, 1] range
angle /= (2 * Math.PI);
 
// figure out which segments to interpolate
var angleRatio = angle * colors.length;
var index = Math.floor(angleRatio);
var leftColor = index == 0? colors[colors.length - 1]:
colors[index - 1];
 
var rightColor = colors[index];
 
// figure out interpolation factor
var lerpFac = angleRatio % 1;
 
return lerp(leftColor, rightColor, lerpFac);
}
 
process(canvas, angularGradient);
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>

та то картинка потрібна була, суть в тому, що є іконка вміння, і коли ми використовуємо його то починається відрахунок часу після котрого можна ще раз використати це вміння. Так от я хтів зробити так - як тільки використали вміння, поверх його іконки з'являється напівпрозора сіра текстура, що ніби каже нам - вміння використовувати не можна! І от та текстура мала б зпадати  за часовою стрілкою впродовж часу кулдауна. Ну ви зрозуміли, ага? От так вийшлоhttps://www.youtube.com/watch?v=Zh8zfWJ … e=youtu.be
ну так от, той градієнт мені був потрібен аби знати, які пікселі сірої картинки робити прозорими.

Говоріть українською! Живіть українською! Відчувайте українською!

8

Re: Годинниковий градієнт

Кажете за юніті взялись)

9

Re: Годинниковий градієнт

Vo_Vik написав:

Кажете за юніті взялись)

так я на цей форум прийшов через юню

Говоріть українською! Живіть українською! Відчувайте українською!

10

Re: Годинниковий градієнт

FakiNyan написав:
Vo_Vik написав:

Кажете за юніті взялись)

так я на цей форум прийшов через юню

Прихований текст

думав, думав, що за юня, може помилився думаю, думав Юлю)) а потім дійшло що за Юня)

x

11

Re: Годинниковий градієнт

Chemist-i написав:
FakiNyan написав:
Vo_Vik написав:

Кажете за юніті взялись)

так я на цей форум прийшов через юню

Прихований текст

думав, думав, що за юня, може помилився думаю, думав Юлю)) а потім дійшло що за Юня)

Прихований текст

знав я колись одну юлю, центнер сала :(

Говоріть українською! Живіть українською! Відчувайте українською!