diff --git a/justfile b/justfile index c48ae01..dcfe65b 100644 --- a/justfile +++ b/justfile @@ -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 diff --git a/src/orbital-trails/app.js b/src/orbital-trails/app.js index d67fda6..2df1d66 100644 --- a/src/orbital-trails/app.js +++ b/src/orbital-trails/app.js @@ -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(); +