diff --git a/justfile b/justfile index d5408ba..c48ae01 100644 --- a/justfile +++ b/justfile @@ -2,4 +2,4 @@ _default: just --list parcel: - pnpm exec parcel src/index.html + pnpm exec parcel src/index.html --no-cache --trace diff --git a/src/orbital-trails-extern-2/app.js b/src/orbital-trails-extern-2/app.js index 26b698b..efdf502 100644 --- a/src/orbital-trails-extern-2/app.js +++ b/src/orbital-trails-extern-2/app.js @@ -30,6 +30,7 @@ var Orb = function( x, y ){ this.angle = atan2( dy, dx ); this.lastAngle = this.angle; this.radius = 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; }; @@ -70,6 +71,7 @@ Orb.prototype.render = function(){ var createOrb = function( config ){ var x = ( config && config.x ) ? config.x : sketch.mouse.x, y = ( config && config.y ) ? config.y : sketch.mouse.y; + console.log("Create orb", `${x} et ${y}`); orbs.push( new Orb( x, y ) ); }; diff --git a/src/orbital-trails/app.js b/src/orbital-trails/app.js index 759753c..d67fda6 100644 --- a/src/orbital-trails/app.js +++ b/src/orbital-trails/app.js @@ -2,6 +2,7 @@ console.log("Initializing animation"); const canvas = document.getElementById('mainCanvas'); const ctx = canvas.getContext('2d'); + const dpr = window.devicePixelRatio; const cw = window.innerWidth; const ch = window.innerHeight; @@ -9,50 +10,129 @@ canvas.width = cw * dpr; canvas.height = ch * dpr; ctx.scale(dpr, dpr); -const stats = { - total: 0 +const center = { x: canvas.width / 2, y: canvas.height /2 }; +console.log(center); + +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 ); +} + +const initialOrbCount = 100; + +const state = { + total: 0, + dt: 1, + orbs: [], }; const options = { speed: 65, scale: 1.0, }; -const Orb = (x, y) => { +const Orb = function(x, y) { + const scale = options.scale; + const dx = ( x / scale ) - ( center.x / scale ); + const dy = ( y / scale ) - ( center.y / scale ); + this.angle = Math.atan2(dy, dx); + this.lastAngle = this.angle; + 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; }; -const orbs = []; +Orb.prototype.update = function() { + const speed = options.speed; + this.lastAngle = this.angle; + this.angle += this.speed * ( speed / 50 ) * state.dt; + this.x = this.radius * Math.cos( this.angle ); + this.y = this.radius * Math.sin( this.angle ); +}; -const createOrb = (mx, my) => { - console.log(`Creating orb at ${mx} ${my}`); - const dx = (cw/2) - mx; - const dy = (ch/2) - my; - const dist = Math.sqrt(dx * dx + dy * dy); - const angle = Math.atan2(dy, dx); +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; + + //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.beginPath(); + ctx.arc(0, 0, radius, this.lastAngle, this.angle + 0.001, false); + ctx.stroke(); + ctx.closePath(); + + + /* + sketch.lineWidth = this.size; + sketch.beginPath(); + if(opt.speed >= 0){ + sketch.arc( 0, 0, radius, this.lastAngle, this.angle + 0.001, false ); + } else { + sketch.arc( 0, 0, radius, this.angle, this.lastAngle + 0.001, false ); + }; + sketch.stroke(); + sketch.closePath(); + */ }; -const initialOrbCount = 100; -for (let n = initialOrbCount; n >= 0; n--) { - createOrb(cw/2, ch/2+(n*2)); +const createOrb = (x, y) => { + console.log("create orb", `${x} et ${y}`); + state.orbs.push(new Orb(x, y)); +}; + + +const setup = () => { + 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); + createOrb(x, y); + } } -const loop = (timestamp) => { - window.requestAnimationFrame(loop); - //console.log(timestamp); - - -}; - -loop(); const controls = new dat.GUI( { autoPlace: false } ) const container = document.querySelector("#controlPanel"); -controls.add(stats, "total" ).name( "Total Placed" ).listen(); +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"); container.appendChild(controls.domElement); + +const loop = (timestamp) => { + window.requestAnimationFrame(loop); + const scale = options.scale; + ctx.save(); + ctx.translate(center.x, center.y); + ctx.scale(scale, scale); + state.orbs.forEach((orb) => { + orb.render(); + }); + ctx.restore(); +}; + +setup(); +loop();