Solsikker

Hva

En enkel p5js skisse som tegner to forskjellige versjoner av solsikke. Du kan betrakte denne løsningen som noe du kan eksperimentere med. Finere blomster, f.eks. med stilk og blader

Skissen 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 straite, lages 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, den mer rufsete bruker noen bilder.

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);
}

Referanser

Processing.js Processing.js JavaScript interpretator for Processing processingjs.org/ 01-04-2014