# Combine 2 projects

**URL:** <https://discourse.processing.org/t/combine-2-projects/31921>\
**Category:** Project Guidance\
**Created:** [August 25, 2021, 2:44pm UTC](https://discourse.processing.org/t/combine-2-projects/31921 "2021-08-25T14:44:23Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [August 25, 2021, 2:44pm UTC](https://discourse.processing.org/t/combine-2-projects/31921/1 "2021-08-25T14:44:23Z")

</div>

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 😃

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [August 25, 2021, 10:20pm UTC](https://discourse.processing.org/t/combine-2-projects/31921/2 "2021-08-25T22:20:04Z")

</div>

Hi @Omri,

One way to combine p5js sketches is to use the [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode) to create separate instances of a sketch.

Check this link for a practical example:

[https://joemckaystudio.com/multisketches/](https://joemckaystudio.com/multisketches/)

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

```javascript
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);

```