P5JS (pagina 7)

6-10-2021

3.2 RGB vs. HSB colorMode

A light, vibrant blue. What Hue, Saturation and Brighness ranges would you choose to get a color that fits this description?

210, 50, 100

---

3.3 Color Palettes and Design

Pick a previous project (from LA1 or LA2) and colorize it only using colors from a color palette . Use Paletton or Adobe Color Picker to come up with your palette. Try to be mindful of what colors you are using more and less than others.

Dit hebben wij al gedaan met de custom emoji. Maar we doen het ook nog wel even met het ying yang logo.

var u = 20

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES)
  colorMode(HSB)
}

function draw() {
  background(220);
  displayMousePosition();
  noStroke();
  
  c = color(173, 28, 50)
  fill(c)
  ellipse(width/2, height/2 , 400)

  c = color(353, 28, 50)
  fill(c)
  arc(width/2, height/2, 400, 400, -90, 90)

  
  c = color(173, 28, 50)
  fill(c)
  ellipse(width/2, height/4, 200, 200)
  
  c = color(353, 28, 50)
  fill(c)
  ellipse(200, 300, 200 )
  
  c = color(353, 28, 50)
  fill(c)
  ellipse(width/2, height/4, 50)
  
  c = color(173, 28, 50)
  fill(c)
  ellipse(200, 300, 50, 50)

  

}



function displayMousePosition() {
	textFont('menlo');
  	textSize(14);
  	text("x:" + mouseX, 10, 20);
  	text("y:" + mouseY, 10, 40);
}

---

13-10-2021

Abstract Album Art

let yoff = 0.0; 

function setup() {
  createCanvas(400, 400);
  colorMode(HSB)
}

function draw() {
  background(231, 0, 29);
  
  fill(230, 10, 48)
  textSize(50)
  textFont('Freestyle Script')
  text('Silence', 150, 100)

  noStroke()
  
  // golf boven
   fill(230, 10, 48);
  beginShape();

  let xoff = 0; 


  for (let x = 0; x <= width; x += 10) {

    let y = map(noise(xoff, yoff), 0, 1, mouseY, mouseY +100); //min en max

    vertex(x, y);
  
    xoff += 0.03;
  }
  yoff += 0.001;
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);
  
  //golf midden
  fill(231, 29, 66);
  beginShape();
 
  for (let x = 0; x <= width; x += 10) {

    let y = map(noise(xoff, yoff), 0, 1, mouseY +150, mouseY +50); //min en max

    vertex(x, y);
  
    xoff += 0.03;
  }
  yoff += 0.007;
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);
  
  noStroke()
  
  //golf onder
  fill(231, 29, 100);
  beginShape();


  for (let x = 0; x <= width; x += 10) {

    let y = map(noise(xoff, yoff), 0, 1, mouseY +200, mouseY +100);

    vertex(x, y);
  
    xoff += 0.03;
  }
  yoff += 0.001;
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);
}

Link naar de editor: https://editor.p5js.org/mereBuzzard6/sketches/xPyM8eCDF