Help with university project. (Ludic Interface Graphics)

talewise

Hi everyone,

I'm just beginning to work in processing for a university course.

I'm trying to create an interface in which a user can, through some sort of input, create objects that act like microscopic life, this will then be projected into a translucent hemisphere a video of which you can find here:

I've been working my way through Daniel Shiffman's wonderful book, 'The Nature of Code', but I'm finding it just a little bit beyond my capabilities right now.

What I really want is to have multiple versions of these Crosses and Rhombuses/Rhombi on screen at once all moving separately from each other, appearing only when the user clicks on a mouse. Please help if you can.

Here's the code that I have now, a simple walker using perlin noise:

float theta;

class Walker {

    float x,y;

    float tx,ty;


    Walker() {

    tx = 0;
    ty = 10000; 

  }

  void display(){

  //Cross 1
 pushMatrix();
 translate (x,y);
 stroke (0);
 strokeWeight ( 5 );
 line ( 10,10,20,20 );
 strokeWeight ( 5 );
 line ( 20,10,10,20 );
 popMatrix();

  //Diamond
 //pushMatrix();
 //noStroke();
 //fill (0);
 //rotate (0);
 //translate (x,y);
 //beginShape();
 //vertex(50,50);
 //vertex(100,75);
 //vertex(50,100);
 //vertex(0,75);
 //endShape(CLOSE);
 //popMatrix();

 theta += 0.1;
}


  void step() {
    x = map( noise(tx),0,1,0,width ); // x- & y-location mapped from noise
    y = map( noise(ty),0,1,0,height );

    tx += 0.01; //move forward through "time."
    ty += 0.01;


  }
    }

Walker w;


void setup(){
 size (1200, 700);
w = new Walker();
background(255);
}

void draw(){


  //background(255);
  w.step();
  w.display();

  //background fade effect
  pushMatrix();
  fill(255,255,255,55);
  strokeWeight( 0 );
  stroke (0);
  translate( 0,0 );
  rect (0,0, width,height);
  popMatrix();
}

Chrisir

here.....

when you want the X's to show press the mouse

//  


class Walker {

  float x, y;
  float tx, ty;
  float theta;

  // constructor 
  Walker(  ) {
    x = random(width);
    y = random(height);

    tx = random (110);
    ty = random (10000);
  } // constructor 

  void display() {

    //Cross 1
    pushMatrix();
    translate (x, y);
    stroke (0);
    strokeWeight ( 5 );
    line ( 10, 10, 20, 20 );
    strokeWeight ( 5 );
    line ( 20, 10, 10, 20 );
    popMatrix();

    //Diamond
    //pushMatrix();
    //noStroke();
    //fill (0);
    //rotate (0);
    //translate (x,y);
    //beginShape();
    //vertex(50,50);
    //vertex(100,75);
    //vertex(50,100);
    //vertex(0,75);
    //endShape(CLOSE);
    //popMatrix();

    theta += 0.1;
  }

  void step() {
    x = map( noise(tx), 0, 1, 0, width ); // x- & y-location mapped from noise
    y = map( noise(ty), 0, 1, 0, height );
    tx += 0.01; //move forward through "time."
    ty += 0.01;
  }
} // class 

// 

// Walker w;
ArrayList<Walker> listW = new ArrayList(); 

void setup() {
  size (1200, 700);
  // w = new Walker();
  for (int i = 0; i < 255; i++) 
    listW.add ( new Walker () );
  background(255);
} // func 

void draw() {
  // background(255);
  fill(0);
  text ("please press mouse to show Xs", 20, 13);

  //background(255);
  for (int i = 0; i < 255; i++) {
    Walker w = listW.get(i); 
    w.step();
    if (mousePressed)
      w.display();
  }

  //background fade effect
  pushMatrix();
  fill(255, 255, 255, 55);
  strokeWeight( 0 );
  stroke (0);
  translate( 0, 0 );
  rect (0, 0, width, height);
  popMatrix();
} // func 
//

Chrisir

it works with an ArrayList and we have different X in the arraylist (it's like an array)

talewise

That's fantastic man, but do you know how I can get it to add one each time the user clicks rather than have them all appear and disappear at once.

The click would basically have them spawn in one at a time, and they would not disappear when the mouse was unclicked.

talewise

Okay, this is visually exactly what I want my final sketch to look like,

However I need it to add a single 'cross' on every mouse click and a single 'Rhombus/Diamond' every 10-15 clicks. Can anybody help? Thanks :)

class Walker { //class

  float x, y;
  float tx, ty;

  // constructor
  Walker(  ) {
    x = random(width);
    y = random(height);

    tx = random (110);
    ty = random (10000);
  } // constructor

  void display() {

    //Cross 1
    pushMatrix();
    translate (x, y);
    stroke (255);
    strokeWeight ( 5 );
    line ( 10, 10, 20, 20 );
    strokeWeight ( 5 );
    line ( 20, 10, 10, 20 );
    popMatrix();

  }

  void step() {
    x = map( noise(tx), 0, 1, 0, width ); // x- & y-location mapped from noise
    y = map( noise(ty), 0, 1, 0, height );
    tx += 0.01; //move forward through "time."
    ty += 0.01;
  }
} // class

class Diamond {

  float x, y;
  float tx, ty;
  float theta;

  // constructor
  Diamond() {
    x = random(width);
    y = random(height);

    tx = random (110);
    ty = random (10000);
  } // constructor

  void display() {

   //Diamond
    pushMatrix();
    noStroke();
    fill (255);
    translate (x,y);
    //rotate (random (10,-10) );
    beginShape();
    vertex(50,50);
    vertex(100,75);
    vertex(50,100);
    vertex(0,75);
    endShape(CLOSE);
    popMatrix();

  }

  void step() {
    x = map( noise(tx), 0, 1, 0, width ); // x- & y-location mapped from noise
    y = map( noise(ty), 0, 1, 0, height );
    tx += 0.005; //move forward through "time."
    ty += 0.005;
  }
} //class

//

// Walker w;
ArrayList<Walker> listW = new ArrayList();

//Diamond d;
ArrayList<Diamond> listD = new ArrayList();

void setup() {
  size (1200, 700);
  // w = new Walker();
  for (int i = 0; i < 255; i++)
    listW.add ( new Walker () );

  // d = new Diamond();
  for (int d = 0; d < 255; d++)
    listD.add ( new Diamond () );


  background(0);
} // func

void draw() {
  // background(255);
  fill(0);
  text ("please press mouse to show Xs", 20, 13);

  //background(255);

  // w = new Walker();
  for (int i = 0; i < 30; i++) {
    Walker w = listW.get(i);
    w.step();

      if (mousePressed)
      w.display();

  }

   // d = new Diamond();
  for (int d = 0; d < 5; d++) {
    Diamond o = listD.get(d);
    o.step();

    if (mousePressed)
      o.display();
  }

  //background fade effect
  pushMatrix();
  fill(0, 0, 0, 55);
  strokeWeight( 0 );
  stroke (0);
  translate( 0, 0 );
  rect (0, 0, width, height);
  popMatrix();


} // func
//

blyk

Instead of putting it in the Setup put it in void mousePressed like this

void mousePressed(){
  listW.add ( new Walker () );
  listD.add ( new Diamond () );
}

and inside void draw() use this

for (int i = 0; i <listW.size(); i++) {
    Walker w = listW.get(i); 
    w.step();
    if (mousePressed)
      w.display();
  }

similarly

  for (int d = 0; d <listD.size(); d++) {
    Diamond o = listD.get(d);
    o.step();

    if (mousePressed)
      o.display();
  }

talewise

That's almost perfect, thanks so much! Is there any way to stop them from disappearing when the mouse isn't pressed?

Also any way to set the diamond shapes to only spawn every 10 clicks?

Thanks again.

soup

To have your walkers and shapes not disappear after you release the mouse, remove or comment out lines 12 and 13, and then 22 and 23.

To make diamonds spawn every ten clicks, make a counter in mouseClicked() or mousePressed() that looks like this (you will have to make the global variable clicks). If you copy and paste my code into yours, get rid of the mousePressed() function (it's redundant).

void mouseClicked()    {
       listW.add ( new Walker () );
       clicks += 1;
       if(clicks == 10)    {
            listD.add (new Diamond () );
            clicks = 0;
            }
}