<!-- 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);
This Pen doesn't use any external CSS resources.