Immersion
"use strict";
/*let globalScale = 7.;*/
let globalScale = .75;
let canvas;
let cptLoop = 0;
let time;
let t0 = performance.now();
let shaderFleur;
let shaderFeuilles;
let shaderWalls;
let postProcessShader;
let firstPass;
let imgCiel;
let rdV = [];
let rdSV = [];
let cptRdSv = 0;
let cptScale = 1;
let nbRd = 50;
const C1 = () => { cptRdSv = (cptRdSv + 1)%nbRd; return rdSV[cptRdSv]*cptScale; };
function preload(){
shaderFleur = loadShader('texture.vert','fleur.frag');
shaderFeuilles = loadShader('texture.vert','feuilles.frag');
shaderWalls = loadShader('texture.vert','shaderWalls.frag');
postProcessShader = loadShader('texture.vert','postprocess.frag');
imgCiel = loadImage('assets/sky-828648.jpg');
}
function setup() {
canvas = createCanvas(800*globalScale, 800*globalScale, WEBGL);
canvas.parent('sketch-holder');
//noLoop();
randomSeed(1238001);//12380
for(let i = 0; i < nbRd; i++)
rdV[i] = random(0,1);
for(let i = 0; i < nbRd; i++)
rdSV[i] = random(-1,1);
firstPass = createGraphics(width, height, WEBGL);
//firstPass.perspective(1., width/height, 0.1, 8000);
firstPass.ortho(-width/2, width/2, -height/2, height/2, 0, 25000);
firstPass.setAttributes("antialias",true);
firstPass.stroke(255);
firstPass.strokeWeight(globalScale);
//firstPass.debugMode();
//lastPass = createGraphics(width, height, WEBGL);
/*gl = this._renderer.GL;
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);*/
}
function petal(ctx) {
cptScale = .1;
ctx.beginShape();
ctx.vertex(0. + C1(), -.125 + C1(),0. + C1(), 0. + C1(),-.125 + C1());
ctx.vertex(-.25 + C1(), 0. + C1(), 0. + C1(), -.25 + C1(),0. + C1());
ctx.vertex(-.75 + C1(), -.5 + C1(), 0. + C1(), -.75 + C1(),-.5 + C1());
ctx.vertex(-.5 + C1(), -1. + C1(), 0. + C1(), -.5 + C1(),-1. + C1());
ctx.vertex(0. + C1(), -.75 + C1(), 0.25 + C1(), 0. + C1(),-.75 + C1());
ctx.vertex(.5 + C1(), -1. + C1(), 0. + C1(), .5 + C1(),-1.);
ctx.vertex(.75 + C1(), -.5 + C1(), 0. + C1(), .75 + C1(),-.5);
ctx.vertex(.25 + C1(), 0. + C1(), 0. + C1(), .25 + C1(),0. + C1());
ctx.endShape(CLOSE);
}
function petals(ctx,nbPetals,rotX,transX) {
for(let i = 0; i < nbPetals; i++) {
cptRdSv = i;
ctx.rotateY(TWO_PI/nbPetals);
ctx.push();
ctx.translate(0,0,transX);
ctx.rotateX(rotX);
petal(ctx);
ctx.pop();
}
}
function leave(ctx) {
ctx.push();
ctx.beginShape();
ctx.vertex(.15,0.,.5, .15,.5);
ctx.vertex(.65,0.,.5, .65,.5);
ctx.vertex(.5,0.1,0., .5,0.);
ctx.vertex(0.,0.,0., .0,0.);
ctx.endShape(CLOSE);
ctx.pop();
}
function flower(ctx) {
ctx.push();
ctx.rotateX(-.315);
ctx.rotateZ(.215);
ctx.push();
ctx.scale(100);
petals(ctx,5,-1.,.5);
ctx.pop();
ctx.push();
ctx.scale(120);
petals(ctx,5,-.85,-.25);
ctx.pop();
ctx.pop();
let segH = .5;
let nbSeg = 10;
ctx.push();
ctx.shader(shaderFeuilles);
ctx.scale(100);
for(let i = 2; i < nbSeg - 2; i+=2) {
ctx.push();
ctx.translate(rdSV[i]*.2,segH*i,rdSV[i + nbSeg]*.2);
ctx.rotateY(TWO_PI*rdV[i]);
ctx.rotateX(.5*rdV[i]);
ctx.rotateZ(-.5*rdV[i]);
leave(ctx);
ctx.pop();
}
ctx.noFill();
ctx.beginShape();
ctx.vertex(0,0,0);
for(let i = 1; i < nbSeg; i++)
ctx.vertex(rdSV[i]*.2,segH*i,rdSV[i + nbSeg]*.2);
ctx.endShape();
ctx.pop();
}
function grid(ctx) {
let nb = 3;
let sc = 1.;
let y = 9/sc;
ctx.push();
ctx.scale(50*sc);
ctx.noFill();
for(let z = -nb+1; z < nb; z += 1) {
ctx.beginShape();
ctx.vertex(-nb,y,z);
ctx.vertex(nb,y,z);
ctx.endShape();
}
for(let x = -nb+1; x < nb; x += 1) {
ctx.beginShape();
ctx.vertex(x,y,-nb);
ctx.vertex(x,y,nb);
ctx.endShape();
}
ctx.pop();
}
function walls(ctx) {
ctx.push();
ctx.noStroke();
ctx.scale(50);
ctx.push();
ctx.rotateY(TWO_PI*.5);
ctx.translate(0,1.5,3.);
ctx.plane(6,17);
ctx.pop();
ctx.push();
ctx.rotateY(-TWO_PI*.25);
ctx.translate(0,1.5,3.);
ctx.plane(6,17);
ctx.pop();
ctx.pop();
}
function draw() {
let m = {x: mouseX/width - .5, y: mouseY/height - .5};
time = (performance.now() - t0)*.001;
background(0);
firstPass.clear();
firstPass.background(0);
shaderFleur.setUniform('u_time',time);
shaderFleur.setUniform('u_resolution',[width,height]);
shaderFeuilles.setUniform('u_time',time);
shaderFeuilles.setUniform('u_resolution',[width,height]);
shaderWalls.setUniform('u_time',time);
shaderWalls.setUniform('u_resolution',[width,height]);
postProcessShader.setUniform('u_time',time);
postProcessShader.setUniform('u_resolution',[width,height]);
firstPass.push();
firstPass.scale(globalScale);
firstPass.shader(shaderFleur);
firstPass.rotateX(-.2 - m.y);
firstPass.rotateY(TWO_PI*-.125 + m.x);
firstPass.translate(0,-150,0);
firstPass.push();
firstPass.rotateY(time*.25);
flower(firstPass);
firstPass.pop();
grid(firstPass);
shaderWalls.setUniform('u_tex1',imgCiel);
firstPass.shader(shaderWalls);
walls(firstPass);
firstPass.pop();
postProcessShader.setUniform('u_pass1',firstPass);
shader(postProcessShader);
rect(-width*.5,-height*.5,width,height);
}