# Creating basically a slideshow but a bit different

**URL:** <https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522>\
**Category:** Project Guidance\
**Tags:** homework\
**Created:** [April 20, 2021, 12:21pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522 "2021-04-20T12:21:36Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoeyS](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@JoeyS](https://discourse.processing.org/u/JoeyS)\
**Post date:** [April 20, 2021, 12:21pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/1 "2021-04-20T12:21:36Z")

</div>

Hi,

In our course we are learning prototyping with Arduino Nano BLE 33 Sense. To our physical prototype we are creating a user interface to be run from a computer through Processing. The plan was to upload images we’ve created in Adobe XD, and then in Processing program it to have the same flow as in Adobe XD (with the “buttons” on the images moving you back and forth in the user scenarios).

We were thinking that mousePressed-functions could be coupled with coordinates of the different buttons on the uploaded images, to maneuver through the “slideshow”.

As a beginner I started scouring the internet to find similar things done in tutorials and alike, but since I didn’t find exactly what I was looking for I tried to write the code with inspiration from the things I found, but the results haven’t come through.

So, I guess my question is; Is our group taking the correct approach? Or is there a better way to solve this problem?

Thanks in advance!

Kind regards,  
Joey

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 20, 2021, 12:24pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/2 "2021-04-20T12:24:21Z")

</div>

Please show your code and tell us what it doesn’t do  
what you want

---

<div class="post-metadata">

**Author:** ![JoeyS](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@JoeyS](https://discourse.processing.org/u/JoeyS)\
**Post date:** [April 20, 2021, 12:34pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/3 "2021-04-20T12:34:24Z")

</div>

I’ve been messing around in a lot of ways since we are still in the beginning of our coding.  
The uploading of the images (which are currently placeholders) and the array works, but the mousepressed-function is currently not working. The Pimage can not be converted to an int, so the natural progression through the images is something I haven’t worked out.

The thing I was experimenting with the mouseX and the mouseY was me trying to tell the program to behave in a different way (showing anohter slide) while pressing in that area of the console.

```auto
PImage[] slides = new PImage [5];
PImage welc;
PImage home;
PImage friend;
PImage smallT;
PImage dnd;

void setup () {
  size (1080, 800);
  slides[0] = loadImage("welcome.jpg");
  slides[1] = loadImage("home.jpg");
  slides[2] = loadImage("findfriend.jpg");
  slides[3] = loadImage("smalltalk.jpg");
  slides[4] = loadImage("donot.jpg");
 
}

void draw() {
  background (0);
  image(slides[0], 0, 0);
  
  }

void mousePressed() {
  if ((mouseX, 100, mouseX, 80) && (100, mouseY, 100, mouseY)) {
    slides[0] = slides[4];
  }
  else {
    slides[0]++
}
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 20, 2021, 2:35pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/4 "2021-04-20T14:35:25Z")

</div>

You did this:

> [@JoeyS](#):
>
> ```auto
> void draw() {
> background (0);
> image(slides[0], 0, 0);
>   
> }
> 
> ```

Try this:

```auto
int slide;

void draw() {
  background (0);
  image(slides[slide], 0, 0);
  }

```

And change _slide_ with mouse, keyboard or over time with _frameCount()_ or _millis()_.

The Processing website has resources (tutorials, references, examples) for you to peruse:  
_[processing.org](http://processing.org)_

`:)`

---

<div class="post-metadata">

**Author:** ![JoeyS](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@JoeyS](https://discourse.processing.org/u/JoeyS)\
**Post date:** [April 20, 2021, 3:09pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/5 "2021-04-20T15:09:40Z")

</div>

Hi,  
Thanks! I didn’t think of creating another integer and use for the array! 🙂

I was looking through resources and have watched a lot Daniel Shiffmans youtube-content as well as purchased the Learning Processing-book. I just couldn’t seem to find exactly what I was looking for.

I do still have some issues with the flow of the pictures. And also on how I can program it so that when I press on a certain place in the console a certain image appears instead of another.

But I’ll continue chasing around the internet to see if there’s tutorials!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 20, 2021, 4:50pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/6 "2021-04-20T16:50:14Z")

</div>

> [@JoeyS](#):
>
> I do still have some issues with the flow of the pictures.

which issues are these…? Elaborate.

> [@JoeyS](#):
>
> how I can program it so that when I press on a certain place in the console a certain image appears instead of another

The Console is the direct window underneath your code. Nothing to press there.

You mean you press an area in the image?

It is easiest when the NEXT button has the same position in all images, then just say `slide++;`

(check when slide\>4)

A PREVIOUS button would be `slide--;`

(check when slide \<4)

You can of course have an image with 3 clickable areas (like in a game, where you are in a castle and you can choose between 3 different doors). Then you want something like

```auto
if (mouse...... ) slide =1; // door 1 leads to the basement, cellar
else if (mouse...... ) slide =2; // door 2 leads to the Main Hall
else if (mouse...... ) slide =3; // door 3 leads up the small black stairs 

```

* * *

**Actually**

This would be a bit harder. Especially when

- the number of buttons (doors/choices) is different from image to image and
- the position of buttons (doors/choices) is different from image to image.

Please ask again when you need this.

Hey and welcome to the forum!

Great to have you here!

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 20, 2021, 6:22pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/7 "2021-04-20T18:22:30Z")

</div>

> [@JoeyS](#):
>
> And also on how I can program it so that when I press on a certain place in the console a certain image appears instead of another.

One example (there are others) I found in the GUI examples:  
_[Rollover / Examples / Processing.org](https://processing.org/examples/rollover.html)_

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 20, 2021, 7:13pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/8 "2021-04-20T19:13:50Z")

</div>

here is another, very complex example where you can define Hotspots on pages.

A Hotspot is a clickable area that can lead to another page

You can have several pages and each can have several Hotspots in different locations.

see [Presentation in processing? Is my idea doable? - #4 by Chrisir](https://discourse.processing.org/t/presentation-in-processing-is-my-idea-doable/28489/4)

---

<div class="post-metadata">

**Author:** ![JoeyS](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@JoeyS](https://discourse.processing.org/u/JoeyS)\
**Post date:** [April 20, 2021, 8:10pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/9 "2021-04-20T20:10:43Z")

</div>

> [@Chrisir](#):
>
> which issues are these…? Elaborate.

I used mousePressed instead of mouseClicked so i couldn’t click through the images, but that is solved now. So I can click through it from 1-5 🙂

> [@Chrisir](#):
>
> The Console is the direct window underneath your code. Nothing to press there.
> 
> You mean you press an area in the image?
> 
> It is easiest when the NEXT button has the same position in all images, then just say `slide++;`
> 
> (check when slide\>4)
> 
> A PREVIOUS button would be `slide--;`
> 
> (check when slide \<4)
> 
> You can of course have an image with 3 clickable areas (like in a game, where you are in a castle and you can choose between 3 different doors). Then you want something like
> 
> ```auto
> if (mouse...... ) slide =1; // door 1 leads to the basement, cellar
> else if (mouse...... ) slide =2; // door 2 leads to the Main Hall
> else if (mouse...... ) slide =3; // door 3 leads up the small black stairs 
> 
> ```
> 
> * * *
> 
> **Actually**
> 
> This would be a bit harder. Especially when
> 
> - the number of buttons (doors/choices) is different from image to image and
> - the position of buttons (doors/choices) is different from image to image.
> 
> Please ask again when you need this.

Yeah, exactly! So when I press top-left in the image where the image carries a “back”-symbol, it the previous picture should show, and if I press a “continue”-box located in the middle of the image it would show the following image.

Basically the “flow” goes something like this:  
 ![scuffedFlowchart](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9f0d6066b706da875da00d6a74894d0981157592.jpeg)

From _Start_ you can go down 3 paths. _A1_ and _B1_ can only return to start. From _C1_ you can progress through the images. On each image in the _C_-branch you can go backwards 1 step or continue forward until you get to _C5_ where the only way is back to _Start_.

This is atleast the plan! 😓

From my beginners-perspective I was thinking that perhaps the mouse-coordinates could be of use but I’m not sure!

> [@Chrisir](#):
>
> Hey and welcome to the forum!
> 
> Great to have you here!
> 
> Warm regards,
> 
> Chrisir

Thank you, and thank you so much for helping out!!! 😃

Kind regards,  
Joey

---

<div class="post-metadata">

**Author:** ![JoeyS](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@JoeyS](https://discourse.processing.org/u/JoeyS)\
**Post date:** [April 20, 2021, 8:13pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/10 "2021-04-20T20:13:11Z")

</div>

> [@glv](#):
>
> And also on how I can program it so that when I press on a certain place in the console a certain image appears instead of another.
> 
> One example (there are others) I found in the GUI examples:  
> _[https://processing.org/examples/rollover.html](https://processing.org/examples/rollover.html)_
> 
> `:)`

I was looking at that earlier, but can I apply that to changing the image that is uploaded? So basically what is visible in the console is only the image?

---

<div class="post-metadata">

**Author:** ![JoeyS](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@JoeyS](https://discourse.processing.org/u/JoeyS)\
**Post date:** [April 20, 2021, 8:19pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/11 "2021-04-20T20:19:09Z")

</div>

> [@Chrisir](#):
>
> here is another, very complex example where you can define Hotspots on pages.
> 
> A Hotspot is a clickable area that can lead to another page
> 
> You can have several pages and each can have several Hotspots in different locations.
> 
> see [Presentation in processing? Is my idea doable? - #4 by Chrisir](https://discourse.processing.org/t/presentation-in-processing-is-my-idea-doable/28489/4)

Holy moly, thats a beauty!! 😮

I will have to take some time to understand the code!

And thanks for sharing!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 20, 2021, 8:19pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/12 "2021-04-20T20:19:54Z")

</div>

I just posted a simplified code in the other thread

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 21, 2021, 11:58am UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/13 "2021-04-21T11:58:05Z")

</div>

> [@JoeyS](#):
>
> I was looking at that earlier, but can I apply that to changing the image that is uploaded? So basically what is visible in the console is only the image

I was provided you with one piece of the puzzle.

Your original code _did not work_ and had errors; this suggests that you need to take this in steps.

> [@JoeyS](#):
>
> But I’ll continue chasing around the internet to see if there’s tutorials!

> [@glv](#):
>
> The Processing website has resources (tutorials, references, examples) for you to peruse:  
> _[processing.org](http://processing.org)_

There is also the Coding Train on YouTube.

I encourage you to take on the challenge of writing this code on your own from the building blocks available to you.

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 22, 2021, 11:27am UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/14 "2021-04-22T11:27:31Z")

</div>

@JoeyS,

> [@glv](#):
>
> I was provided you with one piece of the puzzle.

Something I wrote quickly this morning:

```auto
String slide00 = "250, 250, 100, 100, 400, 100, 400, 400, 100, 400"; //spots of interest
String slide01 = "200, 250, 150, 100, 300, 80"; //spots of interest
int [] data;
int slide = 0;

void setup() 
  {
  size(500, 500);
  noStroke();
  textSize(24);
  }

void draw() 
  {
  background(0);
  
  if (slide == 0)
    {
    data = int(trim(split(slide00,',')));
    //printArray(data);
    for(int i = 0; i< data.length; i+=2 )
      {
      fill(255, 0, 0);
      circle(data[i], data[i+1], 50);
      if (overCircle(data[i], data[i+1], 50))
        {
        //println("over");
        fill(255);
        text("Press \'space bar\' to select!", 50, 50);
        if (key == ' ') slide = 1;
        }
      }  
    }

  if (slide == 1)
    {
    // Do something
    }
  key = '0';
  }

// https://processing.org/examples/rollover.html
boolean overCircle(int x, int y, int diameter) 
  {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) 
    {
    return true;
    } 
  else 
    {
    return false;
    }
  }

```

I was inspired this morning and wanted to use Strings for data.

This String data can be read directly from code, from a file or sent by Arduino, etc.

I am just sharing a simple example that began with the Rollover example… I have since updated this (significantly) to be much more useful for some of my future projects.

Is the goal of your slideshow project\homework to write slideshow code or to find suitable solutions for presenting a slideshow with Processing?

`:)`

---

<div class="post-metadata">

**Author:** ![JoeyS](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@JoeyS](https://discourse.processing.org/u/JoeyS)\
**Post date:** [April 22, 2021, 9:10pm UTC](https://discourse.processing.org/t/creating-basically-a-slideshow-but-a-bit-different/29522/15 "2021-04-22T21:10:05Z")

</div>

> [@glv](#):
>
> Something I wrote quickly this morning:
> 
> ```auto
> String slide00 = "250, 250, 100, 100, 400, 100, 400, 400, 100, 400"; //spots of interest
> String slide01 = "200, 250, 150, 100, 300, 80"; //spots of interest
> int [] data;
> int slide = 0;
> 
> void setup() 
> {
> size(500, 500);
> noStroke();
> textSize(24);
> }
> 
> void draw() 
> {
> background(0);
>   
> if (slide == 0)
> {
> data = int(trim(split(slide00,',')));
> //printArray(data);
> for(int i = 0; i< data.length; i+=2 )
> {
> fill(255, 0, 0);
> circle(data[i], data[i+1], 50);
> if (overCircle(data[i], data[i+1], 50))
> {
> //println("over");
> fill(255);
> text("Press \'space bar\' to select!", 50, 50);
> if (key == ' ') slide = 1;
> }
> }  
> }
> 
> if (slide == 1)
> {
> // Do something
> }
> key = '0';
> }
> 
> // https://processing.org/examples/rollover.html
> boolean overCircle(int x, int y, int diameter) 
> {
> float disX = x - mouseX;
> float disY = y - mouseY;
> if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) 
> {
> return true;
> } 
> else 
> {
> return false;
> }
> }
> 
> ```
> 
> I was inspired this morning and wanted to use Strings for data.
> 
> This String data can be read directly from code, from a file or sent by Arduino, etc.
> 
> I am just sharing a simple example that began with the Rollover example… I have since updated this (significantly) to be much more useful for some of my future projects.
> 
> Is the goal of your slideshow project\homework to write slideshow code or to find suitable solutions for presenting a slideshow with Processing?
> 
> `:)`

Looks cool! 😃

The goal is to click around on the images and different stuff should happen. This is how I’ve solved it for now. Chrisir suggested to go for _Else if_’s instead of _if_s, but haven’t done that yet. It works as it’s supposed to for now, and now I’m gonna add the serial-communcation to the arduino 🙂

Thanks for the help! 😃

```auto

PImage[] slides = new PImage [8];
int slide=0; 

// --------------------------------------------------------------------------------------

void setup () {
  size (414, 736);

  // load 
  slides[0] = loadImage("start.jpg");
  slides[1] = loadImage("redgoal.jpg");
  slides[2] = loadImage("yellowgoal.jpg");
  slides[3] = loadImage("greenstart.jpg");
  slides[4] = loadImage("greenlist.jpg");
  slides[5] = loadImage("greenconnect.jpg");
  slides[6] = loadImage("greenmap.jpg");
  slides[7] = loadImage("greengoal.jpg");

} // func 

void draw() {
  background (0);
  image(slides[slide], 0, 0);

} // func 

// --------------------------------------------------------------------------------------

void mouseClicked() {
  if (mouseX > 300 && 
    mouseY > 10 &&  
    mouseX < 400 && 
    mouseY < 50 ) {   
  slide = 0;
  // the home button
  }
  if (slide == 3 && 
    mouseX > 5 && 
    mouseY > 10 &&  
    mouseX < 70 && 
    mouseY < 70 ) {   
  slide = 0;
  // the back button in start of green mode
  }
  if (slide == 2 && 
    mouseX > 5 && 
    mouseY > 10 &&  
    mouseX < 70 && 
    mouseY < 70 ) {   
  slide = 0;
  //the back button in yellow mode
  }
  if (slide == 1 && 
    mouseX > 5 && 
    mouseY > 10 &&  
    mouseX < 70 && 
    mouseY < 70 ) {   
  slide = 0;
  //the backbutton in red mode
  }
  if (slide == 0 && 
    mouseX > 50 && 
    mouseY > 300 &&  
    mouseX < 350 && 
    mouseY < 370 ) {
      slide = 2;  
   // the yellow mode-button
    }
  if (slide == 0 && 
    mouseX > 50 && 
    mouseY > 380 &&  
    mouseX < 350 && 
    mouseY < 450 ) {  
  slide = 1;
  // the red mode-button
  }
  if (slide == 0 && 
    mouseX > 50 && 
    mouseY > 210 &&  
    mouseX < 350 && 
    mouseY < 280 ) {   
  slide = 3;
  // green mode start-button
  }
   if (slide == 3 && 
    mouseX > 50 && 
    mouseY > 500 &&  
    mouseX < 350 && 
    mouseY < 600 ) {   
  slide = 4;
  // connect button
  }
    if (slide >= 3 && 
    mouseX > 5 && 
    mouseY > 10 &&  
    mouseX < 70 && 
    mouseY < 70 ) {   
  slide--;
  //the backbutton in green mode
  }
    if (slide == 4 && 
    mouseX > 290 && 
    mouseY > 260 &&  
    mouseX < 400 && 
    mouseY < 320 ) {   
  slide = 5;
  // Albie more-button
  }
    if (slide == 5 && 
    mouseX > 50 && 
    mouseY > 520 &&  
    mouseX < 370 && 
    mouseY < 570 ) {   
  slide = 6;
  // Albie-connect button -> Map
  }
}

//void digital.read
// if (slide == 6 && digital read thing
// slide == 7

```