let noise;

​

let f = 0.1;

let k = 0.1;

let dA = 2.;

let dB = 1.;

let offset = 0.0001;

let timestep = 1.;

​

function preload() {

  bufferShader = loadShader("buffer.vert", "buffer.frag");

  displacementShader = loadShader("displacement.vert", "displacement.frag");

  equationShader =

    loadShader("equation.vert", "equation.frag");

  scalerShader = loadShader("scaler.vert", "scaler.frag");

​

  noise = loadImage("noise.png");

}

​

function setup() {

  // shaders require WEBGL mode to work

  createCanvas(windowWidth, windowHeight, WEBGL);

  myWidth = width - 10;

  myHeight = height - 10;

  buffer = createGraphics(myWidth, myHeight, WEBGL);

  buffer.noStroke();

  buffer.fill("red")

  buffer.rect(0, 0, myWidth, myHeight);

  buffer.fill("green");

  // circle(0, 0, 100);

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

     buffer.circle(random()*myWidth, random()*myHeight, 1);

  }

  equation = createGraphics(myWidth, myHeight, WEBGL);

  equation.noStroke();

  scaler = createGraphics(myWidth, myHeight, WEBGL);

  scaler.noStroke();

  p_slider = createSlider(0., 0.5, 0.001, 0.001);

  p_slider.position(10, 20);

  dA_slider = createSlider(0., 100., dA, 0.01);

  dA_slider.position(10, 40);

  dB_slider = createSlider(0., 100., dB, 0.01);

  dB_slider.position(10, 60);

  f_slider = createSlider(0., 0.5,f, 0.001);

  f_slider.position(10, 80);

  k_slider = createSlider(0., 0.5, k, 0.001);

  k_slider.position(10, 100);

  timestep_slider = createSlider(0.1, 2., timestep, 0.001);

  timestep_slider.position(10, 120);

​

  noStroke();

}

​

function draw() {

  background(0);

  // Compute next step

  equation.shader(equationShader);

  equationShader.setUniform("uTexture", buffer);

  equationShader.setUniform('u_mouse', [mouseX/windowWidth, mouseY/windowHeight]);

  equationShader.setUniform('u_time', millis()/1000);

  equationShader.setUniform('u_resolution', [myWidth, myHeight]);

  equationShader.setUniform('u_p', p_slider.value());

  equationShader.setUniform('settings', [f_slider.value(), k_slider.value(), dA_slider.value(), dB_slider.value()]);

  equationShader.setUniform('u_offset', offset);

  equationShader.setUniform('u_timestep', timestep_slider.value())

  equation.rect(0, 0, myWidth, myHeight);

  image(equation, -myWidth/2, -myHeight/2);

  resetShader();

​

  // Send result to buffer shader

  buffer.shader(bufferShader);

  bufferShader.setUniform('u_resolution', [myWidth, myHeight]);

  bufferShader.setUniform("uTexture", equation);

  buffer.rect(0, 0, myWidth, myHeight);

  // image(buffer, -myWidth/2, -myHeight/2 )

  resetShader();

​

  scaler.shader(scalerShader);

  scalerShader.setUniform("uTexture", buffer);

  scalerShader.setUniform('u_resolution', [myWidth, myHeight]);

  scaler.rect(0, 0, myWidth, myHeight);

  image(scaler,-myWidth, -myHeight);

  resetShader();

​

  // 3d projection of displacement

  shader(displacementShader);

  displacementShader.setUniform("uTexture", scaler);

​

//   // Rotate our geometry on the X and Y axes

  // rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.005);

​

//   // Draw some geometry to the screen

//   // We're going to tessellate the sphere a bit so we have some more geometry to work with

  sphere(myWidth / 5, 200, 200);

  resetShader();

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}