Dale Rebhorn
  • Reading lists and bookmarks
  • Portfolio
    • Intro to Podcasts
    • Child Welfare Conference
  • Contact
  • Alexa
  • Bulletin Board
  • Expeditions
  • Music page
  • BBrave
  • p5js

Text for Domino Demo: be sure to load matter.js into your files first! 

const Engine = Matter.Engine;
const World = Matter.World;
const Bodies = Matter.Bodies;
var engine;
var ground;
var boxes=[];

// Student: questions to answer and fun parameters to change:
// where do you change the color of the dominos? 
// what parameter do you change to get more dominos to fall?
// what parameter do you change to make the dominos fall closer together?
// what do you change to make dominos thicker or thinner? How does that affect it? 
// what parameter do you change to make the ground tilt more up or more down? 
// How far can you tilt the ground and leave at least one domino standing up? 

// Reference Superfun p5.js projects for beginners, Nazia Fakhruddin, adapted
// changed domino color for more fun! 
// Increased initial load of dominos from example, does a better fill
// Updated Matter.Runner.run to replace Engine.run in line 30 
// Needed to upload matter.js to the sketch files, check github for latest
// Needed to add <script src="matter.js"></script> to index.html file 

// More info about matter.js and p5.js in https://www.youtube.com/watch?v=urR596FsU68 

function setup() {
  createCanvas(800, 600);
  
  engine = Engine.create(); 
  
  for (let i = 0; i <15; i++) {
    boxes.push(Bodies.rectangle(100 + (i*40), 200, 20, 80));
    World.add(engine.world, boxes[i]);
  }
  ground = Bodies.rectangle(300, 310, 410, 30, {isStatic: true}); 
  Matter.Body.rotate(ground,0.24);
  World.add(engine.world, [ground]);
  
  Matter.Runner.run(engine);
}

function draw() {
  background(220);
  //draw the dominos 
  for(let j = 0; j <boxes.length; j++) {
      let currentbox = boxes[j];
    var vertices = currentbox.vertices;
    fill(62,140,140);
    beginShape();
    for (var i = 0; i< vertices.length; i++) {
      vertex(vertices[i].x, vertices[i].y);
    }
    endShape();
    
 // draw the ground    
    var vertices = ground.vertices;
    beginShape();
    fill(127);
    for (var i = 0; i < vertices.length; i++) {
      vertex(vertices[i].x, vertices[i].y);
    endShape();
    }
      }
}

bass.wav file should appear here: