U3 LA 2.2 Arrays en loops deel 2 – random

Nu gaan we niet met een vaste loop werken maar random waarden uit de array trekken. Dat is makkelijker dan je denkt. De ingebouwde functie random(Array) neemt je het werk uit handen.

function setup() {
  createCanvas(400, 400);
  myColors = ["white", "red", "blue"];
  randomColor = random(myColors);
}

function draw() {
  fill(color(randomColor));
  rect(100, 50, 200, 100, 20);
  console.log(randomColor);
}

Dit was de makkelijke manier om een random kleur te maken. Maar nu gaan we het wat uitgebreider aanpakken.

Opdracht: Maak random keuze uit random kleuren

• Zet ‘m weer op HSB Modus
• grid 360×360
• maak een myColors[] array en zet er 1 html-color in.
• als je met de muis klikt, maak met random nu 3 nieuwe waarden aan van de variabelen deH, deS en deB. Maak hiervan een kleur met de function color(). Voeg de nieuwe kleur toe aan de array
• Zorg dat je de kleur ergens voor gebruikt, voor de fill van een mooie circle.

Suggesties

Nu begint het grote zoeken. We gaan je niet alles meer voorkauwen. Bedenkt dat P5JS een Javascript bibliotheek is, dus als we iets zoeken is het in de Javascript (Ecmasctipt) referentie.

• Met Push elementen aan achteraan de array toevoegen
• Hoe je array elementen verwijdert: met splice

In de opdracht hierna gaan we array elementen helemaal automatisch genereren.

Over de opdracht

Dit is een herziene versie van de originele opdracht. Ik vond dat deze “bad practice” aanleert. Geen domme dingen doen om dan een mooi trucje aan te leren dat je niet nodig had.