-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
112 lines (92 loc) · 6.53 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Video-to-Pixel-Art</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="dat.gui-master/build/dat.gui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta property="og:title" content="Video-to-Pixel-Art" />
<meta property="og:description" content="Turn videos into pixel art animations in real-time" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://collidingscopes.github.io/video-to-pixel-art/" />
<meta property="og:image" content="https://collidingscopes.github.io/video-to-pixel-art/assets/rain.png">
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="1200" >
<meta property="og:image:height" content="675" >
<link rel="icon" href="assets/siteFavicon3.png">
<link rel="apple-touch-icon" href="assets/siteFavicon3.png">
<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=Tiny5&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="gui"></div>
<canvas id="canvas"></canvas>
<video id="defaultVideo" class="hidden" width="900px" height="504px" loop muted playsinline>
<source src="assets/tokyoTrain.mp4" type="video/mp4" />
</video>
<video id="userVideo" class="hidden" loop muted playsinline></video>
<table id="buttonTable">
<tr>
<td>
<button id="useWebcamButton" onclick=useWebcam()>Use Webcam</button>
</td>
<td>
<label for="fileInput" class="custom-file-upload" id="fileInputLabel">
<i class="fa fa-cloud-upload"></i> Upload video
</label>
<input type="file" id="fileInput" accept="video/*">
</td>
</tr>
</table>
</div>
<div id="videoRecordingMessageDiv" class="hidden sticky-bottom">
Video recording underway. Press menu button or "v" to stop. The video will be saved to your downloads folder afterwards.
</div>
<div id="notesDiv">
<div id="textBox">
<h2 id="aboutText">VIDEO-TO-PIXEL-ART</h2>
<p>Turn videos into pixel art! Use your webcam feed or upload a video, then use the controls to adjust the aesthetic:</p>
<ul>
<li>Color palette</li>
<li>Pixel size</li>
<li>Dithering strength -- based on the Bayer dithering algorithm</li>
<li>Edge detection strength and color -- based on Sobel edge detection</li>
</ul>
<p>All processing is done in real-time within your browser, using javascript / webgl shaders / html canvas (<a href="https://github.com/collidingScopes/video-to-pixel-art" rel="noopener" target="_blank">github code</a>).</p>
<p>You can export your creations as images or videos to save / share your work.</p>
<p>This tool is completely free, open source (MIT license), without any paywalls or premium options. You are welcome to use it for personal or commercial purposes.</p>
<p>If you found this tool useful, feel free to buy me a coffee. This would be much appreciated during late-night coding sessions!</p>
<a href="https://www.buymeacoffee.com/stereoDrift" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee"></a>
<p>If the video export feature does not work for you, please try a free screen-recording tool such as OBS Studio.</p>
<p>I do not have access to any of the videos that you upload here, as all processing is done "client-side" (i.e., <b>no videos or images are saved/stored by me — they stay on your computer only</b>).</p>
<p>If you enjoyed this, you may be interested in my other free / open source art projects:</p>
<ul>
<li><a href="https://collidingScopes.github.io/ascii" target="_blank" rel="noopener">Video-to-ASCII</a>: turn videos into ASCII pixel art</li>
<li><a href="https://collidingScopes.github.io/shimmer" target="_blank" rel="noopener">Shape Shimmer</a>: turn photos into funky wave animations</li>
<li><a href="https://collidingScopes.github.io" target="_blank" rel="noopener">Colliding Scopes</a>: turn photos into kaleidoscope animations</li>
<li><a href="https://collidingScopes.github.io/forcefield" target="_blank" rel="noopener">Force-Field Animation</a>: turn photos into particle animations</li>
</ul>
<p>Feel free to reach out to discuss, ask questions, or to share your creations! The animations can be easily uploaded to instagram or otherwise -- you can tag me <a href="https://www.instagram.com/stereo.drift/" target="_blank" rel="noopener">@stereo.drift</a> :)</p>
</div>
</div>
<div id="linksDiv">
<table id="infoMenuTable">
<tr>
<td><button id="gitHubButton"class="socialMediaButton"><a href="https://github.com/collidingScopes/video-to-pixel-art" target="_blank" rel="noopener"><i class="fa-brands fa-github"></i></a></button></td>
<td><button id="coffeeButton" class="socialMediaButton"><a href="https://www.buymeacoffee.com/stereoDrift" target="_blank" rel="noopener"><i class="fa-solid fa-heart"></i></a></button></td>
<td><button id="instagramButton" class="socialMediaButton"><a href="https://www.instagram.com/stereo.drift/" target="_blank" rel="noopener"><i class="fa-brands fa-instagram"></i></a></button></td>
<td><button id="emailButton" class="socialMediaButton"><a href="mailto:[email protected]" target="_blank" rel="noopener"><i class="fa-solid fa-envelope"></i></a></button></td>
</tr>
</table>
</div>
</body>
<script src="mp4-muxer-main/build/mp4-muxer.js"></script>
<script src="canvasVideoExport.js"></script>
<script src="colorFunctions.js"></script>
<script src="pixelShader.js"></script>
</html>