Beginner Q: Creating Grids and Interacting With Them

Processing Coding Questions
1

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);
      ellipse((width/2+width/16)*0.95,(height*0.2975),100,100); //Head

      //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)));
      }
    }
  }
}
2

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
4 
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
5

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
6

@glv @CodeMasterX

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!

7

Hello,

:)

8

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;
      posRed.add( new PVector( 200+i*scl,200+j*scl));
      posGreen.add( new PVector( width - 200 - i*scl, 200 + j *scl));
    }
  }
  posRed.add(new PVector(300,150));
  posRed.add(new PVector(300,350));
  posGreen.add(new PVector(1080-100,150));
  posGreen.add(new PVector(1080-100,350));
}

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

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
10

no problem! I wish you smooth progress in learning