# Beginner who can use some help

**URL:** <https://discourse.processing.org/t/beginner-who-can-use-some-help/21505>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [June 2, 2020, 3:40pm UTC](https://discourse.processing.org/t/beginner-who-can-use-some-help/21505 "2020-06-02T15:40:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Student](https://avatars.discourse-cdn.com/v4/letter/s/ecc23a/32.png) [@Student](https://discourse.processing.org/u/Student)\
**Post date:** [June 2, 2020, 3:40pm UTC](https://discourse.processing.org/t/beginner-who-can-use-some-help/21505/1 "2020-06-02T15:40:56Z")

</div>

Hey! Im currently working on a small project, for which I need a certain function which I just don’t seem to get working.

I am working with motion tracking. Within the code, I try to change the color of the screen, the moment the hand is on a certain place for 3 seconds. I tried to get this to work by using millis(), but I cant find the correct way to use it. I think the millis() start to count from the beginning, when the program is being played, but it needs to start counting once the hand is on one of the four planes. Im in search of a hero who can help me fix this!

```auto
int time;
 
void setup(){
  time = millis() + 3000;
}

void draw(){

if(lerpX > width /2 && lerpY > height /2 && millis() > time) {
    //keyPressed && key == 'n'))
    fill(225, 0, 255);
    time = millis();
  }
   else{
   }
   
   if(lerpX > width /2 && lerpY < height /2 && millis() > time) {
    //keyPressed && key == 'n'))
    fill(0, 0, 255);
    time = millis();
  }
   else{
   }
   
   if(lerpX < width /2 && lerpY > height /2 && millis() > time) {
    //keyPressed && key == 'n'))
    fill(225, 0, 0);
    time = millis();
  }
   else{
   }
   
   if(lerpX < width /2 && lerpY < height /2 && millis() > time) {
    //keyPressed && key == 'n'))
    fill(0, 225, 0);
    time = millis();
  }
   else{
   } 
}

```

---

<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:** [June 2, 2020, 3:45pm UTC](https://discourse.processing.org/t/beginner-who-can-use-some-help/21505/2 "2020-06-02T15:45:42Z")

</div>

Hello and welcome to the forum!

this is a typical timer

you set a timer (here in setup()) and check it with if in draw()

I hope this helps!

Chrisir

```auto

int timer; 

void setup() {
  size(600, 600);
  timer = millis();
  background(0);
}

void draw() {
  background(0); 

  if (millis() - timer > 3000) {
    text("3 seconds have passed", 44, 44);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Student](https://avatars.discourse-cdn.com/v4/letter/s/ecc23a/32.png) [@Student](https://discourse.processing.org/u/Student)\
**Post date:** [June 3, 2020, 8:02pm UTC](https://discourse.processing.org/t/beginner-who-can-use-some-help/21505/3 "2020-06-03T20:02:36Z")

</div>

Hey Chrisir,

Unfortunately, my code still doesn’t seem to get working. Maybe if I share the whole code, my question will get more clear.

```auto
import processing.video.*;

Capture video;
PImage prev;

PImage img;

float threshold = 25;
float motionX = 0;
float motionY = 0;

float lerpX = 0;
float lerpY = 0;

int time;

void setup() {
  size(640, 360);
  String[] cameras = Capture.list();
  printArray(cameras);
  video = new Capture(this, cameras[4]);
  video.start();
  prev = createImage(640, 360, RGB);
  
  time = millis();
  img = loadImage("bestand.jpg");
}

void mousePressed() {
}

void captureEvent(Capture video) {
  prev.copy(video, 0, 0, video.width, video.height, 0, 0, prev.width, prev.height);
  prev.updatePixels();
  video.read();
}

void draw() {
  background(0);
  video.loadPixels();
  prev.loadPixels();

  threshold = 50;

  int count = 0;
  
  float avgX = 0;
  float avgY = 0;

  loadPixels();

  for (int x = 0; x < video.width; x++ ) {
    for (int y = 0; y < video.height; y++ ) {
      int loc = x + y * video.width;

      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      color prevColor = prev.pixels[loc];
      float r2 = red(prevColor);
      float g2 = green(prevColor);
      float b2 = blue(prevColor);

      float d = distSq(r1, g1, b1, r2, g2, b2); 

      if (d > threshold*threshold) {

        avgX += x;
        avgY += y;
        count++;
        pixels[loc] = color(255);
      } else {
        pixels[loc] = color(0);
      }
    }
  }

  updatePixels();
  
  if(lerpX > width /2 && lerpY > height /2 && (millis() - time > 3000)) {
    //keyPressed && key == 'n'))
    fill(0, 0, 0);
    //time = millis();
  }
   else{
   }
   
   if(lerpX > width /2 && lerpY < height /2 && (millis() - time > 3000)) {
    //keyPressed && key == 'n'))
    fill(0, 0, 255);
    //time = millis();
  }
   else{
   }
   
   if(lerpX < width /2 && lerpY > height /2 && (millis() - time > 3000)) {
    //keyPressed && key == 'n'))
    fill(225, 0, 0);
    //time = millis();
  }
   else{
   }
   
   if(lerpX < width /2 && lerpY < height /2 && (millis() - time > 3000)) {
    //keyPressed && key == 'n'))
    fill(0, 225, 0);
    //time = millis();
  }
   else{
   }

  rect(0, 0, width, height);

  if (count > 200) { 
    motionX = avgX / count;
    motionY = avgY / count;

  }

  lerpX = lerp(lerpX, motionX, 0.1); 
  lerpY = lerp(lerpY, motionY, 0.1); 

  fill(255, 0, 255);
  strokeWeight(2.0);
  stroke(0);
  ellipse(lerpX, lerpY, 36, 36);
}

float distSq(float x1, float y1, float z1, float x2, float y2, float z2) {
  float d = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1) +(z2-z1)*(z2-z1);
  return d;
}

```

The thing which I try to accomplish, is for the color of the screen to change once the hand has touched a plane for three seconds. This means the seconds should start to count once the hand is on a certain point. If the hand has been there for 3 seconds, the color of the screen should change. This colour should stay on the screen, but I still have to figure out how to execute the code just once to make this happen. I think I have to use a Boolean for this, but my attempts haven’t been successful yet.

---

<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:** [June 3, 2020, 8:52pm UTC](https://discourse.processing.org/t/beginner-who-can-use-some-help/21505/4 "2020-06-03T20:52:15Z")

</div>

> [@Student](#):
>
> This means the seconds should start to count once the hand is on a certain point.

say

```auto
 time = millis();

```

in this point

> [@Student](#):
>
> If the hand has been there for 3 seconds,

```auto
(millis() - time > 3000)

```

> [@Student](#):
>
> the color of the screen should change.

set a color variable

colBackgr = color ( random(255) );

and use colBackgr as a background color throughout

---

<div class="post-metadata">

**Author:** ![Student](https://avatars.discourse-cdn.com/v4/letter/s/ecc23a/32.png) [@Student](https://discourse.processing.org/u/Student)\
**Post date:** [June 5, 2020, 7:43am UTC](https://discourse.processing.org/t/beginner-who-can-use-some-help/21505/5 "2020-06-05T07:43:40Z")

</div>

Thank you Chrisir, it works 🙂

Do you happen to know how I can replace an image with another image? Instead of the ‘fill’ in the if-statements I want a picture to be seen, but with just using 'image(img2, 0, 0); the picture wont be shown on the screen.

```auto
 void draw() {
 image(imgChoice, 0, 0);
 }

void chooseSide(){
    if(time - lastTime > 3000){
          //fill(0, 255, 0);
          image(img2, 0, 0);
          print("it works 2");
          runOnce = false;
          lastTime = time;
    }
   else{
 }
}

```

---

<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:** [June 5, 2020, 10:18am UTC](https://discourse.processing.org/t/beginner-who-can-use-some-help/21505/6 "2020-06-05T10:18:28Z")

</div>

> [@Student](#):
>
> `chooseSide()`

When `chooseSide()` is supposed to run, you need to call it from draw().

```auto
void draw() {
   image(imgChoice, 0, 0);
   chooseSide();
 }

```

You can also move this line image(imgChoice, 0, 0); into the else section in the function chooseSide();

Then draw() would look like this:

```auto
void draw() {
   chooseSide();
 }

```