sbrl/Scene-Starlight
sbrl/Scene-Starlight
1
0
Fork 0
Code Issues Pull requests Activity

Add twinkle & more controls

Browse source
This commit is contained in:
Starbeamrainbowlabs 2017-01-02 17:14:35 +00:00
parent a04d37f48e
commit b581b03c6f
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
Star.js
View file

@ -12,6 +12,7 @@ class Star
this.position = inPosition; // The position
this.rotation = 0; // The rotation
this.rotationStep = 0; // The amount (in rads / sec) the star turns by
this.scale = 1;
this.alpha = 1; // The opacity
this.pointCount = 5; // The number of points
@ -20,9 +21,9 @@ class Star
this.size = this.startSize; // The current radius
this.innerRingRatio = 0.5; // The radius of the inner ring (for the inner points)
this.twinkleSize = this.size * 2; // The size multiplier when twinkling
this.twinkleSize = 2; // The size multiplier when twinkling
this.twinkling = false; // Whether we're twinkling
this.twinkleDuration = 2; // The duration of a twinkle (in seconds)
this.twinkleDuration = 1; // 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
@ -67,19 +68,22 @@ class Star
this.rotation += Math.PI * 2;
// Randomly begin a twinkle
/*if(!this.twinkling && Math.floor(random(0, 50)*dt) == 0)
if(!this.twinkling && dt != 0 && Math.floor(random(0, 50000)*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;
let sizeMultiplier = (1 - Math.pow(2*(this.twinkleTimer / this.twinkleDuration) - 1, 2));
sizeMultiplier *= this.twinkleSize;
// Go from 0 - size to 1 - (size + 1) (because a size of 0 makes things disappear)
sizeMultiplier += 1;
this.scale = sizeMultiplier;
this.twinkleTimer += dt;
if(this.twinkleTimer == this.twinkleDuration)
if(this.twinkleTimer >= this.twinkleDuration)
this.twinkling = false, this.twinkleTimer = 0;
}*/
}
}
render(context)
@ -90,6 +94,7 @@ class Star
context.save();
context.translate(this.position.x, this.position.y);
context.rotate(this.rotation);
context.scale(this.scale, this.scale);
context.beginPath();
context.moveTo(this.points[0].x, this.points[0].y);

9
Starlight-Renderer.js
View file

@ -16,6 +16,8 @@ class StarlightRenderer
this.skyColour = "hsla(248, 100%, 23%, 1)";
this.starSize = new Range(2, 10);
this.twinkleDuration = new Range(0.5, 1.5);
this.twinkleSize = new Range(1.2, 2);
// ~~~
@ -39,14 +41,21 @@ class StarlightRenderer
random(this.starSize.min, this.starSize.max)
);
nextStar.pointCount = random(4, 8);
// Make larger stars tend towards having longer points
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.1, 1, true);
if(random(0, 2) == 0)
nextStar.rotationStep *= -1;
nextStar.alpha = random(0.2, 0.9, true);
nextStar.twinkleDuration = random(this.twinkleDuration.min, this.twinkleDuration.max, true);
nextStar.twinkleSize = random(this.twinkleSize.min, this.twinkleSize.max, true);
this.stars.push(nextStar);
}
}