PROGRAMMEREN
met PROCESSING
Processing is een bekende programmertaal waarmee APPS
gemaakt kunnen worden.
// Draw a house. Use variables.
int x = 90;
int y = 100;
void setup() { size(200, 200);
// We are just drawing a static figure.
// Therefore, noLoop tells draw to just run once.
noLoop();
}
void draw() { fill(46, 136, 242);
rect(x, y, 40, 40);
fill(0);
triangle(x - 10, y, x + 20, y - 30, x + 50, y);
fill(93, 50, 10);
rect(x + 10, y + 20, 10, 20);
fill(242, 213, 46) rect(x + 5, y + 5, 10, 10);
rect(x + 25, y + 5, 10, 10);
line(x + 10, y + 5, x + 10, y + 15);
line(x + 5, y + 10, x + 15, y + 10);
line(x + 30, y + 5, x + 30, y + 15);
line(x + 25, y + 10, x + 35, y + 10);
}
WE GAAN BEGINNEN!
JULLIE GAAN EEN WEDSTRIJDJE
PROGRAMMEREN
WAT KUN JE WORDEN ALS JE GOED BENT IN PROGRAMMEREN?
- APP ONTWIKKELAAR.
- IT SPECIALIST.
- GAME PROGRAMMEUR.
- VISUALISATIE SPECIALIST.
https://openprocessing.org/sketch/create
> START EEN BROWSER.
> GA NAAR:
> KLIK DAN EERST RECHTSBOVEN OP
PROCESSING STARTEN
> NU BEN JE KLAAR VOOR DE START!
EERST EVEN
OEFENEN
> Maak groepjes van 2.
> Ga naast elkaar zitten als groep.
> Zorg ervoor dat processing is gestart.
> Wis alle code in het venster.
3…..2…..1…… START
> Type het onderstaande programma over.
> KLAAR?
> KLIK OP OM HET PROGRAMMA TE STARTEN.
OPDRACHT 1 - OEFENEN
> ALS JE HET GOED HEBT GEDAAN
ZIE JE HET ONDERSTAANDE SCHERM:
size (800,600);
Met ‘size’ maak je een venster aan. In dit geval van 800 pixels breed en 600 pixels hoog.
rect (100,100,200,200);
Met ‘rect’ teken je een vierkant of rechthoek.
> LAAT HET RESULTAAT AAN JE DOCENT ZIEN.
KLIK OP OM WEER TERUG TE GAAN
NAAR HET PROGRAMMEERVENSTER.
> NOG EVEN EXTRA UITLEG OVER rect:
De computer begint altijd linksboven met
tekenen. Dat is punt (0,0)
X Y breedte diepte
rect (100, 100, 200, 200);
Met ‘rect’ teken je een vierkant of rechthoek.
X 100 pixels naar rechts Y 100 pixels naar beneden
maat en maak de rechthoek 200 pixels breed en 200 pixels diep.
DE WEDSTRIJD
> Wis je voorgaande code.
> Type het onderstaande programma over.
OPDRACHT 2 – DE NEDERLANDSE
VLAG TEKENEN
> KLAAR?
> KLIK OP OM HET PROGRAMMA TE STARTEN
> ALS JE HET GOED HEBT GEDAAN
ZIE JE HET ONDERSTAANDE SCHERM:
> LAAT HET RESULTAAT AAN JE DOCENT ZIEN.
noStroke();
Met ‘noStroke()’ haal je de omlijning weg. Anders zie je in de Nederlandse vlag zwarte strepen lopen om je getekende vlakken.
fill (0,0,0);
Met ‘fill’ kies je een kleur. Je doopt als het ware een kwast in de verf.
ROOD = 255,0,0 BLAUW = 0,0,255 GROEN = 0,255,0 GEEL = 255,255,0 PAARS = 255,0,255 ZWART = 0,0,0 WIT= 255,255,255
> ALS JE VLAG IS GOEDGEKEURD MAG JE NAAR OPDRACHT 3.
KLIK OP OM WEER TERUG TE GAAN NAAR HET PROGRAMMEERVENSTER
> Wis je voorgaande code.
> Maak het onderstaande programma af.
(Er moeten nog 2 regels code bij.
Iets met fill en rect.)
> Laat je Belgische vlag aan je docent zien.
> Dit moet het worden: SUCCES!
OPDRACHT 3 – DE BELGISCHE
VLAG TEKENEN
DE FINALE
> Wis je voorgaande code.
> Programmeer de Ijslandse vlag
> Voorwaarde: de vorm moet kloppen.
> Gebruik size (700,500);
> En gebruik noStroke();
> TIP:
- Teken eerst een rechthoek met de kleur blauw.
- Teken dan een witte verticale rechthoek in de juiste maten.
- Teken dan een witte horizontale rechthoek in de juiste maten.
- Teken dan een rode verticale rechthoek in de juiste maten.
-
Teken dan een rode horizontale rechthoek in de juiste maten.
OPDRACHT 4 – DE IJSLANDSE VLAG
SUCCES
Hieronder zie je de code van een GAME dat nog in ontwikkeling is. Kopieer de code maar eens naar je programmavenster en probeer het uit.
Welke toetsen moet je gebruiken?
float xpos=100;
float ypos=100;
float dirx=5; // standaard naar rechts bewegen
float diry=5; // standaard niet naar beneden gaan bewegen int x=0;
int score=0;
int score2=0;
int spelerx=350;
int spelery=500;
void setup() { size(800, 680);
} void draw() { background(0);
fill (0,255,0);
textSize(25);
text ("Score player 1: "+score, 75,55);
text ("Score computerplayer: "+score2, 425,55);
fill (255,0,0);
rect (spelerx,spelery,50,25);
fill(255,255,255);
ellipse (xpos,ypos,10,10);
if (xpos < 30) {dirx=1+random(15);}
if (xpos > 750) {dirx=-1+random(-15);}
if (ypos > 550) {ypos=0; score2=score2+1;}
if (ypos < 30) {diry=1+random(15);}
if (xpos > spelerx & xpos < spelerx+50 && ypos > spelery && ypos <
spelery+35)
{score=score+1; dirx=-dirx; diry=-diry;}
keypressed(); // check op indrukken toetsen xpos = xpos + dirx;
ypos = ypos + diry;
}
void keypressed()
{ if (key == 'a' & spelerx > 10) {spelerx=spelerx-15;}
if (key == 's' & spelerx <740) {spelerx=spelerx+15;}
}
