IDEA:

Nam Jun Paik's TV Garden

Create a procedurally generated garden using cellular automata

create flowers, where the texture overlaid is the visuals I created

interactivity - ways to re-generate the garden by modifying the rules

some function to change the visuals

make some plants out of other materials - text? images? videos?

*/

​

​

​

​

​

// var hydra = new Hydra({

//   canvas: document.getElementById("myCanvas"),

//   makeGlobal: false

// }).synth

​

// hydra canvas + init

// let hc = document.createElement("canvas"); // hydra canvas + custom size

// hc.width = 640;

// hc.height = 360;

// hc.setAttribute("style", "display:block;");

​

// let hc2 = document.createElement("canvastwo"); // hydra canvas + custom size

// hc2.width = 640;

// hc2.height = 360;

// hc2.setAttribute("style", "display:block;");

​

let c = document.getElementById("myCanvas");

c.style.display="none";

​

// let ctx = c.getContext("2d");

// ctx.globalAlpha = 0.0;

​

let c2 = document.getElementById("myCanvas2");

c2.style.display="none";

​

let h1 = new Hydra({

  canvas: c,

  makeGlobal: false,

}).synth;

​

let h2 = new Hydra({

  canvas: c2,

  makeGlobal: false,

}).synth;

​

//let h1 = new Hydra({  detectAudio: false, canvas: hc2, makeGlobal: false}).synth;

​

let pg; // store hydra texture

let pg2;

​

//let h2 = new Hydra({detectAudio: false, canvas: hc2, makeGlobal: false }).synth;

/*---------------------------------------*/

​

// h1.osc(1).out()

// h2.shape(3).out()

​

let slider;

​

let amt = 0;

​

h1.osc(6, 0.1, 0.4).modulatePixelate(h1.noise(25, 0.5).mult(h1.voronoi(25).mask(h1.osc(5,1, [0, 1, 2, 3]), 0.1)), 100).out(h1.o0);

h1.render(h1.o0);

​

h2.s0.initCam()

​

//h2.src(h2.s0).out(h2.o0)

​

// h2.src(h2.o2)

//   .modulate(h2.voronoi(10), 0.005)

//   .blend(h2.osc(4, 0.1, 3).kaleid(30), 0.01)

//   .out(h2.o2);

// h2.render(h2.o2);

​

function setup() {

  createCanvas(600, 600, WEBGL);

  //noSmooth()

  // Note: to change the size of the Hydra canvas, go to index.html

  //p5Setup();

  //c.hidden = true;

  pg = createGraphics(width, height);

  pg2 = createGraphics(width, height);

  noStroke();

​

  slider = createSlider(0, 3, 0, 0);

  slider.position(10, 10);

  slider.size(80);

  //pixelDensity(0.3);

  //firstScene();

}

​

function draw() {

  background(200);

  amt = slider.value();

  update();

  //clear();

  // fill(255); // white

  // textAlign(CENTER,CENTER);

  // textSize(100);

  // translate(width/2,height/2);

  // rotate(frameCount/(PI*2));

  // scale(frameCount%200/200);

  //text("hello world", 0, 0);

​

  //orbitControl();

  pg.clear();

  pg.drawingContext.drawImage(c, 0, 0, pg.width, pg.height);

​

  pg2.clear();

  pg2.drawingContext.drawImage(c2, 0, 0, pg2.width, pg2.height);

​

  plane(width, height); // fill screen w/ texture

​

  texture(pg);

​

  push();

  noStroke();

  translate(0, 0, 200);

  rotate(radians(frameCount / 2), [0, 1, 0]);

  //torus(height / 8, height / 16, 12,8);

  pop();

  //tint(255, 255)

  texture(pg2);

​

  stroke(0);

  strokeWeight(6);

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

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

    line(

      -width / 2,

      (i * height) / 5 - height / 2,

      315,

      width / 2,

      (i * height) / 5 - height / 2,

      315

    );

    line(

      (i * width) / 5 - width / 2,

      -width / 2,

      315,

      (i * width) / 5 - height / 2,

      width / 2,

      315

    );

    //}

  }

}

​

// function firstScene() {

//   h1.osc(6, 0.1, 0.4).out(h1.o0);

//   render(h1.o0);

//   //solid().out(o1)

​

//   //   .gradient(1)

//   // .diff(hydra.s0) //use s0 to layer combine p5 + hydra

//   // .modulate(hydra.s0)

//   // .out()

//   // next scene

//   setTimeout(secondScene, 2000);

// }

​

// function secondScene() {

//   // osc(3)

//   // .diff(o0) //use s0 to layer combine p5 + hydra

//   // .out()

//   src(h2.o2)

//     .modulate(h2.voronoi(10), 0.005)

//     .blend(h2.osc(4, 0.1, 3).kaleid(30), 0.01)

//     .out(h2.o2);

//   render(h2.o2);

//   // back to firstScene - creates a feedback loop

//   setTimeout(firstScene, 2000);

// }

​

function update() {

  // h2.src(h2.o2)

  //   .modulate(h2.voronoi(10), 0.005)

  //   .blend(h2.osc(4, 0.1, amt).kaleid(30), 0.01)

  //   .out(h2.o2);

//   //h2.render(h2.o2);

//   h2.src(h2.s0).repeat().modulate(h2.voronoi(50).mask(h2.osc(6,1,3)),0.1).hue([0,1].smooth()).blend(h2.src(h2.o1).invert(1).diff(h2.s0).scale(1.01),[2, 5].smooth().fast(0.1)).out(h2.o1);

// h2.render(h2.o1);

​

let n = 50;

let func = () => h2.osc(30,0.1,1).modulate(h2.noise(4,0.1))

let pix = () => h2.shape(4,0.3).scale(1,1,3).repeat(n,n)

pix().mult(func().color(1,0,0).pixelate(n,n)).add(h2.src(h2.s0).repeat(), 0.2).out(h2.o1)

pix().mult(func().color(0,1,0).pixelate(n,n)).add(h2.src(h2.s0).repeat(), 0.2).scrollX(1/n/3).out(h2.o2)

pix().mult(func().color(0,0,1).pixelate(n,n)).add(h2.src(h2.s0).repeat(), 0.2).scrollX(2/n/3).out(h2.o3)

//h2.solid().add(h2.src(h2.o1),1).add(h2.src(h2.o2),1).add(h2.src(h2.o3),1).out(h2.o0)

h2.solid().add(h2.src(h2.o1),1).add(h2.src(h2.o2),1).add(h2.src(h2.o3),1)

  .mult(h2.src(h2.s0)

  .blend(h2.src(h2.o0).hue([0,1].smooth()).diff(h2.s0).invert().scale(1.01),

  amt))

  //[0,2].smooth().fast(0.2)))

  .out(h2.o0);

​

  // h2.src(h2.s0).repeat().blend(h2.src(h2.o0).diff(h2.s0).scale(1.01), [2,5].smooth()).out(h2.o0);

// h2.shape(4,0.3).scale(1,1,3).repeat(50,50).mult(h2.osc(30,0.1,1).modulate(h2.noise(4,0.1)).color(1,0,0).pixelate(50,50)).out(h2.o1)

// h2.shape(4,0.3).scale(1,1,3).repeat(50,50).mult(h2.osc(30,0.1,1).modulate(h2.noise(4,0.1)).color(0,1,0).pixelate(50,50)).scrollX(1/50/3).out(h2.o2)

// h2.shape(4,0.3).scale(1,1,3).repeat(50,50).mult(h2.osc(30,0.1,1).modulate(h2.noise(4,0.1)).color(0,0,1).pixelate(50,50)).scrollX(2/50/3).out(h2.o3)

// h2.solid().add(h2.src(h2.o1),1).add(h2.src(h2.o2),1).add(h2.src(h2.o3),1).out(h2.o0)

// h2.render(h2.o0)

}

​

function p5Setup() {

  // inserts p5 into #myCanvas (Hydra)

  //c = createGraphics(width, height);

  //pg = createGraphics(hc.width, hc.height);

​

  // Draws p5.js to source 0 (s0)

  //hydra.s0.init({src: drawingContext.canvas})

  // Hides the p5 Canvas

  // p5Canvas = select("#defaultCanvas0");

  // p5Canvas.hide()

}

​