@d3p1/img2pxl 3.1.1 → 3.1.2
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 +68 -3
- package/dist/core/index.d.ts +1 -1
- package/dist/main-CjtNvjba.js.map +1 -1
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +14 -14
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -37,6 +37,7 @@ Or you can use a CDN like [jsDelivr](https://www.jsdelivr.com/) and this [import
|
|
|
37
37
|
```html
|
|
38
38
|
<head>
|
|
39
39
|
...
|
|
40
|
+
<!-- Vanilla -->
|
|
40
41
|
<script type="importmap">
|
|
41
42
|
{
|
|
42
43
|
"imports": {
|
|
@@ -50,8 +51,27 @@ Or you can use a CDN like [jsDelivr](https://www.jsdelivr.com/) and this [import
|
|
|
50
51
|
</head>
|
|
51
52
|
```
|
|
52
53
|
|
|
54
|
+
```html
|
|
55
|
+
<head>
|
|
56
|
+
...
|
|
57
|
+
<!-- React -->
|
|
58
|
+
<script type="importmap">
|
|
59
|
+
{
|
|
60
|
+
"imports": {
|
|
61
|
+
"@d3p1/img2pxl": "https://cdn.jsdelivr.net/npm/@d3p1/img2pxl@<version>/dist/img2pxl.min.js",
|
|
62
|
+
"react": "https://cdn.jsdelivr.net/npm/react@<version>/jsx-runtime.min.js",
|
|
63
|
+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@<version>/index.min.js",
|
|
64
|
+
"three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.min.js",
|
|
65
|
+
"tweakpane": "https://cdn.jsdelivr.net/npm/tweakpane@<version>/dist/tweakpane.min.js"
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
</script>
|
|
69
|
+
...
|
|
70
|
+
</head>
|
|
71
|
+
```
|
|
72
|
+
|
|
53
73
|
> [!NOTE]
|
|
54
|
-
> Remember to replace the `<version>` with the actual version of `img2pxl` and its peer dependencies ([`three`](https://github.com/mrdoob/three.js)
|
|
74
|
+
> Remember to replace the `<version>` with the actual version of `img2pxl` and its peer dependencies ([`three`](https://github.com/mrdoob/three.js) - [`tweakpane`](https://github.com/cocopon/tweakpane) - [`react`](https://github.com/facebook/react) - [`react-dom`](https://github.com/facebook/react)). 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
75
|
|
|
56
76
|
## Usage
|
|
57
77
|
|
|
@@ -64,9 +84,53 @@ Using this library is straightforward:
|
|
|
64
84
|
3. Instantiate the library with the configuration copied in the previous step, for example:
|
|
65
85
|
|
|
66
86
|
```javascript
|
|
87
|
+
// Vanilla
|
|
67
88
|
import {Img2Pxl} from '@d3p1/img2pxl/core'
|
|
89
|
+
...
|
|
90
|
+
const config = {
|
|
91
|
+
images: {
|
|
92
|
+
0: {
|
|
93
|
+
src: <image-src>,
|
|
94
|
+
width: <image-width>,
|
|
95
|
+
height: <image-height>,
|
|
96
|
+
resolution: {
|
|
97
|
+
width: <image-resolution-width>,
|
|
98
|
+
height: <image-resolution-height>
|
|
99
|
+
},
|
|
100
|
+
pixel: {
|
|
101
|
+
size: 2,
|
|
102
|
+
alphaTest: 0.9,
|
|
103
|
+
motion: {
|
|
104
|
+
displacement: {
|
|
105
|
+
frequency: 1,
|
|
106
|
+
amplitude: 40,
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
motion: {
|
|
111
|
+
noise: {
|
|
112
|
+
frequency: 0.025,
|
|
113
|
+
amplitude: 40,
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
pointer: {
|
|
120
|
+
size: 0.1,
|
|
121
|
+
trailing: {
|
|
122
|
+
factor: 0.01
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
new Img2Pxl(config)
|
|
127
|
+
```
|
|
68
128
|
|
|
69
|
-
|
|
129
|
+
```javascript
|
|
130
|
+
// React
|
|
131
|
+
import {Img2Pxl} from '@d3p1/img2pxl/react'
|
|
132
|
+
...
|
|
133
|
+
const config = {
|
|
70
134
|
images: {
|
|
71
135
|
0: {
|
|
72
136
|
src: <image-src>,
|
|
@@ -100,7 +164,8 @@ new Img2Pxl({
|
|
|
100
164
|
factor: 0.01
|
|
101
165
|
}
|
|
102
166
|
}
|
|
103
|
-
}
|
|
167
|
+
}
|
|
168
|
+
return <Img2Pxl {...config} />
|
|
104
169
|
```
|
|
105
170
|
|
|
106
171
|
> [!NOTE]
|
package/dist/core/index.d.ts
CHANGED