@d3p1/img2pxl 1.16.0 → 1.17.1

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.
Files changed (9) hide show
  1. package/README.md +1 -1
  2. package/dist/core/lib/image-manager.d.ts +103 -0
  3. package/dist/img2pxl.d.ts +38 -77
  4. package/dist/img2pxl.js +496 -311
  5. package/dist/img2pxl.js.map +1 -0
  6. package/dist/img2pxl.umd.cjs +6 -5
  7. package/dist/img2pxl.umd.cjs.map +1 -0
  8. package/dist/types/index.d.ts +52 -0
  9. package/package.json +2 -2
package/README.md CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  ## Introduction
12
12
 
13
- Just a cool image to pixel effect.
13
+ An image to pixel transformation with motion effect.
14
14
 
15
15
  > [!NOTE]
16
16
  > This library was inspired by these excellent tutorials:
package/dist/core/lib/image-manager.d.ts ADDED
@@ -0,0 +1,103 @@
1
+ import { ImgSource, ImgSourceCollection } from '../../types';
2
+ export default class ImageManager {
3
+ #private;
4
+ /**
5
+ * @type {{
6
+ * src : string;
7
+ * width : number;
8
+ * height : number;
9
+ * resolution: {
10
+ * width : number;
11
+ * height: number;
12
+ * }
13
+ * pixel?: {
14
+ * size ?: number;
15
+ * motion?: {
16
+ * displacement?: {
17
+ * frequency?: number;
18
+ * amplitude?: number;
19
+ * };
20
+ * };
21
+ * };
22
+ * motion?: {
23
+ * noise?: {
24
+ * src ?: string;
25
+ * frequency?: number;
26
+ * amplitude?: number;
27
+ * };
28
+ * };
29
+ * }[]}
30
+ */
31
+ images: ImgSourceCollection;
32
+ /**
33
+ * @type {{
34
+ * src : string;
35
+ * width : number;
36
+ * height : number;
37
+ * resolution: {
38
+ * width : number;
39
+ * height: number;
40
+ * };
41
+ * pixel?: {
42
+ * size ?: number;
43
+ * motion?: {
44
+ * displacement?: {
45
+ * frequency?: number;
46
+ * amplitude?: number;
47
+ * }
48
+ * };
49
+ * };
50
+ * motion?: {
51
+ * noise?: {
52
+ * src ?: string;
53
+ * frequency?: number;
54
+ * amplitude?: number;
55
+ * };
56
+ * };
57
+ * }}
58
+ */
59
+ currentImage: ImgSource;
60
+ /**
61
+ * Constructor
62
+ *
63
+ * @param {{
64
+ * src : string;
65
+ * width : number;
66
+ * height : number;
67
+ * resolution: {
68
+ * width : number;
69
+ * height: number;
70
+ * };
71
+ * pixel?: {
72
+ * size ?: number;
73
+ * motion?: {
74
+ * displacement?: {
75
+ * frequency?: number;
76
+ * amplitude?: number;
77
+ * };
78
+ * };
79
+ * };
80
+ * motion?: {
81
+ * noise?: {
82
+ * src ?: string;
83
+ * frequency?: number;
84
+ * amplitude?: number;
85
+ * };
86
+ * };
87
+ * }[]} images
88
+ * @throws {Error}
89
+ */
90
+ constructor(images: ImgSourceCollection);
91
+ /**
92
+ * Taking into consideration window size,
93
+ * it is selected the breakpoint and image to be used
94
+ *
95
+ * @returns {boolean}
96
+ * @note Each breakpoint defines the `min-width` at which
97
+ * a specific image should be used.
98
+ * That is why it is returned
99
+ * the greater breakpoint that is less than or equal
100
+ * the window size
101
+ */
102
+ update(): boolean;
103
+ }
package/dist/img2pxl.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Pane } from 'tweakpane';
2
2
  import { default as RendererManager } from './core/lib/renderer-manager.js';
3
+ import { Config } from './types';
3
4
  export default class Img2Pxl {
4
5
  #private;
5
6
  /**
@@ -13,84 +14,44 @@ export default class Img2Pxl {
13
14
  /**
14
15
  * Constructor
15
16
  *
16
- * @param {{
17
- * containerSelector?: string;
18
- * image: {
19
- * src: string;
20
- * width: number;
21
- * height: number;
22
- * resolution: {
23
- * width: number;
24
- * height: number;
25
- * };
26
- * pixel?: {
27
- * size?: number;
28
- * motion?: {
29
- * displacement?: {
30
- * frequency?: number;
31
- * amplitude?: number;
32
- * }
33
- * }
34
- * };
35
- * motion?: {
36
- * noise?: {
37
- * src?: string;
38
- * frequency?: number;
39
- * amplitude?: number;
40
- * }
41
- * }
42
- * };
43
- * pointer?: {
44
- * src?: string;
45
- * size?: number;
46
- * trailing?: {
47
- * factor?: number;
48
- * }
49
- * }
50
- * }} config
17
+ * @param {{
18
+ * containerSelector?: string;
19
+ * image : {
20
+ * src : string;
21
+ * width : number;
22
+ * height : number;
23
+ * resolution: {
24
+ * width : number;
25
+ * height: number;
26
+ * };
27
+ * pixel?: {
28
+ * size ?: number;
29
+ * motion?: {
30
+ * displacement?: {
31
+ * frequency?: number;
32
+ * amplitude?: number;
33
+ * }
34
+ * }
35
+ * };
36
+ * motion?: {
37
+ * noise?: {
38
+ * src ?: string;
39
+ * frequency?: number;
40
+ * amplitude?: number;
41
+ * }
42
+ * }
43
+ * }[];
44
+ * pointer?: {
45
+ * src ?: string;
46
+ * size ?: number;
47
+ * trailing?: {
48
+ * factor?: number;
49
+ * }
50
+ * }
51
+ * }} config
52
+ * @throws {Error}
51
53
  */
52
- constructor(config: {
53
- containerSelector?: string;
54
- image: {
55
- src: string;
56
- width: number;
57
- height: number;
58
- resolution: {
59
- width: number;
60
- height: number;
61
- };
62
- pixel?: {
63
- size?: number;
64
- motion?: {
65
- displacement?: {
66
- frequency?: number;
67
- amplitude?: number;
68
- };
69
- };
70
- };
71
- motion?: {
72
- noise?: {
73
- src?: string;
74
- frequency?: number;
75
- amplitude?: number;
76
- };
77
- };
78
- };
79
- pointer?: {
80
- src?: string;
81
- size?: number;
82
- trailing?: {
83
- factor?: number;
84
- };
85
- };
86
- });
87
- /**
88
- * Render
89
- *
90
- * @params {number} t
91
- * @returns {void}
92
- */
93
- render(t?: number): void;
54
+ constructor(config: Config);
94
55
  /**
95
56
  * Debug
96
57
  *