Spela med matematik: göra animerad GIF och HTML5 (3 / 15 steg)
Steg 3: Grunderna - ränder
Första låt oss börja med ett enkelt exempel: vertikala ränder. För detta anser vi bara x -koordinaten.
Kör MathVision.html i en annan flik i webbläsaren och klistra in exempel formlerna som du hittar nedan.
Formel
BREDD = 200.
RATIO = 1;
X_MIN = 0; X_MAX = 10;
Y_MIN = 0; Y_MAX = 10;
färg rgb (x, y) {
int värde = (int) x % 2. // (a)
int luma = värde * 255; // (b)
återvända color(luma); // (c)
}
Förklaring
(a) vi tar del av x (den (int) x här), och avgöra om det är udda eller jämnt ( % 2 betyder modulo 2). Detta ger ett värde som är antingen 0 eller 1.
b vi multiplicera värdet med 255 att erhålla en gråskala luma nummer (från 0 till 255). Eftersom värdet är 0 eller 1, kommer luma att antingen 0 eller 255 här.
c vi tillbaka en gråskala färg, genom att funktionen color() med endast en parameter.
Övningar
- Gör diagonala ränder. Tips: Använd också y.