💬
Get Help
LT
Laurent Tran

How to run a dynamic data visualization with a javascript library like p5js.org (i.e. Processing)

Hello everyone,

I searched the forum but I could not find any question on using a javascript drawing library like p5js.org or three.js.

I prototyped a stock screener in javascript, html, and css without using any framework to learn how to code from scratch, and also built some custom animation with the drawing library p5js.org.

I managed to get a basic prototype works but it is ugly and cluncky, and it does not have authentication. So I was looking a no-code/low-code platform to rebuild it pretty and scalable. That is when i stubbled upon Flutterflow.

But looking at the widgets, I am not sure how I can add a new script source in the <head> element and how i can i can specify and id for a <div> element, which would be used to display the visualization in webgl canvas.

I pasted below a skeleton code to show how this is done on a basic webpage with html and javascript.

My hope is that "custom widget" could be used to set this up. Then I would create a menu bar and filter widget using the Flutterflow UI components, which would pass a json object to this "custom" widget to update the visualization.

I am new to flutterflow, i ll keep searching through the documentation, but it would be great if someone could confirm if there is a way to integrate a javascript drawing library like p5js.org.

Thanks!!!! Laurent

<html>
  <head>
    <title>My Sketch</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <p>Here is my sketch:</p>
    <div id="sketch-holder">
      <!-- Our sketch will go here! -->
    </div>
    <p>Pretty cool, eh?</p>
  </body>
</html>

function setup() {
  var canvas = createCanvas(100, 100);
 
  // Move the canvas so it’s inside our <div id="sketch-holder">.
  canvas.parent('sketch-holder');

  background(255, 0, 200);
}

2