1 Тема від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 13 821
    • Репутація: 5574

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

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

2 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 13 821
    • Репутація: 5574

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

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

3 Відповідь від Felis silvestris catus

  • Дата реєстрації: 31.05.2014
  • Повідомлень: 698
    • Репутація: 176

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

FakiNyan написав:

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

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

4 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 13 821
    • Репутація: 5574

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

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

http://не-дійсний-домен/9vCb9/4137a045a3.jpg

5 Відповідь від Vo_Vik

  • Vo_Vik
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 01.10.2012
  • Повідомлень: 4 720
    • Репутація: 2462

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>

Vo_Vik вебсайт

6 Відповідь від Vo_Vik

  • Vo_Vik
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 01.10.2012
  • Повідомлень: 4 720
    • Репутація: 2462

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

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

Vo_Vik вебсайт

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

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 13 821
    • Репутація: 5574

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 Відповідь від Vo_Vik

  • Vo_Vik
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 01.10.2012
  • Повідомлень: 4 720
    • Репутація: 2462

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

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

Vo_Vik вебсайт

9 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 13 821
    • Репутація: 5574

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

Vo_Vik написав:

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

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

10 Відповідь від Chemist-i

  • Chemist-i
  • Chemist-i
  • Replace Team
  • Поза форумом
  • Звідки: world wide web
  • Дата реєстрації: 31.10.2012
  • Повідомлень: 3 788
    • Репутація: 2380

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

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

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

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

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

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

Chemist-i вебсайт

11 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 13 821
    • Репутація: 5574

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

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

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

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

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

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

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

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