let theShader, theShader2, theShader3, theShader4;

let slider;

​

let img;

let pg, pg2;

​

let f = 0.0642;

let k = 0.05;

let dA = 5.;

let dB = 10.;

let offset = 0.0002;

let timestep = 1.;

​

function preload(){

  // load the shader

  theShader = loadShader('basic.vert', 'basic.frag');

  theShader2 = loadShader('basic.vert', 'basic2.frag');

  theShader3 = loadShader('basic.vert', 'basic3.frag');

  theShader4 = loadShader('basic.vert', 'basic4.frag');

}

​

function setup() {

  pixelDensity(1);

  // shaders require WEBGL mode to work

  createCanvas(windowWidth, windowHeight, WEBGL);

  myWidth = width - 10;

  myHeight = height - 10;

  pg = createGraphics(myWidth, myHeight, WEBGL);

  // Color first graphic

  pg.noStroke();

  // pg.shader(theShader);

  // theShader.setUniform('u_resolution', [400, 400]);

  // theShader.setUniform('u_texture', img);

  // theShader.setUniform('u_mouse', map(mouseX, 0, width, 0, 1));

  pg.fill("red")

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

  pg.fill("green");

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

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

  }

​

  image(pg, -myWidth, -myHeight);

​

  pg2 = createGraphics(myWidth, myHeight, WEBGL);

  pg2.noStroke();

  pg3 = createGraphics(myWidth, myHeight, WEBGL);

  pg3.noStroke();

  pg4 = createGraphics(myWidth, myHeight, WEBGL);

  pg4.noStroke();

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

  p_slider.position(10, 20);

  dA_slider = createSlider(0., 10., 5., 0.01);

  dA_slider.position(10, 40);

  dB_slider = createSlider(0., 10., 7., 0.01);

  dB_slider.position(10, 60);

  f_slider = createSlider(0., 0.3, 0.2, 0.001);

  f_slider.position(10, 80);

  k_slider = createSlider(0., 0.2, 0.1, 0.001);

  k_slider.position(10, 100);

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

  timestep_slider.position(10, 120);

}

​

function draw() { 

  pg2.shader(theShader2);

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

  theShader2.setUniform('u_texture', pg);

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

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

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

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

  theShader2.setUniform('u_offset', offset);

  theShader2.setUniform('u_timestep', timestep_slider.value());

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

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

  resetShader();

  pg.shader(theShader);

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

  theShader.setUniform('u_texture', pg2);

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

  resetShader();

  pg3.shader(theShader3);

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

  theShader3.setUniform('u_texture', pg);

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

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

​

  resetShader();

  pg4.shader(theShader4);

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

  theShader4.setUniform('u_texture', pg);

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

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

​

  resetShader();

}

​

function windowResized(){

  resizeCanvas(windowWidth, windowHeight);

}