Mathogen

Tonight I’m recording a blog post video. I didn’t know you could stream directly from your iPhone wirelessly with OBS. I’m doing that now and it’s working really well. I’m not sure what to film, my hands typing or the fish tank in front of me. But anyway, I wanted to post on what I am doing tonight.

Just finished exporting the newest version of Mathogen to WebGL. I rewrote the entire app in the Unity game engine. You can play it for free here while I develop it: https://mathogen.com/play/

So I finally got the mouse to access the body to remove it. Next step is to check to see if the value in the body matches the value in the question. Also gotta clean up the arrays once I remove the body to make sure I don’t introduce any “off by one” errors into the code.

Here’s the code for removing a body from the Matter.World.remove(world, body):

  
// - - - - - - - - - - - - - - - - -
// Sets up mouse constraints
// - - - - - - - - - - - - - - - - -

var mouseConstraint = Matter.MouseConstraint.create(engine, {
    element: canvas,
    constraint: {
        render: {
            visible: false
        },
        stiffness: 0.8
    }
});

Matter.World.add(world, mouseConstraint);

// Keep track of the mouse state
var mouseIsDown = false;

Matter.Events.on(mouseConstraint, 'mousedown', function (event) {
    var body = mouseConstraint.body;
    var ballId = body.id;
    var ballValue = balls[ballId - 1];
    console.log("mouse down on body with id:" + " " + ballId);
    console.log("ball value is:" + " " + ballValue);
    var mousePosition = event.mouse.position;
    mp = mousePosition;
    mouseIsDown = true;

    // Removes the body from the world
    Matter.World.remove(world, body);
});

Matter.Events.on(mouseConstraint, 'mouseup', function (event) {
    // console.log("mouseup called");
    var mousePosition = event.mouse.position;
    mp = mousePosition;
    mouseIsDown = false;
});
  

Ok so I finally got the mouse events to trigger in the console. I can now report back that I can observe mouse state. The next step is to get the body from the mouseConstraint.

Here’s the mouseconstraint code that’s working for me:

// - - - - - - - - - - - - - - - - -
// Sets up mouse constraints
// - - - - - - - - - - - - - - - - -

var mouseConstraint = Matter.MouseConstraint.create(engine, {
    element: canvas,
    constraint: {
        render: {
            visible: false
        },
        stiffness: 0.8
    }
});

Matter.World.add(world, mouseConstraint);

Matter.Events.on(mouseConstraint, 'mousedown', function (event) {
    console.log("mousedown called");
    var mousePosition = event.mouse.position;
    mp = mousePosition;
    mouseIsDown = true;
});

Matter.Events.on(mouseConstraint, 'mouseup', function (event) {
    console.log("mouseup called");
    var mousePosition = event.mouse.position;
    mp = mousePosition;
    mouseIsDown = false;
});

So I made a big breakthrough today. I got the mouse constraints kind of working. Kind of, in that I updated the mouse constraints code but I still can’t get the body out of the mouseConstraint.

Today I added a label to the game. I put it in a body and wrote an image over it. Next steps will be to remove that image on mouse click. And replace it with a new question.

Still not understanding the mouse constraint concept in Matter js. I believe I’ll get to work with some source code on the matter js website.

Ok so I wanted to do something different tonight for development. I’m going to make some predictions – how many things can I get accomplished tonight?

I believe that I will do the following tonight:

1. Make the ball bigger
2. Make touch respond to show which ball I have selected by turning it red after touch
3. Make the ball disappear from the physics world

Here are the things I want to do but I don’t know if I’ll be able to accomplish in 1 hour:

• Adjust the time dilation on press
• Display the question
• Display the number correct

Here we go, I’m setting the timer now – 1 hour. Start!

Results:

Ok so I managed to get one thing on my list done. I can’t figure out how to use the mouse constrains to find out which body I am selecting with my mouse.

I’ll keep researching! Contact me if you have any questions or advice 🙂

Today I coded up some walls in Matter.js and added them to the Mathogen window. I added some code to create an image from a string of text.

I’m curious to know if the JS string can hold a Hiragana character?

Here’s the javascript code to create an image in javascript from a text string.

// Creates an image from a string

functioncreateImage($string) {

letdrawing=document.createElement("canvas");

drawing.width='150'

drawing.height='150'

letctx=drawing.getContext("2d");

ctx.fillStyle="black";

//ctx.fillRect(0, 0, 150, 150);

ctx.beginPath();

ctx.arc(75, 75, 20, 0, Math.PI*2, true);

ctx.closePath();

ctx.fill();

ctx.fillStyle="#fff";

ctx.font="20pt sans-serif";

ctx.textAlign="center";

ctx.fillText($string, 75, 85);

// ctx.strokeText("Canvas Rocks!", 5, 130);

returndrawing.toDataURL("image/png");

}

Ok, this may not seem like much. But I’ve been trying to get this ball to show up on the screen for a day now. I finally did a search past the first page and found this tutorial: https://alexandergottlieb.com/2017/01/19/matter.js-the-missing-tutorial/

There were 2 parts I had to get going correctly:

• Setting up the canvas in the html with the canvas tag
• Including the script in the body tag

Here’s the code that is working for me:

index.html

<!DOCTYPE HTML>

<html>

<head>

<title>Mathogen - Matter.js</title>

</head>

<body>

<canvas id="world"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"></script>

<script src="mathogenMatter.js"></script>

</body>

</html>

mathogenMatter.js

window.addEventListener('load', function () {

//Fetch our canvas

varcanvas=document.getElementById('world');

//Setup Matter JS

varengine=Matter.Engine.create();

varworld=engine.world;

varrender=Matter.Render.create({

canvas: canvas,

engine: engine,

options: {

width: 500,

height: 500,

background: 'transparent',

wireframes: false,

showAngleIndicator: false

}

});

//Add a ball

varball=Matter.Bodies.circle(250, 250, 50, {

density: 0.04,

friction: 0.01,

frictionAir: 0.00001,

restitution: 0.8,

render: {

fillStyle: '#F35e66',

strokeStyle: 'black',

lineWidth: 1

}

});

Matter.World.add(world, ball);

//Add a floor

varfloor=Matter.Bodies.rectangle(250, 520, 500, 40, {

isStatic: true, //An immovable object

render: {

visible: false

}

});

Matter.World.add(world, floor);

//Make interactive

varmouseConstraint=Matter.MouseConstraint.create(engine, { //Create Constraint

element: canvas,

constraint: {

render: {

visible: false

},

stiffness: 0.8

}

});

Matter.World.add(world, mouseConstraint);

//Start the engine

Matter.Engine.run(engine);

Matter.Render.run(render);

});

Ok, I’ve decided which framework I’m going to use. I’ve decided to use Matter.js because it looks really cute, the code looks clean, and it seems like it’ll be a fun framework to work with.

The demo looks fast and responsive as hell. I have questions about the responsiveness of the mouse clicks. However, from what I’ve seen in the demo, the physics library doesn’t even flinch at 60+ objects on the screen at once.

I’m excited to get started on creating the physics world in the app with Matter.js. Please contact me if you have any questions for me!