Browse Source

Fix nasty timing (dt) issue

master
Starbeamrainbowlabs 2 years ago
parent
commit
b644c2b0f1
3 changed files with 74 additions and 12 deletions
  1. 39
    0
      Range.js
  2. 31
    8
      Star.js
  3. 4
    4
      Starlight-Renderer.js

+ 39
- 0
Range.js View File

@@ -0,0 +1,39 @@
/*******************************************************************************
******************************* ES6 Range Class *******************************
*******************************************************************************
* v0.2
*******************************************************************************
* A very simple range class.
*******************************************************************************
* https://gist.github.com/sbrl/a725e32f14a3e4b94810
* Author: Starbeamrainbowlabs <bugs@starbeamrainbowlabs.com>
*
* Changelog:
* v0.1 - 24th Jan 2015:
* Uploaded to GitHub Gist.
* v0.2
* Added ES6 module export syntax.
* Added range calculated parameter.
*/

/// Range.js@v0.1 by Starbeamrainbowlabs ///
class Range
{
constructor(inMin, inMax) {
if(inMin > inMax)
throw new Error(`Min is bigger than max! (min: ${inMin}, max: ${inMax})`);
this.min = inMin;
this.max = inMax;
}
/**
* Calculates and returns the fistance between the maximum and the minimum.
* @return {number} The distance between the maximum and the minimum.
*/
get range()
{
return this.max - this.min;
}
}

export default Range;

+ 31
- 8
Star.js View File

@@ -1,6 +1,7 @@
"use strict";

import Vector from './Vector';
import random from './Random';

class Star
{
@@ -8,17 +9,23 @@ class Star
{
this.canvas = inCanvas;
this.position = inPosition;
this.rotation = 0;
this.rotationStep = 0;
this.alpha = 1;
this.position = inPosition; // The position
this.rotation = 0; // The rotation
this.rotationStep = 0; // The amount (in rads / sec) the star turns by
this.alpha = 1; // The opacity
this.pointCount = 5;
this.pointCount = 5; // The number of points
this.size = inSize;
this.innerRingRatio = 0.5;
this.startSize = inSize; // The initial radius
this.size = this.startSize; // The current radius
this.innerRingRatio = 0.5; // The radius of the inner ring (for the inner points)
this.colour = "white";
this.twinkleSize = this.size * 2; // The size multiplier when twinkling
this.twinkling = false; // Whether we're twinkling
this.twinkleDuration = 2; // The duration of a twinkle (in seconds)
this.twinkleTimer = 0; // The current point along the twinkle we are at now
this.colour = "white"; // The colour of the star
}
/**
@@ -52,11 +59,27 @@ class Star
update(dt)
{
// Rotate (slowly I hope)
this.rotation += this.rotationStep * dt;
// if(this.rotation > Math.PI * 2)
// this.rotation -= Math.PI * 2;
// if(this.rotation < 0)
// this.rotation += Math.PI * 2;
// Randomly begin a twinkle
/*if(!this.twinkling && Math.floor(random(0, 50)*dt) == 0)
this.twinkling = true;
if(this.twinkling)
{
// Calculate the new size quadratically
let sizeMultiplier = 1 + (1 - Math.pow(2*(this.twinkleTimer / this.twinkleDuration) - 1, 2));
this.size = this.startSize * sizeMultiplier;
this.twinkleTimer += dt;
if(this.twinkleTimer == this.twinkleDuration)
this.twinkling = false, this.twinkleTimer = 0;
}*/
}
render(context)

+ 4
- 4
Starlight-Renderer.js View File

@@ -23,7 +23,7 @@ class StarlightRenderer
this.context = canvas.getContext("2d");
this.trackWindowSize();
this.lastFrame = new Date();
this.lastFrame = +new Date() / 1000;
// ~~~
@@ -43,7 +43,7 @@ class StarlightRenderer
nextStar.innerRingRatio = random(0.2, 0.8, true);
nextStar.innerRingRatio = (nextStar.innerRingRatio + nextStar.innerRingRatio*(1 - (nextStar.size / this.starSize.max))) / 2;
nextStar.rotation = random(0, Math.PI*2, true);
nextStar.rotationStep = random(0.0001, 0.001, true);
nextStar.rotationStep = random(0.1, 1, true);
if(random(0, 2) == 0)
nextStar.rotationStep *= -1;
nextStar.alpha = random(0.2, 0.9, true);
@@ -61,11 +61,11 @@ class StarlightRenderer
update()
{
// Calculate the time between this frame and the last one
this.currentFrame = new Date();
this.currentFrame = (+new Date()) / 1000;
this.currentDt = this.currentFrame - this.lastFrame;
// Stars
// Update all the stars
for(let star of this.stars)
star.update(this.currentDt);

Loading…
Cancel
Save