-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
119 lines (94 loc) · 7.47 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
<!doctype html>
<html>
<head>
<title>Video-to-ASCII</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="dat.gui-master/build/dat.gui.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=Permanent+Marker&display=swap" rel="stylesheet">
<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-ASCII-Art" />
<meta property="og:description" content="Turn videos into ASCII pixel art" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://collidingscopes.github.io/ascii/" />
<meta property="og:image" content="https://collidingscopes.github.io/ascii/assets/metro.png">
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="1280" >
<meta property="og:image:height" content="720" >
<link rel="icon" href="assets/siteFavicon3.png">
<link rel="apple-touch-icon" href="assets/siteFavicon3.png">
<script defer src="https://cloud.umami.is/script.js" data-website-id="eb59c81c-27cb-4e1d-9e8c-bfbe70c48cd9"></script>
</head>
<body>
<div id="gui"></div>
<div id="canvasDiv">
<div id="effectWidthDiv">
<pre><span class="tableText" id="effectWidthLabel">Effect Width</span><br><input class="input-number-noSpinners" type="range" id="effectWidthInput" value="50" min="0" max="100"></pre>
</div>
<canvas id="canvas" class=""></canvas>
<video id="webcamVideo" class=" hidden" playsinline></video>
<video id="userVideo" class=" hidden" loop muted playsinline></video>
<video id="defaultVideo" class=" hidden" width="480px" height="848px" loop muted playsinline>
<source src="assets/waves.mp4" type="video/mp4" />
</video>
<canvas id="canvas-video" class=" hidden"></canvas>
<canvas id="canvas-video-pixel" class=" hidden"></canvas>
</div>
<table id="buttonTable">
<tr>
<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/*, image/*">
</td>
<td>
<button id="useWebcamButton">Use Webcam</button>
</td>
</tr>
</table>
<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">About</h2>
<p>Turn videos into ASCII pixel art! Use your webcam feed or upload a video, then use the controls to adjust the colors, resolution, text style, etc...</p>
<p>You can create a video export to save and/or share your animation afterwards.</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>The code used to create the animation is quite resource-intensive, so it may run with some lag if your computer doesn't have enough computing power, too many tabs open, low battery, etc.</p>
<p>If the video export feature does not work for you, please try a free screen-recording tool such as OBS Studio.</p>
<p>This project is coded using Javascript, HTML canvas, and CSS (see github repo linked below). Video creation and encoding is done using mp4 muxer.</p>
<p>Enormous thanks and credits to <a href="https://medium.com/@sasha.kub95/webcam-stream-to-ascii-art-with-javascript-2a2f9a39befb" target="_blank" rel="noopener">Aleksandr Kubarskii</a>, whose code served as the foundation for this project.</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 projects:</p>
<ul>
<li><a href="https://collidingScopes.github.io/particular-drift" target="_blank" rel="noopener">Particular Drift</a>: turn photos into flowing particle animations</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>
<li><a href="https://manual-brick-breaker.netlify.app" target="_blank" rel="noopener">Manual Brick Breaker</a>: play brick breaker by waving your hands around</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/ascii" 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="xButton" class="socialMediaButton"><a class="x-link" href="https://x.com/measure_plan" target="_blank" rel="noopener">𝕏</i></a></button></td>
<td><button id="emailButton" class="socialMediaButton"><a href="mailto:stereodriftvisuals@gmail.com" target="_blank" rel="noopener"><i class="fa-solid fa-envelope"></i></a></button></td>
</tr>
</table>
</div>
</body>
<script src="ASCII.js"></script>
<script src="mp4-muxer-main/build/mp4-muxer.js"></script>
</html>