# Interactive Video with Audience Options

**URL:** <https://discourse.processing.org/t/interactive-video-with-audience-options/16805>\
**Category:** Project Guidance\
**Created:** [January 2, 2020, 11:18am UTC](https://discourse.processing.org/t/interactive-video-with-audience-options/16805 "2020-01-02T11:18:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![marianne91](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@marianne91](https://discourse.processing.org/u/marianne91)\
**Post date:** [January 2, 2020, 11:18am UTC](https://discourse.processing.org/t/interactive-video-with-audience-options/16805/1 "2020-01-02T11:18:17Z")

</div>

Hey there!  
I’m currently working on a project based on ‘decision-making’ in which I want to create a video narrative and allow the viewer to determine what happens next…  
At each break in the video narrative they will be given two options of what they want to happen next. This will be controlled by a mouse-click - and whichever they option they choose will have a different result (so IF they click on YES Video 1 will play and NO Video 2 will play, etc)

Any suggestions on ideas how to do this?..

Cheers!  
M

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [January 2, 2020, 11:39am UTC](https://discourse.processing.org/t/interactive-video-with-audience-options/16805/2 "2020-01-02T11:39:01Z")

</div>

Hi there M,

Will your sketch be similar to a yes/no decision tree like this? In that case lines would represent videos, red diamonds are decision points, and green blocks are the end of the video. Will you have separate videos for each line, or do you have another system in mind?

 ![](https://chunml.github.io/images/tutorials/decision-tree/graph.png)

Aside from your desired system, I think a good place to start is to get the program flow to work. You could easily replace the videos with text for the time being. For instance, display the scene number or the decision chain (yes / no / yes / yes / no) on the screen.

If you happened to tried something like this already, could you show us how far you got with your code and explain where you got stuck?

---

<div class="post-metadata">

**Author:** ![marianne91](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@marianne91](https://discourse.processing.org/u/marianne91)\
**Post date:** [January 2, 2020, 11:47am UTC](https://discourse.processing.org/t/interactive-video-with-audience-options/16805/3 "2020-01-02T11:47:47Z")

</div>

Hi @Tiemen

Yes, exactly. I want it to have the same idea as the yes/no decision tree. I will have a seperate video for each line yes. I haven’t tried this yet as I was trying to find a way to articulate it but this matches what I want to do ^^ Thank you!

I am also quite new to processing so still trying to navigate my way round it… so far have been trying to find relevant tutorials for ‘interactive video’, ‘mouse press events’, ‘use of buttons’ etc…

Is it possible to make a decision tree like the one above on processing? I’m sorry if this seems a basic question, still very much navigating my way round the programme and seeing what is possible…

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [January 2, 2020, 12:05pm UTC](https://discourse.processing.org/t/interactive-video-with-audience-options/16805/4 "2020-01-02T12:05:30Z")

</div>

> [@marianne91](#):
>
> Is it possible to make a decision tree like the one above on processing?

Yes, it is 🙂

Whenever you try to put together a complex project, it’s wise to start small. Get familiar with some of the functionalities which you think might be necessary for your final product. Once you got the hang of it, try to combine these separate elements into a single sketch. In your case some examples would be:

- [video](https://processing.org/reference/libraries/video/movieEvent_.html): try to play a video inside you sketch
- [buttons](http://kll.engineering-news.org/kllfusion01/articles.php?article_id=166#example1): get the yes/no buttons to work
- [switch](https://processing.org/reference/switch.html) or [if/else](https://processing.org/reference/else.html): you might need these later to pick a certain video

Hope this helps to get started!

---

<div class="post-metadata">

**Author:** ![marianne91](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@marianne91](https://discourse.processing.org/u/marianne91)\
**Post date:** [January 2, 2020, 12:07pm UTC](https://discourse.processing.org/t/interactive-video-with-audience-options/16805/5 "2020-01-02T12:07:40Z")

</div>

Perfect! I will try these first.  
Thanks so much!  
🙂

M

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 8, 2020, 10:42pm UTC](https://discourse.processing.org/t/interactive-video-with-audience-options/16805/6 "2020-01-08T22:42:40Z")

</div>

Another useful concept for these kinds of projects is “state machine”

[https://discourse.processing.org/search?q=state%20machine](https://discourse.processing.org/search?q=state%20machine)

So you have states like this:

```auto
int s0video = 0;
int s0choice = 1;
int s1video = 2;
int s1choice = 3;
int s2video = 4;
int s2choice = 5;
int s3video = 6; 
//....
int current = s0video;

```

and then you have rules like “if the state is s2choice and the mouse clicks on the right hand side of the screen, the state is now s5video”:

```auto
if(current==s2choice && mousePressed && mouseX>width/2) {
  current==s5video;
}

```

Draw to the screen displaying the video or buttons based on whatever the current state is.

For previous discussion of sketch state in a simple interactive experience, also see:

> [@How to make keyPressed work inside a while loop](https://discourse.processing.org/t/how-to-make-keypressed-work-inside-a-while-loop/3257/8):
>
> This is the key thing to understand. Processing is already designed to make things like this easy if you treat draw like your while loop. After the end of every draw (every frame), all the interaction functions – mouseDragged(), keyPressed(), keyReleased(), etc. – are checked. So I recommend following @jb4x’s advice and do your checking there. If you have a lot of different states, then write a simple state machine by turning most of your draw loop into a switch statement. [Reference / Proce…](https://processing.org/reference/switch.html)