Perception of Motion Theory

Dhruv

Hello Guys, I am trying to implement a psychology paper into animation. Here, there are 2 shapes(rectangle and ellipse). On pressing enter, they move in opposite direction to a certain limit already set. when you move the mouse in the sketchbook, the shapes are disappeared and you have to click where the center appeared to move. But in this code, the first line of text does not appear, both the shapes do not show up together. Also, the screen keeps on blickering due to some reason. Please help

PVector location1 = new PVector(500,500);
PVector location2 = new PVector(500,500);
PVector velocity1 = new PVector(0.2,0);
PVector velocity2 = new PVector(-0.2,0);

void setup() {
  size(800,700);
  ellipseMode(CENTER);
  rectMode(CENTER);
 }

void draw() {
   background(0);
   stroke(255);
   fill(0);
   String a = "Type Initial letters of the shapes(Rectangle, Ellipse or Line) you want, then press enter to start the motion";  // prints a line on top of the screen
   text(a,200,100);


  if(key == 'e')                                       // select your own shapes
     ellipse(location1.x,location1.y,250,250);
  if(key == 'r')
     rect(location2.x,location2.y,150,75);
  //if(key == 'l')
  //  line()

  if(key == 10){                                        // Starts the motion on pressing enter
    if(location1.x<525){
      location1.add(velocity1);
      ellipse(location1.x, location1.y, 250, 250);
   }
    if(location2.x>475){
      location2.add(velocity2);
      rect(location2.x,location2.y,150,75);
   }

}

ellipseMode(CENTER);                                    // constant and common center point 
fill(255);
ellipse(500,500,2,2);


}

void mouseMoved() {                                   //on moving the mouse inside the sketcharea, it blackens out the whole screen
  loadPixels();
  for(int i=0; i<400000;i++)
    pixels[i] = color(0);
  updatePixels();
  stroke(255);
  fill(255);
  cursor(CROSS);
  String a = "Click where the center appeared to move";
  text(a,300,100);
}

void mouseClicked(){                                  //when you click on the screen, it ouputs the distance moved 
int xdistance = mouseX - 200;
int ydistance = mouseY - 200;
print("Distance appeared to move = " + xdistance +" units on X axis and " + ydistance +" units on Y axis");
redraw();                                             // it is suppose to restart the loop
}

PhiLho

On mouseClicked, the text will appear only for a frame, then draw() will overwrite it.

Also, you can just use background(0), where you init the pixels[] array by hand...

Back to your problem, you need to have a state, a number indicating on which screen, which stage you are on: the initial one, where you choose a shape, the moving one, the stage where mouse moves and the one where the user clicks.

Have an integer variable holding the state number, increment it on each event. Update the screen only in draw(), according to the current state. In other words, moves the drawing commands from mouseMoved() and mouseClicked() to draw(), conditionally.

Dhruv

Can you please elaborate or show an example for the last para i.e. how to do the updating part only in draw() ??

PhiLho

The article How to manage the steps of a game: increasing levels, displaying messages, etc.? explains how to do it... except it is unfinished.

There are also lot of examples in the forums, admittedly hard to search.

Here is a simple example:

int state = 0;

void setup()
{
  size(200, 200);
  textSize(32);
}

void draw()
{
  background(255);
  fill(#115577);
  switch (state)
  {
    case 0:
      ellipse(width / 2, height / 2, 100, 100);
      break;
    case 1:
      rect(10, 10, 180, 180);
      break;
    case 2:
      ellipse(width / 2, height / 2, 150, 50);
      break;
    case 3:
      rect(20, 20, 160, 160);
      break;
  }
  fill(#997755);
  text(state, width / 2, height / 2);
}

void keyPressed()
{
  state++;
  if (state > 3) state = 0;
}