greg
/
Spazer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Various improvements

This commit is contained in:
Greg Shuflin 2023-10-24 19:17:04 -07:00
parent 174e7d0046
commit bbd9b3d9e6
2 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
justfile
View File

@ -2,4 +2,4 @@ _default:
just --list
parcel:
pnpm exec parcel src/index.html --no-cache --trace
pnpm exec parcel src/index.html --no-cache

44
src/orbital-trails/app.js
View File

@ -39,6 +39,8 @@ const state = {
const options = {
speed: 65,
scale: 1.0,
radius: 300,
fadeout: 10,
};
const Orb = function(x, y) {
@ -46,14 +48,12 @@ const Orb = function(x, y) {
const dx = ( x / scale ) - ( center.x / scale );
const dy = ( y / scale ) - ( center.y / scale );
this.angle = Math.atan2(dy, dx);
this.lastAngle = this.angle;
const initialAngle = Math.atan2(dy, dx);
this.angle = initialAngle;
this.lastAngle = initialAngle;
this.radius = Math.sqrt(dx * dx + dy * dy);
//console.log(this.radius);
this.size = ( this.radius / 300 ) + 1;
this.speed = ( random(1, 10) / 300000 ) * ( this.radius ) + 0.015;
};
Orb.prototype.update = function() {
@ -65,16 +65,17 @@ Orb.prototype.update = function() {
};
Orb.prototype.render = function() {
//console.log("Rendering orb");
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;
// perfect-red
const style = "hsl(0, 100%, 50%)";
//sketch.strokeStyle = 'hsla( ' + ( ( this.angle + 90 ) / ( PI / 180 ) + random( -opt.jitterHue, opt.jitterHue ) ) + ', 100%, 50%, ' + ( opt.orbitalAlpha / 100 ) + ' )';
ctx.strokeStyle = "hsl(0, 100%, 50%)";
ctx.strokeStyle = style;
ctx.beginPath();
ctx.arc(0, 0, radius, this.lastAngle, this.angle + 0.001, false);
ctx.stroke();
@ -96,34 +97,46 @@ Orb.prototype.render = function() {
const createOrb = (x, y) => {
console.log("create orb", `${x} et ${y}`);
console.log(`Creating orb ${x}, ${y}`);
state.orbs.push(new Orb(x, y));
state.total += 1;
};
const setup = () => {
const radius = options.radius;
for (let n = initialOrbCount; n >= 0; n--) {
console.log("Canvas width", canvas.width);
const x = random(canvas.width / 2 - 300, canvas.width / 2 + 300);
const y = random(canvas.height / 2 - 300, canvas.height / 2 + 300);
console.log(x, y);
const x = random(canvas.width / 2 - radius, canvas.width / 2 + radius);
const y = random(canvas.height / 2 - radius, canvas.height / 2 + radius);
createOrb(x, y);
}
}
const clear = () => {
const alpha = options.fadeout / 100;
const style = `rgba(0, 0, 0, ${alpha})`;
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = style;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'lighter';
}
const controls = new dat.GUI( { autoPlace: false } )
const container = document.querySelector("#controlPanel");
controls.add(state, "total" ).name( "Total Placed" ).listen();
controls.add(options, "speed" ).min(-300).max(300).step(1).name("Speed");
controls.add(options, "scale" ).min(0.5).max(5).step(0.001).name("Scale");
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, "fadeout").min(0).max(100).step(1).name("Fadeout (/100)");
container.appendChild(controls.domElement);
const loop = (timestamp) => {
window.requestAnimationFrame(loop);
clear();
const scale = options.scale;
ctx.save();
ctx.translate(center.x, center.y);
@ -136,3 +149,4 @@ const loop = (timestamp) => {
setup();
loop();