search

b-g / p5-matter-examples

Examples showing how to combine p5.js and matter.js.
109 stars 27 forks source link

Add example "matter camera" #7

Open b-g opened 2 years ago

b-g commented 2 years ago

https://codepen.io/csims314/pen/goZQvG

stephanbogner commented 2 years ago

Some thoughts:

  1. Matter.js has something similar like a camera because in the Renderer you can set what the renderer should look at
    • But if I understand correctly we are using P5 as a renderer, so that functionality is not available to us
  2. If I understand the example @b-g posted correctly, they are just using translate and scale on the canvas context to simulate a camera
    • We could produce a similar result with push/pop as this apparently is what p5 is doing under the hood anyways
    • I don't know how well this would translate into a class though ... as the push would have to happen at the beginning of the draw and pop at the end
    • For the parallax example I now used push & pop without a camera class and it works fine (and is in line to what the folks have learned in the rest of the semester) ...
    • ... but I'd imagine that it would interfere with coordinates from mouse input, like in 6-add-remove-bodies (but I have not verified how mouseX/mouseY works in combination with push/pop/scale)
    • I think the fundamental problem is that p5 doesn't have the concept of viewports/cameras
      • It's quite sad, because in game engines like in Godot this is basic stuff

→ I am not sure how feasible it is to add a camera class with our P5 + Matter setup :( (At least one which doesn't interfere with mouse input and/or isn't super weird to use ... or am I missing something?)

stephanbogner commented 2 years ago

Nevertheless, ground work can be found in the new camera follow example.