Lesje programmeren Hallo allemaal, wat fijn dat je er bent. ROBOTICA
1 PROGRAMMEREN Vandaag ga je aan de slag met programmeren. Wat ga je vandaag doen? - Je gaat een aantal programma s schrijven. We gaan meteen beginnen! Stop de USB-stick in de USB-poort van de computer. - 2 -
Na een tijdje zie je, als het goed is, een venster verschijnen: Dubbelklik op: Als het programma NIET opstart, probeer dan te dubbelklikken op: Processing32.exe Snelkoppeling. - 3 -
2 JE EERSTE PROGRAMMA IN PROCESSING Typ nu in het witte gedeelte van het venster het onderstaande programma over: size (640,480); rect (50,100,200,300); KLAAR? Klik dan op RUN. Je ziet na een aantal seconden een scherm erbij komen. Dat is het uitvoerscherm. - 4 -
Uitleg: size (640,480); Maak een venster aan van 640 pixels breed en 480 pixels lang. rect (50,100,200,300); Teken een rechthoek op je scherm. 640 pixels 50 pixels 300 pixels 480 pixels 100 pixels 200 pixels - 5 -
3 JE TWEEDE PROGRAMMA IN PROCESSING Wis het oude programma en type vervolgens het onderstaande programma over: size (640,480); stroke (255); fill (255,0,0); rect (100,100,100,100); fill (0,255,0); rect (200,200,100,100); fill (0,0,255); rect (300,300,100,100); KLAAR? Klik dan op RUN. - 6 -
4 NEDERLANDSE VLAG IN PROCESSING MAKEN Wis het oude programma en type vervolgens het onderstaande programma over: size (800,600); fill (255,0,0); rect (0,0,800,200); fill (255,255,255); rect (0,200,800,200); fill (0,0,255); rect (0,400,800,200); Na RUN zie je, als het goed is, het onderstaande venster verschijnen. - 7 -
Uitleg: Met fill geef je de kleur aan waarmee je wil gaan tekenen. Je vult 3 waarden in. Het werkt als volgt: fill (rood, groen, blauw); fill (255,0,0); fill (0,255,0); fill (0,0,255); fill (255,255,0); fill (255,0,255); GEEFT EEN RODE KLEUR GEEFT EEN GROENE KLEUR GEEFT EEN BLAUWE KLEUR GEEFT EEN GELE KLEUR GEEFT EEN MAGENTA KLEUR fill (0,0,0); GEEFT ZWART fill (255,255,255); GEEFT WIT 5 BELGISCHE VLAG IN PROCESSING MAKEN Probeer nu eens de Belgische vlag te tekenen op je scherm van (size) 600 x 400 pixels. Zoek de juiste kleurcodes voor de vlag hierboven op. Run de code en laat het resultaat zien aan je docent of begeleider. - 8 -
6 OEFENCHALLENGE : DE IJSLANDSE VLAG - Programmeer de IJslandse vlag, in kleur, op je scherm. Gebruik een schermgrootte (size) van 800 x 600 pixels. - Je mag één keer om een tip vragen bij de docent of begeleider. De vlag van Ijsland. - 9 -
7 BALLETJES TEKENEN Tik het onderstaande programma over voer het uit. (LET OP EVENTUELE HOOFDLETTERS!) TIP: de { zit naast de P-toets void setup() { size (640,480); fill (0,255,0); void draw() { ellipse (mousex,mousey,10,10); - 10 -
Uitleg: Elk serieus processing programma (code) begint met: void setup() { Tussen de accolades staat code die éénmalig wordt uitgevoerd. void draw() { Tussen de accolades staat code die een STEEDS WEER wordt uitgevoerd (loop). - 11 -
8 BALLETJE BEWEGEN MET DE MUIS Voeg de code in het groen toe aan je vorige programma uit [7]. Zie jij het verschil door slechts 1 regel code? void setup() { size (640,480); fill (0,255,0); void draw() { background (0); ellipse (mousex,mousey,10,10); - 12 -
9 VARIABELEN De meeste code bevat zogenaamde VARIABELEN. Dat zijn letters of woorden waaraan een waarde is toegekend. Tik het onderstaande programma over voer het uit. int x=200; int y=400; size (800,600); rect (x,y,100,100); Uitleg: Bovenstaand programma tekent een vierkant op je scherm. Dat is niet spannend meer maar zie je dat De code anders is? X=200 en y=400 Dus er staat eigenlijk: rect (200,400,100,100); - 13 -
10 EEN BALLETJE LATEN BEWEGEN We gaan nu met behulp van een variabele (x) een balletje laten bewegen. Tik het onderstaande programma over voer het uit. int x=0; void setup() { size (800,600); void draw() { background (0); ellipse (x,150,100,100); x=x+10; - 14 -
Je ziet een balletje van links naar rechts uit je venster lopen. OPDRACHT: Verander de regel x=x+10; en voer het programma opnieuw uit. Wat valt je op? in: x=x+1; OPDRACHT: Verander de regel x=x+1; en voer het programma opnieuw uit. Wat valt je op? in: x=x+20; OPDRACHT: Haal de regel met de code background (0); weg en run het programma opnieuw. Wat valt je op? - 15 -
11 OEFENCHALLENGE: TWEE BALLETJES LATEN BEWEGEN - Vorm een team van 2 personen (kies een andere partner dan de vorige keer. - Ga samen achter één computer zitten. - Je mag als team één keer om een tip vragen bij de docent of begeleider. - Pas het programma uit [10] zó aan dat er 2 balletjes tegelijk op je scherm verschijnen. - Één balletje gaat van links naar rechts; - Één balletje gaat van rechts naar links. De balletjes lopen in tegengestelde richtingen van het scherm af. - 16 -
12 EINDCHALLENGE: DE BELGISCHE VLAG LATEN BEWEGEN - Pas het programma uit [5] zó aan dat de 3 kleuren van de Belgische vlag in verschillende snelheden van je scherm lopen. (Zie voorbeeld plaatje hieronder.) - Het team dat als eerste klaar is wint een prijs. - 17 -
13 BEWEGINGEN BINNEN GRENZEN OPDRACHT: Neem de onderstaande code over en voer deze uit. int xpos=10; int ypos=50; int dirx=10; int x=0; void setup() { size(800, 600); void draw() { background(0); rect(xpos+x,ypos+x,25,25); if (xpos <11) { dirx=10; else if(xpos>800) { dirx=-10; xpos = xpos + dirx; - 18 -
OPDRACHT A: MOVING CIRCLE Type onderstaande code over in Processing en voer deze uit: void setup() { size(640, 480); void draw() { if (mousepressed) { fill(0); else { fill(255); ellipse(mousex, mousey, 80, 80); - 19 -
OPDRACHT B: TEXT Type onderstaande code over in Processing en voer deze uit: PFont f; void setup() { size(400,200); f = createfont("arial",16,true); void draw() { background(255); stroke(175); line(width/2,0,width/2,height); textfont(f); fill(0); textalign(center); text("this text is centered.",width/2,60); textalign(left); text("this text is left aligned.",width/2,100); textalign(right); text("this text is right aligned.",width/2,140); - 20 -
OPDRACHT: MOVING RECTANGLE Type onderstaande code over in Processing en voer deze uit: color c = color(0); float x = 0; float y = 100; float speed = 1; void setup() { size(200,200); void draw() { background(255); move(); display(); void move() { x = x + speed; if (x > width) { x = 0; void display() { fill(c); rect(x,y,30,10); - 21 -
OPDRACHT: SCALING Type onderstaande code over in Processing en voer deze uit: float a = 0.0; float s = 0.0; void setup() { size(640, 360); nostroke(); rectmode(center); framerate(30); void draw() { background(102); a = a + 0.04; s = cos(a)*2; translate(width/2, height/2); scale(s); fill(51); rect(0, 0, 50, 50); translate(75, 0); fill(255); scale(s); rect(0, 0, 50, 50); Begrijp je nu een beetje waarom Wiskunde zo belangrijk is? - 22 -
OPDRACHT: ROBOTICS Type onderstaande code over in Processing en voer deze uit: float x, y; float angle1 = 0.0; float angle2 = 0.0; float seglength = 100; void setup() { size(640, 360); strokeweight(30); stroke(255, 160); x = width * 0.3; y = height * 0.5; void draw() { background(0); angle1 = (mousex/float(width) - 0.5) * -PI; angle2 = (mousey/float(height) - 0.5) * PI; pushmatrix(); segment(x, y, angle1); segment(seglength, 0, angle2); popmatrix(); void segment(float x, float y, float a) { translate(x, y); rotate(a); line(0, 0, seglength, 0); HMM, wat als je dit programma koppelt aan een Arduino en vervolgens 2 servomotoren aanstuurt? Dan ben je al aardig op weg naar een robotarm. Ook hier is wiskunde weer belangrijk! - 23 -
E I N D E Hopelijk vond je het leuk om te programmeren. Maar: er kan nog zoveel meer. Ik raad je aan om thuis te gaan oefenen met programmeren. Een volgende keer gaan we LEDS aansturen via een Arduino en een programma. Hieronder nog wat nuttige websites over programmeren. Probeer ze eens uit; ze zijn gratis! www.processing.org www.scratch.mit.edu www.appinventor.mit.edu www.arduino.org www.code.org Het programma waarmee je vandaag hebt gewerkt. Dit programma kun je gratis downloaden en je kan van je code een echte uitvoerbare APP maken. Ga jij rijk worden met de verkoop van je code? Grafisch programmeren. Grafisch een APP programmeren voor IOS of ANDROID Microcontrollers programmeren. Leren programmeren. Vervolgopleidingen die te maken hebben met programmeren (en techniek): - Mechatronica (maken van robots, machines en deze programmeren). - Applicatie beheer & ontwikkeling (maken van apps). - Mediatechnologie (maken van internetapplicaties). - Domotica (ontwerpen en maken van huisautomatisering systemen). - 24 -