Form og farge

Hva

Her vil vi ganske enkelt sette off en løsning med litt forskjellig geometri og fager

Begreper som du finner i dokumentasjonen til p5js Reference

color(), fill(), noFill(), stroke(), noStroke()
rect(), ellipse(), quad(), arc(),
translate()

Vi bruker translate til å flytte origo. Mer om slike transformasjoner senere.

Farger er basert på at vi blander rødt, blått og grønt. Vi kan definere en farge slik:

color minFarge=color(255, 255, 0);

Jeg har da definert en variabel, minFarge, som en blanding av rødt og blått og ikke noe grønt. Hver komponent kan ha verdier i området 0..255. color(255,255,255) er hvitt og color(0,0,0) er svart.

Vi setter opp en liten skisse med noen former i ulik farge. Det blir slik ( i en iframe).

Vi bruker en standard webside:

<!DOCTYPE HTML>
<html lang="no">
<head>
    <meta charset="UTF-8"/>    
    <title>test2</title>
     <script src="https://borres.hiof.no/resources/p5js/p5.min.js">  </script>
    <script src="test.js"> </script>
    <style> canvas{border: solid thin blue} </style>
</head>
<body>
<p>Form og farge</p>
<div id="canvasHer">
</div>
</body>
</html>

Javascriptet er slik:

/*
Noen forskjellige geometriske figurer
*/
function setup() {
    var canvas=createCanvas(400, 100);
    canvas.parent("canvasHer");
}
function draw(){
  // hvit bakgrunn
  background(255,255,255);
  // tegner et rødt rektangel med svart ramme
  stroke(0,0,0);
  fill(255,0,0);
  rect(10,10,50,40);
  
  // flytter origo til høyre
  translate(40,0);
  // og tegner en gul sirkel  
  fill(255,255,0);
  // høyde og bredde er like (40)
  ellipse(50,40,40,40);
  // flytter origo  til høyre
  translate(70,0);
  //  og tegner en gul ellipse  
  fill(255,255,0);
  // høyde og bredde er ulike (40,70)
  ellipse(40,40,60,40);
  
  // flytter origo  til høyre
  translate(70,0);
  // tegner en grønn firkant med rød ramme 
  stroke(255,0,0);
  fill(0,255,0);  
  quad(10, 0, 45, 25, 67, 60, 21, 45);
  
  // flytter origo  til høyre
  translate(70,0);
  // tegner en svart bue uten innhold
  stroke(0,0,0);
  noFill();
  //her er det mange muligheter
  arc(50, 40, 60, 60, 0, PI+QUARTER_PI, OPEN);
  
  // flytter origo  til høyre
  translate(70,0);
  // tegner en blå trekant med svart ramme  
  stroke(0,0,0);
  fill(0,255,255);
  triangle(10, 65, 50, 20, 60, 50);
  
  // ikke gjenta tegningen
  noLoop();
}

Du kan også løsningen på en egen side:
test.html https://borres.hiof.no/pisk/P5js/p5jsskisser/formogfarge/test.html