-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (115 loc) · 6.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Page Title -->
<title>joy.js | A tiny creative coding library</title>
<!-- Meta Tags -->
<meta name="description" content="A tiny creative coding library">
<meta name="keywords" content="library, JavaScript, creative coding, tools">
<meta name="author" content="opheliagame">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="joy.js | A tiny creative coding library">
<meta property="og:description" content="A tiny creative coding library">
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:image" content="/images/social-preview.png">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="joy.js | A tiny creative coding library">
<meta name="twitter:description" content="A tiny creative coding library">
<meta name="twitter:image" content="/images/social-preview.png">
<!-- Favicon -->
<!-- `sizes="any"` is to fix Chrome bug -->
<link rel="icon" href="/assets/favicon.ico" sizes="any">
<link rel="icon" href="/assets/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
<link rel="manifest" href="/assets/manifest.webmanifest">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'body': ['Itim', 'cursive']
},
colors: {
clifford: '#da373d',
magenta: '#ff00ff'
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.intro-text {
/* position: absolute; */
font-size: larger;
/* border: solid black 2px; */
padding: 2rem;
backdrop-filter: blur(8px);
}
}
</style>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.5.0/prism-material-light.min.css" integrity="sha512-O5jY0oTgD2Elx8HWIERZc4ZpMfpXeTdmz03FfAWoieGoa940jVMFC4sm183QCcvHlQTmTgoV5im5KFPwj4B5xg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
<!-- Home Sketch -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script src="dist/joy.js"></script>
</head>
<body class="w-screen h-screen overflow-hidden font-body">
<div class="w-full h-full overflow-hidden">
<div class="absolute top-0 left-0 w-full z-20">
<div class="flex flex-row md:flex-col w-full gap-2 md:px-4 md:py-2">
<!-- Nav -->
<div class="w-full flex md:flex-row flex-col md:justify-between items-center bg-magenta md:bg-transparent max-h-min p-2">
<a href="/">
<h1 class="flex flex-row gap-1 pr-2 items-end text-4xl md:text-6xl text-white md:text-magenta md:bg-white">
<!-- <img width="32" height="32" class="md:hidden" src="/assets/icon.svg" alt="Joy.js logo svg"> -->
joy.js
</h1>
</a>
<div class="flex flex-col md:bg-white gap-2">
<a href="./docs/index.html">
<button class="text-xl md:text-3xl text-white md:text-magenta">API Reference</button>
</a>
<a href="https://github.com/opheliagame/joy.js" target="_blank">
<button class="text-xl md:text-3xl text-white md:text-magenta">Github</button>
</a>
</div>
</div>
<!-- Intro -->
<article class="text-2xl md:text-3xl flex flex-col md:grid md:grid-cols-2 md:w-1/2 gap-4 overflow-x-hidden overflow-y-auto"></article>
<aside class="hidden md:block text-lg py-4">
<a href="https://www.canva.com/design/DAGW0_780w4/sqU39rByWuPXnI3jXI9rmg/view?utm_content=DAGW0_780w4&utm_campaign=designshare&utm_medium=link&utm_source=editor">
I am speaking about it at JSConf Japan, here is the presentation
</a>
</aside>
</div>
</div>
<!-- <div>
<p></p>
<p>joy is a creative coding library that makes it easy for its' users to create shapes, combine them and apply transformations, both simple and higher order ones</p>
<p>p5.js is also a creative coding library with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!</p>
</div> -->
<!-- <h2 class="text-xl md:text-3xl uppercase">Key motivations</h2>
<div>
<p>these two libraries have distinct ways of thinking about graphics and this is why some tasks are simpler in p5.js and others in joy. as a simple example, creating a camera capture is quite simple with p5.js and applying a higher order transformation like repeat is much simpler with joy. this project is an attempt to combine the best of both of these worlds (miley cyrus ref for anyone who's a fan haha <3)</p>
<ul class="list-disc">
<li>currently joy does not support animating shapes. animation of shapes created using joy driven with p5js is exciting</li>
<li>p5.js also has a lot of support for camera, video and image. bringing this into joy is also exciting</li>
</ul>
</div> -->
</div>
<canvas id="home-canvas" class="absolute top-0 left-0"></canvas>
<script src="./home-sketch.js"></script>
</body>
</html>