// This template is from P5js shader tutorial at
// https://itp-xstory.github.io/p5js-shaders/#/./docs/examples/basic_gradient
let theShader;
let f;
function preload(){
theShader = loadShader('vert.glsl', 'frag.glsl');
f = loadFont(
"https://cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/font/SourceCodePro-Bold.otf"
);
}
function setup() {
pixelDensity(2);
createCanvas(1000, 1000, WEBGL);
}
function draw() {
shader(theShader);
theShader.setUniform("u_resolution", [width*2, height*2]);
theShader.setUniform("u_time", millis() / 1000.0);
stroke(255, 234, 249);
strokeWeight(50);
rect(width * -0.5, height * -0.5, width, height);
push();
resetShader();
fill(255, 234, 249);
stroke(0, 76, 61);
strokeWeight(2);
translate(0, 0, 100);
rotateX(millis() * 0.0025 * 0.1);
rotateY(millis() * 0.005 * 0.1);
box(width / 10);
pop();
push();
translate(0, 0, 200);
stroke(255, 234, 249);
strokeWeight(20);
fill(0, 76, 61);
textFont(f);
textSize(40);
textAlign(CENTER, CENTER);
const t = "(out of bounds)";
text(t, -2, 0);
text(t, 0, -2);
text(t, 2, 0);
text(t, 0, 2);
fill(255, 234, 249);
text(t, 0, 0);
pop();
}