-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (98 loc) · 6.3 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
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Force-Field Particle Animator</title>
<link rel="icon" href="images/siteFavicon3.png">
<link rel="apple-touch-icon" href="images/siteFavicon3.png">
<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="Force-Field Particle Animator" />
<meta property="og:description" content="turns images into force-field particle animations in realtime" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://collidingscopes.github.io/forcefield/" />
<meta property="og:image" content="https://collidingscopes.github.io/forcefield/images/siteOGImage.png">
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="1000" >
<meta property="og:image:height" content="1000" >
<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=Jersey+20&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="dat.gui-master/build/dat.gui.min.js"></script>
</head>
<body>
<div id="gui"></div>
<div id="canvasContainer">
<canvas id="canvas"></canvas>
</div>
<div class="tableContainer">
<table id="buttonTable">
<tr>
<td>
<label for="fileInput" class="custom-file-upload" id="fileInputLabel">
<i class="fa fa-cloud-upload"></i> Upload Image
</label>
<input type="file" id="fileInput" accept="image/*">
</td>
<td id="canvasSizeCell"></td>
<td id="particleCountCell"></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="infoScreen">
<div class="info-content">
<button class="close-info-button" onclick="closeInfoScreen()">×</button>
<h2>Force-Field Particle Animator</h2>
<p>Move your mouse / drag across the image to create force-field ripple effects</p>
<p>Adjust the sliders to control:</p>
<ul>
<li>Particle density</li>
<li>Effect radius</li>
<li>Force strength</li>
<li>Self-healing speed</li>
</ul>
<p>You can also upload your own images as the starting canvas</p>
<p>Enjoy!</p>
<button class="close-info-button-2" onclick="closeInfoScreen()"> Use the Force🧙</button>
</div>
</div>
<div id="notesDiv">
<div id="textBox">
<h2 id="aboutText">Force-Field Particle Animator</h2>
<p>This is a generative art project which turns images into "force-field" particle animations in real-time. The animation effect uses a force repulsion / self-healing effect.</p>
<p>Upload your own image, open the GUI controls to change the animation parameters, and then use your mouse or touchscreen to activate the animation.</p>
<p>This project is open source (offered under MIT license), so feel free to use it however you wish.</p>
<p>There are a few hotkeys which can speed up using the tool:</p>
<ul>
<li>Press <b>"r"</b> to reset the canvas. This will move all particles back to their original position in the source image</li>
<li>Press <b>"s"</b> to save a screenshot of the current state of the animation (png image)</li>
<li>Press <b>"v"</b> to start recording a video of the animation. Press v again to stop the recording. An mp4 video file will be exported to your downloads folder afterwards</li>
</ul>
<p>If you liked this and are feeling generous, 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>This project is coded using Javascript, HTML, and CSS (see github repo linked below). Video creation and encoding is done using mp4 muxer.</p>
<p>Enormous thanks and credit to the project <a href="https://aijs.io/project?user=Tezumie&project=1-Million-Particles" target="_blank" rel="noopener">"1 million particles" by Tezumie</a>, which provided the code foundation for the particle repulsion animation.</p>
<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/forcefield" 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="colorFunctions.js"></script>
<script src="canvasVideoExport.js"></script>
<script src="imageParticles.js"></script>
</html>