Y0/FMCC/W3 – Flowers

I tried using p5’s image library and WEBGL to create expressive scenes in 3D.

The first thing I did was to load my images into an array.

I imported a few transparent images I found of flowers from Google into Aseprite and converted them to indexed colour using the EDG32 palette by ENDESGA. This makes the flowers look like a cohesive set.

let flowers = [];

function preload(){
  flowers[0] = loadImage('./flowers/green1.png');
  flowers[1] = loadImage('./flowers/orange1.png');
  flowers[2] = loadImage('./flowers/pink1.png');
  flowers[3] = loadImage('./flowers/purple1.png');
  flowers[4] = loadImage('./flowers/red1.png');
  flowers[5] = loadImage('./flowers/red2.png');
  flowers[6] = loadImage('./flowers/red3.png');
  flowers[7] = loadImage('./flowers/white1.png');
  flowers[8] = loadImage('./flowers/white2.png');
  flowers[9] = loadImage('./flowers/yellow1.png');
}

Then I set the canvas to use WEBGL.

createCanvas(800, 800, WEBGL);

I use nested loops to draw a bunch of concentric spinning rings of flowers. I disabled the depth mask so I didn’t have to deal with draw order.

function draw() {
  
  background('#e43b44');
  
  const gl = this._renderer.GL;
  gl.depthMask(false);
  
  orbitControl();
  
  let ringCount = 64;
  for(var r = ringCount; r > 0; r--){
    let pulse = (r*0.1*frameCount);
    for(var i = 0; i < flowers.length; i++){
      push();
      translate((50*r)*cos(i*36+pulse), (60*r), (50*r)*sin(i*36+pulse));
      rotateY((i*-36-pulse)+90);
      rotateX(45);
      texture(flowers[i]);
      plane(flowers[i].width*(0.2*r),flowers[i].height*(0.2*r));
      pop();
    }
  }
}

Final

https://editor.p5js.org/woojinJang_/full/Ob8MY9Koi

let flowers = [];
const notzero = 0.000000001; //wanted 0 but 0 makes the maths go wrong.

function preload(){
  flowers[0] = loadImage('./flowers/green1.png');
  flowers[1] = loadImage('./flowers/orange1.png');
  flowers[2] = loadImage('./flowers/pink1.png');
  flowers[3] = loadImage('./flowers/purple1.png');
  flowers[4] = loadImage('./flowers/red1.png');
  flowers[5] = loadImage('./flowers/red2.png');
  flowers[6] = loadImage('./flowers/red3.png');
  flowers[7] = loadImage('./flowers/white1.png');
  flowers[8] = loadImage('./flowers/white2.png');
  flowers[9] = loadImage('./flowers/yellow1.png');
}

function setup() {
  createCanvas(800, 800, WEBGL);
  
  cam = createCamera();
  
  imageMode(CENTER);
  angleMode(DEGREES);
  noStroke();

  cam.setPosition(notzero,2400,notzero);
  cam.lookAt(0,0,0);
  
  frameCount = random(5000);
}

function keyPressed(){
  saveCanvas();
}

function draw() {
  
  background('#e43b44');
  
  const gl = this._renderer.GL;
  gl.depthMask(false);
  
  orbitControl();
  
  let ringCount = 64;
  for(var r = ringCount; r > 0; r--){
    let pulse = (r*0.1*frameCount);
    for(var i = 0; i < flowers.length; i++){
      push();
      translate((50*r)*cos(i*36+pulse), (60*r), (50*r)*sin(i*36+pulse));
      rotateY((i*-36-pulse)+90);
      rotateX(45);
      texture(flowers[i]);
      plane(flowers[i].width*(0.2*r),flowers[i].height*(0.2*r));
      pop();
    }
  }
}