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..?