# Tint mp4 when clicked

**URL:** <https://discourse.processing.org/t/tint-mp4-when-clicked/2937>\
**Category:** Coding Questions\
**Created:** [August 25, 2018, 12:34am UTC](https://discourse.processing.org/t/tint-mp4-when-clicked/2937 "2018-08-25T00:34:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tefa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tefa/32/1181_2.png) [@tefa](https://discourse.processing.org/u/tefa)\
**Post date:** [August 25, 2018, 12:34am UTC](https://discourse.processing.org/t/tint-mp4-when-clicked/2937/1 "2018-08-25T00:34:32Z")

</div>

Hello Processors, thank you for your time. I have a loop that changes the size of mp4’s (images), using the key “s” I stop the loop and restart it with key “p”. I want to click on any of the images and randomly tint. I try doing this by creating a counter and using a for loop, it is not working, but that wont do what I want exactly, which is tinting any of the vids I decide to click.

```auto
import processing.video.*;
Movie myMovie;
int tintCounter;
boolean resize = true;

int x = 0;
int y = 0;

void setup() {
  size(600, 800);
  myMovie = new Movie(this, "fogata.mp4");
  myMovie.loop();
}

void draw() {
  if (resize=true) {
    background(255);
    for ( float i = .2; i<5; i++) {
      for ( float x = .15; x<2; x++) {
        image(myMovie, 300 * x, 200 * i, mouseX+(4096/20)-25, mouseY+(2160/20)-25);
      }
    }
  }      
  if (resize=false) {
    x = tintCounter;
    tint(0);
  } 
  if (keyCode=='S') {
    resize=false;
    background(255);
    for ( float i = .2; i<5; i++) {
      for ( float x = .15; x<2; x++) {
        image(myMovie, 300*x, 200 * i, 4096/20, 2160/20);
      }
    }
  } 
  if (keyCode=='P') {
    resize=true;
  }
}

// Called every time a new frame is available to read
void movieEvent(Movie m) {
  m.read();
}

void mousePressed(){
tintCounter++;
tintCounter%=8;
}

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 25, 2018, 4:16am UTC](https://discourse.processing.org/t/tint-mp4-when-clicked/2937/2 "2018-08-25T04:16:05Z")

</div>

Study the following changes. I have implemented the solution only for selecting the image along the width. You need to add changes to select the image along the height. Combining the selection along the width and height allows you to choose a single image.

Also notice that this

`if(resize=true)`

is not the same as

`if(resize==true)`

The second one is correct.

Kf

```java
import processing.video.*;
Movie myMovie;
int tintCounter;
boolean resize = true;

int x = 0;
int y = 0;

float tilew;
float tileh;

void setup() {
  size(600, 800);
  myMovie = new Movie(this, "transit.mov");
  myMovie.loop();
}

void draw() {

  background(255);

  if (resize==true) {
    tilew=mouseX+(4096/20)-25;
    tileh=mouseY+(2160/20)-25;
  } 

  for ( float i = .2; i<5; i++) {
    for ( float x = .15; x<2; x++) {
      
      if(resize==false && mouseX > (300*x) && mouseX < (300*x+tilew) )
      tint(50);
      else
      noTint();
      
      image(myMovie, 300 * x, 200 * i, tilew, tileh);
    }
  }
}

void keyReleased() {

  if (key=='p') {
    resize=true;
  }

  if (key=='s') {
    resize=false;
  }
}

// Called every time a new frame is available to read
void movieEvent(Movie m) {
  m.read();
}

void mousePressed() {
  tintCounter++;
  tintCounter%=8;
}

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 25, 2018, 4:18am UTC](https://discourse.processing.org/t/tint-mp4-when-clicked/2937/3 "2018-08-25T04:18:03Z")

</div>

> [@kfrajer](#):
>
> mouseX+(4096/20)-25

By the way, this is not convenient and it is hard to read. For instance, my first question is, how did you come up with these numbers?

Please check the reference. You need to know how to use width and height, two variables that are provided to you by Processing.

Kf

---

<div class="post-metadata">

**Author:** ![tefa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tefa/32/1181_2.png) [@tefa](https://discourse.processing.org/u/tefa)\
**Post date:** [August 25, 2018, 5:40am UTC](https://discourse.processing.org/t/tint-mp4-when-clicked/2937/4 "2018-08-25T05:40:07Z")

</div>

4096 is the width of the raw video. If I use the system’s variable ‘width’ it distorts the video… I figured I can do what I want with object oriented programing.

---

<div class="post-metadata">

**Author:** ![tefa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tefa/32/1181_2.png) [@tefa](https://discourse.processing.org/u/tefa)\
**Post date:** [August 25, 2018, 5:40am UTC](https://discourse.processing.org/t/tint-mp4-when-clicked/2937/5 "2018-08-25T05:40:49Z")

</div>

Oh, thank you for this, I will study your changes.