Skip to content

Commit

Permalink
Loading
Loading status checks…
Update of exercise 7
Browse files Browse the repository at this point in the history
ByronStar committed Sep 12, 2024
1 parent 9c221e6 commit a9d3893
Showing 3 changed files with 118 additions and 53 deletions.
Binary file added xx-benno-step7/backdrop.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 24 additions & 4 deletions xx-benno-step7/index.html
View file
Original file line number Diff line number Diff line change
@@ -52,7 +52,8 @@
color: #ffa312;
}

canvas {
canvas,
#thecanvas {
position: absolute;
top: 0;
}
@@ -61,12 +62,30 @@
position: relative;
margin: 20px;
}

#sprite-background {
position: absolute;
width: 3840px;
height: 2160px;
background: url('./backdrop.jpg') no-repeat;
z-index: -1;
}

#sprite-foreground {
position: absolute;
width: 3840px;
height: 2160px;
background: url('./overlay.png') no-repeat;
z-index: 1;
pointer-events: none;
}
</style>
</head>

<body>
<div id="thecanvas">
</div>
<div id="sprite-background"></div>
<!-- p5 canvas is generated on run time -->
<div id="thecanvas"></div>
<svg id="svg" style="display: none" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="puzzle"
d="M92.556,359c16.79,0,22.473-9.002,29.312-15.825C135.833,329.159,153,335.128,153,357.71V462h104.29 c22.582,0,28.551-17.167,14.544-31.131c-6.832-6.84-15.834-12.523-15.834-29.321C256,382.889,275.028,359,307.5,359 s51.5,23.889,51.5,42.548c0,16.798-9.002,22.481-15.825,29.321C329.159,444.833,335.128,462,357.71,462H462V357.71 c0-22.582-17.167-28.551-31.131-14.535c-6.84,6.823-12.523,15.825-29.321,15.825C382.889,359,359,339.972,359,307.5 s23.889-51.5,42.548-51.5c16.798,0,22.481,9.002,29.321,15.834C444.833,285.841,462,279.872,462,257.29V153H357.71 c-22.582,0-28.551-17.167-14.535-31.131c6.823-6.84,15.825-12.523,15.825-29.312C359,73.889,339.972,50,307.5,50 S256,73.889,256,92.556c0,16.79,9.002,22.473,15.834,29.312C285.841,135.833,279.872,153,257.29,153H153v104.29 c0,22.582-17.167,28.551-31.131,14.544C115.029,265.002,109.346,256,92.556,256C73.889,256,50,275.028,50,307.5 S73.889,359,92.556,359z" />
@@ -89,6 +108,7 @@ <h3>Info</h3>
</ul>

</div>
<!-- <div id="sprite-foreground"></div> -->
</body>

</html>
</html>
143 changes: 94 additions & 49 deletions xx-benno-step7/sketch.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
const Engine = Matter.Engine;
const Runner = Matter.Runner;
const Bodies = Matter.Bodies;
const Events = Matter.Events;
const World = Matter.World;
const Events = Matter.Events;
const Bodies = Matter.Bodies;

// the Matter engine to animate the world
let engine;
let world;
let mouse;
let engine, runner, world, mouse;
let isDrag = false;

// some sizes to allow view follow and endless scrolling
const dim = { w: 3840, h: 2160 }
let off = { x: 0, y: 0 }
let canvasElem

// an array to contain all the blocks created
let blocks = [];

// the "Murmel"
let murmel;
let propeller, riesenrad;
let angleProp = 0;
let angleRad = 0;
@@ -26,12 +32,66 @@ function preload() {
}

function setup() {
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;

// Während der Enticklung der Murmelbahn kan man mit der Maus eingreifen
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) {
let ball = new Ball(world,
{ x: evt.mouse.position.x, y: evt.mouse.position.y, r: 15, color: 'yellow' },
{ isStatic: false, restitution: 0.9, label: 'Murmel' });
blocks.push(ball);
}
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 Bedü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)
}
})
})

// Die Murmelbahn erzeugen
createScene();
// Den Motor von Matter starten: die Physik wird berechnet
Runner.run(runner, engine);
}

function createScene() {

// create some blocks
// the blue box triggers a function on collisions
blocks.push(new BlockCore(
@@ -83,11 +143,12 @@ function setup() {
));

// the ball has a label and can react on collisions
blocks.push(new Ball(
murmel = new Ball(
world,
{ x: 300, y: 300, r: 30, color: 'magenta' },
{ label: "Murmel" }
));
)
blocks.push(murmel);

// create a rotating block - propeller
propeller = new Block(
@@ -130,7 +191,6 @@ function setup() {

blocks.push(new PolygonFromSVG(
world,

{ x: 580, y: 710, fromFile: './path.svg', scale: 0.6, color: 'yellow' },
{ isStatic: true, friction: 0.0 }
));
@@ -207,14 +267,14 @@ function setup() {

const gondel = new PolygonFromSVG(
world,
{ x: pos.x + x, y: pos.y + 30 + y, fromFile: './gondel.svg', color: 'yellow', sample: 10 },
{
x: pos.x + x, y: pos.y + 30 + y, fromFile: './gondel.svg', color: 'yellow', sample: 10, done: (added, isSync) => {
// console.log('DONE', added, isSync)
added.constrainTo(riesenrad, { pointA: { x: 0, y: -10 }, pointB: { x: x, y: y }, stiffness: 1.0, damping: 0.9, color: 'yellow', draw: true, });
}
},
{ isStatic: false }
)

// for some reason, the constraints need to be added "later"
setTimeout(() => {
gondel.constrainTo(riesenrad, { pointA: { x: 0, y: -10 }, pointB: { x: x, y: y }, length: 50, stiffness: 1.0, damping: 0.9, color: 'yellow', draw: true, });
}, 100)
blocks.push(gondel);
}

@@ -224,49 +284,34 @@ function setup() {
{ x: 800, y: 100, points: [{ x: 0, y: 0 }, { x: 20, y: 10 }, { x: 200, y: 30 }, { x: 220, y: 50 }, { x: 10, y: 20 }], color: 'olive' },
{ isStatic: true, angle: 0.1 }));

setInterval(() => {
setInterval(() => {
blocks.push(new Ball(world,
{ x: 800, y: 80, r: 15, color: 'magenta' },
{ x: 800, y: 80, r: 15, color: 'lime' },
{ isStatic: false, restitution: 0.9, friction: 0.0 }))
}, 5000)

// add a mouse so that we can manipulate Matter objects
mouse = new Mouse(engine, canvas, { stroke: 'blue', strokeWeight: 3 });
// const mouseScale = 1 + (1 / (scale / (1 - scale)))
// Mouse.setScale(mouse, { x: mouseScale, y: mouseScale });

// process mouseup events in order to drag objects or add more balls
mouse.on("startdrag", evt => {
isDrag = true;
});
mouse.on("mouseup", evt => {
if (!isDrag) {
let ball = new Ball(world,
{ x: evt.mouse.position.x, y: evt.mouse.position.y, r: 15, color: 'yellow' },
{ isStatic: false, restitution: 0.9, label: 'Murmel' });
blocks.push(ball);
}
isDrag = false;
});
}

// process collisions - check whether block "Murmel" hits another Block
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)
}
})
})
// run the engine
Runner.run(engine);
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() {
background(0, 60);
clear();

if (murmel) {
scrollEndless(murmel.body.position)
}

// animate attracted blocks
magnet.attract();

0 comments on commit a9d3893

Please sign in to comment.