Matter.JS Testing

I made a little progress in testing Matter.JS. I managed to create a few elements and show the constraint line that attaches to a box. I also got the background color to change without using the "window ['HYPE_DEBUG_PHYSICS'] = true;" head script.

There is a caveat though, all of the Matter.JS world is outside of Hype's stage.

Another caveat is that you have to have an element with its Physics set to Static or Dynamic or the MATTER WORLD will not show in Preview. But it's Still Fun to Play With!

matter_example2.hype.zip (11.4 KB)

You'll need to pick apart the hype file to see how I got things to work.

I cleaned up the script...

Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
engine = Engine.create();

render = Render.create({
element: document.body,
engine: engine,

options: {
    width: 825,
    height: 650,
    pixelRatio: 1,
 // background: 'green', // does not seem to work
 	wireframeBackground: 'blue',
    hasBounds: false,
    enabled: true,
 // wireframes: true,
    showSleeping: false,
    showDebug: false,
    showBroadphase: false,
    showBounds: false,
    showVelocity: false,
    showCollisions: false,
    showSeparations: false,
    showAxes: true,
    showPositions: true,
    showAngleIndicator: false,
    showIds: true,
    showShadows: false,
    showVertexNumbers: false,
    showConvexHulls: false,
    showInternalEdges: false,
    showMousePosition: false  
}
 });

var circleA = Bodies.circle(235, 30, 45, { isStatic: false }); // x, y radius -- 'isDynamic: true' works too
var boxB = Bodies.rectangle(175, 150, 100, 50, { isStatic: false } ); 
var boxC = Bodies.rectangle(330, 320, 80, 80, { isStatic: true }); // (x, y, w, h) x,y are center of box (x = horizontal, y = verticle) 
var ground = Bodies.rectangle(400, 600, 810, 60, { isStatic: true }); // bottom rectangle

var constraint = Matter.Constraint.create({
bodyA: boxC, 
pointA : { x : -75, y: -305}, // place point A of constraint
bodyB: boxB, 
pointB : { x : 50, y: 0}, // attach constraint to boxB
stiffness: 0.005,
length: 200,

render: {
type: 'spring', // can be 'line' or 'pin'
visible: true, // false will hide the lines in hype_debug_physics
lineWidth: 6,
strokeStyle: 'green',
anchors: true, // shows anchor points --seems it's not working?
}});

World.add(engine.world,[circleA, boxB, boxC, ground, constraint]);
Engine.run(engine);

Render.run(render);

matter_example3.hype.zip (11.7 KB)

3 Likes

Nice! It looks like you’re basically using Hype to get easy access to Matter :slight_smile:.

The reason you need at least one element to be static/dynamic is that otherwise Hype won’t know to include the physics runtime. I have it on my todo list to have some sort of manual override for this.

2 Likes

Would HyperEdit be a better tool for working with Matter.js? It would be nice to have a browser screen that updates as you enter code!

1 Like

Love it!
I want to get into this portion of the Beta but I have been pushing the vector tool as far as it will go and beyond.
I will have to stand on the shoulders of the Matter.JS Giants in this forum for any application moving forward :slight_smile:

1 Like

Very nice Greg.

It would be good if we could get the render to render the chain if we use Hype elements.
Indeed just use hype elements but with render type options applied.

With slight adjustment we can get your code to use Hype elements

All the hype elements are in a Group in this case so we can use the gruop as the world element. (fill colour set to blue )

But still do not get anof the render options working.

Interestingly , if you leave the world element as document.body and use the Hype element as the boxes you get both the full render which is using the Hype elements properties and also the Hype elements being controled by the world.

matter_examplevHypeElements.hype.zip (16.3 KB)

1 Like

This version has some more shapes added to the world…

matter_example4.hype.zip (12.2 KB)
Click on the red rectangle to start it.

2 Likes

Cool, Mark - set the height of your scene to 1200 px.

I get an almost duplicated world below the main world.

2 Likes

Wow Nick, I consider you to be amongst the Artistic Giant’s, you’re stuff makes a lot of folks smile. Plus, you do pretty dang good at coding too. That’s 2 4 2

1 Like

You can set the Opacity of the elements in Hype to Zero, hide the element, or turn the Display setting to Hidden

1 Like

Thanks Greg,

My goal is to use pure Hype elements. I have not had much time to really delve.
The render options and indeed render itself seem really for proofing/testing and not really for end production.

I saw there are some video tutorials on the Matter site which in one someone was using constraints pretty much how we did but the also where able to draw a line between objects. Unfortunately the code for a function that did all the work there used was not show. I also suspect that they created there own canvas which in part is what the render does for you.

I found out what was stopping the constraint from rendering. There is a line (#36) in the script that I commented out, now you can render the spring line.
matter_exampleHypeElements2.hype.zip (15.4 KB)

I changed this line to get Hype’s background (fill) color on the ‘Group’…

wireframeBackground: 'blue', 

to

wireframeBackground: 'transparent',

To get rid of the Matter World elements and keep the Hype elements simply change this line…

World.add(engine.world,[boxA, boxB, boxC, ground, constraint]);

to

World.add(engine.world,[constraint]);

matter_examplevHypeElements3.hype.zip (667.3 KB)

1 Like

@gasspence Greg,

You are The man. That works great. :+1: :+1:
Well done.

1 Like

Hey,

Just tested if the drag action for the box with the spring works. It does. Really well.

matter_examplevHypeElements3.hype 2.zip (668.1 KB)

1 Like

Ohhh, I like that!

1 Like

I also found that if you set the “Group’s” ‘top’ in the Placement Inspector to zero, it hides the duplicates (but they are still there)

We can also apply Michael’s “Physics Mini Templates”.

matter_examplevHypeElements4.hype.zip (668.3 KB)