Börjar bearbetning - temperatur bildeffekter (1 / 7 steg)

Steg 1: Grunderna

Koordinatsystem:

När det gäller datorgrafik, är koordinatsystemet en smula annorlunda än våra vanliga hög-skola/högskola Cartesian koordinerat System (se ovan, första bilden).

Här är varje enhet en pixel. Så, om vi anropa en funktion i bearbetning så här:

Ellipse(100,200,30,50);

Det betyder helt enkelt följande: Rita en ellips som är 100 bildpunkter från x-axeln, 200 pixlar från y-axeln, 30 pixlar bred och har en höjd av 50 pixlar.

Första skissen:

Tänk dig bearbetning som en tom duk bjuder in dig att rita saker på det med kod. Dessutom gör behandling det mycket enkelt för dig att rita grundläggande former och manipulera dem i farten med hjälp av ett gäng användbara inbyggda funktioner.

Någon bearbetning skiss struktur kommer att vara den nedan:

void setup() {

saker som körs bara en gång

}

void draw() {

körs i en oändlig loop, om du slutar programmet.

}

Ovanstående två funktioner kontrollera flödet av din skiss. Helt enkelt Lägg, någon funktion eller något annat som du vill köra bara en gång i början av programmet (såsom storlek och färg för din canvas, till exempel) går inuti setup() blocket. Därför går allt annat inuti blocket draw(). Block av kod inuti draw() körs i en oändlig loop. Vi kommer att se varför detta är användbart senare, men för nu, låt oss Rita en cirkel inuti draw loop, helt enkelt eftersom det heter "dra"!

void setup() {

size(400,400); Anger storleken på duken

Background(255); ställer in bakgrunden duken

}

void draw() {

ellips (120,256,40,40), //draws en ellips

}

Resultatet ska visa en ellips (se ovan, andra bilden).

Som väntat, visas en cirkel rätt där vi kodade det är. Yay!

Märka de inbyggda funktioner som implementerades. Här är en lista bestående av några av dem (kontrollera bearbetning referensen för mer information):

storlek (bredd, höjd) - ställer in duken enligt parametrarna som har angetts.

background(color) - anger bakgrunden till den färg som anges av användaren (mer på tolkar färger i lite).

fill(color) - anger färg för enheterna i din canvas.

ellipse(x,y,width,height) - ritar en ellips. X- och y-koordinaterna är som en ellips Center som standard.

rect(x,y,width,height) - ritar en rektangel. X och y koordinater är det av rektangelns övre vänstra hörn som standard.

arc(x,y,width,height,start angle, end angle) - drar en båge, som liknar Rita en ellips, utom här, du ange från vilken vinkel ellipsen börjar och var det ska sluta.

* Obs: alla spacial parametrar för ovanstående funktioner är i pixlar.

Låt oss använda funktionerna ovan för att rita något random:

void setup() {
size(400,400);
Background(255); Smooth();

}

void draw() {

noStroke();

Fill(140);
Ellipse(190,256,40,40);
Fill(224,131,131);
rect(width/2,height/2,40,90);
Arc(190,200,90,90,0,radians(270));

}

Se resultatet ovan (tredje bilden)

Det bör noteras att:

1. fill() och background() tar ett tal eller tre olika nummer, och översätter den till en färg. Alla dessa siffror har intervallet 0 till 255. Om du passerar längs bara ett nummer, får du nyanser av grått, 0 att vara helt svart och 255 som vit. Å andra sidan, om du klarar tre nummer, representerar var mängden rött, grönt och blått som du vill mixa för att uppnå önskad färg. Tack och lov, om du inte kommer ihåg all denna jargong, bearbetning har en "Färg väljare" verktyg, som finns under "Verktyg".
2. tillkännagivande ordningen på koden. Den grå cirkeln visas först eftersom vi anropas funktionen ellipse() på toppen. Sedan rosa rektangeln överlappar den grå cirkeln, och sedan kommer bågen. Bottom line: former visas i samma ordning som du anropa motsvarande funktioner i koden.
3. radians() funktionen omvandlar en graders vinkel till en radian värde, eftersom funktionen arc() inte accepterar vinklar i grader. Men för oss, beräkning av vinklar i grader är mest bekvämt.
4. "bredd" och "höjd" är speciella nyckelord som returnerar bredd och höjd på duken. Dessa är mycket användbara, eftersom de gör din kod kan anpassas till alla duk storleksändringar i framtiden.