Finally getting a render

This commit is contained in:
Greg Shuflin 2023-10-24 03:20:55 -07:00
parent 79ea2537cc
commit 174e7d0046
3 changed files with 105 additions and 23 deletions

View File

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

View File

@ -30,6 +30,7 @@ var Orb = function( x, y ){
this.angle = atan2( dy, dx ); this.angle = atan2( dy, dx );
this.lastAngle = this.angle; this.lastAngle = this.angle;
this.radius = sqrt( dx * dx + dy * dy ); this.radius = sqrt( dx * dx + dy * dy );
console.log(this.radius);
this.size = ( this.radius / 300 ) + 1; this.size = ( this.radius / 300 ) + 1;
this.speed = ( random( 1, 10 ) / 300000 ) * ( this.radius ) + 0.015; this.speed = ( random( 1, 10 ) / 300000 ) * ( this.radius ) + 0.015;
}; };
@ -70,6 +71,7 @@ Orb.prototype.render = function(){
var createOrb = function( config ){ var createOrb = function( config ){
var x = ( config && config.x ) ? config.x : sketch.mouse.x, var x = ( config && config.x ) ? config.x : sketch.mouse.x,
y = ( config && config.y ) ? config.y : sketch.mouse.y; y = ( config && config.y ) ? config.y : sketch.mouse.y;
console.log("Create orb", `${x} et ${y}`);
orbs.push( new Orb( x, y ) ); orbs.push( new Orb( x, y ) );
}; };

View File

@ -2,6 +2,7 @@ console.log("Initializing animation");
const canvas = document.getElementById('mainCanvas'); const canvas = document.getElementById('mainCanvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio; const dpr = window.devicePixelRatio;
const cw = window.innerWidth; const cw = window.innerWidth;
const ch = window.innerHeight; const ch = window.innerHeight;
@ -9,50 +10,129 @@ canvas.width = cw * dpr;
canvas.height = ch * dpr; canvas.height = ch * dpr;
ctx.scale(dpr, dpr); ctx.scale(dpr, dpr);
const stats = { const center = { x: canvas.width / 2, y: canvas.height /2 };
total: 0 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 = { const options = {
speed: 65, speed: 65,
scale: 1.0, 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) => { Orb.prototype.render = function() {
console.log(`Creating orb at ${mx} ${my}`); //console.log("Rendering orb");
const dx = (cw/2) - mx;
const dy = (ch/2) - my; this.update();
const dist = Math.sqrt(dx * dx + dy * dy);
const angle = Math.atan2(dy, dx); //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; const createOrb = (x, y) => {
for (let n = initialOrbCount; n >= 0; n--) { console.log("create orb", `${x} et ${y}`);
createOrb(cw/2, ch/2+(n*2)); 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 controls = new dat.GUI( { autoPlace: false } )
const container = document.querySelector("#controlPanel"); 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, "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, "scale" ).min(0.5).max(5).step(0.001).name("Scale");
container.appendChild(controls.domElement); 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();