Keep sketch proportioned while using x++ y++

Processing Coding Questions
1

Hi all, super newbie here with a few questions!

How do I troubleshoot my code where parts of my sketch are moving in one direction and other parts move in another direction? I am applying x++ and y++ to the entire sketch. I know if has to do with my coordinates, but not sure what to look out for.

Also, my rectangle and a few ellipse shapes are stretching out while they move across the page, how do I constrain them to make sure they keep their original shape?

Here is my before and after code, thanks friends!

Original sketch:

size(760,560); // set size of window
background(255); // set background to white

  
//left foot
line(240,500,260,480);
line(240,500,260,520);
line(260,520,300,500);
line(300,500,280,480);

//right foot
line(440,480,420,500);
line(420,500,460,520);
line(460,520,480,500);
line(480,500,460,480);

//left leg
fill(127);
rect(260,420,20,60,127);

//right leg
fill(127);
rect(440,420,20,60,127);

//body
line(140,420,580,420); //base
line(140,420,180,360); //left corner
line(580,420,540,360); //right corner

//left wing
bezier(180,360,140,320,100,260,80,220); //bottom wing cuve
bezier(240,260,200,260,120,240,80,220); //top wing curve

//right wing
bezier(540,360,580,320,640,260,660,220); //bottom wing curve
bezier(500,260,560,260,600,240,660,220); //top wing curve

//head
line(300,180,360,100); //left side
line(440,180,380,100); //right side
line(360,100,380,100); //top

//feathers
bezier(360,100,320,60,310,40,300,20); //left feather left curve
bezier(300,20,310,40,360,60,360,100); //left feather right curve
bezier(370,100,350,60,380,20,400,0); //center feather left curve
bezier(400,0,380,40,350,80, 370,100); //center feather right curve
bezier(380,100,400,40,420,40,460,40); //right feather left curve
bezier(440,40,420,50,400,60,380,100); //right feather right curve

//eyebrows
noFill(); // left eyebrow
beginShape();
vertex(300, 140);
bezierVertex(260,120,240,140,210,180);
endShape();

noFill(); // right eyebrow
beginShape();
vertex(440, 140);
bezierVertex(460,120,540,140,540,180); 
endShape();

//eyes
ellipseMode(CORNER);  //set ellipseMode is top left CORNER
fill(255);  // set fill to white
ellipse(225, 172, 95, 100); //left white ellipse
 
ellipseMode(CORNER);  //set ellipseMode to CORNER
fill(100);  // set fill to gray
ellipse(255,230,40,40);  // left gray ellipse

ellipseMode(CORNER);  //set ellipseMode is top left CORNER
fill(255);  // set fill to white
ellipse(420, 172, 95, 100); //right white ellipse
 
ellipseMode(CORNER);  //set ellipseMode to CORNER
fill(100);  //set fill to gray
ellipse(450,230,40,40);  //right gray ellipse

//beak nostrils
fill(255); // set fill to white
ellipse(360,260,5,20); //left
ellipse(380,260,5,25); //right

//beak
line(300,300,320,300); //left short line
line(320,300,380,360); //left long line
line(440,300,420,300); //right short line
line(420,300,380,360); //right long line

//belly lines
noFill();
beginShape();
vertex(260,420);
bezierVertex(240,410,230,390,220,360); // left belly line
endShape();

noFill();
beginShape();
vertex(460,420);
bezierVertex(480,410,490,390,500,360); // right belly line
endShape();

Moving sketch applying x++ y++

float x = 50;
float y = 50;

void setup() {
  
size(760,560); // set size of window

}

void draw() {
  
background(255); // set background to white

//left foot
line(x + 190, 500, y + 210, 480);
line(x + 190, 500, y + 210, 520);
line(x + 210, 520, y + 250, 500);
line(x + 250, 500, y + 230, 480);

//right foot
line(x + 390, 480, y + 370, 500);
line(x + 370, 500, y + 410, 520);
line(x + 410, 520, y + 430, 500);
line(x + 430, 500, y + 410, 480);

//left leg
fill(127);
rect(x + 210, y + 370, -30 + x, y + 10, 127);

//right leg
fill(127);
rect(x + 390, y + 370, -30 + x, y + 10, 127);

//body
line(x + 90, 420, y + 530, 420); //base
line(x + 90, 420, y + 130, 360); //left corner
line(x + 530, 420, y + 490, 360); //right corner

//left wing
bezier(x + 130, y + 310, x + 90, y + 270, x + 50, y + 210, x + 30, y + 170); //bottom wing cuve
bezier(x + 190, y + 210, x + 250, y + 210, x + 70, y + 190, x + 30, y + 170); //top wing curve

//right wing
bezier(x + 490, y + 310, x + 530, y + 270, x + 590, y + 210, x + 610, y + 170); //bottom wing curve
bezier(x + 450, y + 210, x + 510, y + 210, x + 550, y + 190, x + 610, y + 170); //top wing curve

//head
line(x + 250, y + 130, x + 310, y + 50); //left side
line(x + 390, y + 130, x + 330, y + 50); //right side
line(x + 310, y + 50, y + 330, y + 50); //top

//feathers
//noFill();
bezier(x + 310, y + 50, x + 270, y + 10, x + 260, -10 + y, x + 250, -30 + y); //left feather left curve
bezier(x + 250, -30 + y, x + 260, -10 + y, x + 310, y + 10, x + 310, y + 50); //left feather right curve
bezier(x + 320, y + 50, x + 300, y + 10, x + 330, -30 + y, x + 350, -50 + y); //center feather left curve
bezier(x + 350, -50 + y, x + 330, -10 + y, x + 300, y + 30, x + 320, y + 50); //center feather right curve
bezier(x + 330, y + 50, x + 350, -10 + y, x + 370, -10 + y, x + 410, -10 + y); //right feather left curve
bezier(x + 390, -10 + y, x + 370, -50 + y, x + 350, 10 + y, x + 330, 50 + y); //right feather right curve

//eyebrows
noFill(); // left eyebrow
beginShape();
vertex(x+250, y+90);
bezierVertex(x + 210, y + 70, x + 190, y + 90, x + 160, y + 130);
endShape();

noFill(); // right eyebrow
beginShape();
vertex(x + 400, y + 80);
bezierVertex(x + 410, y + 70, x + 490, y + 90, x + 470, y + 130); 
endShape();

//eyes
ellipseMode(CORNER);  //set ellipseMode is top left CORNER
fill(255);  // set fill to white
ellipse(x + 175, y + 122, 95, 100); //left white ellipse
 
ellipseMode(CORNER);  //set ellipseMode to CORNER
fill(100);  // set fill to gray
ellipse(x + 205, y + 180, 40, 40);  // left gray ellipse

ellipseMode(CORNER);  //set ellipseMode is top left CORNER
fill(255);  // set fill to white
ellipse(x + 370, y + 122, 95, 100); //right white ellipse
 
ellipseMode(CORNER);  //set ellipseMode to CORNER
fill(100);  //set fill to gray
ellipse(x + 400, y + 180, 40, 40);  //right gray ellipse

//beak nostrils
fill(255); // set fill to white
ellipse(x + 310, 260, -45 + y, 20); //left
ellipse(x + 330, 260, -45 + y, 25); //right

//beak
line(x + 250, 300, y + 270, 300); //left short line
line(x + 270, 300, y + 330, 360); //left long line
line(x + 390, 300, y + 370, 300); //right short line
line(x + 370, 300, y + 330, 360); //right long line

//belly lines
noFill();
beginShape();
vertex(x + 210, y + 370);
bezierVertex(x + 190, y+360, x+180, y+340, x+170, y+310); // left belly line
endShape();

noFill();
beginShape();
vertex(x + 410, y + 370);
bezierVertex(x + 430, y + 360, x + 440, y + 340, x + 450, y + 310); // right belly line
endShape();

x++; // increment x + y by 1 each time through the loop
y++;

}
1 Like
2

OK there are several things you can do to make your code more flexible, probably the most important is to create a new function that will draw your shape.

The code below is much shorter than yours but demonstrates how to create your own function to draw a person at any position on the screen. Inside the function it uses the pushMatrix() and popMatrix() functions to isolate your drawing from other drawing commands. It also uses the translate(x, y) function to change the coordinate origin to avoid alll the maths involve in changing the shape coordinates. Try it out and you should find it straightforward to create your ownfunctions to draw different shapes.

float x, y;

void setup() {
  size(800, 600);
  x = 100;
  y = 200;
}

void draw() {
  background(255);
  drawPerson(x, y);  // person moves left to right and down
  drawPerson(width - x, y);   // person moves right to left and down
  x++;
  y++;
}

void drawPerson(float px, float py) {
  pushMatrix();
  translate(px, py);
  noStroke();
  fill(200, 50, 200);
  // Shoulders
  arc(0, -120, 120, 80, PI, TWO_PI);
  // Upper torso
  rect(-30, -120, 60, 40);
  // Left arm
  rect(-60, -120, 20, 60);
  // right arm
  rect(40, -120, 20, 60);
  // Lower torso
  fill(0, 128, 0);
  rect(-30, -90, 60, 40);
  // Left leg
  rect(-30, -70, 25, 70);
  // Left leg
  rect(5, -70, 25, 70);
  // Head
  stroke(200, 200, 128);
  fill(220, 200, 128);
  ellipse(0, -170, 50, 60);
  // left legg
  fill(0);
  ellipse(0, 0, 5, 5);
  popMatrix();
}
2 Likes
3

Hi Quark,

This method doesn’t seem to be applying to line(), bezierVertex() and what not. When I apply this code you mention, only the dark shapes are left - how can I get it to apply to line work as well?
Thanks for your help!

4

Yes it does, you just need to write the drawing commands without adjusting the coordinates using ‘x’ and ‘y’. Combining your code with mine gives

float x, y;

void setup() {
  size(1024, 1024);
  x = -100;
  y = -200;
}

void draw() {
  background(255);
  drawBird(x, y);
  x++;
  y++;
}

void drawBird(float px, float py) {
  pushMatrix();
  translate(px, py);
  fill(0);
  //left foot
  line(190, 500, 210, 480);
  line(190, 500, 210, 520);
  line(210, 520, 250, 500);
  line(250, 500, 230, 480);

  //right foot
  line(390, 480, 370, 500);
  line(370, 500, 410, 520);
  line(410, 520, 430, 500);
  line(430, 500, 410, 480);

  //left leg
  fill(127);
  rect(210, 370, -30, 10, 127);

  //right leg
  fill(127);
  rect(390, 370, -30, 10, 127);

  //body
  line(90, 420, 530, 420); //base
  line(90, 420, 130, 360); //left corner
  line(530, 420, 490, 360); //right corner

  //left wing
  bezier(130, 310, 90, 270, 50, 210, 30, 170); //bottom wing cuve
  bezier(190, 210, 250, 210, 70, 190, 30, 170); //top wing curve

  //right wing
  bezier(490, 310, 530, 270, 590, 210, 610, 170); //bottom wing curve
  bezier(450, 210, 510, 210, 550, 190, 610, 170); //top wing curve

  //head
  line(250, 130, 310, 50); //left side
  line(390, 130, 330, 50); //right side
  line(310, 50, 330, 50); //top

  //feathers
  //noFill();
  bezier(310, 50, 270, 10, 260, -10, 250, -30); //left feather left curve
  bezier(250, -30, 260, -10, 310, 10, 310, 50); //left feather right curve
  bezier(320, 50, 300, 10, 330, -30, 350, -50); //center feather left curve
  bezier(350, -50, 330, -10, 300, 30, 320, 50); //center feather right curve
  bezier(330, 50, 350, -10, 370, -10, 410, -10); //right feather left curve
  bezier(390, -10, 370, -50, 350, 10, 330, 50); //right feather right curve

  //eyebrows
  noFill(); // left eyebrow
  beginShape();
  vertex(250, 90);
  bezierVertex(210, 70, 190, 90, 160, 130);
  endShape();

  noFill(); // right eyebrow
  beginShape();
  vertex(400, 80);
  bezierVertex(410, 70, 490, 90, 470, 130);
  endShape();

  //eyes
  ellipseMode(CORNER); //set ellipseMode is top left CORNER
  fill(255); // set fill to white
  ellipse(175, 122, 95, 100); //left white ellipse

  ellipseMode(CORNER); //set ellipseMode to CORNER
  fill(100); // set fill to gray
  ellipse(205, 180, 40, 40); // left gray ellipse

  ellipseMode(CORNER); //set ellipseMode is top left CORNER
  fill(255); // set fill to white
  ellipse(370, 122, 95, 100); //right white ellipse

  ellipseMode(CORNER); //set ellipseMode to CORNER
  fill(100); //set fill to gray
  ellipse(400, 180, 40, 40); //right gray ellipse

  //beak nostrils
  fill(255); // set fill to white
  ellipse(310, 260, -45, 20); //left
  ellipse(330, 260, -45, 25); //right

  //beak
  line(250, 300, 270, 300); //left short line
  line(270, 300, 330, 360); //left long line
  line(390, 300, 370, 300); //right short line
  line(370, 300, 330, 360); //right long line

  //belly lines
  noFill();
  beginShape();
  vertex(210, 370);
  bezierVertex(190, 360, 180, 340, 170, 310); // left belly line
  endShape();

  noFill();
  beginShape();
  vertex(410, 370);
  bezierVertex(430, 360, 440, 340, 450, 310); // right belly line
  endShape();
  popMatrix();
}

NOTICE the variables ‘x’ and ‘y’ do not appear inside the drawBird method at all.

3 Likes
5

I see! Okay thank you for clarifying