How to randomly translate a rotating image?

jbarton

Hi all,

I'm very new to Processing, and this is my first post! I'm working on a school assignment in which I'm trying to randomly translate rotating images so that when the program runs, they are assigned a random position and rotate in that position for the duration of the program.

I also have other variables that I want to randomize, such as the angle of the images and the speed of the rotations.

Right now when I run the program, any variable that I randomize bounces around the screen, refreshing itself to a new location every frame. I can't seem to figure out how to make the images stay in one location, without pausing the rotations of the images as well.

Here is my code, with currently just the translation of "img1a" improperly randomized. I've included the code for "img1b" as well:

PImage img1a;
PImage img1b;

float rot1a;   // Variable for image rotation
float rot1b;

void setup() {
  size(700, 800, P3D);
  smooth();

   background(255);

  // Load image, initialize variables
  img1a = loadImage("1a.png");
  img1a.resize(300,0);

  img1b = loadImage("1b.png");
  img1b.resize(300,0);

}


void draw() {
  background(255);

  translate(0,150);

  // Image 1a
   pushMatrix();
  background(255);
  translate(random(width),random(height)); // I want to randomize this translate
  rotate(rot1a); 
  rotateY(radians(10)); // I want to randomize this angle
  rotateX(radians(30)); // I want to randomize this angle
  imageMode(CENTER);
  image(img1a,0,0); 
  rot1a += 0.01; // I want to randomize the rotation speed

    popMatrix();


   // Image 1b
    pushMatrix(); 
  translate(350,55); 
  rotate(rot1b); 
  rotateY(radians(35)); 
  rotateX(radians(5)); 
  imageMode(CENTER);
  image(img1b,0,0); 
  rot1b += 0.005;

    popMatrix();

  }

Eventually, I want the program to loop itself every ten seconds, so that every ten seconds the images have new random variables. That will be the next challenge!

Thank you for your help!

TfGuy44

You're doing the same thing for both images. The logic is the same. Each image will need to track it's own position and rotation.

Think about it. If you have X images, do you want to have X copies of the same code and variables? No. What's the solution here?

Think about it...

Gold star if you considered writing a class.

class SpinImage {
  PImage img;
  float x,y,r,dr;
  SpinImage(String filename){
    img = loadImage(filename);
    newPosition();
  }
  void newPosition(){
    x = random(width);
    y = random(height);
    r = random(TWO_PI);
    dr = random(-.1,.1);
  }
  void draw(){
    simulate();
    render();
  }
  void simulate(){
    r+=dr;
    r%=TWO_PI;
  }
  void render(){
    pushStyle();
    imageMode(CENTER);
    pushMatrix();
    translate(x,y);
    rotate(r);
    image(img,0,0);
    popMatrix();
    popStyle();
  }
}

String http = "http://";
String file = http + "tfguy44.com/MyIcon1.PNG";

SpinImage si0;

int time;
color bg;

void setup(){
  size(300,300);
  si0 = new SpinImage(file);
  time = -1;

}

void draw(){
  if(millis() > time){
    time = millis() + 5000;
    bg = color(random(255),random(255),random(255));
  }
  background(bg);
  si0.draw();
}

void mousePressed(){
  si0.newPosition();
}

You should be able to apply the background's changing color logic to change your images' positions too...

jbarton

Thanks for your input. I'm not too familiar with how classes work but I'll read up on them and give it a try.