p5.zine 0.0.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.
- package/.github/workflows/build.yml +27 -0
- package/README.md +263 -0
- package/build.js +77 -0
- package/package.json +31 -0
- package/scripts/smoke-test.js +53 -0
- package/src/adapters/p5-1.js +65 -0
- package/src/adapters/p5-2.js +46 -0
- package/src/custom.js +430 -0
- package/src/html.js +6 -0
- package/src/index.js +3 -0
- package/src/index.legacy.js +3 -0
- package/src/index.modern.js +3 -0
- package/src/page-size.js +143 -0
- package/src/style.js +28 -0
- package/src/ui.css +245 -0
- package/src/ui.html +33 -0
- package/src/zine.js +1003 -0
- package/test/compat.html +95 -0
- package/test/index.html +19 -0
- package/test/index.legacy.html +19 -0
- package/test/sketch.js +21 -0
package/test/compat.html
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>p5.zine Compat Preview</title>
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
color-scheme: light;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
* {
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
body {
|
|
18
|
+
margin: 0;
|
|
19
|
+
font-family: "Inconsolata", monospace;
|
|
20
|
+
background: #fafafa;
|
|
21
|
+
color: #1a1a1a;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
header {
|
|
25
|
+
padding: 16px 24px;
|
|
26
|
+
border-bottom: 1px solid #ddd;
|
|
27
|
+
background: #fff;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
header h1 {
|
|
31
|
+
margin: 0;
|
|
32
|
+
font-size: 18px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.grid {
|
|
36
|
+
display: grid;
|
|
37
|
+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
38
|
+
gap: 16px;
|
|
39
|
+
padding: 16px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.panel {
|
|
43
|
+
background: #fff;
|
|
44
|
+
border: 1px solid #ddd;
|
|
45
|
+
border-radius: 8px;
|
|
46
|
+
overflow: hidden;
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
min-height: 70vh;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.panel h2 {
|
|
53
|
+
margin: 0;
|
|
54
|
+
padding: 10px 12px;
|
|
55
|
+
font-size: 14px;
|
|
56
|
+
border-bottom: 1px solid #eee;
|
|
57
|
+
background: #f6f6f6;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
iframe {
|
|
61
|
+
border: 0;
|
|
62
|
+
width: 100%;
|
|
63
|
+
flex: 1;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.note {
|
|
67
|
+
padding: 0 16px 16px;
|
|
68
|
+
font-size: 12px;
|
|
69
|
+
color: #555;
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
72
|
+
</head>
|
|
73
|
+
|
|
74
|
+
<body>
|
|
75
|
+
<header>
|
|
76
|
+
<h1>p5.zine compatibility preview</h1>
|
|
77
|
+
</header>
|
|
78
|
+
|
|
79
|
+
<div class="grid">
|
|
80
|
+
<div class="panel">
|
|
81
|
+
<h2>p5 2.x (modern)</h2>
|
|
82
|
+
<iframe src="./index.html" title="p5 2.x"></iframe>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="panel">
|
|
85
|
+
<h2>p5 1.x (legacy)</h2>
|
|
86
|
+
<iframe src="./index.legacy.html" title="p5 1.x"></iframe>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div class="note">
|
|
91
|
+
Both previews load the same sketch. Use this to spot regressions between p5 1.x and 2.x.
|
|
92
|
+
</div>
|
|
93
|
+
</body>
|
|
94
|
+
|
|
95
|
+
</html>
|
package/test/index.html
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<script
|
|
8
|
+
src="https://cdn.jsdelivr.net/npm/p5@2.2.0/lib/p5.min.js"></script>
|
|
9
|
+
<script
|
|
10
|
+
src="https://cdn.jsdelivr.net/npm/p5@2.2.0/lib/addons/p5.sound.min.js"></script>
|
|
11
|
+
<title>Library Test (p5 2.x)</title>
|
|
12
|
+
<script src="../dist/p5.zine.js"></script>
|
|
13
|
+
</head>
|
|
14
|
+
|
|
15
|
+
<body>
|
|
16
|
+
<script src="./sketch.js"></script>
|
|
17
|
+
</body>
|
|
18
|
+
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<script
|
|
8
|
+
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
|
|
9
|
+
<script
|
|
10
|
+
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script>
|
|
11
|
+
<title>Library Test (p5 1.x)</title>
|
|
12
|
+
<script src="../dist/p5.zine.legacy.js"></script>
|
|
13
|
+
</head>
|
|
14
|
+
|
|
15
|
+
<body>
|
|
16
|
+
<script src="./sketch.js"></script>
|
|
17
|
+
</body>
|
|
18
|
+
|
|
19
|
+
</html>
|
package/test/sketch.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
function setup() {
|
|
2
|
+
zinePaperSize("11in", "30in");
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
function draw() {
|
|
6
|
+
/* Cover */
|
|
7
|
+
cover.randomLayout(["hello world", selfie]);
|
|
8
|
+
|
|
9
|
+
/*page One*/
|
|
10
|
+
one.rect(one.mouseX, one.mouseY, 100);
|
|
11
|
+
|
|
12
|
+
/*page Two*/
|
|
13
|
+
two.background(random(255), random(255), random(255));
|
|
14
|
+
two.glitchLayout(["hello world", selfie]);
|
|
15
|
+
|
|
16
|
+
/*page Three*/
|
|
17
|
+
three.gridLayout(["hello world", selfie]);
|
|
18
|
+
|
|
19
|
+
/*back Cover*/
|
|
20
|
+
back.background(random(255), random(255), random(255));
|
|
21
|
+
}
|