Starfield: More color options
This commit is contained in:
parent
89a963e30b
commit
3e834efb3a
@ -1,4 +1,5 @@
|
|||||||
import { reference } from "./reference.ts"
|
import { reference } from "./reference.ts"
|
||||||
|
import * as dat from "dat.gui";
|
||||||
|
|
||||||
const canvas = document.querySelector("#mainCanvas");
|
const canvas = document.querySelector("#mainCanvas");
|
||||||
const ctx = canvas.getContext("2d");
|
const ctx = canvas.getContext("2d");
|
||||||
@ -10,6 +11,10 @@ canvas.width = cw * dpr;
|
|||||||
canvas.height = ch * dpr;
|
canvas.height = ch * dpr;
|
||||||
ctx.scale(dpr, dpr);
|
ctx.scale(dpr, dpr);
|
||||||
|
|
||||||
|
function random(min, max) {
|
||||||
|
return min + Math.random() * ( max - min );
|
||||||
|
}
|
||||||
|
|
||||||
function resize() {
|
function resize() {
|
||||||
canvas.width = window.innerWidth * dpr;
|
canvas.width = window.innerWidth * dpr;
|
||||||
canvas.height = window.innerHeight * dpr;
|
canvas.height = window.innerHeight * dpr;
|
||||||
@ -24,6 +29,7 @@ class Star {
|
|||||||
this.x = x;
|
this.x = x;
|
||||||
this.y = y;
|
this.y = y;
|
||||||
this.multiplier = multiplier;
|
this.multiplier = multiplier;
|
||||||
|
this.color = random(0, 360);
|
||||||
}
|
}
|
||||||
|
|
||||||
canvasPos() {
|
canvasPos() {
|
||||||
@ -40,15 +46,28 @@ class Star {
|
|||||||
return 1.0;
|
return 1.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
render(ctx) {
|
render(ctx, style) {
|
||||||
const { x, y } = this.canvasPos();
|
const { x, y } = this.canvasPos();
|
||||||
const r = this.size();
|
const r = this.size();
|
||||||
ctx.fillStyle = "red";
|
ctx.fillStyle = this.computeStyle(style);
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(x, y, r, 0, 2*Math.PI)
|
ctx.arc(x, y, r, 0, 2*Math.PI)
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private computeStyle(style) {
|
||||||
|
if (style == "white") {
|
||||||
|
return "white";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (style == "red") {
|
||||||
|
return "red";
|
||||||
|
}
|
||||||
|
if (style == "multi") {
|
||||||
|
return `hsl(${this.color}, 100%, 50%)`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
static make() {
|
static make() {
|
||||||
const angle = Math.random() * 2*Math.PI
|
const angle = Math.random() * 2*Math.PI
|
||||||
const x = Math.cos(angle);
|
const x = Math.cos(angle);
|
||||||
@ -67,12 +86,17 @@ const state = {
|
|||||||
timeSinceLastStar: Infinity,
|
timeSinceLastStar: Infinity,
|
||||||
};
|
};
|
||||||
|
|
||||||
let start = null;
|
|
||||||
let stars = [];
|
|
||||||
let timeSinceLastStar = Infinity;
|
|
||||||
|
|
||||||
const starIntervalms = 2000;
|
const options = {
|
||||||
const fadeout = 8 / 100;
|
fadeout: 8/100,
|
||||||
|
starIntervalMS: 2000,
|
||||||
|
starStyle: "white",
|
||||||
|
}
|
||||||
|
|
||||||
|
const controls = new dat.GUI({name: "Controls", closed: false});
|
||||||
|
controls.add(options, "fadeout").min(0).max(1).step(0.01).name("Fadeout");
|
||||||
|
controls.add(options, "starIntervalMS").min(500).max(50000).step(500).name("Star Interval");
|
||||||
|
controls.add(options, "starStyle").options({"White": "white", "Red":"red", "Multi": "multi"}).name("Style");
|
||||||
|
|
||||||
function clear(ctx, alpha) {
|
function clear(ctx, alpha) {
|
||||||
ctx.globalCompositeOperation = "destination-out";
|
ctx.globalCompositeOperation = "destination-out";
|
||||||
@ -90,14 +114,14 @@ function loop(timestamp) {
|
|||||||
// Create a new star if it's been long enough since
|
// Create a new star if it's been long enough since
|
||||||
// the previous one
|
// the previous one
|
||||||
state.timeSinceLastStar += progress;
|
state.timeSinceLastStar += progress;
|
||||||
if (state.timeSinceLastStar > starIntervalms) {
|
if (state.timeSinceLastStar > options.starIntervalMS) {
|
||||||
state.timeSinceLastStar = 0
|
state.timeSinceLastStar = 0
|
||||||
state.stars.push(Star.make());
|
state.stars.push(Star.make());
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear the screen.
|
// Clear the screen.
|
||||||
// If you want the hyperspace effect, skip this.
|
// If you want the hyperspace effect, skip this.
|
||||||
clear(ctx, fadeout);
|
clear(ctx, options.fadeout);
|
||||||
|
|
||||||
state.stars.forEach((star) => {
|
state.stars.forEach((star) => {
|
||||||
// Increase the star's distance from the middle
|
// Increase the star's distance from the middle
|
||||||
@ -105,7 +129,7 @@ function loop(timestamp) {
|
|||||||
const multiplier = star.multiplier;
|
const multiplier = star.multiplier;
|
||||||
star.x *= multiplier
|
star.x *= multiplier
|
||||||
star.y *= multiplier
|
star.y *= multiplier
|
||||||
star.render(ctx);
|
star.render(ctx, options.starStyle);
|
||||||
})
|
})
|
||||||
|
|
||||||
// Remove stars outside the view boundary
|
// Remove stars outside the view boundary
|
||||||
|
Loading…
Reference in New Issue
Block a user