How to integrate a p5 canvas in an interactive map

grab06

hello,

I'm developping a personnal project around the "concept of" interactive map.

On this interactive map, I would like to gather as many as possible of information related to one specific thematic.

I mean, I will represent static information (markers, geographical forms ...) and dynamic information (pathes, animations ...). The dynamic information and animations are scheduled according to a global timer (day by day, hour by hour ...). I may have several tens of thousand information per map ...

I've started prototyping the project using leaflet and some of its addons. Leaflet uses the concept of layers to manage different level of information or interactions with the user.

One of these addons is canvasLayer.js that I use for the dynamic part of the project. I can add a canvas layer to the interactive map and draw on this canvas. Being integrated to the leaflet map, this canvas layer is automatically managed when resizing, moving, spanning and managing the user interaction. But, to me, I suffer from a lack of algorithms for drawing all kinds of dynamic objects and then I have to implement most of them by myself ...

On the other hand , p5.js offers a huge amount of animation of all kinds (steering behavior, ...) that I would like to integrate in my interactive map.

Now I'm at the point to ask my questions:

Is it feasible to integrate the p5.js library in a leaflet interactive map? if yes ... how to do that?

I could replace leaflet by mapbox, as long as I keep the concept of interactive map.

I'm open to any discussion about different approach in order to reach the same goal.

Could you help me please?

Thanks

GoToLoop

• Never heard of Leaflet. Theoretically, p5.js can be used together w/ other JS libraries.
• However, you need to check out if their "styles" conflict w/ 1 another.
• In p5.js we've got a draw() function which is called back at about 60 FPS.
• Also, every p5.js sketch is bound to 1 main HTMLCanvasElement.
• Perhaps this tutorial video can help you out:

grab06

Thanks for pointing me on this excellent video !!!

Right now, I would say that I envision to do the opposit of what David (correct me if I'm wrong) is explaining.

I mean David is adding a mapbox map as a background image to a p5 canvas and then David uses the "scheduler (mechanism)" of the p5 canvas to draw the information onto the background map.

As for me, I think I need to "add" a p5 canvas into a map and then to use the map scheduler to call the draw function of p5.

The reason I tend to do that is that the map scheduler allows, as I said, multiple layers which each layer a specific behavior. The canvas being one these layers.

I'm new with p5, but let me explain my understanding of p5 to check if it's correct ... - p5 is a mechanism to schedule drawings on a canvas, somewhere, I think it is calling kind of "requestAnimFrame" function to refresh the drawing. - p5 offers one setup() function to initialize and one draw() function to draw the changes. - p5 is made of a collection of many libraries functions to implement all the required functionalities. These many libraries functions are called from the setup() or draw() p5 functions.

Is this correct?

The scheduler of the "leaflet canvasLayer" addon is doing quite the same as also calling a "requestAnimFrame" function.

then ...

I'm wondering whether I could ... - A - either instantciate p5 from withing the map scheduler of the "leaflet canvasLayer" addon. Rather difficult because of potential conflicts ... - B - either restrict the usage of p5 to the collection of the many libraries functions ... and then let the scheduler of the "leaflet canvasLayer" addon does the same as the p5 scheduler ...

Thanks for reading me, any though on this?

GoToLoop

• Dunno whether you've already found out, but p5.js has a rudimentary "layer" mechanism.
• Look at createGraphics() for it: https://p5js.org/reference/#/p5/createGraphics
• Also, p5.js has a "hidden" system variable called canvas.
• Which btW points directly to its main HTMLCanvasElement.
• If your external library also happens to have a "canvas", you can pass variable canvas to it.
• So they can both share the same HTMLCanvasElement. :ar!

grab06

thank you very much,

I'm trying to clarify things based on the directions you pointed me on.

I need to dig a bit more and I'll come bask to you.

have a good day.

jeremydouglass

use the map scheduler to call the draw function of p5.

I haven't tried, but it sounds like you would be setting noLoop() and then calling draw() or redraw().

kfrajer

Check this:

https://forum.processing.org/two/search?Search=mapbox

For instance:

https://forum.processing.org/two/discussion/comment/93128/#Comment_93128

I am not addressing your latest post but your initial question. I hope it helps.

Kf