Phyllotaxis pattern

/*

 * Class: EDM4611-020

 * Title: Esquisse 2 - Visualisation d’échantillons

 * Autor: Samuel Favreau

 * Instructions:

 1-Type in the name of the piece (The name will be use to create the engraving around the frame).

 2-Press ENTER to generate a patern around the frame.

 3-Press ENTER again to save a png of the sketch.

 */

​

//Global variables

​

//------ PUT YOUR FILE URL HERE FOR A CUSTOM IMAGE ------

let fileName = "https://picsum.photos/200/200";

//-------------------------------------------------------

​

let cAngle;

let c = 10;

let r;

let phi;

​

let x;

let y;

let centerX;

let centerY;

​

let baseImg;

let newImg;

let wall;

let wood;

let frame;

let plaque;

let preview;

​

let letters;

let title = "";

​

let newImgSize = 200;

let rowColor = [];

​

let circleColor;

let circleSize = newImgSize*2.5;

​

let naming = true;

​

let spiralIndex = 0;

let designIndex = 0;

​

let spiralEnd = false;

let designEnd = false;

​

let font;

​

let canExport = false;

let isClosed = false;

​

//----------------------------------------------------------------------------------

//                                    SETUP

//----------------------------------------------------------------------------------

​

function preload(){

  //Loads the image that needs to be processed

  baseImg = loadImage(fileName);

  wood = loadImage("https://images.pexels.com/photos/172276/pexels-photo-172276.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");

}

​

function setup() {

  createCanvas(800, 800);

  pixelDensity(1);

​

  //Creates a copy that will be processed

  newImg = createImage(newImgSize, newImgSize);

  newImg.copy(baseImg, 0, 0, baseImg.width, baseImg.height, 0, 0, newImg.width, newImg.height);

​

  //Creates a preview showing the image being processed

  preview = createImage(150, 150);

  preview.copy(baseImg, 0, 0, baseImg.width, baseImg.height, 0, 0, preview.width, preview.height);

​

  //Calculates the overall brightness of the image

  newImg.loadPixels();

  analyseImgBright();

  //Calculates the overall color of each row of pixels

  analyseImgColor();

​

  frameShape();

​

  //Draws the different textures

  drawWall();

​

  noStroke();

  centerX = width/2;

  centerY = height/2;

​

  //Sets the font of the sketch

  font = loadFont("Courgette-Regular.ttf");

  textFont(font);

}

​

//----------------------------------------------------------------------------------

//                                    DRAW

//----------------------------------------------------------------------------------

​

function draw() {

​

  background(255);

​

  //Draws the wall

  image(wall, 0, 0);

​

  //Draws the preview

  if (naming) {

    image(preview, width - preview.width-20, height - preview.height-20);

  }

​

  //Draw the cast shadow of the frame

  for (let i = 0; i <= 8; i+=2) {

    fill(0, 40 - i);

    circle(centerX + i + 5, centerY + i + 5, circleSize + 10);

  }

​

  //Draws a frame with wood like texture

  image(frame, centerX - frame.width/2, centerY - frame.height/2);

​

  //Draws the design around the frame

  if (!naming && letters.length > 0) {

    stroke(250, 250, 230, 150);

    strokeWeight(3);

    noFill();

    beginShape();

    if (designIndex < 360) {

      designIndex += 10;

    }

    for (let i = 0; i < designIndex; i+=1) {

      let letterOffset = constrain(map(unchar(letters[i % (letters.length-1)]), 65, 122, -40, 20), -10, 15);

      let x = cos(radians(i))*((newImgSize*1.12) + letterOffset);

      let y = sin(radians(i))*((newImgSize*1.12) + letterOffset);

      vertex(centerX + x, centerY + y);

    }

    if(!isClosed)

    endShape();

​

    else

    endShape(CLOSE);

  }

​

  noStroke();

​

  //Background of the frame

  fill(constrain(circleColor - 100, 0, 255));

  circle(centerX, centerY, newImgSize*2);

​

  //Inner shadow of the frame

  for (let i = 0; i <= 100; i++) {

    fill(circleColor, map(i, 0, 100, 255, 0));

    circle(centerX, centerY, map(i, 0, 100, 0, newImgSize*2));

  }

​

  //Draws the phyllotaxis pattern

  if (!naming && spiralIndex < newImgSize) {

    spiralIndex += 5;

  }

​

  for (let n = 0; n < spiralIndex; n++) {

    r = c*sqrt(n);

    phi = n*cAngle;

    x = cos(phi) * r;

    y = sin(phi) * r;

​

    fill(red(rowColor[n]), green(rowColor[n]), blue(rowColor[n]));

    circle(centerX + x, centerY + y, c-1);

  }

​

  if (naming || (!naming && letters.length > 0)) {

    //Draw the cast shadow of the plaque

    let tSize = 30;

    rectMode(CENTER);

    for (let i = 0; i <= 8; i+=2) {

      fill(0, 40 - i);

      rect(centerX + i, height - centerY/4 + 3 + i, textWidth(title) + 20, tSize + 25);

    }

​

    //Draws the plaque for the title

    plaqueShape(centerX, height - centerY/4 + 3, textWidth(title) + 20, tSize + 25);

    fill(color('#EABE5C'));

    rect(centerX, height - centerY/4 + 3, textWidth(title) + 10, tSize + 15);

    noStroke();

​

    //Writes the name of the piece

    fill(color('#524234'));

    textSize(tSize);

    textAlign(CENTER, CENTER);

    text(title, centerX, height - centerY/4);

​

    //Draws the shine on the plaque

    for (let i = centerX - textWidth(title)/2 + 25; i < centerX + textWidth(title)/2 - 40; i += 100) {

      noStroke();

      fill(255, map(dist(i, 0, centerX, 0), 0, width/2, 40, 0));

      let shineSize = 10;

      let decal = 20;

      quad(i - shineSize - decal, height - centerY/4 + 3 - (tSize + 15)/2, 

        i + shineSize - decal, height - centerY/4 + 3  - (tSize + 15)/2, 

        i + shineSize + decal, height - centerY/4 + 3  + (tSize + 15)/2, 

        i - shineSize + decal, height - centerY/4 + 3 + (tSize + 15)/2);

​

      let shineSize2 = 5;

      let decal2 = 20;

      quad(i - shineSize2 - decal2 + 25, height - centerY/4 + 3 - (tSize + 15)/2, 

        i + shineSize2 - decal2 + 25, height - centerY/4 + 3  - (tSize + 15)/2, 

        i + shineSize2 + decal2 + 25, height - centerY/4 + 3  + (tSize + 15)/2, 

        i - shineSize2 + decal2 + 25, height - centerY/4 + 3 + (tSize + 15)/2);

    }

  }

​

  if(spiralIndex >= newImgSize){

    isClosed = true;

    canExport = true;

  }

​

}

​

//----------------------------------------------------------------------------------

//                                  FUNCTION

//----------------------------------------------------------------------------------

​

//Calculates the overall brightness of the image

function analyseImgBright() {

  let totalValues = 0;

​

  //for (let pixel : newImg.pixels) {

  for(let i = 0; i < newImg.pixels.length; i+=4){

    totalValues += (red(color(newImg.pixels[i])) + green(color(newImg.pixels[i + 1])) + blue(color(newImg.pixels[i + 2]))) / 3;

  }

​

  let avgBrigh = totalValues/(newImg.pixels.length / 4);

​

  //Decides the angle of the phyllotaxis

  cAngle = avgBrigh;

​

  //Decides the color of the back of the frame

  if (avgBrigh < 50) {

    circleColor = 230;

  } else {

    circleColor = 20;

  }

}

​

//Calculates the overall color of each row of pixels

function analyseImgColor() {

  for (let i = 0; i < newImg.height; i++) {

    let rVal = 0;

    let gVal = 0;

    let bVal = 0;

​

    for (let j = 0; j < newImg.width; j++) {

      let index = (j + (i*newImg.width)) * 4;

      rVal += red(color(newImg.pixels[index]));

      gVal += green(color(newImg.pixels[index + 1]));

      bVal += blue(color(newImg.pixels[index + 2]));

    }

​

    rowColor[i] = color(rVal/newImg.width, gVal/newImg.width, bVal/newImg.width);

  }

}

​

//Draws the shape of the frame from the wood texture

function frameShape() {

  frame = createImage(500, 500);

  frame.copy(wood, 0, 0, wood.width, wood.height, 0, 0, frame.width, frame.height);

  let mainA = color(0, 0);

​

  //Shows only the pixels closest to the center (creates a circle shape)

  frame.loadPixels();

  for (let y = 0; y < 500; y++) {

    for (let x = 0; x < 500; x++) {

      let index = (x + (y*500)) * 4;

      let centerX = 500/2;

      let centerY = 500/2;

      if (dist(centerX, centerY, x, y) > (250)) {

        frame.pixels[index + 3] = alpha(mainA);

      }

    }

  }

  frame.updatePixels();

}

​

//Draws the shape of the plaque from the wood texture 

function plaqueShape(x, y, w, h) {

  plaque = createImage(floor(w), floor(h));

  plaque.copy(wood, 0, 0, wood.width, wood.height, 0, 0, wood.width, wood.height);

​

  image(plaque, x - w/2, y - h/2);

}

​

//Draws the wall texture

function drawWall() {

  wall = createGraphics(width, height);

  let grainSize = 3;

  for (let i = 0; i < width; i+=grainSize*2) {

    wall.stroke(floor(random(220, 240)));

    wall.strokeWeight(grainSize);

    wall.line(i, 0, i, height);

  }

​

  for (let i = 0; i < height; i+=grainSize*2) {

    wall.stroke(floor(random(220, 240)));

    wall.strokeWeight(grainSize);

    wall.line(0, i, width, i);

  }

​

  for (let i = 0; i <= 50; i++) {

    wall.noStroke();

    wall.fill(floor(random(210, 220)));

    let x = random(width);

    let y = random(height);

    let w = random(50, 100);

    wall.rect(x, y, w, grainSize);

  }

}

​

//Checks for keypresses

function keyPressed() {

  //Enter

  if (keyCode == 13) {

    letters = title.split('');

    naming = false;

​

    if(canExport){

      exportImage();

    }

  }

​

  //Backspace

  if (keyCode == 8 && title.length > 0) {

    title = title.substring(0, title.length - 1);

  }

​

  //If a valid character is typed, add it to the title

  if (naming && (keyCode >= 65 && keyCode <= 90 || keyCode == 32)) {

    title += key;

  }

}

​

function exportImage(){

  saveFrames('Frame', 'png', 1, 1);

}