More work

This commit is contained in:
Greg Shuflin 2023-10-24 20:02:21 -07:00
parent bbd9b3d9e6
commit f4e6862113

View File

@ -14,18 +14,6 @@ const center = { x: canvas.width / 2, y: canvas.height /2 };
console.log(center); console.log(center);
function random(min, max) { function random(min, max) {
/*
if ( isArray( min ) ) {
return min[ ~~( M.random() * min.length ) ];
}
*/
/*
if (!isNumber( max )) {
max = min || 1, min = 0;
}
*/
return min + Math.random() * ( max - min ); return min + Math.random() * ( max - min );
} }
@ -41,6 +29,9 @@ const options = {
scale: 1.0, scale: 1.0,
radius: 300, radius: 300,
fadeout: 10, fadeout: 10,
centerLight: true,
lightAlpha: 5,
perfectRed: false,
}; };
const Orb = function(x, y) { const Orb = function(x, y) {
@ -64,38 +55,52 @@ Orb.prototype.update = function() {
this.y = this.radius * Math.sin( this.angle ); this.y = this.radius * Math.sin( this.angle );
}; };
Orb.prototype.render = function() { Orb.prototype.render = function(timestamp) {
this.update(); this.update();
//const radius = ( opt.jitterRadius === 0 ) ? this.radius : this.radius + random( -opt.jitterRadius, opt.jitterRadius );
//radius = ( opt.jitterRadius != 0 && radius < 0 ) ? 0.001 : radius;
const radius = this.radius; const radius = this.radius;
// perfect-red // perfect-red = 0
const style = "hsl(0, 100%, 50%)"; const offset = timestamp / options.speed;
//sketch.strokeStyle = 'hsla( ' + ( ( this.angle + 90 ) / ( PI / 180 ) + random( -opt.jitterHue, opt.jitterHue ) ) + ', 100%, 50%, ' + ( opt.orbitalAlpha / 100 ) + ' )'; const hueAngle = (this.angle + 90) / (Math.PI / 180) + offset;
let style;
if (options.perfectRed) {
style = `hsl(0, 100%, 50%)`;
} else {
style = `hsl(${hueAngle}, 100%, 50%)`;
}
ctx.strokeStyle = style; ctx.strokeStyle = style;
ctx.lineWidth = this.size;
ctx.beginPath(); ctx.beginPath();
ctx.arc(0, 0, radius, this.lastAngle, this.angle + 0.001, false);
const increment = 0.001;
let start;
let end;
if (options.speed >= 0) {
start = this.lastAngle;
end = this.angle + increment;
} else {
end = this.lastAngle;
start = this.angle + increment;
}
ctx.arc(0, 0, radius, start, end, false);
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
if (options.centerLight) {
/* const alpha = options.lightAlpha / 100;
sketch.lineWidth = this.size; const style = `hsla(${hueAngle}, 100%, 70%, ${alpha}`;
sketch.beginPath(); ctx.lineWidth = .5;
if(opt.speed >= 0){ ctx.strokeStyle = style;
sketch.arc( 0, 0, radius, this.lastAngle, this.angle + 0.001, false ); ctx.beginPath();
} else { ctx.moveTo( 0, 0 );
sketch.arc( 0, 0, radius, this.angle, this.lastAngle + 0.001, false ); ctx.lineTo( this.x, this.y );
}; ctx.stroke();
sketch.stroke(); }
sketch.closePath();
*/
}; };
const createOrb = (x, y) => { const createOrb = (x, y) => {
console.log(`Creating orb ${x}, ${y}`); console.log(`Creating orb ${x}, ${y}`);
state.orbs.push(new Orb(x, y)); state.orbs.push(new Orb(x, y));
@ -121,7 +126,6 @@ const clear = () => {
ctx.globalCompositeOperation = 'lighter'; ctx.globalCompositeOperation = 'lighter';
} }
const controls = new dat.GUI( { autoPlace: false } ) const controls = new dat.GUI( { autoPlace: false } )
const container = document.querySelector("#controlPanel"); const container = document.querySelector("#controlPanel");
@ -130,6 +134,9 @@ controls.add(state, "total" ).name( "Total Placed" ).listen();
controls.add(options, "speed" ).min(-300).max(300).step(10).name("Speed"); controls.add(options, "speed" ).min(-300).max(300).step(10).name("Speed");
controls.add(options, "scale" ).min(0.5).max(5).step(0.1).name("Scale"); controls.add(options, "scale" ).min(0.5).max(5).step(0.1).name("Scale");
controls.add(options, "fadeout").min(0).max(100).step(1).name("Fadeout (/100)"); controls.add(options, "fadeout").min(0).max(100).step(1).name("Fadeout (/100)");
controls.add(options, "centerLight" ).name("Toggle Light");
controls.add(options, "lightAlpha" ).min(0).max(100).step(1).name("Light Alpha");
controls.add(options, "perfectRed").name("Perfect Red");
container.appendChild(controls.domElement); container.appendChild(controls.domElement);
@ -142,11 +149,10 @@ const loop = (timestamp) => {
ctx.translate(center.x, center.y); ctx.translate(center.x, center.y);
ctx.scale(scale, scale); ctx.scale(scale, scale);
state.orbs.forEach((orb) => { state.orbs.forEach((orb) => {
orb.render(); orb.render(timestamp);
}); });
ctx.restore(); ctx.restore();
}; };
setup(); setup();
loop(); loop();