Iframes + multiple sketches + webstorage api

p5.js
4

Hi Mark,

here are some tips:

Basically what the scene manager is doing is packaging up each of you’re sketches into their own entities. so you could do a few things to get it working with your existing code.

  1. rename each of your sketch.js files to some thing more descriptive like firstExperiment.js
  2. link to those files in the index.html so you have a single project with each of your sketches linked in but in individual documents. This will let you keep the files seperate but use them all together. (I find this is easier for organization, although if its confusing you could keep everything in one file.)
  3. create a new sketch.js and link it to index.html
  4. in the new sketch.js create a new scenemanager instance like they do in the documentation:
function Intro()
{
    this.setup = function() {
    }

    this.draw = function() {
    }

    this.keyPressed = function() {
        // switch the scene
      if(key == 'A'|| key == 'a'){
        this.sceneManager.showScene( firstExperiment );
      }else if (key == 'B' || key == 'b'){
        this.sceneManager.showScene( secondExperiment );
      }
    }
}

What this code is going to do is look for the keypress and then look for a scene named firstExeperiment if we press the A key or secondExperiment if we press the B key. more on how to define those scenes coming up.

Ok now to set up each scene.

  1. open firstExperiment.js
  2. change the structure so it reflects the scene structure
function firstExperiment()
{
    this.setup = function() {
//all of the first experiment setup code
    }

    this.draw = function() {
//all of the first experiment draw code
    }
}

now you’ve created a scene. and the main scenemanager above can switch to it if you press the A key. if that works, then implement on the second experiment, etc.

One big thing to watch out for is you’re variables. if you leave them in the global scope and you have variables like let x = 500 in both of you’re scenes you’re going to run into issues of having those variables overwritten by eachother. you might do 1 of two things.

  1. make sure no variables share a name across all of the scenes.
  2. use more local / scene specific variables
function firstExperiment()
{
  //define scene specific variables
  this.x = 500
  this.y = 500
  this.h = 300
  this.w = 500

    this.setup = function() {
      //all of the first experiment setup code
    }

    this.draw = function() {
      //all of the first experiment draw code
      //use scene specific variables.
      rect(this.x,this.y,this.h,this.w)
    }
}

one final note is that you dont need to make use of prototypes to use this thing afaik. you should be able to set it up how they describe on the main readme just as re-packaging each of you’re sketches as scene classes.

happy coding!
b.

ps. sorry for any errors, I’ve not had any coffee yet :upside_down_face: