How to use random and loop in the draw loop in p5.js?

Question

I am trying to repeatedly draw lines that go diagonally across the screen. I am quite new in p5.js, I am not quite sure how to properly structure the random function call, and for-loop within the script to make it happens. Currently it assigns random x and y for startPt and endPt, and seems like it's looping and drawing the same line over and over again. How can it be done so that each loop, a new line with new coordinates will be drawn?

Also, I tried putting the codes to create startPt and endPt inside the draw () loop, but it goes on indefinitely.

const margin = 50;
var loop_num = 100;

var startPt = {
    x:0,
    y:0,
    domain:0,
}

var endPt = {
    x:0,
    y:0,
    domain:0,
}

function setup() {
    createCanvas (600, 400);
    background (0);

    create_startPt();
    create_endPt();

    // re-select endPt if it's not in diagonal domain of startPt
    while (startPt.domain*endPt.domain != -2) {
        endPt.x = random(0+margin, width-margin);
        endPt.y = random(0+margin, height-margin);
        endPt.domain = point_domain(endPt.x, endPt.y)
    }
}

function draw() {
    for (let i=0; i<=loop_num; i++) {
        stroke (200);
        line (startPt.x, startPt.y, endPt.x, endPt.y);
    }
}

// check and assign domain number based on point location
function point_domain(x, y) {
    if ((x>=0) && (x<width/2)) {
        if ((y>=0) && (y<width/2)) {
            return 1
        }
        else {return -1}
    }

    if ((x>=width/2) && (x<=width)) {
        if ((y>=0) && (y<width/2)) {
            return 2
        }
        else {return -2}
    }
}

// create startPt
function create_startPt() {
    startPt.x = random(0+margin, width-margin);
    startPt.y = random(0+margin, height-margin);
    // get domain tag of startPt
    startPt.domain = point_domain(startPt.x, startPt.y)
}

// create endPt
function create_endPt() {
    endPt.x = random(0+margin, width-margin);
    endPt.y = random(0+margin, height-margin);
    // get domain tag of startPt
    endPt.domain = point_domain(endPt.x, endPt.y)
}

Luke Garrigan · Accepted Answer · 2019-01-13 16:15:57Z

3

You want to call your create_endPt() and create_startPt() functions within your setup function, there is no need for the draw function as you don't require the screen to update each frame.

const margin = 50;
var loop_num = 100;

var startPt = {
  x: 0,
  y: 0,
  domain: 0,
}

var endPt = {
  x: 0,
  y: 0,
  domain: 0,
}

function setup() {
  createCanvas(600, 400);
  background(0);
  for (let i = 0; i <= loop_num; i++) {
    stroke(200);
    create_startPt();
    create_endPt();
    line(startPt.x, startPt.y, endPt.x, endPt.y);
  }

}


// check and assign domain number based on point location
function point_domain(x, y) {
  if ((x >= 0) && (x < width / 2)) {
    if ((y >= 0) && (y < width / 2)) {
      return 1
    } else {
      return -1
    }
  }

  if ((x >= width / 2) && (x <= width)) {
    if ((y >= 0) && (y < width / 2)) {
      return 2
    } else {
      return -2
    }
  }
}

// create startPt
function create_startPt() {
  startPt.x = random(0 + margin, width - margin);
  startPt.y = random(0 + margin, height - margin);
  // get domain tag of startPt
  startPt.domain = point_domain(startPt.x, startPt.y)
}

// create endPt
function create_endPt() {
  endPt.x = random(0 + margin, width - margin);
  endPt.y = random(0 + margin, height - margin);
  // get domain tag of startPt
  endPt.domain = point_domain(endPt.x, endPt.y)
}

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

edited Jan 13, 2019 at 16:15

answered Jan 12, 2019 at 22:01

Luke Garrigan

5,0811 gold badge26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KubiK888 Over a year ago

What I meant it, I want to repeat only the number of times by loop_num. When it's set as 100, I only want 100 random lines appear in the final static screen. I don't want it to repeat every frame as animation.

Luke Garrigan Over a year ago

Then I see no need for the draw() function, check my edit

Collectives™ on Stack Overflow

How to use random and loop in the draw loop in p5.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related