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

HOnatToprak · April 28, 2019, 3:42pm

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.

github.com

HOnatToprak/islands_interface/blob/master/assets/js/app.js

// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import css from "../css/app.css"

// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"

// Import local files
//
// Local files can be imported directly using relative paths, for example:
import socket from "./socket"
import myp5 from "./sketch"

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.

HOnatToprak · April 28, 2019, 9:09pm

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.

peerreynders · April 28, 2019, 10:02pm

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.

mythicalprogrammer · April 28, 2019, 10:49pm

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.