Creative Coding Art Source Code As you purchase and own this NFT of interactive Art source code, you are authorized to integrate or build upon in personal or commercial projects such as websites, web apps, and web templates intended for sale. With verified VFT, you can get original support from the original artist - Che-Yu Wu (cyw345@nyu.edu) if you need technical support for this piece of code.

var colors = "083d77-ebebd3-f4d35e-ee964b-f95738-fa664a".split("-").map(a=>"#"+a)
var Engine = Matter.Engine,
			Render = Matter.Render,
			Runner = Matter.Runner,
			Composites = Matter.Composites,
			MouseConstraint = Matter.MouseConstraint,
			Mouse = Matter.Mouse,
			World = Matter.World,
			Bodies = Matter.Bodies,
			Body = Matter.Body


var engine;
var boxes=[];
let allBlocks= []
let overAllTexture
function setup() {
	canvas = createCanvas(800,800);
	background(100);   
	
	overAllTexture=createGraphics(width,height)
	overAllTexture.loadPixels()
	// noStroke()
	for(var i=0;i<width+50;i++){
		for(var o=0;o<height+50;o++){
			overAllTexture.set(i,o,color(100,noise(i/3,o/3,i*o/50)*random([0,30,60])))
		}
	}
	overAllTexture.updatePixels()
	
	// create an engine
  engine = Engine.create();
  world = engine.world;
	world.gravity.y = 0.2
	
  var mouse = Mouse.create(canvas.elt);
  var mouseParams = {
    mouse: mouse,
    constraint: {
      stiffness: 0.5,
    }
  }
  mouseConstraint = MouseConstraint.create(engine, mouseParams);
  mouseConstraint.mouse.pixelRatio = pixelDensity();
  World.add(world, mouseConstraint);

 	var params = {
    isStatic: true
  }
  var ground = Bodies.rectangle(width / 2, height+50, width+100, 100, params);
  var wall1 = Bodies.rectangle(-50, height / 2, 100, height, params);
  var wall2 = Bodies.rectangle(width+50, height / 2, 100, height, params);
  var top = Bodies.rectangle(width / 2, -50, width, 100, params);
  World.add(world, [ground,wall1,wall2,top]);
// 
	// for(var i=0;i<width;i+=width/2){
		let cc =0
		for(var o=0;o<height-100;o+=100){
			addBlock(random(width/3),o,cc++)
		}
	// }
	Engine.run(engine);
}

function addBlock(x,y,id){
	var particleOptions = { 
			friction: 0.05,
			frictionStatic: 0.2,
		density: 0.1,
			render: { visible: true } 
	};
	let ww = int(random(10,20)) 
	let hh = int(random(4,6))
	let ss = Composites.softBody(
			x,y,
			ww,hh, 
			10, 0, 
		true, 15, particleOptions)
	// console.log(ss)
	ss.color= colors[int(id) %colors.length]
	ss.size = {w: ww,h: hh}
	ss.id= id
	ss.activeTs = frameCount
	allBlocks.push(ss)
	World.add(engine.world, [ss])
}
// function mousePressed(){
// 	addBlock()
// 	// makeDrawing(mouseX,mouseY,random(50,140),random(50,140))
// }

function draw() {
	blendMode(BLEND)
	fill(0,0,20)
	rect(0,0,width,height)
	fill(255)
	noStroke()
	allBlocks.forEach(block=>{
		push()

	drawingContext.shadowColor = color(0,50)
	drawingContext.shadowOffsetX = 2
		drawingContext.shadowOffsetY = 2
	// drawingContext.shadowBlur =0
	// blendMode(SCREEN)
		let currentColor = color(block.color)
		fill(currentColor)
		// stroke(255)
		// strokeWeight(10)
		beginShape()
		let getBody=(i,o)=>{
			return block.bodies[o*block.size.w+i]
		}
		let dr = (body)=>{
			currentColor.setRed(
				currentColor._getRed()
				+50*(noise(block.id*10+body.position.x/30,body.position.y/30,frameCount/80)-0.5))
			currentColor.setGreen(
				currentColor._getGreen()
				+50*(noise(block.id*10+body.position.x/30,body.position.y/30,frameCount/80+5000)-0.5))
			currentColor.setBlue(
				currentColor._getBlue()
				+50*(noise(block.id*10+body.position.x/30,body.position.y/30,frameCount/80+10000)-0.5))
			// currentColor.setAlpha(noise(body.position.x/50,body.position.y/50)*100+150)
			fill(currentColor)
			ellipse(body.position.x,body.position.y,
						 noise(body.position.x/50,body.position.y/50)*20+40)
		}
		//drawing boundary
		for(var i=0;i<block.size.w;i++){
			let body = getBody(i,0)
			vertex(body.position.x,body.position.y)
			dr(body)
		}
		for(var i=0;i<block.size.h;i++){
			let body = getBody(block.size.w-1,i)
			vertex(body.position.x,body.position.y)
			dr(body)
		}
		
		for(var i=block.size.w-1;i>=0;i--){
			let body = getBody(i,block.size.h-1)
			vertex(body.position.x,body.position.y)
			dr(body)
		}
		for(var i=block.size.h-1;i>=0;i--){
			let body = getBody(0,i)
			vertex(body.position.x,body.position.y)
			dr(body)
		}
		
	drawingContext.shadowOffsetX = 0
		drawingContext.shadowOffsetY = 0
		
// 		block.bodies.forEach(body=>{
			
// 			push()
// 			stroke(255,250)
			
// 			line(body.position.x,body.position.y,
// 					body.position.x+random(-15,15),body.position.y+random(-15,15))
// 			// rectMode(CENTER)
// 			// rotate(body.angle);
			
// 			pop()
// 		})
		currentColor.setAlpha(255)
		fill(block.color)
		endShape(CLOSE)
		
		let headSt =  getBody(0,int(block.size.h/2+0.5))
		let eyeSt = getBody(2,int(block.size.h/2+0.5))
		let eyeEd = getBody(2,int(block.size.h/2-0.5))
		let Mouth = getBody(3,int(block.size.h/2))
		let eyeAngle = atan2(eyeSt.position.y-eyeEd.position.y,
												eyeSt.position.x-eyeEd.position.x)
		
		let drawEye=(x,y)=>{
			fill(255)
			ellipse(x,y,25)
			fill(0)
			ellipse(x,y,15)
			fill(block.color)
			arc(x,y,32,32,0,PI)
		}
		push()
			translate(eyeSt.position.x,eyeSt.position.y)
			rotate(eyeAngle)
			scale(1,(frameCount+block.id*5)%80<10?0.1:1)
			drawEye(0,0)
		pop()
		
		push()
			translate(eyeEd.position.x,eyeEd.position.y)
			rotate(eyeAngle)
		scale(1,(frameCount+block.id*5)%80<10?0.1:1)
			drawEye(0,0)
		pop()
		
		push()
			stroke(0)
			strokeWeight(3)
			translate(headSt.position.x,headSt.position.y)
			rotate(eyeAngle)
		for(var i=0;i<5;i++){
			translate(-10,0)
			line(0,-20,0,0)
		}
		pop()
		
		
		push()
			translate(Mouth.position.x,Mouth.position.y)
			rotate(eyeAngle)
			fill(255,160)
		// scale(1,(frameCount+block.id*5)%80<10?0.1:1)
			ellipse(0,0,50,5)
		pop()
	})
	
	var a = mouseConstraint.constraint.pointA;
  var bodyB = mouseConstraint.constraint.bodyB;
  if (bodyB) {
		cursor('grab');
    strokeWeight(2);
    stroke(255,20);
    line(a.x, a.y, bodyB.position.x, bodyB.position.y);
		bodyB.active=true
  }else{
		cursor('');
	}
	
	push()
		blendMode(MULTIPLY)
		image(overAllTexture,0,0)
	pop()
}