Making object appear in random locations

p5.js Coding Questions
1

Hi! I need to make an object (circle) appear in random locations on my screen. So it appears, dissapears, and appears again in another random location, and so forth. Maybe this is really simple, but I’m not very familiar with coding so I have not managed to make it work. Could someone help me with this?

2

Hi,

Welcome to the forum ! :wink:

First if you are not familiar with coding, be sure to check the tutorials by Daniel Shiffman here :

Then the second resource that you need to check is the documentation of p5.js where you can find all the functions that are going to be useful for your project :

Third step is actually thinking about the structure of your code in order to write it. In pseudo code, you would write this :

// Executed only once at the beginning
function setup
    // Define the size of the canvas
    size(width, height)

// Executed at each frame (roughly 60 times per second)
function draw
    // Get random coordinates inside the canvas
    x = random(width)
    y = random(height)

    // Display the circle at that location
    circle(x, y, diameter)

Now the implementation is not really difficult since it’s just a translation into the JavaScript syntax!

If you have any questions, let me know! :wink:

3

Thank you for your help! How can I use this code to make the circle dissapear and appear again in a different location?

4

The trick here is to use the background() function to “erase” the whole canvas with a solid color. Usually, we do this at the beginning of the draw function.

https://p5js.org/reference/#/p5/background

5

Thank you, it worked! I have another question though, I would like to combine this code with another code. I have another code which uses your webcam to track the position of your eyes and it makes an eye trail on the screen. I would like to combine this with the random appearing circles, like targets that you have to follow.

The two separate codes are:

for the random appearing circles

var spot = {
  x: 100,
  y: 50,
}

function setup() {
  createCanvas(400, 400);
  background (0);
  frameRate(1);
}

function draw() {
  
  background (0);
  spot.x = random (0, width);
  spot.y = random (0, height);
  ellipse(spot.x, spot.y, 20, 20);

for the eye tracking

// Finds eyes from webcam and draws a shape on

// the canvas, with random colors and variable sizes. Click on the

// canvas to save an image; press a key to clear the canvas.

// Starting point: https://editor.p5js.org/kylemcdonald/sketches/BJOcyD9hm 🙏

let capture = null;
let tracker = null;
let positions = null;
let w = 0, h = 0;

function setup() {
  w = windowWidth;
  h = windowHeight;
  capture = createCapture(VIDEO);
  createCanvas(w, h);
  capture.size(w, h);
  capture.hide();

  frameRate(10);
  colorMode(HSB);   
  background(0);

  tracker = new clm.tracker();
  tracker.init();
  tracker.start(capture.elt);
}

function draw() {
  
  // Flip the canvas so that we get a mirror image
	translate(w, 0);
  scale(-1.0, 1.0);
  // Uncomment the line below to see the webcam image (and no trail)
  //image(capture, 0, 0, w, h);
  positions = tracker.getCurrentPosition();

  if (positions.length > 0) {

    // Eye points from clmtrackr:
    // https://www.auduno.com/clmtrackr/docs/reference.html
    const eye1 = {
      outline: [23, 63, 24, 64, 25, 65, 26, 66].map(getPoint),
      center: getPoint(27),
      top: getPoint(24),
      bottom: getPoint(26)
    };
    const eye2 = {
      outline: [28, 67, 29, 68, 30, 69, 31, 70].map(getPoint),
      center: getPoint(32),
      top: getPoint(29),
      bottom: getPoint(31)
    }
    
    const dotColor = color(255, 255, 255, 0.4);
    drawEye(eye1, dotColor);
		drawEye(eye2, dotColor);
  }
  
}

function getPoint(index) {
  return createVector(positions[index][0], positions[index][1]);
}

function drawEye(eye, dotColor) {
  noFill();
  stroke(255, 0.4);
  
  const irisRadius = min(eye.center.dist(eye.top), eye.center.dist(eye.bottom));
  const irisSize = irisRadius * 2;
  noStroke();
  fill(dotColor);
  ellipse(eye.center.x, eye.center.y, irisSize, irisSize);
  
}


function windowResized() {
  w = windowWidth;
  h = windowHeight;
  resizeCanvas(w, h);
  background(0);
}

how can I combine these two codes?

6

Ok first of all, the example actually uses the clmtrackr.js library so you might check it out before trying to combine both codes.

You also need to incorporate the library into your project in your html file.

One idea thought is to check whether the eye is close enough to the circle’s position then if it “touches” it, just pick a new random location on the screen and do the same.