POPCORN Drawing

//vizualization of my "art" functions

//ported to P5JS from a sketch by Pierre MARZIN 12/10/2014 

​

//number of pixels

var nbpix;

//width, height, center (cx,cy)

var w, h, cx, cy;

//flags

//are we using our own doodle

var drawn = false;

//are we drawing

var drawing=false;

//one cycle= one function, one color

var cycles;

var ncycles;

//pimg is the layer where we draw the base points

var pimg;

//different parameters affecting the functions

var m, flou, m1, m2, m3, mt1, mt2, mt3, t0, t1, t2, t3, f0, f1, f2, f3, epsilon;

// artCurves settings

var acDef = {

  name    : 'Art curves',

  hue      : 15, //base tint(0-->360)

  max_hue_offset   : 80,//

  ncycles:1,//how many functions

  symmetry:false,//are the symmetric curves/Oy drawn?

  black_background:false,//black or white background

  blackandwhite:false,

  save:saveImage,

  functions_variation:0.2,

  randomize: initiate,

  word:'WORD',

  text: initpimg

};  

//controller for the black_background tick box

var background_controller;

var gui;

​

function setup() {

  pixelDensity(1);

  createCanvas(windowWidth, windowHeight);

  w = width;

  h = height;

  cx=w*0.5;

  cy=h*0.5;

  colorMode(HSB, 360, 255, 255, 255);

  cycles = [];

  nbpix = w * h;  

  // create gui (dat.gui)

   gui = new dat.GUI();

  gui.add(acDef, 'name');

  gui.add(acDef, 'hue'   , 0, 360  ).listen();

  gui.add(acDef, 'ncycles'   , 1, 5 ).step(1).listen();

  gui.add(acDef, 'max_hue_offset'   , 0, 180  ).listen();

  gui.add(acDef, 'symmetry' ).listen();

  var controller = gui.add(acDef, 'black_background').listen();

  controller.onFinishChange(function(value) {initiate();});

  var controllerbw = gui.add(acDef, 'blackandwhite' ).listen();

  controllerbw.onFinishChange(function(value) {initiate();});

  gui.add(acDef,'save');

  var controllerfv = gui.add(acDef, 'functions_variation',.01,.3 ).listen();

  controllerfv.onFinishChange(function(value) {initiate();});

  gui.add(acDef,'randomize');

  //var textInput=gui.add(acDef,'word').onFinishChange(function (value) {

  //      //Do something with the new value

  //      console.log(value);

  //  });

  var controllerA = gui.add(acDef, 'text');

  controllerA.onFinishChange(function(value) {initpimg();initiate();});

  initpimg();

  initiate();

}

function initpimg(){

  drawn = false;

  pimg = createGraphics(w, h);

  pimg.noStroke();

  pimg.rect(0, 0, w, h);

  pimg.noFill();

  pimg.stroke(0);

  pimg.strokeWeight(2);

  pimg.textSize(250);

  pimg.text("WORD",width/5,height/2);

  pimg.strokeWeight(1);

  pimg.loadPixels();

}

function initiate() {  

  cycles=[];

  ncycles=acDef.ncycles;    

  flou = random(0.1,1);

  m = 1;

  mt1=random(-3, 3);

  mt2=random(-3, 3);

  mt3=random(-3, 3);

  m1 = random(1) > .5 ? random(.1, 3) : -random(.1, 3);

  m2 = random(1) > .5 ? random(.1, 3) : -random(.1, 3);

  m3 = random(1) > .5 ? random(.1, 3) : -random(.1, 3);

  f0=random(-.0000005, .0000005);

  f1=random(-3, 3);

  f2=random(-3, 3);

  f3=random(-3, 3);

  t0 = random(.01);

  epsilon = random(.0001, 0.01);

  var bril=acDef.black_background?255:100;

  for (var i=0; i<ncycles; i++) {

    if (acDef.blackandwhite) {

      cycles[i]=new Cycle(0, 0,bril+5*i, 8);

    } else {

      cycles[i]=new Cycle(acDef.hue+int(random(-acDef.max_hue_offset, acDef.max_hue_offset)), 255, bril+5*i, 8);

    }

  }

}

​

function draw() {

  if (!drawing) {

    for (var i=0; i<ncycles; i++) {//noprotect

      cycles[i].update();

      cycles[i].update();

    }

  }

}

​

function keyReleased() {

  if (key == ' ') {

    cycles=[];

    initpimg();

    initiate();

  } else if (key == 's' || key == 'S') {

    saveImage();

  } else if (key == 'r' || key == 'R') {

    initiate();

  } else if (key == 'y' || key == 'Y') {

    sym=!sym;

  } else if (key == 'k' || key == 'K') {

    blackandwhite=!blackandwhite;

    for (var i=0; i<ncycles; i++) {

      cycles[i].sat =blackandwhite?random(50,200): random(150,255);

    }    

  }

}

​

function mouseDragged() {

  if(mouseX<w-1.2*gui.width ||mouseY>1.2*gui.width){

    if (!drawn) {

      pimg.background(255);

      drawn = true;

    }    

    drawing=true;

    var d = dist(mouseX, mouseY, pmouseX, pmouseY);

    for (var i = 0; i < d; i++) {

      pimg.point(pmouseX + int(i * (mouseX - pmouseX) / d), pmouseY + int(i * (mouseY - pmouseY) / d));

    }

    image(pimg, 0, 0);

  }

}

​

function mouseWheel(event) {

  flou += .001 * event.delta;

}

​

function mouseReleased() {  

  if(drawn&&drawing){

    loadPixels();

    pimg.pixels=pixels.slice();

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

      cycles[i].initiate();

    }

  }

  else if(mouseX<w-1.2*gui.width ||mouseY>1.2*gui.width)initiate();

  drawing=false;

}

function saveImage(){

  save("svimg" + day() + "_" + month() + "_" + hour() + "_" + minute() + "_" + second() + ".png");

}

function getImgPixelBrightness(x, y, img) {

  var pos = 4 * (floor(x) + floor(y) * img.width);

  bri = img.pixels[pos]; 

  return bri;

}

(function () { 

  var loadJS = function(filename){

    var script = document.createElement("script");

    script.setAttribute("type","text/javascript");

    script.setAttribute("src", filename);

    document.getElementsByTagName("head")[0].appendChild(script);

  }

  loadJS("https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js");

  console.log("done");

  document.oncontextmenu = function() { return false; }

  document.onmousedown   = function() { return false; }

})();