Combine 2 projects

p5.js Project Guidance
1

Hey,
What is the best way to combine 2 projects together?
The two of them are in the same screen size (full), and I want to make 1 project that the user can select which project to watch and the go back to the other one.

I thoght to make a “main screen” with options to choose between the two, and button to go back to the man screen, but I’m getting hard times with the setup and draw functions (every project has his own global varibales and things like that…)
Thanks :smiley:

2 Likes
2

Hi @Omri,

One way to combine p5js sketches is to use the instance mode to create separate instances of a sketch.

Check this link for a practical example:

https://joemckaystudio.com/multisketches/

Note: you might need to prefix the p5js functions with the instance variable name

const s1 = ( sketch ) => {

  let x = 100;
  let y = 100;

  sketch.setup = () => {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = () => {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
};

let sketch1 = new p5(s1);

const s2 = ( sketch ) => {

  sketch.setup = () => {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = () => {
    sketch.background(255, 0, 0);
  };
};

let sketch2 = new p5(s2);
1 Like