Animated WebGL Cube Wave P5 style body background color rgb 200 200 200 min height 600px canvas margin auto style script src https cdnjs cloudflare com ajax libs p5 js 0 7 1 p5 min js script script const boxSize 35 const boxHeight 180 const boxMargin 0 const clusterSize 15 const clusterWH clusterSize boxSize boxMargin clusterSize 1 const sinDiff 450 clusterSize const boxArr Array from new Array clusterSize new Array clusterSize fill null function setup createCanvas 600 600 WEBGL noStroke ortho 540 540 540 540 800 800 ambientLight 180 pointLight 90 90 150 255 300 300 300 directionalLight 255 255 255 255 1 1 0 ambientMaterial 100 100 255 255 boxInit function draw background 255 orbitControl rotateX radians 45 rotateZ radians 45 for let i 0 i clusterSize i for let j 0 j clusterSize j boxArr i j drawMe boxArr i j updateMe function boxInit for let i 0 i clusterSize i for let j 0 j clusterSize j boxArr i j new BoxObj i j class BoxObj constructor ex why this height boxHeight this size boxSize this x clusterWH 2 ex boxSize boxMargin this y clusterWH 2 why boxSize boxMargin const distToCenter dist 0 0 this x this y this boxDist map distToCenter 0 clusterWH 2 0 clusterSize 2 drawMe push translate this x this y 0 box this size this size this height pop updateMe this height sin radians frameCount 3 sinDiff this boxDist 1 3 boxHeight console log ready script
radians 45 for let i 0 i clusterSize i for let j 0 j clusterSize j boxArr i j drawMe boxArr i j updateMe function boxInit for let i 0 i clusterSize i for let j 0 j clusterSize j boxArr i j new BoxObj i j class BoxObj constructor ex why this height boxHeight this size boxSize this x clusterWH 2 ex boxSize boxMargin this y clusterWH 2 why boxSize boxMargin const distToCenter dist 0 0 this x this y this boxDist map distToCenter 0 clusterWH 2 0 clusterSize 2 drawMe push translate this x this y 0 box this size this size this height pop updateMe this height sin radians frameCount 3 sinDiff this boxDist 1 3 boxHeight console log ready script