Finally getting a render
This commit is contained in:
parent
79ea2537cc
commit
174e7d0046
2
justfile
2
justfile
@ -2,4 +2,4 @@ _default:
|
||||
just --list
|
||||
|
||||
parcel:
|
||||
pnpm exec parcel src/index.html
|
||||
pnpm exec parcel src/index.html --no-cache --trace
|
||||
|
@ -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 ) );
|
||||
};
|
||||
|
||||
|
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user