Ga naar de inhoud

p5js nl

Leer programmeren voor visual arts

Menu
  • Home
  • Unit 1
    • Unit 1, LA1
      • U1 LA1 1.1. Maak een Robot
      • U1 LA1 1.2 Lijn functies en parameters
      • U1 LA1 1.3 Teken een GSM
      • U1 LA1.4 Meerhoeken, sterren, bogen
      • U1 LA 1.5 Mini-project: Maak een Taijitu (Yin & Yang)
    • Unit 1, LA 2
      • U1 LA 2.1 Meebewegen met de muis
      • U1 LA2.2 Meekleuren met de muis op je eigen variabele
      • U1 LA 2.3 Random Ellipsen
      • U1 LA2 Mini-Project Custom Emoji
    • Unit 1, LA3
      • U1 LA 3.1 Inleiding Kleur
      • U1, LA 3.2 Maak je lievelingskleur in de HSB kleurmodus
      • U1 LA 3.3 Kleuren paletten
      • U1 LA3 Final Project: Album Art
  • Unit 2
    • Unit 2, LA1
      • U2 LA 1.1 Levensweg
      • U2 LA1.2 If-Then-Else Kleur die Robot
      • U2 LA 1.3 AND en OR
      • U2 LA1 Mini-Project Stoplicht
      • U2 LA1.4 Tekenen met de muis
      • U2 LA1.5 De map() functie
    • Unit 2, LA 2
      • U2 LA2.1 Raken met Collide2D
      • In Aanbouw
      • U2 LA 2.2 (in aanbouw)
      • U2 LA2 Final Project Light Switch Game
    • Unit 2, LA3
      • U2 LA 3.1 (in aanbouw)
      • U2 Final Project Painter
  • Unit 3
    • LA2 2.1 While Loops
    • LA2 2.?, Arrays en Loops
    • In Aanbouw
  • Blog
  • Docenten Info
  • Contact
    • Beoordeel P5js.nl
  • Links
    • P5JS Editor
    • P5JS.org
    • Video’s Coding Train
    • Reference
    • Intro to Computational Media
    • Freesound
Menu

1.1 While Loops

Hoe gebruiken we herhaling in abstracte kunst?

Probeer eens wat deze code doet?

function setup() {
	createCanvas(600, 120);
}

function draw() {
	background(180);
	ellipse(100, 60, 40, 40);
	ellipse(200, 60, 40, 40);
	ellipse(300, 60, 40, 40);
	ellipse(400, 60, 40, 40);
	ellipse(500, 60, 40, 40);
}

Opdracht 1. Zet de ellipsen uit elkaar

Teken de ellipsen uit het voorbeeld zo dat ze 50 pixels uit elkaar staan.

Nogal een hoop werk hè. Daar heb je nou een computer voor. Een goede programmeur is lui, dus we gaan dit programmeren en niet met de hand telkens aanpassen.

Het herhalings-patroon

  • We willen links beginnen, waar x = 100.
  • Elke volgende gaat 100 verder naar rechts
  • verder naar rechts dan de breedte van het canvas, width, is stoppen

De While Loop in dit voorbeeld

function setup( ){
  createCanvas(600,120);
}

function draw( ){
  background(180);
  var x = 100;// variabele declareren en initialiseren

  while(x < width){        // zolang x kleiner is dan het canvas
    ellipse(x,60,40,40);   // teken een ellipse met op (x,..)
    x=x+100;              //  x ophogen met 100 
  }

}

Video Tutorial While en For Loops

Dit is de vertaling-in-aanbouw van de Amerikaanse lesmethode Introduction to computational media (V2020, V2022) voor P5JS door Luisa Pereira.

Aangepast voor Nederland door docent Barry Voeten.

Creative Commons-Licentie
Dit werk valt onder een Creative Commons Naamsvermelding-NietCommercieel-GelijkDelen 4.0 Internationaal-licentie.
© 2022 p5js nl | Aangedreven door Minimalist Blog WordPress thema