Skip to content

Commit

Permalink
feat: added smooth options, it ignores the fpsLimit trying to create …
Browse files Browse the repository at this point in the history 
…a smoother animation*

the animation will be affected by the fps on the user's PC, so be careful
  • Loading branch information
@matteobruni
matteobruni committed Aug 17, 2022
1 parent 5f97749 commit 5ad1a27
Show file tree
Hide file tree
Showing 9 changed files with 104 additions and 81 deletions.
73 changes: 36 additions & 37 deletions engine/src/Core/Canvas.ts
View file
Expand Up @@ -48,14 +48,13 @@ export class Canvas {
*/
private _context: CanvasRenderingContext2D | null;

private _coverColorStyle?: string;
private _generatedCanvas;
private _originalStyle?: CSSStyleDeclaration;
private _postDrawUpdaters: IParticleUpdater[];
private _preDrawUpdaters: IParticleUpdater[];
private _resizePlugins: IContainerPlugin[];

private coverColorStyle?: string;
private generatedCanvas;
private originalStyle?: CSSStyleDeclaration;
private trailFillColor?: IRgba;
private _trailFillColor?: IRgba;

/**
* Constructor of canvas manager
Expand All @@ -68,7 +67,7 @@ export class Canvas {
};

this._context = null;
this.generatedCanvas = false;
this._generatedCanvas = false;
this._preDrawUpdaters = [];
this._postDrawUpdaters = [];
this._resizePlugins = [];
Expand All @@ -84,8 +83,8 @@ export class Canvas {

if (options.backgroundMask.enable) {
this.paint();
} else if (trail.enable && trail.length > 0 && this.trailFillColor) {
this.paintBase(getStyleFromRgb(this.trailFillColor, 1 / trail.length));
} else if (trail.enable && trail.length > 0 && this._trailFillColor) {
this._paintBase(getStyleFromRgb(this._trailFillColor, 1 / trail.length));
} else {
this.draw((ctx) => {
clear(ctx, this.size);
Expand All @@ -97,10 +96,10 @@ export class Canvas {
* Destroying object actions
*/
destroy(): void {
if (this.generatedCanvas) {
if (this._generatedCanvas) {
this.element?.remove();
} else {
this.resetOriginalStyle();
this._resetOriginalStyle();
}

this.draw((ctx) => {
Expand Down Expand Up @@ -144,7 +143,7 @@ export class Canvas {
const pfColor = particle.getFillColor(),
psColor = particle.getStrokeColor() ?? pfColor;

let [fColor, sColor] = this.getPluginParticleColors(particle);
let [fColor, sColor] = this._getPluginParticleColors(particle);

if (!fColor) {
fColor = pfColor;
Expand Down Expand Up @@ -173,7 +172,7 @@ export class Canvas {

colorStyles.stroke = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : colorStyles.fill;

this.applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);
this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);

drawParticle({
container: this.container,
Expand All @@ -189,7 +188,7 @@ export class Canvas {
transform,
});

this.applyPostDrawUpdaters(particle);
this._applyPostDrawUpdaters(particle);
});
}

Expand Down Expand Up @@ -221,9 +220,9 @@ export class Canvas {
*/
init(): void {
this.resize();
this.initStyle();
this.initCover();
this.initTrail();
this._initStyle();
this._initCover();
this._initTrail();
this.initBackground();
this.initUpdaters();
this.initPlugins();
Expand Down Expand Up @@ -297,16 +296,16 @@ export class Canvas {
* @param canvas the canvas html element
*/
loadCanvas(canvas: HTMLCanvasElement): void {
if (this.generatedCanvas) {
if (this._generatedCanvas) {
this.element?.remove();
}

this.generatedCanvas =
this._generatedCanvas =
canvas.dataset && generatedAttribute in canvas.dataset
? canvas.dataset[generatedAttribute] === "true"
: this.generatedCanvas;
: this._generatedCanvas;
this.element = canvas;
this.originalStyle = deepExtend({}, this.element.style) as CSSStyleDeclaration;
this._originalStyle = deepExtend({}, this.element.style) as CSSStyleDeclaration;
this.size.height = canvas.offsetHeight;
this.size.width = canvas.offsetWidth;
this._context = this.element.getContext("2d");
Expand All @@ -324,9 +323,9 @@ export class Canvas {
if (options.backgroundMask.enable && options.backgroundMask.cover) {
clear(ctx, this.size);

this.paintBase(this.coverColorStyle);
this._paintBase(this._coverColorStyle);
} else {
this.paintBase();
this._paintBase();
}
});
}
Expand Down Expand Up @@ -385,20 +384,20 @@ export class Canvas {
/* density particles enabled */
container.particles.setDensity();

this.applyResizePlugins();
this._applyResizePlugins();

if (needsRefresh) {
await container.refresh();
}
}

private applyPostDrawUpdaters(particle: Particle): void {
private _applyPostDrawUpdaters(particle: Particle): void {
for (const updater of this._postDrawUpdaters) {
updater.afterDraw?.(particle);
}
}

private applyPreDrawUpdaters(
private _applyPreDrawUpdaters(
ctx: CanvasRenderingContext2D,
particle: Particle,
radius: number,
Expand Down Expand Up @@ -431,13 +430,13 @@ export class Canvas {
}
}

private applyResizePlugins(): void {
private _applyResizePlugins(): void {
for (const plugin of this._resizePlugins) {
plugin.resize?.();
}
}

private getPluginParticleColors(particle: Particle): (IHsl | undefined)[] {
private _getPluginParticleColors(particle: Particle): (IHsl | undefined)[] {
let fColor: IHsl | undefined, sColor: IHsl | undefined;

for (const plugin of this._colorPlugins) {
Expand All @@ -457,7 +456,7 @@ export class Canvas {
return [fColor, sColor];
}

private initCover(): void {
private _initCover(): void {
const options = this.container.actualOptions,
cover = options.backgroundMask.cover,
color = cover.color,
Expand All @@ -471,11 +470,11 @@ export class Canvas {
a: cover.opacity,
};

this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
this._coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
}
}

private initStyle(): void {
private _initStyle(): void {
const element = this.element,
options = this.container.actualOptions;

Expand All @@ -484,7 +483,7 @@ export class Canvas {
}

if (options.fullScreen.enable) {
this.originalStyle = deepExtend({}, element.style) as CSSStyleDeclaration;
this._originalStyle = deepExtend({}, element.style) as CSSStyleDeclaration;

element.style.setProperty("position", "fixed", "important");
element.style.setProperty("z-index", options.fullScreen.zIndex.toString(10), "important");
Expand All @@ -493,7 +492,7 @@ export class Canvas {
element.style.setProperty("width", "100%", "important");
element.style.setProperty("height", "100%", "important");
} else {
this.resetOriginalStyle();
this._resetOriginalStyle();
}

for (const key in options.style) {
Expand All @@ -511,15 +510,15 @@ export class Canvas {
}
}

private initTrail(): void {
private _initTrail(): void {
const options = this.container.actualOptions,
trail = options.particles.move.trail,
fillColor = rangeColorToRgb(trail.fillColor);

if (fillColor) {
const trail = options.particles.move.trail;

this.trailFillColor = {
this._trailFillColor = {
r: fillColor.r,
g: fillColor.g,
b: fillColor.b,
Expand All @@ -528,15 +527,15 @@ export class Canvas {
}
}

private paintBase(baseColor?: string): void {
private _paintBase(baseColor?: string): void {
this.draw((ctx) => {
paintBase(ctx, this.size, baseColor);
});
}

private resetOriginalStyle(): void {
private _resetOriginalStyle(): void {
const element = this.element,
originalStyle = this.originalStyle;
originalStyle = this._originalStyle;

if (element && originalStyle) {
element.style.position = originalStyle.position;
Expand Down
8 changes: 6 additions & 2 deletions engine/src/Core/Container.ts
View file
Expand Up @@ -136,6 +136,8 @@ export class Container {

readonly retina;

smooth;

/**
* Check if the particles container is started
*/
Expand Down Expand Up @@ -164,6 +166,7 @@ export class Container {
constructor(engine: Engine, readonly id: string, sourceOptions?: RecursivePartial<IOptions>) {
this._engine = engine;
this.fpsLimit = 120;
this.smooth = false;
this.duration = 0;
this.lifeTime = 0;
this._firstStart = true;
Expand Down Expand Up @@ -196,7 +199,7 @@ export class Container {
this._eventListeners = new EventListeners(this);

if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
this._intersectionObserver = new IntersectionObserver((entries) => this.intersectionManager(entries));
this._intersectionObserver = new IntersectionObserver((entries) => this._intersectionManager(entries));
}

this._engine.dispatchEvent(EventType.containerBuilt, { container: this });
Expand Down Expand Up @@ -488,6 +491,7 @@ export class Container {
this.duration = getRangeValue(this.actualOptions.duration);
this.lifeTime = 0;
this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
this.smooth = this.actualOptions.smooth;

const availablePlugins = this._engine.plugins.getAvailablePlugins(this);

Expand Down Expand Up @@ -769,7 +773,7 @@ export class Container {
return false;
}

private intersectionManager(entries: IntersectionObserverEntry[]): void {
private _intersectionManager(entries: IntersectionObserverEntry[]): void {
if (!this.actualOptions.pauseOnOutsideViewport) {
return;
}
Expand Down
20 changes: 10 additions & 10 deletions engine/src/Core/Particle.ts
View file
Expand Up @@ -315,10 +315,10 @@ export class Particle implements IParticle {
shapeOptions.load(overrideOptions.shape);

if (this.shape) {
this.shapeData = this.loadShapeData(shapeOptions, reduceDuplicates);
this.shapeData = this._loadShapeData(shapeOptions, reduceDuplicates);
}
} else {
this.shapeData = this.loadShapeData(particlesOptions.shape, reduceDuplicates);
this.shapeData = this._loadShapeData(particlesOptions.shape, reduceDuplicates);
}

particlesOptions.load(overrideOptions);
Expand Down Expand Up @@ -405,7 +405,7 @@ export class Particle implements IParticle {
inRange: false,
factor: 1,
};
this.position = this.calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
this.position = this._calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
this.initialPosition = this.position.copy();

const canvasSize = container.canvas.size,
Expand All @@ -429,7 +429,7 @@ export class Particle implements IParticle {
}

/* animation - velocity for speed */
this.initialVelocity = this.calculateVelocity();
this.initialVelocity = this._calculateVelocity();
this.velocity = this.initialVelocity.copy();
this.moveDecay = 1 - getRangeValue(this.options.move.decay);

Expand Down Expand Up @@ -586,7 +586,7 @@ export class Particle implements IParticle {
this.size.loops = 0;
}

private calcPosition(
private _calcPosition(
container: Container,
position: ICoordinates | undefined,
zIndex: number,
Expand Down Expand Up @@ -636,14 +636,14 @@ export class Particle implements IParticle {
fixVertical(outModes.top ?? outModes.default);
fixVertical(outModes.bottom ?? outModes.default);

if (this.checkOverlap(pos, tryCount)) {
return this.calcPosition(container, undefined, zIndex, tryCount + 1);
if (this._checkOverlap(pos, tryCount)) {
return this._calcPosition(container, undefined, zIndex, tryCount + 1);
}

return pos;
}

private calculateVelocity(): Vector {
private _calculateVelocity(): Vector {
const baseVelocity = getParticleBaseVelocity(this.direction);
const res = baseVelocity.copy();
const moveOptions = this.options.move;
Expand Down Expand Up @@ -671,7 +671,7 @@ export class Particle implements IParticle {
return res;
}

private checkOverlap(pos: ICoordinates, tryCount = 0): boolean {
private _checkOverlap(pos: ICoordinates, tryCount = 0): boolean {
const collisionsOptions = this.options.collisions,
radius = this.getRadius();

Expand Down Expand Up @@ -703,7 +703,7 @@ export class Particle implements IParticle {
return overlaps;
}

private loadShapeData(shapeOptions: IShape, reduceDuplicates: boolean): IShapeValues | undefined {
private _loadShapeData(shapeOptions: IShape, reduceDuplicates: boolean): IShapeValues | undefined {
const shapeData = shapeOptions.options[this.shape];

if (shapeData) {
Expand Down

0 comments on commit 5ad1a27

Please sign in to comment.