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