Make clouds move

Processing Coding Questions
1

Hi, I’m writing some code where I’ve drawn a few clouds in a for loop. Now I want to make these clouds move like they’re coming out of the factory with a while loop. I need them to constantly be moving (not that you can only see them moving when you use keyPressed or something).
Help is much appreciated!!

This is what I have: (I don’t show the rest of my functions because others might use my code).

PFont font1;
void setup(){
    fullScreen ();
    frameRate(20);
    x = width/2;
    y = height/2;
    font1 = loadFont("GoodTimes-25.vlw");
}

void draw(){
  background (#7EB0DB);
  pushMatrix ();
  ellipseMode (CENTER);
  rotate (radians(angle));
  roundSun();
  popMatrix ();
  ellipse (30,30,100,100);
  vogels();
  skylineBackground();
  darkgreyBuildings();
  lichtgrijzeGebouwen();
  tekstFabriek();
  factoryClouds();
  cloudObject(1500,500,10,10);
}

void cloudObject(float a, float b, float c, float d){
  noStroke();
  fill(#FFFFFF);
  ellipse (a+1530, b+395, c+40, d+30);
  ellipse (a+1510, b+405, c+40, d+30);
  ellipse (a+1460, b+395, c+40, d+30);
  ellipse (a+1480, b+405, c+40, d+30);
  ellipse (a+1470, b+385, c+40, d+30);
  ellipse (a+1510, b+385, c+40, d+30);
  ellipse (a+1490, b+380, c+40, d+30);
  
}
float speed = 1.0;

void factoryClouds(){
  strokeWeight(1);
  fill(#FFFFFF);

for(int i = 0; i <= 6; i++){
cloudObject(i * 80,i * -60,i * 3,i * 3);
}
}

2020-03-06 (1)
2020-03-06 (1)1920×1080 57.9 KB

2

Be warned, I’m a novice, but this is my approach:

If you want faster movement, change counter to a = a - 2;

float a = 1530, b, c, d, x, y, angle;

PFont font1;
void setup(){
fullScreen ();
frameRate(20);
x = width/2;
y = height/2;
//font1 = loadFont(“GoodTimes-25.vlw”);

}

void draw(){
  background (#7EB0DB);
  
  pushMatrix ();
    ellipseMode (CENTER);
    rotate (radians(angle));
  popMatrix ();

  ellipse (30,30,100,100);
  factoryClouds();
  cloudObject();
}

void cloudObject(){
  noStroke();
  a = a - 1;
  if(a < 1) a = 1530;

  fill(#FFFFFF);
  ellipse (a, b+395, c+40, d+30);
  ellipse (a+1510, b+405, c+40, d+30);
  ellipse (a+1460, b+395, c+40, d+30);
  ellipse (a+1480, b+405, c+40, d+30);
  ellipse (a+1470, b+385, c+40, d+30);
  ellipse (a+1510, b+385, c+40, d+30);
  ellipse (a+1490, b+380, c+40, d+30);
}

float speed = 1.0;

void factoryClouds(){
strokeWeight(1);
fill(#FFFFFF);

for(int i = 0; i <= 6; i++){
 // cloudObject(i * 80,i * -60,i * 3,i * 3);
 }
}
3

An option could be, to make the clouds actually to objects, and every cloud hold his own speed, in a range from, lets say, 0.5 and 6. You can get a ranged random value with random(a, b);, and make a class member speed, so in your cloud’s display method you would need to change a = a - 1 to a -= speed or a = a - speed. (But I’m a novice, too)

1 Like
4

@M.juliet – Thanks for this question! When you post, please help us help you by formatting your code with the </> button or by putting ``` above and below your code.

5

Do you want new smoke clouds to constantly appear near the factory as the old ones move off the screen?

There are several ways to do this. One simple way is to offset a group of shapes with modulo (%) of the frameCount or of the time (millis). Here is an example.

int cloudCount = 4;
int cloudSize = 30;
int aniFrames = 180;

void setup(){
  size(400,400);
}
void draw() {
  background(192);
  translate(width/2, height/2);
  
  fill(0);
  ellipse(0, 45, 30, 90);
  
  fill(255);
  for(int i=0; i<cloudCount; i++) {   
    float drift = cloudSize * (frameCount % aniFrames)/(float)aniFrames;
    float xoffset = i * cloudSize + drift;
    float yoffset = i * -cloudSize - drift;
    ellipse(xoffset, yoffset, cloudSize, cloudSize);
  }
}

Notice how the last shape “wraps around” and becomes the first shape. If you increase the count, size, or spacing, this will happen when the last shape is already fully off the screen, so that effect won’t be visible.

An intermediate way of doing this is to create an array or ArrayList of PVectors, one for each cloud, and update their locations. This means that individual clouds can drift with randomness, for example, because they have stored locations.

More complex is to create a Particle System https://processing.org/examples/simpleparticlesystem.html – in which each cloud is an Object emitted by that system.