Creative Coding Art Source Code  (Out of Print Collection at 07/20/2021) As you purchase and own this NFT of interactive Art source code, you are authorized to integrate or build upon it in personal or commercial projects such as websites, web apps, and web templates with proper credit to original author Che-Yu Wu. With verified NFT, you can get support from the original artist - Che-Yu Wu (cyw345@nyu.edu) if you need technical support for this piece of code.

//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;x<width*2;x+=80){
		for(var y=0;y<height;y+=80){	
			particles.push(new Particle({
				p: createVector(x,y),
				color: random(colors)
			}))
		}
	}
	grids.strokeWeight(1.5)
	grids.translate(width/2,height/2)
	grids.scale(0.95)
	grids.translate(-width/2,-height/2)
	for(var x=0;x<=width;x+=50){
		grids.stroke(255,x%200==0?255:150)
		grids.strokeWeight(x%200==0?2:1.2)
		grids.line(x,0,x,height)
	}
	for(var y=0;y<=height;y+=50){
		grids.stroke(255,y%200==0?255:150)
		grids.strokeWeight(y%200==0?2:1.2)
		grids.line(0,y,width,y)
	}
	
	cc.translate(width/2,height/2)
	cc.push()
		cc.stroke(255)
		cc.line(0,-50,0,50)
		cc.line(50,0,-50,0)
	cc.pop()
	cc.textStyle(BOLD);
	for(var i=0;i<160;i+=1){
		cc.push()
			cc.rotate(i/360*2*PI*3)
			cc.fill(255)
			cc.textSize(30)
			
			cc.translate(400,0)
			cc.rotate(PI/2+random(-0.1,0.1))
			
			cc.text("WIGGLE  PLANET  ALPHA -    ".slice(i%25,i%25+1),0,0)
		cc.pop()
	}
	cc2.translate(width/2,height/2)
	for(var i=0;i<180;i+=1){
		cc2.push()
			cc2.rotate(i/360*2*PI*1.5)
			cc2.fill(255)
			cc2.textSize(15)
			
			cc2.translate(450,0)
			cc2.rotate(PI/2)
			
			cc2.text("WIGGLE  PLANET  ALPHA -    ".slice(i%25,i%25+1),0,0)
		cc2.pop()
	}
}

function draw() {
	clear(0,0,width,height)
	fill(0)
	rect(-width/2,-height/2,width,height)
	push()
		rotateY(frameCount/200 + mouseX/300)
		rotateX(frameCount/200 + mouseX/300)
		shader(theShader)
		baseGraphics.clear(0,0,width*2,height)
		particles.forEach(p=>p.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;i<this.pointCount*5;i++){
			ctx.noStroke()
			ctx.ellipse(this.p.x+noise(i,frameCount/50)*200,
									this.p.y+noise(i,frameCount/50,500)*200,
									noise(i)*5)
		}
		ctx.pop()
		
		
	}
	update(){
		if (random()<0.1){
			this.updateShape()
		}
		// if (random()<0.1){
		// 	this.ang+=random()
		// }
	}
	updateShape(){
		if (random()<0.2){
			this.points=[]
		}
		let angs = []
		for(var i=0;i<this.pointCount;i++){
			let ang = random(2*PI)
			angs.push(ang)
		}
		angs.sort((a,b)=>a-b)
		angs.forEach(ang=>{
			this.points.push(createVector(cos(ang)*this.len, sin(ang)*this.len))
			
		})
	}
	
}