Various improvements
This commit is contained in:
parent
174e7d0046
commit
bbd9b3d9e6
2
justfile
2
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
|
||||
|
@ -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();
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user