Why is the distance increasing when I draw objects in a line with while loop?

p5.js Beginners
1

Dear community,

I am quite new to coding and doing some typical beginner’s exercises to learn more.
My current exercise is about repeatedly drawing objects by using while loops.
Therefore I declared the variables position.x and position.y and used them to translate the object.
In the end of the while loop (which includes the translation and the object itself), position.x und position.y are increased by step (which is a variable declared and set on top of the code).

When I run the code, the objects are drawn in a diagonal line (which I intended) but the distance between them is increasing instead of staying the same.
It’s probably a simple little detail I did not think about but I just can’t find the mistake.

Thank you in advance

Lea

Anmerkung%202019-11-27%20132512
Anmerkung%202019-11-27%201325121754×1011 102 KB 

var position = {
  x: 0,
  y: 0
};

var size = 1;

var step = 10;

var outlineColor = {
  //blue
  r: 26,
  g: 128,
  b: 217
};

var fill1 = {
  //purple
  r: 95,
  g: 101,
  b: 217
};

var fill2 = {
  //turquoise
  r: 26,
  g: 217,
  b: 163
};

var bgCol = {
  grey: 13
};


function setup() {
  createCanvas(windowWidth, windowHeight);
  background(bgCol.grey);
}


function draw() {

  stroke(outlineColor.r, outlineColor.g, outlineColor.b);
  //background(bgCol.grey, 10);

  while (position.x < width+100 && position.y < height+100) {
    translate(position.x, position.y);
    print(position.x);

    //circular sector, outline
    noFill();
    strokeWeight(2 * size);
    arc(100 * size, 200 * size, 100 * size, 100 * size, 20, 10);

    //circles
    strokeWeight(1 * size);
    ellipse(250 * size, 50 * size, 10 * size, 10 * size);
    ellipse(225 * size, 75 * size, 25 * size, 25 * size);
    ellipse(80 * size, 220 * size, 10 * size, 10 * size);

    //circular sector, filled
    fill(fill1.r, fill1.g, fill1.b);
    arc(125 * size, 175 * size, 100 * size, 100 * size, 20, 10, PIE);

    //drop = rect with rounded corners
    fill(fill2.r, fill2.g, fill2.b, 180);
    rect(100 * size, 100 * size, 100 * size, 100 * size, 100 * size, 10 * size, 100 * size, 100 * size);

    //angle
    strokeWeight(2 * size);
    line(200 * size, 100 * size, 250 * size, 100 * size);
    line(200 * size, 100 * size, 200 * size, 50 * size);
    
    //increases the object's x and y position (translate) by step
    position.x = position.x + step;
    position.y = position.y + step;
  }

}
1 Like
2

Hi Hangmansraven, welcome to the forum.

Try changing the values of translate(position.x, position.y) to absolute values such as translate(10, 10). Do you understand now what’s causing the issue?

2 Likes
3

Oh yes, I did not notice that translate does not use the absolute position but goes out from the last position…
Now it is working, thank you very much for the hint!

1 Like