Del på: Stumbleupon

I denne guiden skal vi lage et tegneprogram helt fra starten av. Vi bruker programmerings-språket Processing som gjør dette enkelt for oss.

I denne guiden tenkte jeg at vi kunne prøve å lage et veldig simpelt tegne program. Før du tenker at det blir alt for vanskelig og klikker deg bort fra denne artikkelen, så vil jeg gjerne si at dette er det mest grunnleggende form for programmering du noen gang kommer til å lære. 

Vi bruker et programmeringsspråk som heter Processing. Selve ideen bak Processing er at det skal være enkelt, derfor er det slik at når man laster ned Processing får man kun en veldig grunnleggende versjon av programvaren, har man lyst på flere funksjoner kan man derfor laste ned og innstallere Libraries for å gjøre Processing mer avansert og tilpasse det slik man vil. 

Når du er ferdig med denne guiden vil du kunne lage abstrakt "kunst" som dette med tegne programmet.

Steg 1:

Først må vi finne ut hva vi vil at programmet vårt faktisk skal gjøre. 

  • Når programmet åpner vil vi ha en skjerm som forklarer funksjonene til tegne programmet.
  • Vi vil ha mulighet til å tegne med forskjellige figurer som følger muse bevegelsene våre.
  • Og vi vil ha mulighet til å gå tilbake til første skjermen for å starte på nytt.

Steg 2:

Last ned og innstaller Processing for din maskinvare. Åpne opp programmet og du vil se en kode-editor som ligner veldig på Notepad. Det er her du skriver all koden din og kjører programmet. Første steg er å gi programmet vårt noen innstillinger, dette gjøres under void setup() funksjonen. Skriv inn disse kommandoene i starten av dokumentet ditt (jeg kommer til å bruke bilder til å vise frem kodene slik at du må skrive dem inn selv, forhåpentlig vis lærer man det litt bedre på denne måten).

Under void setup () har vi et par kommandoer, size() beskriver hvilken oppløsning programmet skal kjøre i, background beskriver bakgrunnsfargen til programmet. Background trenger tre nummer som definerer RGB farger. Her har jeg satt disse til å være et random nummer mellom 50 og 200. rectMode og ellipseMode sier bare at vi vil at rektangler og sirkler skal roteres rundt midtpunktet av formen. smooth() gjør alt finere og noLoop() gjør at programmet kan starte med en statisk skjerm. Eneste som vil skje hvis du starter programmet nå er at du vil få et bilde med en tilfeldig bakgrunnsfarge. En god start med andre ord.

Steg 3:

Nå vil vi lage skjermen som forklarer hvordan programmet vårt fungerer. For å få til dette må vi definere et par variabler, i dette tilfellet er det best å definere disse variablene før void setup() slik at vi har tilgang til disse hele tiden. Skriv inn dette før void setup():

boolean er en variabel, og vi har her to variabler med navn drawing og start. Boolean er enten på eller av (true eller false), vi setter start til true (vil vise startskjermen vår) og drawing til false. Disse to variablene vil bli byttet om når vi forteller programmet at vi vil starte å tegne.

Dette er vel og bra, men det gjør ingenting med programmet vårt enda, starter du programmet nå er det fortsatt bare en skjerm med en tilfeldig bakgrunnsfarge. Vi må få inn noe tekst på denne skjermen, dette er veldig enkelt med text() funksjonen. Hvis vi kikker i Processings referanse for text() ser vi at text() tar 3 kommandoer (c, x, y). c er selve teksten, x er x-koordinatene og y er y-koordinatene. Etter void setup() funksjonen, må vi lage en void draw() funksjon. Det er inni void draw() alt skjer. Vi kan derfor skrive teksten på den fantastisk fine bakgrunnen vår med denne koden: 

Her kan du se at vi bruker if (start == true) { for å sjekke om vår variabel start er true, hvis den er det blir koden utført. Her har jeg en fill() som sier at vi skal bruke hvit farge på alt som kummer under, jeg har en textSize() som sier at vi skal ha litt større tekst på overskriften, og all teksten vår som er plassert 150 piksler fra venstre, og vi bruker litt matematikk for å plassere teksten riktig på y-koordinatene (height er høyden på dokumentet, i dette tilfellet er det 720 som vi definerte under void setup()). Hvis du starter programmet nå blir du møtt med en skjerm som ser slik ut: (husk at bakgrunnsfargen er tilfeldig hver gang du starter programmet)

Steg 4:

Dette er vel og bra, men nå er det på tide å begynne å tegne. Enkleste måten å avansere til neste steg i programmet vårt er å bare klikke musetasten en gang. Processing har en funksjon for dette så det gjør det veldig enkelt for oss. Plasser denne koden helt nederst i dokumentet ditt:

Her kan du se at vi endrer variablene våre, start og drawing til å være true og false, omvendt av hva vi hadde i starten. Vi kjører også en redraw() funksjon, denne kommandoen forteller programmet at vi vil kjøre koden inni void draw() en gang til. Som du kanskje husker fra tidligere sjekker void draw() om variablen start er true. Det er den ikke lenger siden vi nettopp endret den til false med et museklikk. For å bare vise med et veldig simpelt eksempel hvordan man kan tegne med en figur kan du endre void draw() koden din til dette:

Legg merke til noLoop() og loop() kommandoene. Når vi er i menyen kjører vi noLoop(), dette vil si at programmet ikke oppdateres hele tiden (på en måte som frames i en film), programmet er bare stillestående på en frame hele tiden. Når start blir deaktivert og drawing variablelen blir aktivert med et museklikk kjører vi en loop() kommando som gjør at programmet oppdateres hver frame. Hvis du kjører programmet nå kan du se at vi kan tegne sirkler med musen.

Steg 5:

Det ser selvfølgelig ikke veldig pent ut enda. Det har vi tenkt til å gjøre noe med i dette steget. Vi vil gjerne at figuren vår skal rotere konstant (det var derfor vi satt ellipseMode(CENTER); i starten slik at figuren roterer rundt midtpunktet av seg selv), og vi vil at figuren skal pulsere seg større og mindre. Dette er litt mer avansert, og jeg skal innrømme at jeg ikke har kodet dette selv, jeg har bare funnet koden og tilpasset den til vårt bruk. Vi må definere endel nye variabler for å få til dette. Lag disse variablene øverst i dokumentet ditt sammen med start og drawing variablene, i tillegg til diameter kommandoen under void setup()

Deretter vil vi gjøre figuren våres litt mer interessant. Slett ellipse() koden vår og skriv inn dette i stedet, det er mye kode her, og mye matematikk, men det er faktisk ikke så veldig vanskelig å forstå hva det er som skjer. 

Legg merke til fill() kommandoen her, denne kommandoen bestemmer fargen til sirkelen på hver frame, siden fargen er tilfeldig hver frame, vil vi ende opp med et mønster av sirkler i forskjellige farger som beveger seg etter musen. Kjør programmet og du kan nå se at vi har en sirkel som følger etter musa (den henger litt etter for å gjøre det smooth), sirkelen roterer konstant og pulserer. Det er egentlig en kjempestart, men vi mangler fortsatt noen funksjoner som vi gjerne vil ha (vi vil kunne pause tegninga, gå tilbake til menyen og vi vil kunne tegne med flere figurer). 

Steg 6:

Først, la oss takle en funksjon for å pause programmet, i tillegg til å gå tilbake til menyen siden dette ikke er spesielt vanskelig. Processing har mange funksjoner for museklikk og tastaturklikk, vi har allerede brukt museklikk så vi kan ikke bruke det igjen, men hva med å bruke f.eks P tasten for å pause tegninga, og kanskje M tasten for å gå tilbake til menyen? Her er hele koden for å få til dette. Legg merke til background() kommandoen under mousePressed(), dette gjør at vi får en blank skjerm hver gang vi klikker med musa (dette gjør at menyen forsvinner, og vi kan starte å tegne på nytt hvis vi vil).

Steg 7:

Neste steget blir å legge inn flere forskjellige figurer i programmet vårt, slik at vi kan tegne med andre former enn bare en sirkel. Vi trenger noen flere variabler for å få til dette. Lag disse to variablene sammen med alle våre andre variabler:

Deretter må vi lage en if funksjon for å sjekke hvilken shape som er true, erstatt koden som er gul med vår ellipse() kode vi allerede har.

Siste steget for å få dette til å fungere er å legge inn kommandoene for å skifte mellom figurene. Dette kan vi igjen gjøre med enkle tastetrykk på tastaturet. Jeg bruker tastene 1 og 2 i dette tilfellet. Legg til koden for tastene 1 og 2 sammen med de andre kommandoene for tastetrykk:

Da er egentlig tegneprogrammet vårt ferdig, det er mye man kan gjøre herfra for å lage det mer interessant. Man kan selvfølgelig legge inn flere figurer, nå har vi bare to, men det er enkelt å bare legge til kommandoer og variabler for alle figurene du måtte ønske deg. Jeg har også prøvd å lage figurene våre litt mer interessante ved å plassere flere figurer rundt figuren vi allerede har. Her er noen eksempler:

Du kan laste ned min fulle kildekode for å leke med den her. Håper det har vært litt lærerikt, Processing er et veldig artig programmerings-språk når man får satt seg litt inn i det, og det er et fantastisk samfunn av folk på internett som har lyst til å vise og lære bort. Lykke til!



Teknologi Skrevet av: anders g Skrevet: 15. February 2015
Del på: Stumbleupon
Kommentarer elsker vi, men Kardemomme-loven gjelder. Vær snill og grei og respekt andre mennesker.