xxxxxxxxxx
// This sketch demonstrates:
//-- how to use local storage to share colors among multiple WEBGL canvases
//-- creates four graphic elements with circles that are arranged to move in tandem across the four canvases to demonstrate a translation.
//-- how to pass colors and x and y positions to a frag file
// This sketch is based on the Local Storage tutorial by Dan Shiffman
// https://www.youtube.com/watch?v=_SRS8b4LcZ8
new p5(sa => {
// a shader variable
let shader0;
// Declare variables
let button0;
let button;
let c0;
let graphics0;
sa.clear = () => {
sa.clearStorage();
}
sa.preload = () => {
// load the the shader
shader0 = sa.loadShader('translate.vert', 'translate.frag');
}
sa.setup = () => {
sa.pixelDensity(1);
sa.noStroke();
let para = sa.createP("Using Local Storage to Share Data across Multiple Canvases");
para.position(10,10);
para.style('font-size', '24px');
let divA = sa.createDiv();
divA.position(10, 110);
divA.style('max-width', '200px');
divA.style('align-content', 'center');
c0 = sa.createCanvas(200, 200, sa.WEBGL);
c0.parent(divA);
sa.pixelDensity(1);
// shaders require WEBGL mode to work
graphics0 = sa.createGraphics(200, 200, sa.WEBGL);
button0 = sa.createButton('SAVE TILE A');
button0.position(450, 675);
button0.mousePressed(sa.saveTile0);
button = sa.createButton("CLEAR STORAGE");
button.position(450, 625);
button.mousePressed(sa.clear);
r1Slider = sa.createSlider(0, 255, 0);
g1Slider = sa.createSlider(0, 255, 0);
b1Slider = sa.createSlider(0, 255, 0);
r2Slider = sa.createSlider(0, 255, 255);
g2Slider = sa.createSlider(0, 255, 255);
b2Slider = sa.createSlider(0, 255, 255);
rad1Slider = sa.createSlider(0, 100, 50, 1);
rad2Slider = sa.createSlider(0, 100, 25, 1);
x1Slider = sa.createSlider(0, 300, 200, 1);
y1Slider = sa.createSlider(0, 300, 100, 1);
x2Slider = sa.createSlider(0, 300, 25, 1);
y2Slider = sa.createSlider(0, 300, 10, 1);
let colors = sa.getItem("colors");
if (colors !== null) {
r1Slider.value(colors.r1);
g1Slider.value(colors.g1);
b1Slider.value(colors.b1);
r2Slider.value(colors.r2);
g2Slider.value(colors.g2);
b2Slider.value(colors.b2);
}
r1Slider.changed(sa.storeColors);
g1Slider.changed(sa.storeColors);
b1Slider.changed(sa.storeColors);
r2Slider.changed(sa.storeColors);
g2Slider.changed(sa.storeColors);
b2Slider.changed(sa.storeColors);
let parameters = sa.getItem("parameters");
if (parameters !== null) {
rad1Slider.value(parameters.rad1);
rad2Slider.value(parameters.rad2);
x1Slider.value(parameters.x1);
y1Slider.value(parameters.y1);
x2Slider.value(parameters.x2);
y2Slider.value(parameters.y2);
}
rad1Slider.changed(sa.storeParameters);
rad2Slider.changed(sa.storeParameters);
x1Slider.changed(sa.storeParameters);
y1Slider.changed(sa.storeParameters);
x2Slider.changed(sa.storeParameters);
y2Slider.changed(sa.storeParameters);
// Organize the layout
let div1 = sa.createDiv();
div1.position(10, 525);
colAlabel = sa.createP('Color A');
colAlabel.parent(div1);
r1Slider.parent(div1);
g1Slider.parent(div1);
b1Slider.parent(div1);
let div2 = sa.createDiv();
div2.position(10, 625);
colBlabel = sa.createP('Color B');
colBlabel.parent(div2);
r2Slider.parent(div2);
g2Slider.parent(div2);
b2Slider.parent(div2);
let para2 = sa.createP("LARGE CIRCLE");
para2.position(450,100);
let div8a = sa.createDiv();
div8a.position(450, 150);
rad1label = sa.createP('Radius 1');
rad1label.parent(div8a);
rad1Slider.style("width", "180px");
rad1Slider.parent(div8a);
let para3 = sa.createP("SMALL CIRCLE");
para3.position(450, 350);
let div3a = sa.createDiv();
div3a.position(450, 395);
rad2label = sa.createP('Radius 2');
rad2label.parent(div3a);
rad2Slider.style("width", "180px");
rad2Slider.parent(div3a);
let div4a = sa.createDiv();
div4a.position(450, 210);
x1label = sa.createP('X1 offset');
x1label.parent(div4a);
x1Slider.parent(div4a);
x1Slider.style("width", "180px");
let div5a = sa.createDiv();
div5a.position(450, 270);
y1label = sa.createP('Y1 offset');
y1label.parent(div5a);
y1Slider.parent(div5a);
y1Slider.style("width", "180px");
let div6a = sa.createDiv();
div6a.position(450, 455);
x2label = sa.createP('X2 offset');
x2label.parent(div6a);
x2Slider.parent(div6a);
x2Slider.style("width", "180px");
let div7a = sa.createDiv();
div7a.position(450, 515);
y2label = sa.createP('Y2 offset');
y2label.parent(div7a);
y2Slider.parent(div7a);
y2Slider.style("width", "180px");
}
sa.draw = () => {
let r1 = r1Slider.value();
let g1 = g1Slider.value();
let b1 = b1Slider.value();
let r2 = r2Slider.value();
let g2 = g2Slider.value();
let b2 = b2Slider.value();
let rad1 = rad1Slider.value();
let newrad1 = sa.map(rad1, 0, 100, 0.0, 1.0);
let rad2 = rad2Slider.value();
let newrad2 = sa.map(rad2, 0, 100, 0.0, 1.0);
let x1 = x1Slider.value();
let x1Offset = sa.map(x1, 0, 300, -1.5, 1.5);
let y1 = y1Slider.value();
let y1Offset = sa.map(y1, 0, 300, -1.5, 1.5);
let x2 = x2Slider.value();
let x2Offset = sa.map(x2, 0, 100, -0.25, 0.25);
let y2 = y2Slider.value();
let y2Offset = sa.map(y2, 0, 100, -0.25, 0.25);
//pass the uniforms to the shader
//this is done separately for each canvas
//instance
shader0.setUniform('u_resolution', [sa.width, sa.height]);
shader0.setUniform('colorAr', r1);
shader0.setUniform('colorAg', g1);
shader0.setUniform('colorAb', b1);
shader0.setUniform('colorBr', r2);
shader0.setUniform('colorBg', g2);
shader0.setUniform('colorBb', b2);
shader0.setUniform('rad1', newrad1);
shader0.setUniform('rad2', newrad2);
shader0.setUniform('offset1', [x1Offset, y1Offset]);
shader0.setUniform('offset2', [x2Offset, y2Offset]);
shader0.setUniform('tileChoice', 0.0);
sa.shader(shader0);
sa.rect(0, 0, sa.width, sa.height);
}
sa.storeColors = () => {
let colors = {
r1: r1Slider.value(),
g1: g1Slider.value(),
b1: b1Slider.value(),
r2: r2Slider.value(),
g2: g2Slider.value(),
b2: b2Slider.value(),
}
sa.storeItem("colors", colors);
}
sa.storeParameters = () => {
let parameters = {
rad1: rad1Slider.value(),
rad2: rad2Slider.value(),
x1: x1Slider.value(),
y1: y1Slider.value(),
x2: x2Slider.value(),
y2: y2Slider.value(),
}
sa.storeItem("parameters", parameters);
}
sa.saveTile0 = () => {
//sa.saveCanvas(c0, '0.png');
sa.storeItem("img0", c0.elt.toDataURL());
}
sa.clear = () => {
sa.clearStorage();
}
});
new p5(sb => {
// a shader variable
let shader1;
let button1;
let c1;
let graphics1;
sb.preload = () => {
// load the the shader
shader1 = sb.loadShader('translate.vert', 'translate.frag');
}
sb.setup = () => {
sb.pixelDensity(1);
sb.noStroke();
let divB = sb.createDiv();
divB.position(212, 110);
divB.style('max-width', '100px');
c1 = sb.createCanvas(200, 200, sb.WEBGL);
c1.parent(divB);
sb.pixelDensity(1);
graphics1 = sb.createGraphics(100, 100, sb.WEBGL);
button1 = sb.createButton('SAVE TILE B');
button1.mousePressed(sb.saveTile1);
button1.position(550, 675);
let colors = sb.getItem("colors");
if (colors !== null) {
r1Slider.value(colors.r1);
g1Slider.value(colors.g1);
b1Slider.value(colors.b1);
r2Slider.value(colors.r2);
g2Slider.value(colors.g2);
b2Slider.value(colors.b2);
}
let parameters = sb.getItem("parameters");
if (parameters !== null) {
rad1Slider.value(parameters.rad1);
rad2Slider.value(parameters.rad2);
x1Slider.value(parameters.x1);
y1Slider.value(parameters.y1);
x2Slider.value(parameters.x2);
y2Slider.value(parameters.y2);
}
}
sb.draw = () => {
let r1 = r1Slider.value();
let g1 = g1Slider.value();
let b1 = b1Slider.value();
let r2 = r2Slider.value();
let g2 = g2Slider.value();
let b2 = b2Slider.value();
let rad1 = rad1Slider.value();
let newrad1 = sb.map(rad1, 0, 100, 0.0, 1.0);
let rad2 = rad2Slider.value();
let newrad2 = sb.map(rad2, 0, 100, 0.0, 1.0);
let x1 = x1Slider.value();
let x1Offset = sb.map(x1, 0, 300, -2.5, 0.5);
let y1 = y1Slider.value();
let y1Offset = sb.map(y1, 0, 300, -1.5, 1.5);
let x2 = x2Slider.value();
let x2Offset = sb.map(x2, 0, 100, -0.25, 0.25);
let y2 = y2Slider.value();
let y2Offset = sb.map(y2, 0, 100, -0.25, 0.25);
shader1.setUniform('u_resolution', [sb.width, sb.height]);
shader1.setUniform('colorAr', r1);
shader1.setUniform('colorAg', g1);
shader1.setUniform('colorAb', b1);
shader1.setUniform('colorBr', r2);
shader1.setUniform('colorBg', g2);
shader1.setUniform('colorBb', b2);
shader1.setUniform('tileChoice', 1.0);
shader1.setUniform('rad1', newrad1);
shader1.setUniform('rad2', newrad2);
shader1.setUniform('offset1', [x1Offset, y1Offset]);
shader1.setUniform('offset2', [x2Offset, y2Offset]);
sb.shader(shader1);
sb.rect(0, 0, sb.width, sb.height)
}
sb.saveTile1 = () => {
sb.storeItem("img1", c1.elt.toDataURL());
}
});
new p5(sc => {
let shader2;
let button2;
let c2;
let graphics2;
sc.preload = () => {
// load the the shader
shader2 = sc.loadShader('translate.vert', 'translate.frag');
}
sc.setup = () => {
sc.pixelDensity(1);
sc.noStroke();
let divC = sc.createDiv();
divC.position(10, 312);
divC.style('max-width', '200px');
c2 = sc.createCanvas(200, 200, sc.WEBGL);
c2.parent(divC);
sc.pixelDensity(1);
graphics2 = sc.createGraphics(200, 200, sc.WEBGL);
button2 = sc.createButton('SAVE TILE C');
button2.mousePressed(sc.saveTile2);
button2.position(450, 725);
let colors = sc.getItem("colors");
if (colors !== null) {
r1Slider.value(colors.r1);
g1Slider.value(colors.g1);
b1Slider.value(colors.b1);
r2Slider.value(colors.r2);
g2Slider.value(colors.g2);
b2Slider.value(colors.b2);
}
let parameters = sc.getItem("parameters");
if (parameters !== null) {
rad1Slider.value(parameters.rad1);
rad2Slider.value(parameters.rad2);
x1Slider.value(parameters.x1);
y1Slider.value(parameters.y1);
x2Slider.value(parameters.x2);
y2Slider.value(parameters.y2);
}
}
sc.draw = () => {
let r1 = r1Slider.value();
let g1 = g1Slider.value();
let b1 = b1Slider.value();
let r2 = r2Slider.value();
let g2 = g2Slider.value();
let b2 = b2Slider.value();
let rad1 = rad1Slider.value();
let newrad1 = sc.map(rad1, 0, 100, 0.0, 1.0);
let rad2 = rad2Slider.value();
let newrad2 = sc.map(rad2, 0, 100, 0.0, 1.0);
let x1 = x1Slider.value();
let x1Offset = sc.map(x1, 0, 300, -1.5, 1.5);
let y1 = y1Slider.value();
let y1Offset = sc.map(y1, 0, 300, -0.5, 2.5);
let x2 = x2Slider.value();
let x2Offset = sc.map(x2, 0, 100, -0.25, 0.25);
let y2 = y2Slider.value();
let y2Offset = sc.map(y2, 0, 100, -0.25, 0.25);
shader2.setUniform('u_resolution', [sc.width, sc.height]);
shader2.setUniform('colorAr', r1);
shader2.setUniform('colorAg', g1);
shader2.setUniform('colorAb', b1);
shader2.setUniform('colorBr', r2);
shader2.setUniform('colorBg', g2);
shader2.setUniform('colorBb', b2);
shader2.setUniform('rad1', newrad1);
shader2.setUniform('rad2', newrad2);
shader2.setUniform('offset1', [x1Offset, y1Offset]);
shader2.setUniform('offset2', [x2Offset, y2Offset]);
shader2.setUniform('tileChoice', 2.0);
sc.shader(shader2);
sc.rect(0, 0, sc.width, sc.height)
}
sc.saveTile2 = () => {
sc.storeItem("img2", c2.elt.toDataURL());
}
});
new p5(sd => {
// a shader variable
let shader3;
let button3;
let c3;
let graphics3;
sd.preload = () => {
// load the the shader
shader3 = sd.loadShader('translate.vert', 'translate.frag');
}
sd.setup = () => {
sd.pixelDensity(1);
sd.noStroke();
let divD = sd.createDiv();
divD.position(212, 312);
divD.style('max-width', '200px');
c3 = sd.createCanvas(200, 200, sd.WEBGL);
c3.parent(divD);
sd.pixelDensity(1);
graphics3 = sd.createGraphics(200, 200, sd.WEBGL);
button3 = sd.createButton('SAVE TILE D');
button3.mousePressed(sd.saveTile3);
button3.position(550, 725);
let colors = sd.getItem("colors");
if (colors !== null) {
r1Slider.value(colors.r1);
g1Slider.value(colors.g1);
b1Slider.value(colors.b1);
r2Slider.value(colors.r2);
g2Slider.value(colors.g2);
b2Slider.value(colors.b2);
}
let parameters = sd.getItem("parameters");
if (parameters !== null) {
rad1Slider.value(parameters.rad1);
rad2Slider.value(parameters.rad2);
x1Slider.value(parameters.x1);
y1Slider.value(parameters.y1);
x2Slider.value(parameters.x2);
y2Slider.value(parameters.y2);
}
}
sd.draw = () => {
let r1 = r1Slider.value();
let g1 = g1Slider.value();
let b1 = b1Slider.value();
let r2 = r2Slider.value();
let g2 = g2Slider.value();
let b2 = b2Slider.value();
let rad1 = rad1Slider.value();
let newrad1 = sd.map(rad1, 0, 100, 0.0, 1.0);
let rad2 = rad2Slider.value();
let newrad2 = sd.map(rad2, 0, 100, 0.0, 1.0);
let x1 = x1Slider.value();
let x1Offset = sd.map(x1, 0, 300, -2.5, 0.5);
let y1 = y1Slider.value();
let y1Offset = sd.map(y1, 0, 300, -0.5, 2.5);
let x2 = x2Slider.value();
let x2Offset = sd.map(x2, 0, 100, -0.25, 0.25);
let y2 = y2Slider.value();
let y2Offset = sd.map(y2, 0, 100, -0.25, 0.25);
shader3.setUniform('u_resolution', [sd.width, sd.height]);
shader3.setUniform('colorAr', r1);
shader3.setUniform('colorAg', g1);
shader3.setUniform('colorAb', b1);
shader3.setUniform('colorBr', r2);
shader3.setUniform('colorBg', g2);
shader3.setUniform('colorBb', b2);
shader3.setUniform('tileChoice', 3.0);
shader3.setUniform('rad1', newrad1);
shader3.setUniform('rad2', newrad2);
shader3.setUniform('offset1', [x1Offset, y1Offset]);
shader3.setUniform('offset2', [x2Offset, y2Offset]);
sd.shader(shader3);
sd.rect(0, 0, sd.width, sd.height)
}
sd.saveTile3 = () => {
sd.storeItem("img3", c3.elt.toDataURL());
}
});