#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Help with university project. (Ludic Interface Graphics)

edited December 2013

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

pushMatrix();
fill(255,255,255,55);
strokeWeight( 0 );
stroke (0);
translate( 0,0 );
rect (0,0, width,height);
popMatrix();
}
``````
Tagged:

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

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

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.

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)    {