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
- in de setup maak je 5 kleuren aan als deel van een myColors[] array
- je tekent je eigen huisrobot met deze random kleuren
- als je met de muis klikt, maak je op basis van mouseX en mouseY een nieuwe kleur aan. Je hebt maar 2 getallen om mee te werken, de X en de Y. Bedenk zelf iets voor de derde. Log je kleuren in console.log.
- Haal een random kleur uit de array myColors (verwijderen) en voeg de nieuwe kleur toe. Lees hiervoor de suggesties onderaan de pagina.
- Dus na de klik randomt ie over andere kleuren dan voor de klik.
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.
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.