# Draw code frame by frame

**URL:** <https://discourse.processing.org/t/draw-code-frame-by-frame/26687>\
**Category:** Coding Questions\
**Created:** [January 2, 2021, 10:55am UTC](https://discourse.processing.org/t/draw-code-frame-by-frame/26687 "2021-01-02T10:55:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sophie](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@Sophie](https://discourse.processing.org/u/Sophie)\
**Post date:** [January 2, 2021, 10:55am UTC](https://discourse.processing.org/t/draw-code-frame-by-frame/26687/1 "2021-01-02T10:55:48Z")

</div>

Hello,

I am new to Processing and need help with a problem. I need the code in draw not to be played completely over and over again, but frame by frame. The background should change his color according to the first char of my text and in the next frame the next color and so on. Is there any way to do so? Many thanks in advance for every answer!

```auto
String text = "hello world";
char chars[] = ("aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ").toCharArray();
void setup() {
  size(600,360);
}

void draw() {
  noStroke();
  for(int i = 0; i < text.length(); i++) {
    fill(map(letter(text.charAt(i)),0,chars.length,0,255));
    rect(0,0,600,360);
  }
}

int letter(char chr) {
  int letter = -1;
  for(int i = 0; i < chars.length; i++) {
    if(chr == chars[i]) {
      letter = i;
    }
  }
  
  return letter;
}

```

---

<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:** [January 2, 2021, 10:59am UTC](https://discourse.processing.org/t/draw-code-frame-by-frame/26687/2 "2021-01-02T10:59:35Z")

</div>

The bad news is that draw() updates the screen only once at its end.

Hence the for-loop won’t help to see an animation

So get rid of the for-loop

instead use the fact that draw() loops automatically (50 times per second but you can slow this down using `frameRate(12);` )

Then make i a global variable (declared before setup()) and then increase i at the end of draw

Chrisir

---

<div class="post-metadata">

**Author:** ![Sophie](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@Sophie](https://discourse.processing.org/u/Sophie)\
**Post date:** [January 2, 2021, 12:14pm UTC](https://discourse.processing.org/t/draw-code-frame-by-frame/26687/3 "2021-01-02T12:14:17Z")

</div>

Thanks for your reply. What do you mean by increasing i at the end of draw?  
I already tried a lot with slowing down the frameRate but only bad results.

---

<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:** [January 2, 2021, 1:18pm UTC](https://discourse.processing.org/t/draw-code-frame-by-frame/26687/4 "2021-01-02T13:18:02Z")

</div>

No for loop

Instead i++;

I take a look tonight

---

<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:** [January 2, 2021, 2:10pm UTC](https://discourse.processing.org/t/draw-code-frame-by-frame/26687/5 "2021-01-02T14:10:02Z")

</div>

here is my version

(your function letter : see indexOf in the reference (or see under String?))

```auto

int i=0;

String text = "hello world";
char chars[] = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ".toCharArray();

void setup() {
  size(600, 360);
  frameRate(2);
}

void draw() {
  //background(0);
  noStroke();
  //for (int i = 0; i < text.length(); i++) {
  if (i < text.length()) {
    println(text.charAt(i));
    fill(map(letter(text.charAt(i)), 0, chars.length, 0, 255));

    rect(0, 0, 600, 360);
  }
  i++;
  // } //for
}

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

int letter(char chr) {
  int letter = -1;
  for (int i = 0; i < chars.length; i++) {
    if (chr == chars[i]) {
      letter = i;
    }
  }

  return letter;
}

```

---

<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:** [January 2, 2021, 2:13pm UTC](https://discourse.processing.org/t/draw-code-frame-by-frame/26687/6 "2021-01-02T14:13:18Z")

</div>

Hello,

I encourage to you start taking a look at the references.

- [setup() / Reference / Processing.org](https://processing.org/reference/setup_.html)
- [draw() / Reference / Processing.org](https://processing.org/reference/draw_.html) \< A good example here of incrementing each frame.

It looks like you were trying to make a function:

> **[Functions / Examples](https://processing.org/examples/functions.html)**
>
> The drawTarget() function makes it easy to draw many distinct targets. Each call to drawTarget() specifies the position, size, and number of rings for each target.

The above is an example only; there are many references and examples to making functions in JAVA and Processing.

[![](https://img.youtube.com/vi/zBo2D3Myo6Q/hqdefault.jpg "7.2: Functions Basics - Processing Tutorial") ](https://www.youtube.com/watch?v=zBo2D3Myo6Q)

`:)`

---

<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:** [January 2, 2021, 11:34pm UTC](https://discourse.processing.org/t/draw-code-frame-by-frame/26687/7 "2021-01-02T23:34:57Z")

</div>

new version

```auto

int i=0;

String text = "hello world";
String alphabet = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ";

void setup() {
  size(600, 360);
  frameRate(2);
}

void draw() {
  noStroke();

  println(text.charAt(i));
  fill( map(alphabet.indexOf(text.charAt(i)), 0, alphabet.length(), 0, 255) );

  rect(0, 0, 600, 360);

  if (i < text.length()) {
    i++;
  } 
  //if
}
//---------------------------------

```

---

<div class="post-metadata">

**Author:** ![Sophie](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@Sophie](https://discourse.processing.org/u/Sophie)\
**Post date:** [January 3, 2021, 6:39pm UTC](https://discourse.processing.org/t/draw-code-frame-by-frame/26687/8 "2021-01-03T18:39:12Z")

</div>

Now I understand, that really helped a lot! Many thanks!