Can not figure out addin p5js to Phoenix(Noob Question)

Hello,
I am new to elixir, phoenix and web development.
I try to implement islands game in book Functional Web Development with Elixir, OTP, and Phoenix.The book has nothing to do with UI of the game and i would like to implement it p5.js.
I couldn’t figure out adding p5js in the project.

In this file, socket.js executes perfectly, but p5 not works in the same way.(Check out other files if you need)

I tried to add p5.js in same way to app.js but it is not working, and i couln’t find any solution.
This is about my lack of knowlage guys.I would be more appreciated if you reference me guides and docs to handle phoenix frontend things(maybe js things) rather than fix.

I figured it out guys.
Apparently, I should have been used instance mode of p5js.
This is the changes i have made

I guess it has something to do do with webpack not exposing these functions to window or something idk.
I just wanted to write fast ui with no hassle.

Welcome to the forum.

Have a look at
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

to understand why.

The p5.js Getting Started is using classic script - which tends to just dump everything in the global namespace. The import in the app.js is an indication that you are dealing with ES2015 module script which improve isolation and webpack is one of many bundlers designed to assemble a page bundle from many modules.

1 Like

I had an interview in early 2010s before ES2015.

I was using these design patterns to create constructors and encapsulate functions to create their own namespace… needless to say the guy didn’t invite me to the second round.

He totally asked me to make the code nicer. I thought not polluting the global namespace was a good thing. Good thing I didn’t try prototype inheritance.