P5js on Tumblr Discussion - How to? [not solved]

p5.js
1

Hi! I know this is a broad question but I think its not only mine and I can’t find a discussion over this anywhere. Please excuse any typos or mistakes in my writing because I’m not a native English speaker. Let’s cut to the point -
I’ve been trying to implement some p5 code into my Tumblr, and here is where I’ve gotten so far:

1 - I’ve manage doing it for a very simple sketch using the Theme Resources on Tumblr (I’ve added the full p5.js and p5.dom.js libraries and a simple sketch.js file).
2. As soon as I tried more complex sketches with instance mode or classes and functions outside the setup and draw functions Tumblr said i’m not allowed to upload these files. NOTE that these sketches are fully functional on my computer using node.js to run a local server, so it is not a problem with the code itself, but with implementing it on Tumblr.
3 - I’ve trying writing the skecth on Instance Mode directly on the HTML inside script tags but that doesn’t work, it seems p5 needs a separate “.js” file named “skecth.js”, and this file pointed on on the html page for it to work. Is this actually the case, can’t I write p5 code directly on the HTML? For example:

<script>
var sketch1 = function(p){
     /* setup, draw, classes and other functions here */
};

var myp5 = new p5(sketch1, "canvas1");
</script>
...
<body>
  <div id = "canvas1">
  ...

4 - I’ve found a way to post Processing sketches as Tumblr posts (Insert sketch in tumblr) but I want p5.js sketches and not Processing ones, and I can’t find anywhere how to do this.

So, If possible I would like to insert running p5.js sketches on my Home Page via the Theme HTML but also posting text with some running simple sketch would be great (I know I would have to use Instance Mode to create multiple canvas). But if not possible at least having an animation running on the background of the home page would be fine.

1 Like
2

What class p5’s constructor requires is that a callback function reference is passed to it as its 1st argument, not a file.

Placing JS scripts in separate files, rather than inside HTML 1s, is for organizational purposes.

The name “sketch.js” is merely a tradition within Processing community.

You can use any other name for your JS files, of course.

Inside HTML files, we’re better off just loading JS files inside <script> tags rather than placing actual JS code there.

1 Like
3

Ok, so do you have any idea why does it not work on Tumblr if source the p5 library and then write a simple sketch inside the script tag like my example bellow, but I put in a file called sketch.js and then upload this file it does work? Note that for files with classes and functions It still doesnt work, but maybe this is a Tumblr security issue I dont know.

4

I’ve never used Tumblr and don’t know how it works, sorry.

If you’ve got the complete address link for your “sketch.js” file it should just work.

Be aware also that an HTTPS site can’t load files from an HTTP 1.

Be sure that the files containing your classes & functions are loaded before the files which access them.

5

Yes I’m aware of all that, its not that, but thanks anyway :slight_smile:

6

Have you tried looking for p5js posts on Tumblr that are tagged instance mode?

https://p5zoo.tumblr.com/post/160339799978/mechanism-draw/embed

See if anybody else has got it working.

Maybe something here?