<!-- Drag and release the circles to see the interaction -->

<div class="graphic-container d-graphic-container">
 
    <div class="pngAndCanvas png-container">
        <img src="https://utsystem.edu/25drugs/assets/img/illustrations/stem-cell.png">
    </div>
   <div class="pngAndCanvas d-canvas" id="sec2-matter">
  </div>
  

</div>
body{
  background: #000;
}
.d-graphic-container{
    width:30%;
    margin: 0 auto;
    position: relative;
}

.pngAndCanvas img{
    width:100%;
    pointer-events:none;
}
.png-container{
    pointer-events:none;
}
.pngAndCanvas{
    width: 100%;
    max-width: 640px;
    z-index: 2;
    position: relative;
    /* background: #ddd; */
}
canvas{
  width: 100%;
}
.d-canvas{
    position: absolute;
    top:0;
    left:0;
    /* background: red; */
    z-index: 0;
}

@media only screen and (max-width: 1000px) {
  .d-graphic-container{
    width:50%;
    margin: 0 auto;
    position: relative;
}
}

@media only screen and (max-width: 700px) {
  .d-graphic-container{
    width:80%;
    margin: 0 auto;
    position: relative;
}
}

var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
	  Bodies = Matter.Bodies,
	  MouseConstraint = Matter.MouseConstraint,
	  Mouse = Matter.Mouse,
	  Body = Matter.Body,
	  Svg = Matter.Svg,
    Vertices = Matter.Vertices,
	  Constraint = Matter.Constraint,
	  Events = Matter.Events;

var colors=["rgba(247,147,30,1)", "rgba(102,166,196,1)", "rgba(252,115,117,1)"]
var colors2=["rgba(68,98,120,1)", "rgba(255,217,125,1)", "rgba(244,96,54,1)", "rgba(244,96,54,1)"];


function getRandom(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
}

var engine3 = Engine.create();

var sec3Matter = document.getElementById("sec2-matter")
var render3 = Render.create({
    element: sec3Matter,
    engine: engine3,
    options: {
        width: 640,
        height: 800,
        pixelRatio: 1,
        background: 'rgba(200,200,0,0)',
		wireframeBackground: '#eee',
		wireframes: false,
    }
}
);




var wall2= Bodies.rectangle(650, 400,20, 1800, {isStatic:true, render:{visible: false}, restitution:0.9})
var ground= Bodies.rectangle(320, 850,1200, 100, {isStatic:true, render:{visible: false}, restitution:0.9})

var cell1options = {
	friction:0.5,
	frictionAir:0.01,
	restitution:0.5,
	render:{
		fillStyle: colors[getRandom(0,2)]
	}
}
var cell = Bodies.circle(145, 565,45, cell1options)

var cellConnection = Constraint.create({
	pointA: {x: 145, y: 565},
	bodyB: cell,
	stiffness: 0.007,
	length: 1,
	render:{
		visible: true,
		type: "line",
		lineWidth: 1
	}
})

var cell2options = {
	friction:0.05,
	frictionAir:0.05,
	restitution:0.9,
	render:{
		fillStyle: colors2[getRandom(0,2)]
	}
}

var cell2 = Bodies.circle(383, 330,15,cell2options)

var cell2Connection = Constraint.create({
	pointA: {x: 383, y: 330},
	bodyB: cell2,
	// pointB: {x:300, y: 280},
	stiffness: 0.05,
	length: 1,
	render:{
		visible: true,
		type: "line",
		lineWidth: 1
	}
})

World.add(engine3.world, [cell, cellConnection, ground, wall2, cell2, cell2Connection]);

var mouse3 = Mouse.create(render3.canvas),
        mouseConstraint = MouseConstraint.create(engine3, {
            mouse: mouse3,
            constraint: {
				stiffness: 0.5,
                render: {
					visible: false,
                }
			}
        });

addCanon(145,565,45,cell,cellConnection, cell1options, colors);
addCanon(383,330,15,cell2,cell2Connection, cell2options, colors2);



function addCanon(x,y,radius, object, objectConnection, options, colArr){
	Events.on(engine3, 'afterUpdate', function() {
		if (mouseConstraint.mouse.button === -1 && (object.position.x > x+30 || object.position.y < y-30)) {
			options.render.fillStyle = colArr[getRandom(0,colArr.length-1)]
			object = Bodies.circle(x, y, radius, options);
			World.add(engine3.world, object);
			objectConnection.bodyB = object;
		}
	});
	World.add(engine3.world, mouseConstraint);
	
}

// keep the mouse in sync with rendering
render3.mouse = mouse3;
Engine.run(engine3);

// run the renderer
Render.run(render3);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdn.rawgit.com/liabru/matter-js/63b02cfbeebe93d28082504f5e89e93f98739743/build/matter.js