Ga naar de inhoud

p5js.nl

Menu
  • Home
  • Unit 1
    • Unit 1, LA1
      • U1 LA1 1.1. Maak een Robot
      • U1 LA1 1.2 Lijn functies en parameters
      • U1 LA1.3 Meerhoeken, sterren, bogen
      • U1 LA 1.4 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 LA 3.4 Eenvoudige Functies
      • U1 LA 3.5 Een simpele tekst
    • Unit 1 Final Project Teken een GSM
  • Unit 2
    • Unit 2, LA1
      • U2 LA1.1 If-Then-Else Kleur die Robot
      • U2 LA 1.2 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
      • U2 LA2.2 Muisclicks en vormen als knop gebruiken
      • U2 LA 2.3 Meer met functies
      • U2 LA2 Final Project Light Switch Game
    • Unit 2, LA3
      • U2 Final Project Painter
  • Unit 3
    • Unit 3 LA1
      • U3 LA 1.1 While Loops
      • U3 LA 1.2 Een for-loop
      • U3 LA 1.3 For-loop in een for-loop
      • U3 Mini-Project Wallpaper design
    • Unit 3 LA2
      • U3 LA 2.1 Arrays en Loops Deel 1
      • U3 LA 2.2 Arrays en loops deel 2 – random
    • Unit 3 LA 3 Mini-Project Vision Board
      • Unit 3 LA3.1 Afbeeldingen uploaden
    • Unit 3 LA 4 Mini-Project Bewegende Tekst
      • U3 LA 4.1 Werken met fonts
      • U3 LA 4.2 Geluiden
    • Unit 3 LA 5 Mini-Project Fun Piano
    • Unit 3 Final Project Meme Generator
  • Unit 4
    • Unit 4 LA 1 Stuiteren
    • Unit 4 LA1 Mini-Project DVD-Logo
    • Unit 4 LA 2.1 & 2.2 Translations & Rotations
    • U4 LA2 MP Draai die Koppen of Calypso
    • U4 LA 3.1 Sinus en cosinus
    • U4 LA 3 Mini-Project Stoomtrein
    • Unit 4 FP Brulbrief
  • Unit 5
    • U5 LA1 Programmeer Oefeningen
    • U5 LA2 Globale Variabelen opheffen
    • U5 LA 2.1 Finite State Machine
  • Blog
  • Links
    • P5JS Editor
      • P5JS.org
      • Video's Coding Train
      • P5JS Reference
      • Intro to Computational Media (2022)
    • Openverse Images
      • Freesound
      • Music
      • Free stock photo's
      • Free Vector Images
      • Dafont
  • Contact
    • Beoordeel P5js.nl
    • Docenten Info
Menu

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
  • 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.

  • How to add elements from array
  • Remove element from array

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.

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.
© 2023 p5js.nl | Aangedreven door Minimalist Blog WordPress thema