Can't get randomized vertical line to work in p5js-CodePudding

I've tried to create the simplest vertical line with a random x value between 0-5 at each vertex, and an increase in 10px in the y value at a time. Why is my line not showing?

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);
  var y = 10;
  var r = 0;
  beginShape();
  vertex(0, 0);
  for (var i = 0; i < height; i  = 10) {
    r = random(0, 5);
    console.log(r   " "   y);
    vertex(r, y);
    translate(r, y);
    y  = 10;
  }
  endShape();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.js"></script>

CodePudding user response：

I think you've misunderstood the way translate() works in the context of a shape.

You may be under the impression that each translate moves the canvas a little bit, then you draw a vertex, then the next translate moves the canvas a bit, then you draw another vertex and so on.

Actually, all of the translate() calls that happen inside of the beginShape()/endShape() stack on top of each other, translating the whole, completed shape as defined by the offsets passed to each vertex() call way off canvas. The coordinates you log misleadingly don't take into account the translations.

The solution is basically to remove translate(), optionally just doing one translation up front to reposition the shape.

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);
  var y = 10;
  var r = 0;
  beginShape();
  vertex(0, 0);
  for (var i = 0; i < height; i  = 10) {
    r = random(0, 5);
    vertex(r, y);
    //translate(r, y); // <-- only change
    y  = 10;
  }
  endShape(CLOSE);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.js"></script>

That said, I don't think shapes are appropriate here anyway since I believe they'll require you to draw an ugly-looking straight line from bottom to top to close out the shape. Using a series of lines seems to look better:

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);
  push();
  translate(width / 2, 0);
  let lastX = 0;
  let lastY = 0;

  for (let y = 0; y <= height; y  = 10) {
    const x = random(0, 5)
    line(lastX, lastY, x, y);
    lastX = x;
    lastY = y;
  }
  
  pop();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.js"></script>

Looping the above gives:

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);
  
  for (let i = 0; i < width; i  = 5) {
    push();
    translate(i, 0);
    let lastX = 0;
    let lastY = 0;

    for (let y = 0; y <= height; y  = 10) {
      const x = random(0, 5)
      line(lastX, lastY, x, y);
      lastX = x;
      lastY = y;
    }

    pop();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.js"></script>

CodePudding user response：

I think you forgot beginShape(LINES) also you should put translate outside of the beginShape endShape otherwise it will translate everything once. (So they will be at the same place and not all over the place).

I made this code after many trial and error, I don't know if it's the result you expected:

function draw() {
  background(220);
  var y = 10;
  var r = 0;
  var random_old = 0;
  for (var i = 0; i < height; i  = 10) {
    beginShape(LINES);
    r = random(0, 5);
    console.log(r   " "   y);
    vertex(r, y);
    y  = 10;
    r = random(0, 5);
    vertex(r, y);
    endShape();
    translate((r - random_old) * 10, 0);
    random_old = r;
    y  = 10;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.js"></script>

CodePudding user response：

It looks like you forgot to call the draw() function, so the shape is not being rendered. You can fix this by adding draw() to the end of your code:

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);
  var y = 10;
  var r = 0;
  beginShape();
  vertex(0, 0);
  for (var i = 0; i < height; i  = 10) {
    r = random(0, 5);
    console.log(r   " "   y);
    vertex(r, y);
    translate(r, y);
    y  = 10;
  }
  endShape();
}

draw();

Additionally, the translate() function will not have any effect in your code because you are calling it after calling vertex() to set the position of the next vertex. You can remove the translate() call and the line should be rendered correctly.

Here is the updated code:

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);
  var y = 10;
  var r = 0;
  beginShape();
  vertex(0, 0);
  for (var i = 0; i < height; i  = 10) {
    r = random(0, 5);
    console.log