CODEWITHSUNDEEP
java3dprocessing
Asell
Asell

Reputation: 303

Changing color of sphere with time (processing)

I am a new coder on processing, because of this reason please be gentle. Normally my code is more longer and complex but I wrote a simple code for you, which I can adapt on my code:

int speed = 1;
int x, z = 50;

void setup() {
  size(400, 400, P3D);
}

void draw() {
  background(0);
  noStroke();
  lights();
  translate(x, height/2, z);
  fill(255,0,0);
  sphere(25);

  if (x > width -50)
    noLoop();

  x += speed;
}

So, like you see, sphere starts with color of red and it reaches end of the window. I want to change it's color from red to white and it should take 30 sec. to reach end of the window. However I don't know how. If you help me I will be happy. Note: I tried lerpColor function but didn't help me.

Upvotes: 2

Views: 2377

Answers (2)

laancelot
laancelot

Reputation: 3207

Math is the secret. Is often is.

There are a couple things you'll need to keep track of to accomplish this: the time it takes to cross the screen (you said 30 seconds), the speed of the sphere, the speed at which the color changes.

Before we start, I suggest that you use float for your variables which are positions and speeds. Integers will do the job, but at some point when you want precision you may regret not using floats or a similar type.

There are 2 ways to deal with changes over time: you can calculate time and draw what needs to be drawn where it's supposed to be, or calculate how many frames will be drawn in a certain amount of time and move things accordingly. The first technique has the advantage of being able to draw things where they are supposed to be even if the system is laggy (Processing will lower the framerate if it's not able to respect it), while the second is often easier to work with. We'll go with the framerate technique, as this is not supposed to be complicated and because most programs won't need so much resource that it'll lower the framerate.

The framerate, in Processing, is also the rate at which the main loop (the draw() loop) run. So we'll choose a framerate which will let us calculate the speed of the sphere and the speed at which the color change. The rest is just watching it move.

Here's your example, but modified so it works approximately as you told:

float speed;
float x, z = 50;
float greenBlueStrength = 0;
float colorFadeRate = 1;
int fadeTimeInFrames;

void setup() {
  size(400, 400, P3D);
  frameRate(60); // 60 is the default framerate per second
  // so 30 seconds == (30*60) == 1800 frames
  // so you must have the speed to match
  fadeTimeInFrames = 60 * 30;
  speed = (width - 50) / (float)fadeTimeInFrames;
  colorFadeRate = 255 / (float)fadeTimeInFrames;
  println(colorFadeRate);
}

void draw() {
  background(0);
  textSize(30);
  text((millis()/1000) + " s. // color: " + (int)greenBlueStrength, 20, 50);
  // this is just to keep track of changes while they happen

  noStroke();
  lights();
  translate(x, height/2, z);
  fill(255, greenBlueStrength, greenBlueStrength);
  sphere(25);

  if (x > width -50) {
    noLoop();
  } // no actual change, but use brackets anyway, it's easier to read

  // updating what needs to be updated
  x += speed;
  greenBlueStrength += colorFadeRate;
}

I'll hang around so don't hesitate if you have questions.

Have fun!

Upvotes: 1

safir
safir

Reputation: 116

I think something like that would work:

int r=255,b=255,g=255;

...

void draw(){
...

  int percent=x/width*100;
  fill(r,b*percent,g*percent)
  sphere(25)

...
}

so the sphere would be red only on the left of the screen and white on the right

Upvotes: 0

Related Questions