2018.10.23 Sébastien Raynaud @seb_raynaud

    In this sketch I tried to reproduce some art that was displayed during

    Polo & Pan's show at the Olympia, on the 19th of November, 2018.

    This art is not my original idea.

  A Shape object remembers a list of Circle objects having a stroke, white border, and ellipse of a given color.

  A Shape gives sinusoidal ondulation to its circles diameters, the circles being desynchronized.

    All circles of a given Shape have the same hue but a different lightness.

*/

​

let reso; // Resolution, used to determine the size of some elements

let shapes = []; // Array storing the Shape objects

let canvas; // Reference to the canvas to download it as .png

​

// SETUP FUNCTION --------------------------------------------------

function setup() {

  let p5Canvas = createCanvas(800, 600);

  canvas = p5Canvas.canvas;

  reso = max(width, height) / 100;

  colorMode(HSL); // Each shape will have circle of the same hue, different lightness

  //frameRate(10); // Change frame rate to download .png

​

  // Create the shapes to be displayed on screen

  createShapes();

}

​

// DRAW FUNCTION --------------------------------------------------

function draw() {

  background(0);

  for (let s of shapes) {

    s.update();

    s.show();

  }

    // Download the canvas as .png to make a gif

  //if (frameCount % 2 == 1) download(canvas, `Polo&Pan_Olympia_${frameCount}.png`);

  //if (frameCount >= 320) noLoop();

}

​

// OTHER FUNCTIONS --------------------------------------------------

// Create the shapes to be displayed on screen

function createShapes() {

  // Cyan (x position, y position, diameter, hue)   

  createShape(width * 0.50, height * 0.800, reso * 100, 180);

  // Purple

  createShape(width * 0.10, height * 0.780, reso *  55, 280);

  createShape(width * 0.85, height * 0.830, reso *  50, 280);

  createShape(width * 0.45, height * 0.900, reso *  55, 280);

  // Pinkish

  createShape(width * 0.00, height * 0.950, reso *  40, 325);

  createShape(width * 0.60, height * 0.970, reso *  35, 325);

  createShape(width * 0.95, height * 1.000, reso *  45, 325);

  createShape(width * 0.30, height * 1.050, reso *  40, 325);

  createShape(width * 0.75, height * 1.050, reso *  30, 325);

}

​

// Create a Shape object made of several Circle objects

function createShape(x, y, diameter, h_) {

    let center = createVector(x, y); // Center the shape, i.e. of all circles

  let border = diameter / 70; // Thickness of the white border around each circle

  let gap = border * 8; // Difference of diameter between two neighbor circles

  let s = true; // Stroke, the circle has a black stroke if true

  let phase = 0; // Desynchronization of the sinusiodal movement of the circles

  let lInc = 16; // Lightness increment between a circle and the next one

​

  // Color of the first and largest circle

  let col = {

    h: h_,

    s: 100,

    l: 40

  };

​

  let circles = []; // Array storing the circles, will become a property of the shape

  let num = 5; // Number of circles

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

    // The last and smallest circle is white and no stroke

    if (i == num - 1) {

      col.l = 100;

      s = false;

    }

    circles.push(new Circle(center, diameter, col, s, border, phase));

    // Increment the properties for the next circle

    diameter -= gap;

    col.l += lInc;

    phase += PI/6;

  }

  // Use the circles to create a new shape

  shapes.push(new Shape(circles)); 

}

​

// Download the canvas as .png

// Taken from Jose Quintana: https://codepen.io/joseluisq/pen/mnkLu

function download(canvas, filename) {

  /// create an "off-screen" anchor tag

  var lnk = document.createElement('a'), e;

​

  /// the key here is to set the download attribute of the a tag

  lnk.download = filename;

​

  /// convert canvas content to data-uri for link. When download

  /// attribute is set the content pointed to by link will be

  /// pushed as "download" in HTML5 capable browsers

  lnk.href = canvas.toDataURL("image/png;base64");

​

  /// create a "fake" click-event to trigger the download

  if (document.createEvent) {

    e = document.createEvent("MouseEvents");

    e.initMouseEvent("click", true, true, window,

                     0, 0, 0, 0, 0, false, false, false,

                     false, 0, null);

​

    lnk.dispatchEvent(e);

  } else if (lnk.fireEvent) {

    lnk.fireEvent("onclick");

  }

}