xxxxxxxxxx
125
// a shader variable
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);
}