//p5.js shader basic structure ref from https://www.openprocessing.org/sketch/920144 let theShader; let baseGraphics let grids let particles = [] let colors = "f3c969-edff86-fff5b2-d4fcc3-362c28-1a535c-4ecdc4-f7fff7-ff6b6b-ffe66d".split("-").map(a=>"#"+a) let cc,cc2 function preload(){ theShader = new p5.Shader(this.renderer,vert,frag) } function setup() { createCanvas(1000,1000,WEBGL); baseGraphics = createGraphics(width*2,height) grids = createGraphics(width,height) cc = createGraphics(width,height) cc.clear(width,height) cc2 = createGraphics(width,height) cc2.clear(width,height) noStroke() background(100); for(var x=0;xp.update()) particles.forEach(p=>p.draw(baseGraphics)) theShader.setUniform('u_resolution',[width/1000,height/1000]) theShader.setUniform('u_time',millis()/1000) theShader.setUniform('u_mouse',[mouseX/width,mouseY/height]) theShader.setUniform('u_tex',baseGraphics) blendMode(ADD) sphere(340,50) pop() image(grids,-width/2,-height/2) blendMode(BLEND) push() rotate(frameCount/100+mouseY/200) image(cc,-width/2,-height/2) rotate(-frameCount/50+mouseY/300) image(cc2,-width/2,-height/2) pop() // fill(255) // ellipse(0,0,50,50) // push() // blendMode(SCREEN) // // fill("#1A535C") // // rect(-width/2,-height/2,width,height) // fill("#1A535C") // rect(-width/2,-height/2,width,height) // // fill("#FFE66D") // // rect(-width/2,0,width/2,height/2) // // fill("#F7FFF7") // // rect(0,0,width/2,height/2) // pop() // rotateZ(frameCount/100) // rotateX(frameCount/200) // rect(-width/2,-height/2,width,height) // ellipse(mouseX, mouseY, 20, 20); } const frag = ` precision highp float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; uniform vec3 u_lightDir; uniform vec3 u_col; uniform mat3 uNormalMatrix; uniform float u_pixelDensity; uniform sampler2D u_tex; //attributes, in varying vec4 var_centerGlPosition; varying vec3 var_vertNormal; varying vec2 var_vertTexCoord; ${frag_functions_default} void main(){ vec2 st = var_vertTexCoord.xy /u_resolution.xy; // st.y = 1.0 - st.y; st.x+=cnoise(vec3(u_time*sin(u_time/50.)*10.,st*10.))/100.; st.y+=cnoise(vec3(u_time*cos(u_time/50.)*10.,st*10.))/100.; // st.x+=rand(st)*0.001; // st.y+=rand(st)*0.001; vec3 color = texture2D(u_tex,st).rgb; color+=cnoise(vec3(u_time,st*1500.))/5.; float d = distance(u_mouse,st); // color*=1.-d; gl_FragColor= vec4(color,1.0); } ` class Particle{ constructor(args){ let def = { pointCount: random(3,8), points: [], color: color(random(255)), len: random([20, 50,50,50,50,50,100]), p: createVector(0,0), ang: 0, ...args } Object.assign(this,def) this.updateShape() } draw(ctx){ ctx.push() ctx.translate(this.p.x,this.p.y) ctx.rotate(this.ang) ctx.beginShape() ctx.fill(this.color) this.points.forEach(point=>{ ctx.vertex(point.x,point.y) }) ctx.endShape(CLOSE) for(var i=0;ia-b) angs.forEach(ang=>{ this.points.push(createVector(cos(ang)*this.len, sin(ang)*this.len)) }) } }