Help with university project. (Ludic Interface Graphics)

edited December 2013 in Questions about Code

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();
}

Answers

  • edited December 2013

    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 
    //
    
  • it works with an ArrayList and we have different X in the arraylist (it's like an array)

  • 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.

  • 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
    //
    
  • edited December 2013

    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();
      }
    
  • 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.

  • Answer ✓

    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;
                }
    }
    
Sign In or Register to comment.