CODEWITHSUNDEEP
javascriptp5.js
user2387766
user2387766

Reputation:

How can I slow down the random generation rate?

I'm just starting to learn P5 & JavaScript, and I've managed to create a canvas that has random patterns generated onto it. However, it seems like everything is being generated with the same framerate, which is making some of the objects/shapes appearing too fast. I tried changing the framerate to something slower, but it slows down the entire thing.

How can I just slow down the circles that are being randomly generated while keeping everything else at the same speed? Thank you!

// Variables for randomCircles function with squares occuring at random times
var spot = { 
  x: 1000,
  y: 500
}

var col= {
  r: 255,
  g: 0, 
  b: 0
}

var angle = 0;

var x = 10;

function setup() { 
  frameRate(12);
  background(45, 46, 45);
  createCanvas(600, 600);
}

function draw() {
  // Changing background color of canvas to a dark gray
  background(45, 46, 45);
  //background(255, 255, 255);
  targets();
  deadlyLaser();
  randomCircles();
  harmlessLasers();
  player();

// Four targets or "bars of gold" in the background
function targets() {
  push();
  var x = 0;
    while (x < width) {  
      fill(235, 200, 37); 
      stroke(235, 200, 37); 
      rect(x + 40, 300, 25, 25);
      x = x + 100
      pop();
    } 
}

// Rotating laser
function deadlyLaser(){
  push();
  translate(300, 300);
  rotate(-angle/15);
  strokeWeight(2);
  stroke(235, 40, 26);
  // Last parameter is opacity
  fill(235, 72, 59, 127);
  rect(0, 0, 400, 400);
  x = x + 1;
  angle = angle + 2;
  pop();
}

// Random circles appearing at random times with random color
function randomCircles(){
  push();
  noStroke();
  // Randomizing positions of circles within canvas
  spot.x = random(0, width);
  spot.y= random(0, height);
  // Giving circles opacity in lass parameter; full is 255
  fill(41, 227, 235, 200);
  ellipse(spot.x, spot.y, 50, 50);
  pop();
}

// Lasers going back and fourth, happening at spontaneous times, with a hint of random color   
function harmlessLasers(){  
  push();
  stroke(random(131, 152), random(219, 255), random(167, 195));
    for (var x = 0; x < 20; x++) {
      var y = randomGaussian(800, 1400);
      line(300, 300, x, y);
      pop();
    }
}

// Player line that appears when mouse is on canvas
function player(){
  push();
  stroke(0, 224, 64);
  strokeWeight(6);
  line(mouseX, mouseY, pmouseX, pmouseY);
  print(pmouseX + " - " + mouseX);
  pop();
 }
}

Upvotes: 1

Views: 3259

Answers (2)

Rob Brander
Rob Brander

Reputation: 3781

A simple solution would be to compare the time to a previous time and see if enough time has elapsed.

let timeLastUpdated = Date.now() // will hold the current date/time in milliseconds

The only thing you need now is a constant for the time elapsed before randomizing again, and then compare

const TIME_BETWEEN_RANDOMIZATIONS = 1000; // milliseconds between new randoms

then before you generate the new random numbers compare the time elapsed to the constant to see if we're ready to generate new numbers:

if (Date.now() - timeLastUpdated > TIME_BETWEEN_RANDOMIZATIONS) {
   // generate new random numbers
   spot.x = random(0, width);
   spot.y = random(0, height);

   // update the time
   timeLastUpdated = Date.now();
}

Upvotes: 1

Kevin Workman
Kevin Workman

Reputation: 42176

You can use the frameCount variable or the millis() function to do timing-related logic. Here's a small example:

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

function draw() {

    // add a circle once per second
    if(frameCount % 60 == 0){
        ellipse(random(width), random(height), 20, 20);
    }
}

Related posts:

Please also consult the P5.js reference for more information.

Upvotes: 0

Related Questions