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

U1, LA 3.2 Maak je lievelingskleur in de HSB kleurmodus

Hoe werkt de HSB Kleurenmodus?

De volgende pagina legt het uitstekend uit:

The HSB Color System: A Practitioner’s Primer – Learn UI Design

Welke website gaat je helpen?

Op Paletton.com kun je een kleurenpalet samenstellen met meerdere kleuren die bij elkaar passen. Om de HSB-waarde aan te passen, moet je bij Paletton op FineTune klikken. Je krijgt niet de hele HSB in beeld, alleen de Hue.

De mogelijke waardes in de HSB (Hue/Saturation/Brightness) kleurmodus zijn: H: [0, 360], S: [0, 100], B: [0, 100].

De Hue (H van HSV) is de hoek in de kleurencirkel: paletton toont die heel duidelijk.
Klik op FIne Tune
Spelen met de HSB waardes

De Opdracht: Je lievelingskleur

Probeer met de tools van Paletton om je lievelingskleur zo ver mogelijk te benaderen. Maak minstens 3 varianten: kleuren die erg op elkaar lijken. Met FineTune regel je dit zo. Zorg wel dat je het verschil tussen de kleuren nog ziet.

Maak nu een P5JS sketch waarin je speelt met de HSB van je lievelingskleur. De Hue is al snel gegeven door Paletton. De S en de V ga jij mee variëren. Probeer S en V elk met 0; 50 en 100. H hou je op je eigen keuze.

Voorbeeld Lievelingskleur

Deze toffe paarse kleur zit op Hue 317. De S en V laten we allebei variëren op 100,60,30 en 0.

function setup() {
  createCanvas(500, 250);
  colorMode(HSB);
}

function draw() {
  background(220);
  // Cirkel 1 bovenste rij: S varieert.
  fill(317, 100, 100)    
  circle(100, 50, 50);
  // Cirkel 2
  fill(317, 60, 100)   
  circle(200, 50, 50);
  // Cirkel 3
  fill(317, 30, 100); 
  circle(300, 50, 50);
  // Cirkel 4
  fill(317, 0, 100); 
  circle(400, 50, 50);

  // Tweede rij: V varieert
  fill(317, 100, 100);
  circle(100, 150, 50);

  fill(317, 100, 60); 
  circle(200, 150, 50);

  fill(317, 100, 30);
  circle(300, 150, 50);

  fill(317, 100, 0);
  circle(400, 150, 50);
}

Archives

  • juni 2022
  • maart 2022

Categories

  • onthouden
  • Uncategorized

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