0

Trying to Create a Codepen example with Html, Css And Javascript,
I've just Added a FPS counter but its not outputting an Actual FPS,
Instead its printing Infinity to the span That I have used as a container. No where in my Js is Infinity assigned, not as a variable,
as a string or any other data type. So the question is Where is Javascript getting this from?
Is it a constant? is it a window object? Or built in method?

here is my Js

var filterStrength = 20;
var frameTime = 0, lastLoop = new Date, thisLoop;
function gameLoop(){
  //let frameTime;
  var thisFrameTime = (thisLoop=new Date) - lastLoop;
  frameTime+= (thisFrameTime - frameTime) / filterStrength;
  lastLoop = thisLoop;
}

// Report the fps only every second, to only lightly affect measurements
var fpsOut = document.getElementById('Fps');
setInterval(function(){
  fpsOut.innerHTML = (1000/frameTime).toFixed(1) + " fps";
},1000);


const w = innerWidth, h = innerHeight
const amount = 288 // Chng from: 88

function setup() {
  v = min(w, h)
  createCanvas(w, h)
  const Canv = document.getElementsByTagName("canvas")[1]; 
  background(0)
  Canv.animate({filter: ["hue-rotate(180deg) blur(1.2px)",
                         "hue-rotate(246deg) blur(.34px)"]
                //transform: ["rotateZ(0deg)","rotateZ(280deg)"]
               
               },
               {iterations: Infinity,
                duration: 2848,
                direction: "alternate"})
}

function draw() {
  colorMode(RGB)
  background(0, 0, 0, 10)
  
  var t = frameCount/60 + 3/2*PI
  t += cos(t)/3*2
  const R = v/3
  
  for(let i = 0; i < amount; i++) {
    const a = i/amount * PI * (sin(t)+1) + t - 4780 // Changed last value from 0.7
    const r = v/45 * tan(i/amount*10*PI) * (cos(t)+1)/2 * 472
    const x = w/2 + (R + r) * sin(a) 
    const y = h/2 - (R + r) * cos(a) /0.8
    
    colorMode(HSB, 2*PI, 100, 100) 
    stroke(a - t, 720, 400)
    fill(a - t, 50, 255)
    ellipse(x, y, v/a*2, v/R *x)
  }
}

The Pen can be viewed here: Javascript Experimentation

Also, How to fix this so it actually displays the FPS of the Window or Canvas..?

Ryan Stone
  • 345
  • 4
  • 19

0 Answers0