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.

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js";
document.head.appendChild(s);
var engine;
var ground;
var boxes=[]
var colors = "1be7ff-6eeb83-e4ff1a-ffb800-ff5714".split("-").map(a=>"#"+a)
let overAllTexture
function setup() {	
	createCanvas(800,800);
	pixelDensity(2)
	background(100);
	let {Engine,Bodies,World}= Matter

  engine = Engine.create();
	let boxA = Bodies.rectangle(400, 200, 80, 80);
  let boxB = Bodies.rectangle(450, 50, 80, 80);
	let wallLeft = Bodies.rectangle(0-15, height/2,30,height, {
    isStatic: true
  });
	let wallRight = Bodies.rectangle(width+15, height/2,30,height, {
    isStatic: true
  });
  let ground = Bodies.rectangle(width/2, height+30,width, 60, {
    isStatic: true
  });
	boxes.push(boxA,boxB)
	World.add(engine.world, boxes);
	World.add(engine.world, [ground,wallLeft,wallRight]);
	Engine.run(engine);
	
	
	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(150,noise(i/10,i*o/300)*random([0,50,100])))
		}
	}
	overAllTexture.updatePixels()
}

function generateNewBox(){
	let {Engine,Bodies,World,Constraint}= Matter
	var sz = random([20,40,60,80,100])
  let box = Bodies.rectangle(mouseX,mouseY, sz, sz);
	box.color = random(colors)
	box.size = sz
	box.char = random("CREATIVECODING".split(""))
	
	// var constraint = Constraint.create({
	// 		// pointA: {x:random(width),y:random(height)},
	// 	  bodyA: boxes.slice(-1)[0],
	// 		bodyB: box,
	// 		length: 60,
	// 		stiffness: 0.1,
	// 		// damping: 0.05
	// });
	// World.add(engine.world, [constraint]);

	// console.log(box)
	boxes.push(box)
	World.add(engine.world, box);
}

function draw() {
	background(100);
	fill(0)
	rect(0,0,width,height)

	for(let box of boxes){
		var vertices = box.vertices;
		fill(box.color || 255)
		// noFill()
		stroke(0)
		strokeWeight(5)
		// noStroke()
		beginShape();
		for (let vert of vertices) {
			vertex(vert.x, vert.y);
		}
		endShape(CLOSE);
		push()
			translate(box.position.x,box.position.y)
			rotate(box.angle)
			fill(0)
			noStroke()
			let useTextSize = box.size*0.8 || 50
			textSize(useTextSize)
			textAlign(CENTER)
			textStyle(BOLD)
			text(box.char || "?",0,useTextSize*0.3 )
		pop()
	}
	if (mouseIsPressed && frameCount%3==0){
		generateNewBox()
	}
	
	push()
		blendMode(MULTIPLY)
		image(overAllTexture,0,0)
	pop()
}

function keyPressed(){
	if (key==" "){
		save()
	}
}