Solsikker

Hva

Vi skal tegne to solsikker.

De viktigste begrepene vi bruker, se Reference

translate(),  rotate(), push(), pop() 
PImage, image()

Løsningen er slik:

Websiden er minimalistisk:

<!DOCTYPE html>
<html>
  <head>
    <title>solsikker</title>
    <meta charset="UTF-8"/>
    <script src="https://borres.hiof.no/resources/p5js/p5.min.js"> 
    </script>
    <script src="sketch.js"> </script>
     <script src="versjon1.js"> </script>
     <script src="versjon2.js"> </script>
  </head>
  <body>
  <div id="canvasHere">
  </div>
  </body>
</html>

og sketchen er slik:

var b1,b2,b3;
var senterW;
function preload(){
  b1=loadImage("data/b1.png");
  b2=loadImage("data/b2.png");
  b3=loadImage("data/b3.png");
}
function setup(){
   var canvas = createCanvas(400, 200);
   canvas.parent('canvasHere');
  imageMode(CORNER);
  senterW=50;
}
function draw(){
  background(255);
  translate(100,height/2);
  tegnBlomst1();
  translate(200,0);
  tegnBlomst2();
}

Versjon1, den geometrisk straite, tegnes slik:

function tegnBlomst1(){
  fill('#FFD700');
  push();
    for(var i=0;i< 30; i++){
      rotate(TWO_PI/30.0);
      ellipse(senterW/2,0,50,6);
    }
  pop();
  push();
    rotate(PI/20.0);
    for(var i=0;i< 10; i++){
      rotate(TWO_PI/10.0);
      ellipse(0,0,40,4);
    }  
  pop();
  fill('#8B6508');
  ellipse(0,0,senterW,senterW);
}

Versjon2 bruker noen usymmetriske bilder

og koden er slik:

function tegnBlomst2(){
  push();
    for(var i=0;i< 12; i++){
      rotate(TWO_PI/12.0);
      image(b3,0,0-b3.height);
    }
  pop();
  push();
    rotate(PI/20.0);
    for(var i=0;i< 10; i++){
      rotate(TWO_PI/10.0);
      image(b1,0,0-b1.height);
    }  
  pop();
  fill('#8B6508');
  ellipse(0,0,senterW,senterW);
}