Load a different background sketch and automatically change each 30 seconds

Dear friends.

I wanna use P5.js to make animated backgrounds on a website, but I never found a JS function to load a sketch like:


With that, I can make a random function to each refresh of the page load a different sketch, I can make a timer on JS to each 30 seconds change the background visual or I can put a button with Jquery when I press it I can change the background sketch.

Unfortunately, directly in HTML with , and this not allow to load and unload another sketch dynamically.

I looked at Instance mode but I don’t think this is what I need, there I didn’t found the answer…

Here is a zip with the project:

I hope this is really possible to do that and you can help me!

I’m looking for a pure client side code…


You can check this old thread as a starting point:

Oh man! Really cool!

It looks to be exactly what I need, yeah it’s something complex as I can see…

But there is a problem, the json file is not available…


And your git is aparently dead…


If I understand well, the json is like a processing sketches playlist?

Not mine.

They’ve removed it. Here’s a sample on how it used to be:


    "title": "Should display squares",
    "author": "Name of author",
    "description": "Lorem Ipsum",
    "kind": "javascript",
    "href": "https://codiceinutile.github.io/website-dev/js/hero/federico.js",
    "includes": [
    "title": "Should display circles",
    "author": "Name of author",
    "description": "Lorem ipsum",
    "kind": "javascript",
    "includes": [
   "href": "https://codiceinutile.github.io/website-dev/js/hero/alka.js"
    "title": "PixelDawn",
    "author": "Matteo Testa",
    "description": "Processing",
    "kind": "javascript",
    "includes": [
   "href": "https://codiceinutile.github.io/website-dev/js/hero/matteo.js"
     "title"        : "Hypnotic lines",
     "author"       : "Federico Pepe",
     "description"  : "Un progetto di Federico Pepe",
     "url"         : "/project/2016/12/30/esempio_project.html",
     "href"         : "https://codiceinutile.github.io/website-dev//js/projects/test_1.js",
     "includes"     : [
     "title"        : "Retini",
     "author"       : "cybermarinella",
     "description"  : "p5",
     "url"         : "/project/2016/01/01/esempio_project_mari.html",
     "href"         : "https://codiceinutile.github.io/website-dev//js/projects/retini.js",
     "includes"     : [

A much simpler approach would be to load each sketch inside an <iframe>:

Thanks! But I follow having:

  • ERROR! JSON file loading failed!!!

Is there something I did bad?

I tried in local and on a FTP, I changed the json file urls…

Go here and paste the contents of your “homepage.json” file:

You have trailing commas on both array properties includes!

Yeah! The JSON Tester! Thanks for sharing this tool! Here was the error! Well done dude!

Now another error I have, when I push the Run Another Random Sketch, I have a JS error, it looks like the variables are “redeclared” :slight_smile:


VM308:1 Uncaught SyntaxError: Identifier ‘t’ has already been declared
at b (jquery.min.js:2)
at Function.globalEval (jquery.min.js:2)
at text script (jquery.min.js:2)
at jquery.min.js:2
at l (jquery.min.js:2)
at XMLHttpRequest. (jquery.min.js:2)

Is there a destructor or something like that?

Variable names declared using keywords let, const, class or import can’t be re-declared.

Use var or function keywords for it instead.

That’s why an <iframe> approach is the best solution to isolate sketches from each other.

Ok so there was the problem! It’s solved! Thanks a lot!

Now what’s the difference, pro and cons of using VAR instead of LET? And Function instead of CLASS?

Do you have any references or examples to doing that but with iframes? If I have 50 differentes sketches, is those 50 sketches are loaded into the computer memory and you’re only playing with show/hide? How does this works?

Inside functions there are some scope differences between var & let but rarely cause actual problems.

But my absolute favorite way to declare variables is const and I apply it as much as possible:

However, declaring a variable outside a function (globally-scoped) is when the choice of which keyword we use should be more carefully considered depending on whether that variable name might be re-declared later.

Obviously the variable-declaring keywords var & function are the safest b/c those 2 are the only 1s which allow re-declaration.

If you’re creating a constructor along w/ methods for it the keyword class is the best choice.

However, if it’s globally-scoped and you know it’s gonna be re-declared later (due to reloading the sketch it belongs to) you can create a class as an expression and assign it to a var variable:

For example, instead of: class SomeClass {}.
Go w/: var SomeClass = class {};.

If your browser would allow you to have all the 50 sketches loaded in RAM you’d only need to have some function that would call noLoop() + hide() in order to pause the current <iframe> sketch:

And then call show() + loop() in order to resume another <iframe> sketch:

For that you would need an array to store all those 50 <iframe> elements.

In order to find those 50 sketches, make sure to add the same class name attribute to each <iframe> of them:

Let’s say you’ve picked the name “sketch” for all the 50 <iframe>'s class attribute.

Then you can create your <iframe> array like this using selectAll():
const sketches = selectAll('.sketch');