Beginner Q: Creating Grids and Interacting With Them

Hi all - I’m brand new to Processing (and coding). I’ve done a few hours of coding now (learning via the Learning Processing book by Daniel Shifman) and have taken myself to task with the homework as well as creating a little program for myself. TL;DR I’m an ethnochoreologist (dance anthropologist and researcher) and we have a few notation systems one of which uses spatial coordinates to map the body in space, so I figured that with the first five chapters under my belt that I’d try to make a simple program where every time you press the space bar, a stick figure’s right arm and left arm change coordinates. Nuances of the notation system aside, I got it working after a little bit; however, the code is extremely chunky and I know there were things that could have helped me that I have yet to learn, but it all still boggles my mind. So, I wanted to see if anyone could take a look at it to let me know if there were any things that I could have compacted?

Specifically:

(1) is there a way to create a grid or table of points with parameters? eg. x number of points spaced x pixels apart?

(2) is there a more compact way to tell Processing to move the free end of a line to a point in the grid without individually coding each point (I know there is, but I couldn’t figure it out and couldn’t find previous questions or answers in the book) – you’ll see that I have a ton of nested if statements…

Just looking for insights so that I can make the changes myself!

TYIA

``````//This code shows a stick figure whose right arm and left arm move in space
//according to a coordinate system via the Eshkol-Wachman Movement Notation System

int rArmX;   //Right Arm X-Coordinate
int rArmY;  // Right Arm Y- Coordinate
int lArmX;  // Left Arm X-Coordinate
int lArmY;  // Left Arm Y-Coordinate

void setup()
{
size(1280,960);
background(255);
textSize(16);
frameRate(10); // Lowered the frame rate as a single press of the space bar refreshes the code several times a second
fill(0);
text("Press the space bar to randomize the coordinates", width/4, height*0.80);
}

void draw()
{
//Coordinates are based on the "eighth"-ing of space
rArmX = int(random(-1, 8));
rArmY = int(random(-1, 8));
lArmX = int(random(-1, 8));
lArmY = int(random(-1, 8));

textSize(16);
fill(0);
if (keyPressed)
{
if (key == ' ')
{
background(255);
text("Press the space bar to randomize the coordinates", width/4, height*0.80);
text("Right Arm is:  " + rArmY + ", " + rArmX, width/4, height/2);
text("Left Arm is:  " + lArmY + ", " + lArmX, width/4, height/2+height/32);

//Drawing out the Head, Neck, Shoulders, Torso, Pelvis, and Legs of this character
stroke(0,0,0,45);
strokeWeight(2);
line(((width/2)+(width/16))*0.95, (height*0.4), ((width/2)+(width/16))*0.95, (height*0.55)); //Torso
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*0.9, (height*0.4)); //Shoulders
line((width/2+(width/16)),(height*0.55),(width/2+(width/16))*0.9,(height*0.55)); //Pelvis
line((width/2+(width/16)),(height*0.55),(width/2+(width/16)),(height*0.75));//Right Leg
line((width/2+(width/16))*0.9,(height*0.55),(width/2+(width/16))*0.9,(height*0.75));//Left Leg
line((width/2+(width/16))*0.95, (height*0.4),((width/2)+(width/16))*0.95, (height*0.35));//Neck
fill(0,0,0,45);

//Right Arm Grid w/Left Arm Crossover
//This grid helps identify the coordinates in space
//However, this is a 2D visual of a 3D system so the
//Z-axis is not visible
//Coordinates in EWMN are presented as Y,X instead of X,Y
//Coordinates 0,0 are the same as 0,1; 0,2; 0,3; and, 0.4
//Coordinates 4,0 are the same as 4,1; 4,2; 4,3; and, 4;4

stroke(255, 0, 0, 15);
strokeWeight(10);
point(width/2+(width/16), (height*0.6)); // Coordinate 0,0
point(width/2+(width/16), (height*0.5)); //Coordinates 1,0 & 7,0 & 1,4
point(width/2+(width/16), (height*0.4)); //Coordinates 2,0 & 6,0 & 2,6
point(width/2+(width/16), (height*0.3)); //Coordinates 3,0 & 5,0 & 3,4
point(width/2+(width/16), (height*0.2)); // Coordinate 4,0

point((width/2+(width/16))*1.1, (height*0.5)); //Coordinates 1,1 & 1,3
point((width/2+(width/16))*1.2, (height*0.5)); // Coordinate 1,2
point((width/2+(width/16))*0.9, (height*0.5)); //Coordinates 1,5 & 1,7
point((width/2+(width/16))*0.8, (height*0.5)); // Coordinate 1,6

point((width/2+(width/16))*1.1, (height*0.4)); //Coordinates 2,1 & 2,3
point((width/2+(width/16))*1.2, (height*0.4)); // Coordinate 2,2
point((width/2+(width/16))*0.9, (height*0.4)); //Coordinates 2,5 & 2,7
point((width/2+(width/16))*0.8, (height*0.4)); // Coordinate 2,6

point((width/2+(width/16))*1.1, (height*0.3)); //Coordinates 3,1 & 3,3
point((width/2+(width/16))*1.2, (height*0.3)); // Coordinate 3,2
point((width/2+(width/16))*0.9, (height*0.3)); //Coordinates 3,5 & 3,7
point((width/2+(width/16))*0.8, (height*0.3)); // Coordinate 3,6

//Left Arm Grid w/Right Arm Crossover
stroke(0, 255, 0,45);
point((width/2+(width/16))*0.9, (height*0.6)); // Coordinate 0,0
point((width/2+(width/16))*0.9, (height*0.5)); // Coordinate 1,0
point((width/2+(width/16))*0.9, (height*0.4)); // Coordinate 2,0
point((width/2+(width/16))*0.9, (height*0.3)); // Coordinate 3,0
point((width/2+(width/16))*0.9, (height*0.2)); // Coordinate 4,0

point((width/2+(width/16))*0.8, (height*0.5)); //Coordinates 1,1 & 1,3
point((width/2+(width/16))*0.7, (height*0.5)); // Coordinate 1,2
//point((width/2+(width/16))*1.0,(height*0.5));//Coordinates 1,5 & 1,7
point((width/2+(width/16))*0.9, (height*0.5)); // Coordinate 1,6

point((width/2+(width/16))*0.8, (height*0.4)); //Coordinates 2,1 & 2,3
point((width/2+(width/16))*0.7, (height*0.4)); // Coordinate 2,2
//point((width/2+(width/16))*1.0,(height*0.4));//Coordinates 2,5 & 2,7
point((width/2+(width/16))*0.9, (height*0.4)); // Coordinate 2,6

point((width/2+(width/16))*0.8, (height*0.3)); //Coordinates 3,1 & 3,3
point((width/2+(width/16))*0.7, (height*0.3)); // Coordinate 3,2
//point((width/2+(width/16))*1.0,(height*0.3));//Coordinates 3,5 & 3,7
point((width/2+(width/16))*0.9, (height*0.3)); // Coordinate 3,6

//This section is the code where lines, representing the arms, move to points in space,
//according to the random coordinates generated every spacebar key press

//if the Vertical is greater than zero then do the normal formula, else do the formula that requires negatives to be adjusted
//Math done very methodically instead of using the power of computing as I wasn't sure what the math ought to be in order
//to move limbs with a fixed end and a free end according to a coordinate system and the grid
// TONS OF NESTED IF STATEMENS :D

//Right Arm
stroke(255, 0, 0,255);
strokeWeight(2);

if (rArmY==0 && rArmX>=0)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16)), (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY<4 && rArmY>0 && rArmX==0)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16)), (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY<4 && rArmY>0  && rArmX==1)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*1.1, (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY<4 && rArmY>0  && rArmX==2)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*1.2, (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY<4 && rArmY>0  && rArmX==3)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*1.1, (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY<4 && rArmY>0  && rArmX==4)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16)), (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY<4 && rArmY>0  && rArmX==5)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*0.9, (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY<4 && rArmY>0  && rArmX==6)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*0.8, (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY<4 && rArmY>0  && rArmX==7)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*0.9, (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY==4 && rArmX==0)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16)), (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY>4 && rArmX==0)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16)), abs((height*0.6)-((rArmY-rArmY*0.9)*height)-(0.4*height)));
} else if (rArmY>4 && rArmX==1)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*1.1, abs((height*0.6)-((rArmY-rArmY*0.9)*height)-(0.4*height)));
} else if (rArmY>4 && rArmX==2)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*1.2, abs((height*0.6)-((rArmY-rArmY*0.9)*height)-(0.4*height)));
} else if (rArmY>4 && rArmX==3)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*1.1, abs((height*0.6)-((rArmY-rArmY*0.9)*height)-(0.4*height)));
} else if (rArmY>4 && rArmX==4)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16)), abs((height*0.6)-((rArmY-rArmY*0.9)*height)-(0.4*height)));
} else if (rArmY>4 && rArmX==5)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*0.9, abs((height*0.6)-((rArmY-rArmY*0.9)*height)-(0.4*height)));
} else if (rArmY>4 && rArmX==6)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*0.8, abs((height*0.6)-((rArmY-rArmY*0.9)*height)-(0.4*height)));
} else if (rArmY>4 && rArmX==7)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*0.9, abs((height*0.6)-((rArmY-rArmY*0.9)*height)-(0.4*height)));
}

//Left Arm
stroke(0, 255, 0,255);
strokeWeight(2);

if (lArmY==0 && lArmX>=0)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*0.9, (height*0.6)-((lArmY-lArmY*0.9)*height));
} else if (lArmY<4 && lArmY>0 && lArmX==0)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*0.9, (height*0.6)-((lArmY-lArmY*0.9)*height));
} else if (lArmY<4 && lArmY>0 && lArmX==1)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*0.8, (height*0.6)-((lArmY-lArmY*0.9)*height));
} else if (lArmY<4 && lArmY>0 && lArmX==2)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*0.7, (height*0.6)-((lArmY-lArmY*0.9)*height));
} else if (lArmY<4 && lArmY>0 && lArmX==3)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*0.8, (height*0.6)-((lArmY-lArmY*0.9)*height));
} else if (lArmY<4 && lArmY>0 && lArmX==4)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16)), (height*0.6)-((lArmY-lArmY*0.9)*height));
} else if (lArmY<4 && lArmY>0 && lArmX==5)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16)), (height*0.6)-((lArmY-lArmY*0.9)*height));
} else if (lArmY<4 && lArmY>0 && lArmX==6)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*1.1, (height*0.6)-((lArmY-lArmY*0.9)*height));
} else if (lArmY<4 && lArmY>0 && lArmX==7)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16)), (height*0.6)-((lArmY-lArmY*0.9)*height));
} else if (lArmY==4 && lArmY>=0)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*0.9, (height*0.6)-((lArmY-lArmY*0.9)*height));
} else if (lArmY>4 && lArmX==0)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*0.9, abs((height*0.6)-((lArmY-lArmY*0.9)*height)-(0.4*height)));
} else if (lArmY>4 && lArmX==1)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*0.8, abs((height*0.6)-((lArmY-lArmY*0.9)*height)-(0.4*height)));
} else if (lArmY>4 && lArmX==2)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*0.7, abs((height*0.6)-((lArmY-lArmY*0.9)*height)-(0.4*height)));
} else if (lArmY>4 && lArmX==3)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*0.8, abs((height*0.6)-((lArmY-lArmY*0.9)*height)-(0.4*height)));
} else if (lArmY>4 && lArmX==4)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16)), abs((height*0.6)-((lArmY-lArmY*0.9)*height)-(0.4*height)));
} else if (lArmY>4 && lArmX==5)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16)), abs((height*0.6)-((lArmY-lArmY*0.9)*height)-(0.4*height)));
} else if (lArmY>4 && lArmX==6)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16))*1.1, abs((height*0.6)-((lArmY-lArmY*0.9)*height)-(0.4*height)));
} else if (lArmY>4 && lArmX==7)
{
line((width/2+(width/16))*0.9, (height*0.4), (width/2+(width/16)), abs((height*0.6)-((lArmY-lArmY*0.9)*height)-(0.4*height)));
}
}
}
}
``````

Hello,

Function:

``````void myLine(float scale)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*scale, (height*0.6)-((rArmY-rArmY*0.9)*height));
}
``````

Usage:

``````//Right Arm
stroke(255, 0, 0,255);
strokeWeight(2);

if (rArmY==0 && rArmX>=0)
{
myLine(1);
} else if (rArmY<4 && rArmY>0 && rArmX==0)
{
myLine(1);
} else if (rArmY<4 && rArmY>0  && rArmX==1)
{
myLine(1.1);
} else if (rArmY<4 && rArmY>0  && rArmX==2)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*1.2, (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY<4 && rArmY>0  && rArmX==3)
{
line((width/2+(width/16)), (height*0.4), (width/2+(width/16))*1.1, (height*0.6)-((rArmY-rArmY*0.9)*height));
} else if (rArmY<4 && rArmY>0  && rArmX==4)
``````

`:)`

1 Like
``````int w = 10, h = 10, scl = 60;
void setup() {
size(600, 600);
}
void draw() {
background(0);
for (int i = 0; i < w; i++) {
for (int j = 0; j < h; j++) {
if (mouseX >= i*scl && mouseX < (i+1)*scl && mouseY >= j*scl && mouseY < (j+1)*scl) {
if(mousePressed) {
fill(255,0,0);
} else {
fill(0,0,255);
}
} else {
fill(255);
}
rect(i*scl, j*scl, scl, scl);
}
}
}

``````

if you hover over a square it will be blue, if mouse is pressed then it will be red

1 Like

I read through your code again and from what I understand you want to snap the end of the arm onto 1 of the 10 positions?

edit:
You can use function

``````void keyPresed() {
if(key == ' ') {
doStuff()
}
}
void doStuff() {
<any code>
}
``````
1 Like

Wow, thanks for the quick replies! This is just something I’m doing for fun, so thanks for the great insights – looks like there is a much more compact way to accomplish what I wanted to!

Hello,

`:)`

I still don’t fully understand but I made a program which creates arms between two points

``````ArrayList<PVector> posRed = new ArrayList<PVector>();
ArrayList<PVector> posGreen = new ArrayList<PVector>();
PVector beginRed = new PVector(500,500), beginGreen = new PVector(1280-500,500);
int rR = 0, rG =0;

void setup() {
size(1280,960);
for(int i = 0; i < 3; i++) {
for(int j = 0; j < 3; j++) {
int scl = 50;
posGreen.add( new PVector( width - 200 - i*scl, 200 + j *scl));
}
}
}

void draw() {
background(255);
fill(255,0,0);
stroke(0);
line(beginRed.x,beginRed.y,posRed.get(rR).x,posRed.get(rR).y);
for(int i = 0; i < posRed.size(); i++) {
circle(posRed.get(i).x,posRed.get(i).y,15);
//line(beginRed.x,beginRed.y,posRed.get(i).x,posRed.get(i).y);
}
fill(0,255,0);
line(beginGreen.x,beginGreen.y,posGreen.get(rG).x,posGreen.get(rG).y);
for(int j = 0; j < posGreen.size(); j++) {
circle(posGreen.get(j).x,posGreen.get(j).y,15);
//line(beginGreen.x,beginGreen.y,posGreen.get(j).x,posGreen.get(j).y);
}
}
void keyPressed() {
if(key == ' ') {
rR = floor(random(posRed.size()));
rG = floor(random(posGreen.size()));
}
}
``````

This gets at the gist of what I had in my brain and it’s so much shorter than what I had! I’m sure I’ll understand everything in it as I get through the course and learning. I’ve saved it to my Examples. Thank you @CodeMasterX!

1 Like

no problem! I wish you smooth progress in learning