Spela med matematik: göra animerad GIF och HTML5 (5 / 15 steg)
Steg 5: Basics - Spiral
Nu låt oss ritar en spiral.
Formel
BREDD = 250;
RATIO = 1;
X_MIN = -1; X_MAX = 1;
Y_MIN = -1; Y_MAX = 1;
färg rgb (x, y) {
float radie = dist (x, y, 0, 0); (a) kartesiska till polar
float vinkel = ARCTAN2 (x, y); (a) kartesiska till polar
flyta värde = vinkel * 3 - log (radius) * 12; (b) spiral
float rand = cos(value); (c) slät ränder
flyta luma = (rand + 1) * 127; (d) karta till luma utbud
återvända color(luma);
}
Förklaring
(a) konvertera kartesiska koordinater (x,y) till Polära koordinater (vinkel,radie).
b fastställa färg med hjälp av vinkeln och logaritmen av radien.
c tillämpa en cosinus för att generera mjuk gråskala ränder.
(d) karta stripe (-1 till 1) till luma intervallet (0 till 255).
Obs:
Du kan också generera svarta och vita (i stället för greyscaled) ränder genom att ersätta de två linjerna (c) och (d) av detta enda:
flyta luma = cos(value) > 0? 0: 255,
Sedan, märke hur ränder gränser är ojämna. Inte så trevligt, så låt oss hålla fast vid greyscales!
Övningar
- Göra spiralen vända i motsatt riktning.