AUTONOMY (poster)

/******************

Code by Vamoss

Original code link:

https://openprocessing.org/sketch/1243860

​

Author links:

http://vamoss.com.br

http://twitter.com/vamoss

http://github.com/vamoss

******************/

​

//poster created for the "20th Anniversary Community Catalog"

//it asked us to reflect about "What does being a part of the Processing community mean to you?"

//https://processingfoundation.org/advocacy/community-catalog

​

const TEXTS = ["AU", "TO", "NO", "MY"];//text lines

const SPACES = [0.3, 0.33, 0.36, 0.38];//line letter space

const XS = [-20, -20, -30, -20];//line horizontal displacement

​

var font, emitters, renderer;

​

//Particle plotter inspired by Felix Auer

//http://www.felixauer.com/javascript/difeqrk.html

​

var blobs = [];

var xScale, yScale, centerX, centerY;

/** OPC START **/

OPC.slider('FONT_SIZE', 440, 300, 600, 1);

OPC.slider('FONT_RESOLUTION', 0.2, 0.1, 0.4, 0.01);

OPC.slider('PARTICLE_SIZE', 0.1, 0.1, 4, 0.1);

OPC.slider('VARIATION', 0, 0, 11, 1);

OPC.slider('SCALE', 5, 1, 20, 1);

OPC.slider('VELOCITY', 1, 0, 5, 0.1);

OPC.slider('LINE_HEIGHT', 0.8, 0.5, 1, 0.01);

/** OPC END **/

​

var lastFontSize, lastFontResolution, lastLineHeight;

​

​

function preload() {

  font = loadFont("ProcessingSansPro-Semibold.ttf");

}

​

function setup() {

  var size = 2;

  renderer = createCanvas(2250/size, 3000/size);

  pixelDensity(size);

  background(0);

  centerX = width/2;

  centerY = height/2;

}

​

function draw() {

  //check if any parameter changed

  if(lastFontSize != FONT_SIZE ||

     lastFontResolution != FONT_RESOLUTION ||

     lastLineHeight != LINE_HEIGHT){

    lastFontSize = FONT_SIZE;

    lastFontResolution = FONT_RESOLUTION;

    lastLineHeight = LINE_HEIGHT;

    //update particle emmiters

    newText();

  }

  xScale = width/SCALE;

  yScale = height/SCALE*(width/height);

  let time = millis();

  if(mouseIsPressed){

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

      let x = mouseX + random(-100, 100);

      let y = mouseY + random(-100, 100);

      var blob = getNewBlob(x, y);

      blobs.push(blob);

    }

  }

  emitters.forEach(emitter => {

    if(random() < 0.2){

      var blob = getNewBlob(emitter.x, emitter.y);

      blobs.push(blob);

    }

  });

  noStroke();

  fill(0, 10);

  rect(0, 0, width, height);

​

  var stepsize = deltaTime * VELOCITY * 0.002;

  for(var i = blobs.length-1; i >= 0; i--){

    let blob = blobs[i];

​

    var x = getSlopeX(blob.x, blob.y);

    var y = getSlopeY(blob.x, blob.y);

    blob.x += blob.direction * x * stepsize;

    blob.y += blob.direction * y * stepsize;

    x = getXPrint(blob.x);

    y = getYPrint(blob.y);

    stroke(255);

    var size = lerp(blob.size, 0, (time-blob.time)/blob.life);

    strokeWeight(size);

    line(x, y, blob.lastX, blob.lastY);

    blob.lastX = x;

    blob.lastY = y;

    const border = 200;

    if(x < -border || y < -border || x > width+border || y > height+border || time-blob.time > blob.life){

      blobs.splice(i,1);

    }

  }

}

​

function keyPressed(){

  if(key == "s"){

    //saveCanvas();

    CanvasToTIFF.toObjectURL(renderer.canvas, function(url) {

      window.location.href = url;

      var isIE = typeof AudioContext === "undefined" && typeof webkitAudioContext === "undefined";

      if (isIE) {

        var a = btn = document.querySelector("a");

        a.innerHTML = "Right-click this link to download";

        a.href = url;

      }

    }, {

      // options

      littleEndian: false,

      dpi: 72

    });

  }

}

​

function newText(){ 

  emitters = [];

  var totalHeight = TEXTS.length * FONT_SIZE * LINE_HEIGHT;

  TEXTS.forEach((msg, index) => {

    var y = centerY + map(index, 0, TEXTS.length, -totalHeight / 2, totalHeight / 2) + FONT_SIZE * 0.75 - 10;

    var space = SPACES[index];

    for (var i = 0; i < msg.length; i++) {

      var bounds = font.textBounds(msg.charAt(i), 0, 0, FONT_SIZE);

      var x = centerX + XS[index] + map(i, 0, msg.length-1, -FONT_SIZE * space, FONT_SIZE * space) - bounds.w / 2;

      var points = font.textToPoints(msg.charAt(i), x, y, FONT_SIZE, {sampleFactor: FONT_RESOLUTION});

      emitters = emitters.concat(points);

    }

  });

}

​

function getNewBlob(x, y){

  return {

          x : getXPos(x),

          y : getYPos(y),

          size : random(1, 10) * PARTICLE_SIZE,

          lastX : x,

          lastY : y,

          direction : random(0.01, 0.5) * (random() > 0.5 ? 1 : -1),

          time: millis(),

          life: random(100, 500)

        };

}

​

function getSlopeY(x, y){

  switch(VARIATION){

    case 0:return Math.sin(x);

    case 1:return Math.sin(x*5)*y*0.3;

    case 2:return Math.cos(x*y);

    case 3:return Math.sin(x)*Math.cos(y);

    case 4:return Math.cos(x)*y*y;

    case 5:return Math.log(Math.abs(x))*Math.log(Math.abs(y));

    case 6:return Math.tan(x)*Math.cos(y);

    case 7:return -Math.sin(x*0.1)*3;//orbit

    case 8:return (x-x*x*x)*0.01;//two orbits

    case 9:return -Math.sin(x);

    case 10:return -y-Math.sin(1.5*x) + 0.7;

    case 11:return Math.sin(x)*Math.cos(y);

  }

}

function getSlopeX(x,y){

  switch(VARIATION){

    case 0:return Math.cos(y);

    case 1:return Math.cos(y*5)*x*0.3;

    case 2: 

    case 3: 

    case 4: 

    case 5: 

    case 6:return 1;

    case 7:return Math.sin(y*0.1)*3;//orbit

    case 8:return y/3;//two orbits

    case 9:return -y;   

    case 10:return -1.5*y;

    case 11:return Math.sin(y)*Math.cos(x);

  }

}

​

function getXPos(x){

  return (x-centerX)/xScale;

}

function getYPos(y){

  return (y-centerY)/yScale;

}

​

function getXPrint(x){

  return xScale*x+centerX;

}

function getYPrint(y){

  return yScale*y+centerY;

}