Stap 1: De grondbeginselen
Coördinatenstelsel:
Als het gaat om Computer Graphics, is het coördinaten systeem een tikkeltje anders dan onze gebruikelijke hoge-school/college Cartesisch coördinatenstelsel (zie hierboven, eerste afbeelding).
Hier, is elke eenheid een pixel. Dus, als we een functie bij de verwerking als volgt aanroepen:
Ellipse(100,200,30,50);
Het betekent gewoon het volgende: een ellips dat 100 pixels vanaf de x-as, 200 pixels vanaf de y-as, 30 pixels breed, en heeft een hoogte van 50 pixels tekenen.
De eerste schets:
Stel je voor verwerking als een leeg doek nodigen u uit om de spullen op het tekenen met code. Bovendien, verwerking maakt het zeer eenvoudig voor u Basisvormen tekenen en bewerken op de vliegen met de hulp van een heleboel handige ingebouwde functies.
De structuur van elke Processing Schets zullen hieronder:
VOID Setup {}
dingen die slechts éénmaal uitgevoerd
}
VOID draw() {}
wordt uitgevoerd in een oneindige lus, tenzij u het programma stopt.
}
De bovenstaande twee functies transportbesturing de van uw schets. Simpelweg zet, een functie of iets anders dat u wilt uitvoeren met slechts eenmaal aan het begin van het programma (zoals de grootte en de kleur van uw doek, bijvoorbeeld) gaat in de Setup-blok. Vandaar, gaat alles binnen het blok draw(). Het codeblok binnen draw() wordt uitgevoerd in een oneindige lus. We zullen zien waarom dit is later handig, maar voor nu, laten we teken een cirkel in de lus van de loting, simpelweg omdat het heet "tekenen"!
VOID Setup {}
size(400,400); Hiermee stelt u de grootte van het doek
Background(255); Hiermee stelt u de achtergrond doek
}
VOID draw() {}
ellips (120,256,40,40), //draws een ellips
}
Het resultaat moet een ellips (zie hierboven, tweede foto) worden weergegeven.
Zoals verwacht, weergegeven een cirkel rechts waar we gecodeerd om te worden. Yay!
Let op de ingebouwde functies die werden uitgevoerd. Hier is een lijst bestaat uit een paar van hen (check de verwerking verwijzing voor meer informatie):
grootte (breedte, hoogte) - Hiermee stelt u het canvas volgens de opgegeven parameters.
background(color) - wordt de achtergrond ingesteld op de kleur die is opgegeven door de gebruiker (meer op interpreteren kleuren in een beetje).
fill(color) - Hiermee stelt u de kleur voor de entiteiten in uw canvas.
ellipse(x,y,width,height) - tekent een ovaal. De x- en y coördinaten zijn die van de ellips center standaard.
rect(x,y,width,height) - wordt een rechthoek getekend. De x- en y coördinaten van de rechthoek linksboven standaard zijn.
arc(x,y,width,height,start angle, end angle) - tekent een boog, die vergelijkbaar is met het opstellen van een ellips, behalve hier, u opgeven uit welke hoek de ellips begint en waar het zal eindigen.
* Opmerking: alle ruimtelijke parameters voor de bovenstaande functies zijn in pixels.
Laten we het gebruik van de bovenstaande functies om te tekenen iets willekeurig:
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));
}
Zie uitkomst boven (derde foto)
Opgemerkt moet worden dat:
1. fill() background() neemt een getal of drie verschillende nummers en vertaalt dit naar een kleur. Elk van deze nummers heeft een bereik van 0 tot 255. Als u slechts één nummer doorgeven, krijgt u tinten van grijs, 0 wordt volledig zwart en 255 is wit. Aan de andere kant, als u drie getallen doorgeeft, vertegenwoordigt elk de hoeveelheid rood, groen en blauw u mengen wilt om de gewenste kleur. Gelukkig, als u niet meer al dit jargon weet, Processing heeft een "Kleurenkiezer" tool, die u onder "Tools vinden kunt".
2. Let op de volgorde van de code. De grijze cirkel verschijnt eerst omdat we de functie ellipse() aan de bovenkant hebt aangeroepen. Vervolgens, de roze rechthoek de grijze cirkel overlapt en dan komt de boog. Bottom line: Shapes worden weergegeven in dezelfde volgorde als u de corresponderende functies in de code aanroepen.
3. de radians()-functie converteert een hoek van graden naar een radiaal waarde, aangezien de arc() functie geen hoeken in graden accepteert. Maar voor ons, berekenen van hoeken in graden is het meestal handig.
4. de "breedte" en "hoogte" zijn speciale sleutelwoorden die retourneert de breedte en hoogte van het doek. Deze zijn zeer nuttig, omdat zij uw code aan te passen aan wijzigingen formaat doek in de toekomst.
