Draw code frame by frame

Processing Coding Questions
1

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!

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;
}
2

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

3

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.

4

No for loop

Instead i++;

I take a look tonight

1 Like
5

here is my version

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



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;
}
1 Like
6

Hello,

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

It looks like you were trying to make a function:

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

:)

1 Like
7

new version



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
}
//---------------------------------
1 Like
8

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

1 Like