index.js (3411B)
1 const h = document.body.clientHeight; 2 const w = document.body.clientWidth; 3 4 const people = 140; 5 6 const { Engine, Render, World, Bodies, Body } = Matter; 7 let engine; 8 let y = 0; 9 10 let boxes; 11 12 let arrS = [], 13 arrI = [], 14 arrR = []; 15 16 function setup() { 17 createCanvas(w, h); 18 engine = Engine.create(); 19 world = engine.world; 20 world.gravity.y = 0; 21 boxes = []; 22 for (let i = 1; i <= people; i++) { 23 boxes.push( 24 Bodies.circle( 25 10 + Math.random() * (w - 10), 26 10 + Math.random() * (h - 10), 27 10, 28 { 29 restitution: 1, 30 friction: 0, 31 frictionAir: 0, 32 frictionStatic: 0 33 } 34 ) 35 ); 36 } 37 boxes.forEach(box => { 38 const prob = random() > 0.98 ? true : false; 39 box.status = prob ? 'I' : 'S'; 40 const xDir = Math.random() > 0.5 ? 1 : -1; 41 const yDir = Math.random() > 0.5 ? 1 : -1; 42 Body.setVelocity(box, { 43 x: xDir * random(), 44 y: yDir * random() 45 }); 46 }); 47 wallOptions = { 48 isStatic: true, 49 restitution: 1, 50 friction: 0, 51 frictionAir: 0, 52 frictionStatic: 0 53 }; 54 leftWall = Bodies.rectangle(5, h / 2, 10, h, wallOptions); 55 rightWall = Bodies.rectangle(w - 5, h / 2, 10, h, wallOptions); 56 bottomWall = Bodies.rectangle(w / 2, h - 5, w, 10, wallOptions); 57 topWall = Bodies.rectangle(w / 2, 5, w, 10, wallOptions); 58 World.add(engine.world, [...boxes, leftWall, rightWall, bottomWall, topWall]); 59 Engine.run(engine); 60 console.log(boxes[0]); 61 stroke(255, 255, 255); 62 } 63 64 function draw() { 65 background(51, 51, 51); 66 fill(0, 0, 0); 67 noStroke(); 68 rectMode(CENTER); 69 ellipseMode(CENTER); 70 rect(leftWall.position.x, leftWall.position.y, 10, h); 71 rect(rightWall.position.x, rightWall.position.y, 10, h); 72 rect(bottomWall.position.x, bottomWall.position.y, w, 10); 73 rect(topWall.position.x, topWall.position.y, w, 10); 74 boxes.forEach(box => { 75 noFill(); 76 if (box.status == 'R') fill(0, 255, 0); 77 if (box.status == 'S') fill(255, 255, 255); 78 if (box.status == 'I') fill(255, 0, 0); 79 circle(box.position.x, box.position.y, 20); 80 if (box.status == 'I') { 81 const index = box.id; 82 time = ((Math.random() * 10000) % 10) * 1000 + 3000; 83 setTimeout(function() { 84 world.bodies.filter(body => body.id == index)[0].status = 'R'; 85 }, time); 86 } 87 }); 88 for (let i = 0; i < boxes.length; i++) { 89 for (j = 0; j < boxes.length; j++) { 90 if (i != j) { 91 const { collided, bodyA, bodyB } = Matter.SAT.collides( 92 boxes[i], 93 boxes[j] 94 ); 95 if (collided) { 96 if (bodyA.status == 'I' && bodyB.status != 'R') bodyB.status = 'I'; 97 if (bodyB.status == 'I' && bodyA.status != 'R') bodyA.status = 'I'; 98 } 99 } 100 } 101 } 102 let [S, I, R] = [0, 0, 0]; 103 boxes.forEach(box => { 104 if (box.status == 'S') S++; 105 if (box.status == 'I') I++; 106 if (box.status == 'R') R++; 107 }); 108 arrS.push(S); 109 arrI.push(I); 110 arrR.push(R); 111 for (let i = 0; i < arrS.length; i++) { 112 noFill(); 113 // fill(255); 114 // circle(i, h - arrS[i] - 10, 5); 115 fill('rgba(255, 0, 0, 0.3)'); 116 circle(10 + i, h - arrI[i] - 10, 5); 117 rect(10 + i, h - 10 - arrI[i] / 2, 1, arrI[i]); 118 if (arrR[i]) { 119 fill('rgba(0, 255, 0, 0.3)'); 120 circle(10 + i, h - people + arrR[i] - 10, 5); 121 rect(10 + i, h - people - 10 + arrR[i] / 2, 1, arrR[i]); 122 } 123 } 124 125 y += 1; 126 if (I == 0) { 127 noLoop(); 128 } 129 }