New Clockwork Basis

b-g · Sep 25, 2024 · 97afd46 · 97afd46
1 parent 5c44147
commit 97afd46
Show file tree

Hide file tree

Showing 5 changed files with 256 additions and 0 deletions.
diff --git a/xx-benno-clockwork/background.png b/xx-benno-clockwork/background.png
diff --git a/xx-benno-clockwork/clockwork.html b/xx-benno-clockwork/clockwork.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="ByronStar">
+
+  <title>Clockwork</title>
+
+  <!-- p5js -->
+  <script src="../libraries/p5.js" type="text/javascript"></script>
+  <script src="../libraries/p5.sound.js" type="text/javascript"></script>
+
+  <!-- matter.js -->
+  <script type="text/javascript" src="../libraries/decomp.min.js"></script>
+  <script type="text/javascript" src="../libraries/pathseg.js"></script>
+  <script type="text/javascript" src="../libraries/matter.js"></script>
+
+  <!-- Javascript Klassen -->
+  <script type="text/javascript" src="../classes/Mouse.js"></script>
+  <script type="text/javascript" src="../classes/BlockCore.js"></script>
+  <script type="text/javascript" src="../classes/Block.js"></script>
+  <script type="text/javascript" src="../classes/BlocksFromSVG.js"></script>
+  <script type="text/javascript" src="../classes/Ball.js"></script>
+  <script type="text/javascript" src="../classes/Magnet.js"></script>
+  <script type="text/javascript" src="../classes/Parts.js"></script>
+  <script type="text/javascript" src="../classes/Polygon.js"></script>
+  <script type="text/javascript" src="../classes/PolygonFromPoints.js"></script>
+  <script type="text/javascript" src="../classes/Stack.js"></script>
+  <script type="text/javascript" src="../classes/PolygonFromSVG.js"></script>
+
+  <!-- Javascript Programm in separater Datei -->
+  <script type="text/javascript" src="clockwork.js" id="homework"></script>
+
+  <style>
+    body {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      overflow: hidden;
+      background-color: gray;
+    }
+
+    canvas,
+    #thecanvas {
+      position: absolute;
+      top: 0;
+    }
+
+    .overlay {
+      position: relative;
+      margin: 0 0 0 5px;
+    }
+
+    #sprite-background {
+      position: absolute;
+      width: 2560px;
+      height: 1600px;
+      background: url('./background.png') no-repeat;
+      z-index: -1;
+    }
+
+    #sprite-foreground {
+      position: absolute;
+      width: 2560px;
+      height: 1600px;
+      background: url('./foreground.png') no-repeat;
+      z-index: 1;
+      pointer-events: none;
+    }
+  </style>
+  <title>Pinball</title>
+</head>
+
+</head>
+
+<body>
+  <div id="sprite-background"></div>
+  <div id="thecanvas">
+    <canvas id="canvas">
+  </div>
+  <div class="overlay">
+    <input id="color" style="display: none;" type="text" value="#00800080" data-coloris>
+  </div>
+  <!-- <div id="sprite-foreground"></div> -->
+</body>
+
+</html>
diff --git a/xx-benno-clockwork/clockwork.js b/xx-benno-clockwork/clockwork.js
@@ -0,0 +1,150 @@
+const Engine = Matter.Engine;
+const Runner = Matter.Runner;
+const World = Matter.World;
+const Events = Matter.Events;
+const Bodies = Matter.Bodies;
+
+// the Matter engine to animate the world
+let engine, runner, world, mouse;
+let isDrag = false;
+// 4512 2538
+const dim = { w: 2560, h: 1600 }
+let off = { x: 0, y: 0 }
+let blocks = [];
+let murmel, canvasElem
+const testBall = 'red'
+
+// collisionFilter: {group: 0x00, category: 0b0000 0000 0000 0001, mask: 0b1111 1111 1111 1111}
+// collision of A and B: group > 0 && groupA == groupB          ,
+// no collision of A and B: group < 0 && groupA == groupB
+// groupA != groupB: 
+// collision of A and B ? (categoryA & maskB) !== 0 && (categoryB & maskA) !== 0
+const cfM = { group: 0, category: 0x0002, mask: 0x0021 }
+const cfX = { group: 0, category: 0x0004, mask: 0xFFFF }
+
+const setCollide = (cfA, cfB, on) => {
+  cfA.mask = on ? cfA.mask | cfB.category : cfA.mask & (~cfB.category & 0xFF)
+  // console.log(cfA.mask.toString(2))
+}
+const doesCollide = (cfA, cfB) => {
+  return (cfA.mask & cfB.category) !== 0 && (cfB.mask & cfA.category) !== 0
+}
+
+function preload() {
+}
+
+function setup() {
+  console.log(windowWidth, windowHeight);
+  canvasElem = document.getElementById('thecanvas')
+  let canvas = createCanvas(windowWidth, windowHeight);
+  canvas.parent('thecanvas');
+
+  engine = Engine.create();
+  runner = Runner.create({ isFixed: true, delta: 1000 / 60 })
+  world = engine.world;
+
+  mouse = new Mouse(engine, canvas, { stroke: 'blue', strokeWeight: 3 });
+
+  // Oder auch Test-Murmeln in Spiel bringen
+  mouse.on("startdrag", evt => {
+    isDrag = true;
+  });
+  mouse.on("mouseup", evt => {
+    if (!isDrag) {
+      addMurmel({ x: evt.mouse.position.x, y: evt.mouse.position.y }, testBall, murmel.body.collisionFilter)
+    }
+    isDrag = false;
+  });
+
+  // Hier wird registriert, ob die Murmel mit etwas kollidiert und
+  // dann die trigger-Funktion des getroffenen Blocks ausgelöst
+  // Dieser Code ist DON'T TOUCH IT - wenn das Bewdürfnis besteht, bitte mit Benno reden!!!
+  Events.on(engine, 'collisionStart', function (event) {
+    var pairs = event.pairs;
+    pairs.forEach((pair, i) => {
+      if (pair.bodyA.label == 'Murmel') {
+        pair.bodyA.plugin.block.collideWith(pair.bodyB.plugin.block)
+      }
+      if (pair.bodyB.label == 'Murmel') {
+        pair.bodyB.plugin.block.collideWith(pair.bodyA.plugin.block)
+      }
+    })
+  })
+
+  Events.on(engine, 'collisionActive', function (event) {
+    var pairs = event.pairs;
+    pairs.forEach((pair, i) => {
+      if (pair.bodyA.label == 'Murmel' && pair.bodyB.label == 'Active') {
+        pair.bodyA.plugin.block.collideWith(pair.bodyB.plugin.block)
+      }
+      if (pair.bodyB.label == 'Murmel' && pair.bodyA.label == 'Active') {
+        pair.bodyB.plugin.block.collideWith(pair.bodyA.plugin.block)
+      }
+    })
+  })
+
+  createScene();
+  // Den Motor von Matter starten: die Physik wird berechnet
+  Runner.run(runner, engine);
+}
+
+function createScene() {
+
+  new BlocksFromSVG(world, 'frame.svg', [],
+    { isStatic: true, restitution: 0.0, friction: 0.0, frictionAir: 0.0 },
+    {
+      save: false, sample: 40, offset: { x: -100, y: -100 }, done: (added, time, fromCache) => {
+        console.log('FRAME', added, time, fromCache)
+        added.frameB.attributes.trigger = (ball, block) => {
+          if (ball.attributes.color == testBall) {
+            Matter.Composite.remove(engine.world, ball.body)
+            blocks = blocks.filter(block => block != ball)
+          }
+        }
+      }
+    });
+
+  new BlocksFromSVG(world, 'static.svg', blocks,
+    { isStatic: true, restitution: 0.0, friction: 0.0, frictionAir: 0.0 },
+    {
+      save: false, sample: 10, offset: { x: 0, y: 0 }, done: (added, time, fromCache) => {
+        console.log('STATIC', added, time, fromCache)
+      }
+    });
+  murmel = addMurmel({x: 700, y: 300}, '#404040', cfM)
+}
+
+function addMurmel(point, color, filter) {
+  const ball = new Ball(
+    world,
+    { x: point.x, y: point.y, r: 30, color: color },
+    {
+      label: "Murmel", restitution: 0.0, friction: 0.0, frictionAir: 0.0, isStatic: false,
+      collisionFilter: filter
+    }
+  )
+  blocks.push(ball)
+  return ball
+}
+
+function scrollEndless(point) {
+  // wohin muss verschoben werden damit point wenn möglich in der Mitte bleibt
+  off = { x: Math.min(Math.max(0, point.x - window.innerWidth / 2), dim.w - window.innerWidth), y: Math.min(Math.max(0, point.y - window.innerHeight / 2), dim.h - window.innerHeight) }
+  // plaziert den Canvas im aktuellen Viewport
+  canvasElem.style.left = Math.round(off.x) + 'px'
+  canvasElem.style.top = Math.round(off.y) + 'px'
+  // korrigiert die Koordinaten
+  translate(-off.x, -off.y)
+  // verschiebt den ganzen Viewport
+  window.scrollTo(off.x, off.y)
+  mouse.setOffset(off)
+}
+
+function draw() {
+  clear();
+  if (murmel) {
+    scrollEndless(murmel.body.position)
+  }
+  blocks.forEach(block => block.draw());
+  mouse.draw();
+}
diff --git a/xx-benno-clockwork/frame.svg b/xx-benno-clockwork/frame.svg
diff --git a/xx-benno-clockwork/static.svg b/xx-benno-clockwork/static.svg