New example 25-ribbon-queue

b-g · Jun 23, 2021 · 698722c · 698722c
1 parent 8f93107
commit 698722c
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 0 deletions.
diff --git a/25-ribbon-queue/index.html b/25-ribbon-queue/index.html
@@ -0,0 +1,13 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <script language="javascript" type="text/javascript" src="../libraries/p5.js"></script>
+  <script language="javascript" type="text/javascript" src="../libraries/matter.js"></script>
+  <script language="javascript" type="text/javascript" src="../libraries/matter-wrap.js"></script>
+  <script language="javascript" type="text/javascript" src="../libraries/helpers.js"></script>
+  <script language="javascript" type="text/javascript" src="sketch.js"></script>
+  <style> body {padding: 0; margin: 0;} </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/25-ribbon-queue/sketch.js b/25-ribbon-queue/sketch.js
@@ -0,0 +1,91 @@
+// Benedikt Groß
+// Example is based on examples from: http://brm.io/matter-js/, https://github.com/shiffman/p5-matter
+
+// setup wrap coordinates plugin
+Matter.use('matter-wrap');
+
+const Engine = Matter.Engine;
+const Render = Matter.Render;
+const World = Matter.World;
+const Bodies = Matter.Bodies;
+
+const drawBody = Helpers.drawBody;
+
+let engine;
+let trampolineA;
+let trampolineB;
+let ball;
+
+let queueBall;
+
+
+function setup() {
+  const canvas = createCanvas(800, 600);
+
+  // queueBall which records e.g. 25 old positions
+  queueBall = new Queue(25);
+
+  // ball
+  ball = Bodies.circle(300, 50, 40);
+  ball.plugin.wrap = {
+      min: { x: 0, y: 0 },
+      max: { x: width, y: height }
+  };
+
+  // create two trampolines
+  trampolineA = Bodies.rectangle(600, 450, 250, 50, {
+    isStatic: true, angle: Math.PI * -0.15
+  });
+  trampolineA.restitution = 0.7;
+  trampolineB = Bodies.rectangle(200, 450, 250, 50, {
+    isStatic: true, angle: Math.PI * 0.15
+  });
+  trampolineB.restitution = 0.7;
+
+  // setup world and engine
+  engine = Engine.create();
+  World.add(engine.world, [trampolineA, trampolineB, ball]);
+  Engine.run(engine);
+}
+
+function draw() {
+  background(0);
+
+  // draw queue
+  noStroke();
+  const points = queueBall.all();
+  for (let i = 0; i < points.length; i++) {
+    const fraction = 1 - i/points.length;
+    const fillColor = lerpColor(color(255), color(50), fraction);
+    fill(fillColor);
+    const p = points[i];
+    ellipse(p.x, p.y, 80, 80);
+  }
+  queueBall.add({x: ball.position.x, y: ball.position.y});
+
+  // draw ball and trampolines
+  noStroke();
+  fill(200);
+  drawBody(trampolineA);
+  drawBody(trampolineB);
+  drawBody(ball);
+}
+
+
+class Queue {
+  constructor(maxLength) {
+    this.maxLength = maxLength;
+    this.elements = [];
+  }
+  add(element) {
+    if (this.elements.length < this.maxLength) {
+      this.elements.push(element);
+    } else {
+      this.elements.push(element);
+      this.elements.shift();
+    }
+  }
+  all() {
+    return this.elements;
+  }
+}
diff --git a/README.md b/README.md
@@ -29,6 +29,7 @@ Examples showing how to combine [p5.js](https://p5js.org/) and [matter.js](http:
 * [22-scroll-follow](https://b-g.github.io/p5-matter-examples/22-scroll-follow/)
 * [23-sprites-canvas-sandwich](https://b-g.github.io/p5-matter-examples/23-sprites-canvas-sandwich/)
 * [24-add-remove-bodies](https://b-g.github.io/p5-matter-examples/24-add-remove-bodies/)
+* [25-ribbon-queue](https://b-g.github.io/p5-matter-examples/25-ribbon-queue/)
 
 
 The examples have been derived from the course Programmiertes Entwerfen (Sketching with Code) @ the [HfG Schwäbisch Gmünd](https://www.hfg-gmuend.de/) by Benedikt Groß.