Moving Pixels/Changing Color Over Time

thedurf18

Hi,

I'm new to Processing and to programming, so forgive me if this is an annoyingly rudimentary question. I would like to cluster pixels in certain areas of the window and move the cluster, while colors are changing gradually. Trying to get an ambient-like effect. I know putting them in an array would be the most practical. What I have so far:

size(500,500);

loadPixels(); for(int x = 0; x < width; x++){ for(int y = 0; y < height; y++){ pixels[x+y*width] = color(0,y/2,x/2); } } updatePixels();

thedurf18

I'm using Processing 3, and I'm on OSX Yosemite.

geek96boolean10

Well, to start off, you'd want the initial x and y values to be variable so you can move them around. So -> for (int x = offsetX; x < 30; x++) {...} where offsetX is the size of the cluster you're affecting. Of course, if you want to be doing circular clusters, you'd need a slightly different approach, but you get the idea.

Any other questions? I'm more than happy to help. Glad you decided to pick up programming :) it's a world of fun when you get into it.

thedurf18

Thank you for your response!

I think I know what you're saying, but what do you mean when you say x and y should be variable? like, store them in an "int"? Could you possibly write out an example of how to implement what you're saying?

thedurf18

I have this so far, and it's closer to what I'm trying to achieve. I have a cluster of green, but it's not animated.

size(500,500); background(0);

int offsetX = 10; int x; int y; loadPixels(); for(x = offsetX; x < 30; x++){ for(y = 0; y < height; y++){ pixels[x+y*width] = color(0,y/2,x/2); } } updatePixels();

thedurf18

Ok, I've narrowed it down to this:

size(500,500);
background(0);


int x = 1;
int y = 1;
loadPixels();
for(x = 100; x < 150; x++){
  for(y = 100; y < 150; y++){
    pixels[x+y*width] = color(1/x,y,y/2);
  }
}
updatePixels();

Now it's just animating the clusters to move. How would I go about doing that?

kfrajer

Please edit your post, select your code and hit ctrl+o to format your code. Make sure there is an empty line above and below your code

Kf

kfrajer

Draw is a function that is called 60 fps. You don't need to modify the pixels. Instead, call the first line of draw to be background to reset your sketch every time draw is run. Then you draw your points using point(x,y) and use stroke to select their colors (for multiple points... or for each) and strokeWeight to set the thickness of your points. Check the reference for more information and also the examples:

https://processing.org/reference/
https://processing.org/examples/

Kf

float x;
float y;
float walk;
int n=20;   //number of  points

void setup() {

  size(400, 400);
  x=random(width);
  y=random(height);

  strokeWeight(5);
}

void draw() {
  background(0);
  walk=random(15, 35);
  for (int i=0; i<n; i++) {
    stroke(random(100, 200),20, 20);
    point(x+random(-walk,walk), y+random(-walk,walk));
  }

  if(frameCount%10==0) {
    x+=1;
    y-=1;   //  <------ this guys will eventually leave your sketch area

  }
}

thedurf18

Thank you for the response! I appreciate it.

That's pretty close to what I'm trying to achieve. How can I contain the points better? Like, controlling how fast they are made. This sketch draws them so quickly, and they're going all over the place in a contained space. How can I control the speed of the production?

kfrajer

They are moving by action of a random number generator. That is the reason they seem to have lots of jitter. If you want for them to move smoother, you will need to introduce some coordinated movement, like using velocity vectors for instance. I won't be able to write more code for now...

The sketch always produces n=20 number of points... You can change that value for something that suits your needs.

For a quick test of what it would look at lower speed, you can use frameRate(5) inside setup.

Kf