# Time based pattern

**URL:** <https://discourse.processing.org/t/time-based-pattern/4399>\
**Category:** Coding Questions\
**Created:** [October 12, 2018, 6:52pm UTC](https://discourse.processing.org/t/time-based-pattern/4399 "2018-10-12T18:52:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ehasti21](https://avatars.discourse-cdn.com/v4/letter/e/e36b37/32.png) [@ehasti21](https://discourse.processing.org/u/ehasti21)\
**Post date:** [October 12, 2018, 6:52pm UTC](https://discourse.processing.org/t/time-based-pattern/4399/1 "2018-10-12T18:52:26Z")

</div>

**I’m still awaiting a bright soul to help me understand this aspect of coding** \*Hello all, we are currently working on a time-based pattern project for class but i’ve manage to hit a wall working on my code. I am new to working in the program so i’m a tad confused.

1. I would like to make it to where my animation starts at the initial press of the mouse then the ellipse changes/transitions color if the mouse button is held.
2. I would like to have more than just one ellipse traveling on my sin wave!

I greatly appreciate any help or explanations given!

```auto
float rad;
float xOrigin, yOrigin;
float yPos;
boolean toLeft;

void setup() {
  size(500, 500);
  rad = 50;
  yOrigin = height/2;
  toLeft = false;
}

void draw() {
  background(0);
  noStroke();

  yPos =cos(frameCount * 0.15) * rad;
  ellipse (xOrigin, yOrigin + yPos, 20, 20);

  if (toLeft==false) {
    xOrigin = xOrigin + 5;
    if (xOrigin &gt; 
    500) {
      toLeft = true;
    }
  } else {
    xOrigin = xOrigin - 5;
    if (xOrigin &lt; 
    0) {
      toLeft = false;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 12, 2018, 10:04pm UTC](https://discourse.processing.org/t/time-based-pattern/4399/2 "2018-10-12T22:04:54Z")

</div>

1. You want “more than one” of a thing? Then immediately your brain should scream at you: “WRITE A CLASS FOR THAT OBJECT!” In this case, you want to have more than one sin-wave-ellipse, so write a class for that object!

```auto
class WaveBall {
}

```

Now you already have one working. In fact, all your variables and drawing exist to draw one of these things already. So it is easy to copy what you already have into this class.

```auto
class WaveBall {
  float rad;
  float xOrigin, yOrigin;
  float yPos;
  boolean toLeft;
  WaveBall() {
    rad = 50;
    yOrigin = height/2;
    toLeft = false;
  }
  void draw() {
    noStroke();

    yPos =cos(frameCount * 0.15) * rad;
    ellipse (xOrigin, yOrigin + yPos, 20, 20);

    if (toLeft==false) {
      xOrigin = xOrigin + 5;
      if (xOrigin > 500) {
        toLeft = true;
      }
    } else {
      xOrigin = xOrigin - 5;
      if (xOrigin < 0) {
        toLeft = false;
      }
    }
  }
}

WaveBall wb0;

void setup() {
  size(500, 500);
  wb0 = new WaveBall();
}

void draw() {
  background(0);
  wb0.draw();
}

```

Amazing. Now to have two of them, look what changes:

```auto
class WaveBall {
  float rad;
  float xOrigin, yOrigin;
  float yPos;
  boolean toLeft;
  WaveBall() {
    rad = 50;
    yOrigin = height/2;
    toLeft = false;
  }
  void draw() {
    noStroke();

    yPos =cos(frameCount * 0.15) * rad;
    ellipse (xOrigin, yOrigin + yPos, 20, 20);

    if (toLeft==false) {
      xOrigin = xOrigin + 5;
      if (xOrigin > 500) {
        toLeft = true;
      }
    } else {
      xOrigin = xOrigin - 5;
      if (xOrigin < 0) {
        toLeft = false;
      }
    }
  }
}

WaveBall wb0;
WaveBall wb1;

void setup() {
  size(500, 500);
  wb0 = new WaveBall();
  wb1 = new WaveBall();
}

void draw() {
  background(0);
  wb0.draw();
  wb1.draw();
}

```

Great! Now there are two of them. Except there aren’t because they are both in the same place. Why? Because both of their positions are the same, and remain the same. We need to make some changes to this object that allows them to be at different positions.

```auto
class WaveBall {
  float rad;
  float xOrigin, yOrigin;
  float yPos;
  boolean toLeft;
  WaveBall() {
    rad = 50;
    yOrigin = height/2;
    toLeft = false;
    xOrigin = random(width);
  }
  void draw() {
    noStroke();

    yPos =cos(frameCount * 0.15) * rad;
    ellipse (xOrigin, yOrigin + yPos, 20, 20);

    if (toLeft==false) {
      xOrigin = xOrigin + 5;
      if (xOrigin > 500) {
        toLeft = true;
      }
    } else {
      xOrigin = xOrigin - 5;
      if (xOrigin < 0) {
        toLeft = false;
      }
    }
  }
}

WaveBall wb0;
WaveBall wb1;

void setup() {
  size(500, 500);
  wb0 = new WaveBall();
  wb1 = new WaveBall();
}

void draw() {
  background(0);
  wb0.draw();
  wb1.draw();
}

```

Notice that this is a one line change. WaveBalls now have different starting `xOrigin` positions.

---

<div class="post-metadata">

**Author:** ![ehasti21](https://avatars.discourse-cdn.com/v4/letter/e/e36b37/32.png) [@ehasti21](https://discourse.processing.org/u/ehasti21)\
**Post date:** [October 12, 2018, 10:38pm UTC](https://discourse.processing.org/t/time-based-pattern/4399/3 "2018-10-12T22:38:10Z")

</div>

this makes quite a lot more sense. I greatly appreciate the help here. Now all I need to do is tell the animation to start with the mouseClicked() function. I know the function is added after the draw because without it the code is only run once and then stops listening for events but im unsure specifically as to where after the draw function it goes.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 12, 2018, 11:27pm UTC](https://discourse.processing.org/t/time-based-pattern/4399/4 "2018-10-12T23:27:35Z")

</div>

Now we want 100 of them.

We could start wriitng this out…

```auto
WaveBall wb0;
WaveBall wb1;
WaveBall wb2;
WaveBall wb3;
WaveBall wb4;

```

But this is STUPID! There must be a better way, right? Well there is! You can put these objects in an ARRAY.

```auto
class WaveBall {
  float rad;
  float xOrigin, yOrigin;
  float yPos;
  boolean toLeft;
  WaveBall() {
    rad = 50;
    yOrigin = height/2;
    toLeft = false;
    xOrigin = random(width);
  }
  void draw() {
    noStroke();

    yPos =cos(frameCount * 0.15) * rad;
    ellipse (xOrigin, yOrigin + yPos, 20, 20);

    if (toLeft==false) {
      xOrigin = xOrigin + 5;
      if (xOrigin > 500) {
        toLeft = true;
      }
    } else {
      xOrigin = xOrigin - 5;
      if (xOrigin < 0) {
        toLeft = false;
      }
    }
  }
}

WaveBall[] wbs;

void setup() {
  size(500, 500);
  wbs = new WaveBall[25];
  for( int i = 0; i < wbs.length; i++) wbs[i] = new WaveBall();
}

void draw() {
  background(0);
  for( int i = 0; i < wbs.length; i++) wbs[i].draw();
}

```

Great! Now there are many of them. but they all oscillate the same. We should add an oscillation offset next:

```auto
class WaveBall {
  float rad;
  float xOrigin, yOrigin;
  float yPos;
  boolean toLeft;
  float osc_offset = random(TWO_PI);
  WaveBall() {
    rad = 50;
    yOrigin = height/2;
    toLeft = false;
    xOrigin = random(width);
  }
  void draw() {
    noStroke();

    yPos =cos(frameCount * 0.15 + osc_offset) * rad;
    ellipse (xOrigin, yOrigin + yPos, 20, 20);

    if (toLeft==false) {
      xOrigin = xOrigin + 5;
      if (xOrigin > 500) {
        toLeft = true;
      }
    } else {
      xOrigin = xOrigin - 5;
      if (xOrigin < 0) {
        toLeft = false;
      }
    }
  }
}

WaveBall[] wbs;

void setup() {
  size(500, 500);
  wbs = new WaveBall[25];
  for( int i = 0; i < wbs.length; i++) wbs[i] = new WaveBall();
}

void draw() {
  background(0);
  for( int i = 0; i < wbs.length; i++) wbs[i].draw();
}

```

Notice that with the addition of TWO LINES OF CODE, I have added this oscilation offset for EVERY WaveBall object! The power!

1. You want to goof about with colors? Okay. First, let’s give each WaveBall it’s own color:

```auto
class WaveBall {
  float rad;
  float xOrigin, yOrigin;
  float yPos;
  boolean toLeft;
  float osc_offset = random(TWO_PI);
  color c;
  WaveBall() {
    rad = 50;
    yOrigin = height/2;
    toLeft = false;
    xOrigin = random(width);
    c = color( random(255), random(255), random(255));
  }
  void draw() {
    noStroke();

    yPos =cos(frameCount * 0.15 + osc_offset) * rad;
    fill(c);
    ellipse (xOrigin, yOrigin + yPos, 20, 20);

    if (toLeft==false) {
      xOrigin = xOrigin + 5;
      if (xOrigin > 500) {
        toLeft = true;
      }
    } else {
      xOrigin = xOrigin - 5;
      if (xOrigin < 0) {
        toLeft = false;
      }
    }
  }
}

WaveBall[] wbs;

void setup() {
  size(500, 500);
  wbs = new WaveBall[25];
  for ( int i = 0; i < wbs.length; i++) wbs[i] = new WaveBall();
}

void draw() {
  background(0);
  for ( int i = 0; i < wbs.length; i++) wbs[i].draw();
}

```

That works.

* * *

Animation starting on mousepressed? Add a boolean that tracks if the mouse has been pressed yet, and use it to not draw the balls:

```auto
class WaveBall {
  float rad;
  float xOrigin, yOrigin;
  float yPos;
  boolean toLeft;
  float osc_offset = random(TWO_PI);
  color c;
  WaveBall() {
    rad = 50;
    yOrigin = height/2;
    toLeft = false;
    xOrigin = random(width);
    c = color( random(255), random(255), random(255));
  }
  void draw() {
    if( !was_pressed ) return;
    noStroke();

    yPos =cos(frameCount * 0.15 + osc_offset) * rad;
    fill(c);
    ellipse (xOrigin, yOrigin + yPos, 20, 20);

    if (toLeft==false) {
      xOrigin = xOrigin + 5;
      if (xOrigin > 500) {
        toLeft = true;
      }
    } else {
      xOrigin = xOrigin - 5;
      if (xOrigin < 0) {
        toLeft = false;
      }
    }
  }
}

WaveBall[] wbs;
boolean was_pressed;

void setup() {
  size(500, 500);
  wbs = new WaveBall[25];
  for ( int i = 0; i < wbs.length; i++) wbs[i] = new WaveBall();
  was_pressed = false;
}

void draw() {
  background(0);
  for ( int i = 0; i < wbs.length; i++) wbs[i].draw();
}

void mousePressed(){
  was_pressed = true;
}

```

---

<div class="post-metadata">

**Author:** ![ehasti21](https://avatars.discourse-cdn.com/v4/letter/e/e36b37/32.png) [@ehasti21](https://discourse.processing.org/u/ehasti21)\
**Post date:** [October 13, 2018, 12:12am UTC](https://discourse.processing.org/t/time-based-pattern/4399/5 "2018-10-13T00:12:19Z")

</div>

> [@TfGuy44](#):
>
> class WaveBall { float rad; float xOrigin, yOrigin; float yPos; boolean toLeft; float osc\_offset = random(TWO\_PI); color c; WaveBall() { rad = 50; yOrigin = height/2; toLeft = false; xOrigin = random(width); c = color( random(255), random(255), random(255)); } void draw() { if( !was\_pressed ) return; noStroke(); yPos =cos(frameCount \* 0.15 + osc\_offset) \* rad; fill(c); ellipse (xOrigin, yOrigin + yPos, 20, 20); if (toLeft==false) { xOrigin = xOrigin + 5; if (xOrigin \> 500) { toLeft = true; } } else { xOrigin = xOrigin - 5; if (xOrigin \< 0) { toLeft = false; } } } } WaveBall wbs; boolean was\_pressed; void setup() { size(500, 500); wbs = new WaveBall[25]; for ( int i = 0; i \< wbs.length; i++) wbs[i] = new WaveBall(); was\_pressed = false; } void draw() { background(0); for ( int i = 0; i \< wbs.length; i++) wbs[i].draw(); } void mousePressed(){ was\_pressed = true; }

You have been HUGE help with this weeks material. Thank you for helping me to further understand Processing!