Spela med matematik: göra animerad GIF och HTML5 (6 / 15 steg)

Steg 6: Basics - färger

Det finns två mycket vanliga sätt att definiera en färg: RGB - och NMI -modeller. Två stöds av MathVisionoch deras användning beskrivs i det här steget.

RGB-modellen

Med den så kallade RGB-modellen definieras en färg av dess Red, GLindas och Blue komponenter.

För att använda RGB-färgmodellen, skall du definiera din formel som rgb(x,y) eller rgb(x,y,t).

I föregående steg, kom ihåg att din rgb funktion används color(luma) med ett enda argument, för att producera svarta och vita eller grå skalor. Nu, för färgutskrifter, bör du ringa rgb med tre argument: color(red,green,blue). Varje argument bör vara från 0 till 255.

• Color(255,0,0) är primära röd, color(0,255,0) är primära green, color(0,0,255) är primära blå;
• Color(0,0,0) är svart, color(255,255,255) är vita.
• Color(127,0,0) är mörkt röda.

Formel 1 (RGB)

BREDD = 250; RATIO = 1;
X_MIN = 0; X_MAX = 255;
Y_MIN = 0; Y_MAX = 255;

färg rgb (x, y) {
int radie = 80.
int d1 = dist (x, y, 80, 175);
int d2 = dist (x, y, 175, 175);
int d3 = dist (x, y, 127, 80);

int r = d1 < radius? 255: 0;
int g = d2 < radius? 255: 0;
int b = d3 < radius? 255: 0;

returnera färg (r, g, b);
}

Ovanstående formel genererar den första bilden i detta steg.

• För den röda cirkeln, har vi full-röd bidrag (255) om vi är inne i en cirkel centrerad på x = 80 och y = 175, annars har vi 0.
• Liknande för grönt och blått med olika centra.
• Om vi är utanför någon cirkel, är r, g och b alla noll. Vi får svart, eftersom färgen (0, 0, 0) är svart.

Tänk om, istället för svart bakgrund, vi vill ha en vit bakgrund? Detta är vår andra bilden och andra formel för detta steg.

Formel 2 (RGB)

BREDD = 250; RATIO = 1;
X_MIN = 0; X_MAX = 255;
Y_MIN = 0; Y_MAX = 255;

färg rgb (x, y) {
int radie = 80.
int d1 = dist (x, y, 80, 175);
int d2 = dist (x, y, 175, 175);
int d3 = dist (x, y, 127, 80);

int r = d1 < radius? 255: 0;
int g = d2 < radius? 255: 0;
int b = d3 < radius? 255: 0;

Returnerar r + g + b? färg (r, g, b): color(255);
}

Formeln ovan är lik den föregående, med denna förändring i den sista raden:

• Om alla komponenter är noll (dvs r + g + b är noll) då vi utanför en cirkel, och vi color(255) som är vit (och som är samma som color(255,255,255) );
• annars. tillbaka color(r,g,b) som innan.

HSB modell

För HSB-modellen, istället för att använda röda, gröna och blå komponenter, definieras en färg av tre andra slags argument:

• H, nyans--den rena färgen i spänna av möjliga färger: 0 = röd, 150 = blå;
• S, mättnad--hur färgen är levande eller blekta: 50 = pastell, 255 = levande;
• B, ljusstyrka: 50 = mörk, 255 = lättat.

Formel 3 (HSB)

BREDD = 250; RATIO = 1;
X_MIN = 0; X_MAX = 255;
Y_MIN = 0; Y_MAX = 255;

färg hsb (x, y) {
int radie = 80.
int b = dist (x, y, 127, 127) < 80? 64: 255;
returnera färg (x, y, b);
}

I formeln ovan, som ger den tredje bilden av detta steg gör vi följande:

• Variera nyans med x (horisontellt), och mättnad med y (vertikalt). Toppen av bilden är levande, botten är så blek att det blir vitt.
• Dessutom mörkare vi en skiva centrerad i mitten av bilden vid (127,127); om vi utanför disken, ange vi b till 255 (full ljusstyrka), annars till 64 (ganska mörk).