I can't make the objects in an array track the mouse position while also moving towards a predefined spot on the canvas

p5.js Coding Questions
1

Hi all,

I’m trying to build a clock. The core idea is to have the actual time track the mouse behavior. As time passed, each past timestamp will get placed behind the current time, creating a visible trail of passed time. Where I’m struggling is that I want to trail of past times to always move towards a predefined endpoint while still tracking mouse behavior - like a draining effect. As of now (because my code is wrong) I can only get the trail to move towards the 0,0 position instead of the intended center of the window.

Does anyone how a clue what I’m doing wrong here? I’ve been contemplating implementing RADIANS and DEGREES but don’t know how I would do that.

Any help will be appreciated. Thanks!

//CODE
let passedTimes = [];
let currentTime = "";
let increaseFactor = 14;
let tSize = 48
let alphaDecrease = 90;
let maxDistance;
let omegaPointX;
let omegaPointY;

function setup(){
  createCanvas(windowWidth,windowHeight);
}

function draw(){
  let omegaPointX = windowWidth/2;
  let omegaPointY = windowHeight/2;
  background(240);
  
  rect(omegaPointX, omegaPointY, 2,2)
  strokeWeight(1)
  fill(0);
  
  calcTime();
  displayCurrentTime();
  displayPassedTimes();
}

//Calculate the time
function calcTime() {
  let hr = hour();
  let min = minute();
  let sec = second();
  let prevSec = sec;
  const time = (hr < 10 ? "0" + hr : hr) + ":" + 
  	           (min < 10 ? "0" + min : min) + ":" + 
  	           (sec < 10 ? "0" + sec : sec );
  
  //TODO: Update per second, not frame rate
  if(frameCount % 60 == 0) {
    currentTime = time;
    passedTimes.unshift(time);
  }
}
//Show current time
function displayCurrentTime(){
  textAlign(CENTER);
  textSize(tSize);
  text(currentTime, mouseX, mouseY);
}

//Show trails of passed times
function displayPassedTimes(){
  for(i = 0; i < passedTimes.length; i++){
    fill(0, alphaDecrease-(i*1.6));
    textSize(tSize-(i*1.2))
    let increaseFactorX = map(mouseX, 0, windowWidth, 0, 24)
    let increaseFactorY = map(mouseY, 0, windowHeight, 0, 24)
    
    //Make each passed timestamp move towards the Omega point, while tracking the mouse position
    text(passedTimes[i], mouseX-(i*increaseFactorX), mouseY-(i*increaseFactorY));

  }
}
1 Like
2

fyi you can format code you post with the </> button.

i think you mean something like this

you might want to pre-fill the array to avoid the waiting at the start and also reduced the number of samples or fix the rollover you will notice when the passedTimes array gets large enough. i was too lazy to fix them :stuck_out_tongue:but they’re easy enough to sort

1 Like
3

Fantastic!. Thanks for the help, I’ve been stuck on this for a while now. An yeah, I need to work more on this.

If you don’t mind, would you care to explain what’s going on in this function? I’m trying to get my head around the logic in it.

Again, thanks!

function displayPassedTimes() {

  let stepx = (mouseX - omegaPointX) / passedTimes.length;
  let stepy = (mouseY - omegaPointY) / passedTimes.length;
  
  for(var i = 1; i < passedTimes.length; i++) {
    fill(0, alphaDecrease - (i * 1.6));
    textSize(tSize - (i * 1.2));
let tx = mouseX - stepx * i;
    let ty = mouseY - stepy * i;
    text(passedTimes[i], tx, ty);
  }
}
4

this basically divides the distance (or line) between the target and the current position
into n (passedTimes.length) equal parts which are used as the “spacing” of each passedTime drawn

  let stepx = (mouseX - omegaPointX) / passedTimes.length;

this just calculates where to draw the text in relation to the line divisions or spacing we calculated above

let tx = mouseX - stepx * i;

and the rest of it is your code and i’m pretty crap at explanations but i hope that makes some sense :slight_smile:

1 Like
5

Cool. Makes sense :slight_smile:

Thanks a lot for your help