# Split-Screen Mouse click Interaction

**URL:** https://discourse.processing.org/t/split-screen-mouse-click-interaction/34124
**Category:** Beginners
**Created:** [December 15, 2021, 12:47am UTC](https://discourse.processing.org/t/split-screen-mouse-click-interaction/34124 "2021-12-15T00:47:21Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![JayT808s](https://avatars.discourse-cdn.com/v4/letter/j/51bf81/32.png) [@JayT808s](https://discourse.processing.org/u/JayT808s)
#### Post date: [December 15, 2021, 12:47am UTC](https://discourse.processing.org/t/split-screen-mouse-click-interaction/34124/1 "2021-12-15T00:47:21Z")

</div>

Hi, I’m super new to programming and I’ve just been stuck on the same problem for the past few days and I couldn’t find anything on the forums that could help me out. I’m trying to split the screen in two, so that when you click with your mouse on one side, a circle or a square is made and if you click on the other side of the frame a different object is made, couldn’t work out how to segment the screen, think height and width have something to do with it. Any help would be much appreciated. Thank you so much!

---

<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: [December 16, 2021, 10:34pm UTC](https://discourse.processing.org/t/split-screen-mouse-click-interaction/34124/2 "2021-12-16T22:34:22Z")

</div>

Hi @JayT808s,

Welcome to the forum! 😉

If you don’t know something in Processing a good place to start is to see the available variables and functions you can use in the reference:

> **[Reference](https://processing.org/reference/)**
>
> Find further documentation of the Processing language

Let’s summarize what you want to do:

> I’m trying to split the screen in **two** , so that when you **click** with your **mouse** on one side, a **circle** or a **square** is made and if you click on the **other side** of the frame a different object is made

You can then check those links:

- [`width`](https://processing.org/reference/width.html)
- [`mouseX`](https://processing.org/reference/mouseX.html)
- [`if`](https://processing.org/reference/if.html)
- [`circle()`](https://processing.org/reference/circle_.html)
- [`square()`](https://processing.org/reference/square_.html)

---

<div class="post-metadata">

### Author: ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)
#### Post date: [December 17, 2021, 12:39am UTC](https://discourse.processing.org/t/split-screen-mouse-click-interaction/34124/3 "2021-12-17T00:39:59Z")

</div>

Hello @JayT808s !

To start, first try and draw two different coloured rectangles for the canvas of each half of the screen, ie.

```auto
void draw() {
  
  // draw background
  noStroke();
  
  // left half
  fill(0, 255, 0); // green
  rect(0, 0, width/2, height);
  
  // right half
  fill(0, 0, 255); // blue
  rect(?, ?, ?, ?);
  
}

```

Can you figure out what values to put in the rect() function to draw the right half?
