@d3p1/img2pxl 1.22.1 → 1.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +93 -5
- package/dist/{core/app → app/main/runner}/image.d.ts +2 -2
- package/dist/{core/app → app/main/runner}/pointer/canvas.d.ts +1 -1
- package/dist/{core/app → app/main/runner}/pointer.d.ts +1 -1
- package/dist/{core/app.d.ts → app/main/runner.d.ts} +5 -5
- package/dist/{img2pxl.d.ts → app/main.d.ts} +4 -4
- package/dist/{img2pxl.js → core.js} +115 -117
- package/dist/core.js.map +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/{core/lib → services}/debug-manager/copy/settings.d.ts +1 -1
- package/dist/{core/lib → services}/image-manager.d.ts +1 -1
- package/package.json +13 -11
- package/dist/img2pxl.js.map +0 -1
- package/dist/img2pxl.umd.cjs +0 -94
- package/dist/img2pxl.umd.cjs.map +0 -1
- /package/dist/{core/lib → services}/debug-manager.d.ts +0 -0
- /package/dist/{core/lib → services}/renderer-manager.d.ts +0 -0
package/README.md
CHANGED
|
@@ -10,13 +10,101 @@
|
|
|
10
10
|
|
|
11
11
|
## Introduction
|
|
12
12
|
|
|
13
|
-
An image
|
|
13
|
+
An efficient image-to-pixel transformation with motion effects, leveraging WebGL's hardware acceleration through [Three.js](https://threejs.org/):
|
|
14
|
+
|
|
15
|
+
<div align="center">
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
> [!TIP]
|
|
22
|
+
> The approach of this implementation bypasses the performance limitations of the 2D canvas API, enabling smooth and dynamic visual effects directly on the GPU.
|
|
23
|
+
|
|
24
|
+
> [!TIP]
|
|
25
|
+
> If you would like to implement a similar effect on a 3D model, you can use the related library [`d3p1/thr2pxl`](https://github.com/d3p1/thr2pxl), which uses [GPGPU](https://en.wikipedia.org/wiki/General-purpose_computing_on_graphics_processing_units) to achieve it with high performance.
|
|
26
|
+
|
|
27
|
+
## Installation
|
|
28
|
+
|
|
29
|
+
You can install this library using a package manager like `npm`:
|
|
30
|
+
|
|
31
|
+
```javascript
|
|
32
|
+
npm install @d3p1/img2pxl
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Or you can use a CDN like [jsDelivr](https://www.jsdelivr.com/) and this [importmap](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap) in the `<head>` of your `html` file:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<head>
|
|
39
|
+
...
|
|
40
|
+
<script type="importmap">
|
|
41
|
+
{
|
|
42
|
+
"imports": {
|
|
43
|
+
"@d3p1/img2pxl": "https://cdn.jsdelivr.net/npm/@d3p1/img2pxl@<version>/dist/img2pxl.min.js",
|
|
44
|
+
"three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.min.js",
|
|
45
|
+
"tweakpane": "https://cdn.jsdelivr.net/npm/tweakpane@<version>/dist/tweakpane.min.js"
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
</script>
|
|
49
|
+
...
|
|
50
|
+
</head>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
> [!NOTE]
|
|
54
|
+
> Remember to replace the `<version>` with the actual version of `img2pxl` and its peer dependencies ([`three`](https://github.com/mrdoob/three.js) and [`tweakpane`](https://github.com/cocopon/tweakpane)). To do that, you can check the [`package.json`](https://github.com/d3p1/img2pxl/blob/main/package.json) of the last release and get required versions from there.
|
|
55
|
+
|
|
56
|
+
## Usage
|
|
57
|
+
|
|
58
|
+
Using this library is straightforward:
|
|
59
|
+
|
|
60
|
+
1. Go to our [builder page](https://d3p1.github.io/img2pxl/) and make the desired customizations in the tweak panel to achieve the desired effect.
|
|
61
|
+
|
|
62
|
+
2. Use the `Copy` button to obtain the configuration that produces the desired effect.
|
|
63
|
+
|
|
64
|
+
3. Instantiate the library with the configuration copied in the previous step, for example:
|
|
65
|
+
|
|
66
|
+
```javascript
|
|
67
|
+
import {Img2Pxl} from '@d3p1/img2pxl/core'
|
|
68
|
+
|
|
69
|
+
new Img2Pxl({
|
|
70
|
+
images: {
|
|
71
|
+
0: {
|
|
72
|
+
src: <image-src>,
|
|
73
|
+
width: <image-width>,
|
|
74
|
+
height: <image-height>,
|
|
75
|
+
resolution: {
|
|
76
|
+
width: <image-resolution-width>,
|
|
77
|
+
height: <image-resolution-height>
|
|
78
|
+
},
|
|
79
|
+
pixel: {
|
|
80
|
+
size: 2,
|
|
81
|
+
alphaTest: 0.9,
|
|
82
|
+
motion: {
|
|
83
|
+
displacement: {
|
|
84
|
+
frequency: 1,
|
|
85
|
+
amplitude: 40,
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
motion: {
|
|
90
|
+
noise: {
|
|
91
|
+
frequency: 0.025,
|
|
92
|
+
amplitude: 40,
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
pointer: {
|
|
98
|
+
size: 0.1,
|
|
99
|
+
trailing: {
|
|
100
|
+
factor: 0.01
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
})
|
|
104
|
+
```
|
|
14
105
|
|
|
15
106
|
> [!NOTE]
|
|
16
|
-
>
|
|
17
|
-
> - [Three.js Journey - Particle Cursor Animation Shader](https://threejs-journey.com/lessons/particles-cursor-animation-shader).
|
|
18
|
-
> - [Learn Creative Coding: Image Effects](https://www.youtube.com/watch?v=UeZ1pTg_nMo).
|
|
19
|
-
> - [Image into Interactive Particles - HTML Canvas Animation Tutorial | Advanced Pure Vanilla JavaScript](https://www.youtube.com/watch?v=afdHgwn1XCY).
|
|
107
|
+
> To gain a deeper understanding of how to use this library and how it works under the hood, visit the [wiki page](https://github.com/d3p1/img2pxl/wiki) _(in progress)_.
|
|
20
108
|
|
|
21
109
|
## Changelog
|
|
22
110
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { default as RendererManager } from '
|
|
2
|
-
import { default as DebugManager } from '
|
|
1
|
+
import { default as RendererManager } from '../../../services/renderer-manager.js';
|
|
2
|
+
import { default as DebugManager } from '../../../services/debug-manager.js';
|
|
3
3
|
/**
|
|
4
4
|
* @description Image
|
|
5
5
|
* @author C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { default as RendererManager } from '
|
|
2
|
-
import { default as DebugManager } from '
|
|
3
|
-
import { default as Image } from './
|
|
4
|
-
import { default as Pointer } from './
|
|
5
|
-
export default class
|
|
1
|
+
import { default as RendererManager } from '../../services/renderer-manager.js';
|
|
2
|
+
import { default as DebugManager } from '../../services/debug-manager.js';
|
|
3
|
+
import { default as Image } from './runner/image.js';
|
|
4
|
+
import { default as Pointer } from './runner/pointer.js';
|
|
5
|
+
export default class Runner {
|
|
6
6
|
#private;
|
|
7
7
|
/**
|
|
8
8
|
* Constructor
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { default as RendererManager } from '
|
|
2
|
-
import { default as DebugManager } from '
|
|
3
|
-
import { Config } from '
|
|
4
|
-
export default class
|
|
1
|
+
import { default as RendererManager } from '../services/renderer-manager.js';
|
|
2
|
+
import { default as DebugManager } from '../services/debug-manager.js';
|
|
3
|
+
import { Config } from '../types';
|
|
4
|
+
export default class Main {
|
|
5
5
|
#private;
|
|
6
6
|
/**
|
|
7
7
|
* @type {RendererManager}
|