Skip to main content

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()
}





Generative Art NFT - Che-Yu Wu collection image

Creative Coding Art Source Code (21 items, Out of Print Collection at 07/20/2021.) Che-Yu Wu is a multidisciplinary new media artist, designer, engineer, and entrepreneur from Taiwan, currently based in New York. With the sensitivity of art and engineering background. He creates generative arts which sampled from nature, physics, modernism art and turn them into algorithmic interactive art machines.

Twitter: https://twitter.com/cheyuwu345 New Media Artist Che-Yu Wu: https://opensea.io/accounts/CheYuWu

Category Art
Contract Address0x495f...7b5e
Token ID
Token StandardERC-1155
ChainEthereum
MetadataCentralized
Creator Earnings
10%

200526 Sleepy Pochi

visibility
515 views
  • Price
    USD Price
    Quantity
    Expiration
    From
  • Price
    USD Price
    Quantity
    Floor Difference
    Expiration
    From
keyboard_arrow_down
  • Sales
  • Transfers
Event
Price
From
To
Date

200526 Sleepy Pochi

visibility
515 views
  • Price
    USD Price
    Quantity
    Expiration
    From
  • Price
    USD Price
    Quantity
    Floor Difference
    Expiration
    From

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()
}





Generative Art NFT - Che-Yu Wu collection image

Creative Coding Art Source Code (21 items, Out of Print Collection at 07/20/2021.) Che-Yu Wu is a multidisciplinary new media artist, designer, engineer, and entrepreneur from Taiwan, currently based in New York. With the sensitivity of art and engineering background. He creates generative arts which sampled from nature, physics, modernism art and turn them into algorithmic interactive art machines.

Twitter: https://twitter.com/cheyuwu345 New Media Artist Che-Yu Wu: https://opensea.io/accounts/CheYuWu

Category Art
Contract Address0x495f...7b5e
Token ID
Token StandardERC-1155
ChainEthereum
MetadataCentralized
Creator Earnings
10%
keyboard_arrow_down
  • Sales
  • Transfers
Event
Price
From
To
Date