@d3p1/img2pxl 1.12.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Cristian Marcelo de Picciotto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+<div align=center>
+
+# [IMAGE2PXL]
+
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+[![Release](https://github.com/d3p1/img2pxl/actions/workflows/release.yml/badge.svg)](https://github.com/d3p1/img2pxl/actions/workflows/release.yml)
+[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
+
+</div>
+
+## Introduction
+
+Just a cool image to pixel effect.
+
+> [!NOTE]
+> This library was inspired by these excellent tutorials:
+> - [Three.js Journey - Particle Cursor Animation Shader](https://threejs-journey.com/lessons/particles-cursor-animation-shader).
+> - [Learn Creative Coding: Image Effects](https://www.youtube.com/watch?v=UeZ1pTg_nMo).
+> - [Image into Interactive Particles - HTML Canvas Animation Tutorial | Advanced Pure Vanilla JavaScript](https://www.youtube.com/watch?v=afdHgwn1XCY). 
+
+## Changelog
+
+Detailed changes for each release are documented in [`CHANGELOG.md`](./CHANGELOG.md).
+
+## License
+
+This work is published under [MIT License](./LICENSE).
+
+## Author
+
+Always happy to receive a greeting on:
+
+- [LinkedIn](https://www.linkedin.com/in/cristian-marcelo-de-picciotto/)
+- [Web](https://d3p1.dev/)

package/dist/core/app/image.d.ts

@@ -0,0 +1,33 @@
+import { default as GUI } from 'lil-gui';
+import { default as RendererManager } from '../lib/renderer-manager.js';
+import * as THREE from 'three';
+export default class Image {
+    #private;
+    /**
+     * @type {THREE.Points}
+     */
+    points: THREE.Points<THREE.PlaneGeometry, THREE.ShaderMaterial>;
+    /**
+     * Constructor
+     *
+     * @param {RendererManager} rendererManager
+     * @param {GUI}             debugManager
+     * @param {string}          imageSrc
+     * @param {number}          resolutionWidth
+     * @param {number}          resolutionHeight
+     * @param {number}          pointSize
+     */
+    constructor(rendererManager: RendererManager, debugManager: GUI, imageSrc: string, resolutionWidth: number, resolutionHeight: number, pointSize?: number);
+    /**
+     * Enable debug mode
+     *
+     * @returns {void}
+     */
+    debug(): void;
+    /**
+     * Dispose
+     *
+     * @returns {void}
+     */
+    dispose(): void;
+}

package/dist/core/app/pointer/canvas.d.ts

@@ -0,0 +1,44 @@
+import { default as GUI } from 'lil-gui';
+import * as THREE from 'three';
+export default class Canvas {
+    #private;
+    /**
+     * @type {THREE.CanvasTexture}
+     */
+    texture: THREE.Texture;
+    /**
+     * @type {HTMLCanvasElement}
+     */
+    element: HTMLCanvasElement;
+    /**
+     * Constructor
+     *
+     * @param {GUI}    debugManager
+     * @param {number} resolutionWidth
+     * @param {number} resolutionHeight
+     * @param {string} displacementImageSrc
+     * @param {number} displacementSize
+     * @param {number} displacementTrailingFactor
+     */
+    constructor(debugManager: GUI, resolutionWidth: number, resolutionHeight: number, displacementImageSrc: string, displacementSize?: number, displacementTrailingFactor?: number);
+    /**
+     * Update
+     *
+     * @param   {number|null} dx
+     * @param   {number|null} dy
+     * @returns {void}
+     */
+    update(dx: number | null, dy: number | null): void;
+    /**
+     * Enable debug mode
+     *
+     * @returns {void}
+     */
+    debug(): void;
+    /**
+     * Dispose
+     *
+     * @returns {void}
+     */
+    dispose(): void;
+}

package/dist/core/app/pointer.d.ts

@@ -0,0 +1,54 @@
+import { default as RendererManager } from '../lib/renderer-manager.js';
+import { default as Canvas } from './pointer/canvas.js';
+/**
+ * @description Pointer
+ * @author      C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
+ */
+import * as THREE from 'three';
+export default class Pointer {
+    #private;
+    /**
+     * @type {THREE.Vector2|{x: number|undefined, y: number|undefined}}
+     */
+    coord: THREE.Vector2 | {
+        x: number | undefined;
+        y: number | undefined;
+    };
+    /**
+     * @type {Canvas}
+     */
+    canvas: Canvas;
+    /**
+     * @type {THREE.Raycaster}
+     */
+    raycaster: THREE.Raycaster;
+    /**
+     * @type {THREE.Mesh}
+     */
+    raycasterPlane: THREE.Mesh<THREE.PlaneGeometry, THREE.MeshBasicMaterial>;
+    /**
+     * Constructor
+     *
+     * @param {RendererManager} rendererManager
+     * @param {Canvas}          canvas
+     */
+    constructor(rendererManager: RendererManager, canvas: Canvas);
+    /**
+     * Update
+     *
+     * @returns {void}
+     */
+    update(): void;
+    /**
+     * Enable debug mode
+     *
+     * @returns {void}
+     */
+    debug(): void;
+    /**
+     * Dispose
+     *
+     * @returns {void}
+     */
+    dispose(): void;
+}

package/dist/core/app.d.ts

@@ -0,0 +1,44 @@
+import { default as GUI } from 'lil-gui';
+import { default as RendererManager } from './lib/renderer-manager.js';
+import { default as Image } from './app/image.js';
+import { default as Pointer } from './app/pointer.js';
+export default class App {
+    #private;
+    /**
+     * Constructor
+     *
+     * @param {Image}           image
+     * @param {Pointer}         pointer
+     * @param {RendererManager} rendererManager
+     * @param {GUI}             debugManager
+     * @param {string}          noiseImageSrc
+     * @param {number}          noiseFrequency
+     * @param {number}          noiseAmplitude
+     * @param {number}          displacementFrequency
+     * @param {number}          displacementAmplitude
+     */
+    constructor(image: Image, pointer: Pointer, rendererManager: RendererManager, debugManager: GUI, noiseImageSrc: string, noiseFrequency?: number, noiseAmplitude?: number, displacementFrequency?: number, displacementAmplitude?: number);
+    /**
+     * Update
+     *
+     * @param   {number} elapsed
+     * @returns {void}
+     * @note    It is required to validate if `uTime` is set
+     *          because the `beforeCompile` image material shader logic
+     *          (which adds this uniform)
+     *          only runs after the first render of the scene
+     */
+    update(elapsed: number): void;
+    /**
+     * Enable debug mode
+     *
+     * @returns {void}
+     */
+    debug(): void;
+    /**
+     * Dispose
+     *
+     * @returns {void}
+     */
+    dispose(): void;
+}

package/dist/core/lib/renderer-manager.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @description Renderer manager
+ * @author      C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
+ * @note        The idea behind this class is to encapsulate and wrap the
+ *              render logic
+ */
+import * as THREE from 'three';
+export default class RendererManager {
+    #private;
+    /**
+     * @type {THREE.Scene}
+     */
+    scene: THREE.Scene;
+    /**
+     * @type {THREE.WebGLRenderer}
+     */
+    renderer: THREE.WebGLRenderer;
+    /**
+     * @type {THREE.OrthographicCamera}
+     * @note It is used an orthographic camera because it is desired
+     *       to draw a 2d image without perspective
+     */
+    camera: THREE.OrthographicCamera;
+    /**
+     * @type {number}
+     */
+    width: number;
+    /**
+     * @type {number}
+     */
+    height: number;
+    /**
+     * @type {number}
+     * @note Device pixel ratio
+     */
+    dpr: number;
+    /**
+     * Constructor
+     *
+     * @param {number} width
+     * @param {number} height
+     */
+    constructor(width: number, height: number);
+    /**
+     * Update
+     *
+     * @returns {void}
+     */
+    update(): void;
+    /**
+     * Dispose
+     *
+     * @returns {void}
+     */
+    dispose(): void;
+}

package/dist/img2pxl.d.ts

@@ -0,0 +1,42 @@
+export default class Img2Pxl {
+    #private;
+    /**
+     * Constructor
+     *
+     * @param {string} imageSrc
+     * @param {number} width
+     * @param {number} height
+     * @param {number} resolutionWidth
+     * @param {number} resolutionHeight
+     * @param {number} pointSize
+     * @param {string} noiseImageSrc
+     * @param {number} noiseFrequency
+     * @param {number} noiseAmplitude
+     * @param {string} displacementImageSrc
+     * @param {number} displacementSize
+     * @param {number} displacementTrailingFactor
+     * @param {number} displacementFrequency
+     * @param {number} displacementAmplitude
+     */
+    constructor(imageSrc: string, width: number, height: number, resolutionWidth: number, resolutionHeight: number, pointSize?: number, noiseImageSrc?: string, noiseFrequency?: number, noiseAmplitude?: number, displacementImageSrc?: string, displacementSize?: number, displacementTrailingFactor?: number, displacementFrequency?: number, displacementAmplitude?: number);
+    /**
+     * Render
+     *
+     * @params  {number} t
+     * @returns {void}
+     */
+    render(t?: number): void;
+    /**
+     * Enable debug mode
+     *
+     * @param   {KeyboardEvent} e
+     * @returns {void}
+     */
+    debug(e: KeyboardEvent): void;
+    /**
+     * Dispose
+     *
+     * @returns {void}
+     */
+    dispose(): void;
+}