Added 1-polygon example

b-g · b-g · commit 4686521aa396 · 2022-06-22T14:19:01.000+02:00
diff --git a/1-polygon/index.html b/1-polygon/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<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="sketch.js"></script>
+  <script language="javascript" type="text/javascript" src="../classes/BlockCore.js"></script>
+  <script language="javascript" type="text/javascript" src="../classes/Block.js"></script>
+  <script language="javascript" type="text/javascript" src="../classes/Polygon.js"></script>
+  <script language="javascript" type="text/javascript" src="../classes/PolygonFromPoints.js"></script>
+  <script language="javascript" type="text/javascript" src="../classes/Mouse.js"></script>
+  <style> body {padding: 0; margin: 0;} </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/1-polygon/sketch.js b/1-polygon/sketch.js
@@ -0,0 +1,45 @@
+let pentagon;
+let polygon;
+let ground;
+let mouse;
+
+function setup() {
+  const canvas = createCanvas(800, 600);
+
+  // create an engine
+  let engine = Matter.Engine.create();
+  let world = engine.world;
+
+  // create polygons and a ground
+  ground = new Block(
+    world,
+    { x: 400, y: 500, w: 810, h: 15, color: 'grey' },
+    { isStatic: true, angle: PI/36 }
+    );
+  pentagon = new Polygon(world, { x: 400, y: 100, s: 5, r: 50, color: 'white' });
+
+  const points = [
+    { x: 0, y: 0 },
+    { x: 100, y: 10 },
+    { x: 150, y: 100 },
+    { x: 150, y: 150 },
+    { x: 0, y: 50 + random(0, 400) }
+  ];
+  polygon = new PolygonFromPoints(world,
+    { x: 300, y: 0, points: points, color: 'white' }
+  );
+
+  // add a mouse to manipulate Matter objects
+  mouse = new Mouse(engine, canvas, { stroke: 'magenta', strokeWeight: 2 });
+
+  // run the engine
+  Matter.Runner.run(engine);
+}
+
+function draw() {
+  background('black');
+  ground.draw();
+  pentagon.draw();
+  polygon.draw();
+  mouse.draw();
+}
diff --git a/README-detailed.md b/README-detailed.md
@@ -4,6 +4,7 @@ p5.js × matter.js
 ## Examples
 * [1-basics](https://b-g.github.io/p5-matter-examples/1-basics/)
 * [1-mouse](https://b-g.github.io/p5-matter-examples/1-mouse/)
+* [1-polygon](https://b-g.github.io/p5-matter-examples/1-polygon/)
 * [1-sprites](https://b-g.github.io/p5-matter-examples/1-sprites/)
 * [1-stacks](https://b-g.github.io/p5-matter-examples/1-stacks/)
 * [1-wrap-coordinates](https://b-g.github.io/p5-matter-examples/1-wrap-coordinates/)
