I wanted to add a library that draws something on the canvas.
For example - https://tsherif.github.io/picogl.js/
All of these libraries need access to canvas. However, I don't know how to pass this parameter.
Matter.js also has a special 'Renderer' module that allows you to draw objects as the engine "sees" them (acceleration vector, collision points).
Can you somehow get the canvas on which the image is drawn??
Here is an example of how you can reach the canvas:
init = function()
system.javascript("""
global.canvas = window.player.runtime.screen.canvas
global.context = global.canvas.getContext("2d")
""")
end
draw = function()
screen.clear("#222")
context.fillStyle = "#FFF"
context.fillRect(0,0,10,10)
end
However, the canvas will be a 2d canvas ; I don't think you can mutate it to a WebGL canvas. Another thing you can do could be to use JavaScript to create another canvas and add it to the DOM so that it displays on top of the microStudio canvas. This way you could create any kind of canvas.
Very interested in seeing what you will do with picogl.js, please keep us posted!
WebGL has off-screen rendering capabilities. At the end it is enough to rewrite this image on a canvas ( OffscreenCanvas ) .
I tried to pass the canvas to the "new Matter.Rander(...)" object as you showed - but it doesn't work. The graphics engine does not draw.
In September, when "Jam#3" was released, I discovered that the "setRGB" function draws very slowly. I could draw 600 circles at 60 FPS. I thought that changing to the "setRGB" function which puts only 1 pixel will improve the performance.
But it turned out differently - the performance was worse. I lost 45 frames drawing only 600 pixels at 15 FPS.
I looked at the code - there was nothing that could slow down the program.
I only guessed that "getImageData" and "putImageData" must be slowing it down. In the internet I also found information that these functions are slow because they exchange a lot of information between the card memory and the system memory.
I wrote a function that retrieves data once ( rgbBeginUpdate ) and writes to the graphics card once ( rgbEndUpdate ) and a function that sets pixels ( setRGBFast ) .
It worked - now 600 pixels are put at 60 FPS.
I moved this code to the "msimage.js" file.
I wanted to share this code but here the problems start.
To use my routines you have to write them into a file yourself or download a fork with this github code.
I thought that no one will do it because it's too much trouble (you have to download "node" and set up a server). That was until I looked at the code from the 'Neural Network' library. There are 2 languages in the code - MicroScript2 and Javascript. It's fantastic. I tried moving the entire "msimage.js" file inside the project (with my extra functions). It worked - the objects are created, they have fields, and I can call their methods.
One function, however, does not work - when I want to redraw the contents of the object to the screen, there are no visible effects.
See code >>> https://microstudio.io/i/Loginus/inject/ .
I'm guessing there's something wrong with the canvas.
If this code worked, you could easily share libraries that work on the MicroScript level and you wouldn't have to fork the code on github.
I added PicoGL ( picogl.min.js ) to the project in the same way - I have no idea how to transfer the image from this library to the "Image" object.
Link to the code >> https://microstudio.io/i/Loginus/webgl/
Easily adding such libraries in javascript and working with MicroScript2 would be a nice feature.