diff options
| author | pommicket <leonardomtenenbaum@gmail.com> | 2016-08-29 23:07:21 -0400 |
|---|---|---|
| committer | pommicket <leonardomtenenbaum@gmail.com> | 2016-08-29 23:07:21 -0400 |
| commit | 7c8ffd449ab7365cbe6e135f1a0a0de122d00e9e (patch) | |
| tree | 27b827f5e6c70636c1cca70c4c19e6ade8bcf9ea | |
| parent | d2e73d6a7b74bd0d0fb409110ae2fc522d4f83e6 (diff) | |
Changed navbar
39 files changed, 1199 insertions, 1224 deletions
@@ -1,15 +1,15 @@ <html> -<head> -<title>2D becomes 3D</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -</head> -<body> -<h2>2D becomes 3D</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<script src="js/2d23d.js"></script> -</body> -</html>
\ No newline at end of file + <head> + <title>2D becomes 3D</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>2D becomes 3D</h2> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="js/2d23d.js"></script> + </body> +</html> diff --git a/2d23dcustom.html b/2d23dcustom.html index 38c78c2..7775f64 100644 --- a/2d23dcustom.html +++ b/2d23dcustom.html @@ -1,18 +1,18 @@ <html> -<head> -<title>2D becomes 3D</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -</head> -<body> -<h2>2D becomes 3D</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> -<p>Draw a pattern by dragging your mouse around. Press enter when you're done.<br> -To draw a straight line, click the starting location, press the shift key, -and click the ending location.</p> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<script src="js/2d23dcustom.js"></script> -</body> -</html>
\ No newline at end of file + <head> + <title>2D becomes 3D</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>2D becomes 3D</h2> + <p>Draw a pattern by dragging your mouse around. Press enter when you're done.<br> + To draw a straight line, click the starting location, press the shift key, + and click the ending location.</p> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="js/2d23dcustom.js"></script> + </body> +</html> @@ -1,22 +1,21 @@ <html> -<head> -<title>π calculator</title> + <head> + <meta charset="utf-8"> + <title>π calculator</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> -<meta charset="utf-8"> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> - -</head> -<body> -<h2>π calculator</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> -<p>Since 2π day is today (6/28), here's a π/2π calculator. Draw a circle, then find out how well your circle approximates π!<br> -<button onclick="calculate();">Calculate π</button><br> -<div id="info"></div> -<script src="js/2pi.js"></script> - -</html>
\ No newline at end of file + <h2>π calculator</h2> + <p>Since 2π day is today (6/28), here's a π/2π calculator. Draw a circle, then find out how well your circle approximates π!<br> + <button onclick="calculate();">Calculate π</button><br> + <div id="info"></div> + <script src="js/2pi.js"></script> + </body> +</html> @@ -1,5 +1,5 @@ <html> <head> -<meta http-equiv="refresh" content="0; url=https://pommicket.github.io/"> +<meta http-equiv="refresh" content="0; url=index.html"> </head> </html> diff --git a/AutoAudio.html b/AutoAudio.html index 2f0a1f0..005bcb5 100644 --- a/AutoAudio.html +++ b/AutoAudio.html @@ -1,67 +1,63 @@ <html>
+ <head>
+ <script src="js/latexit.js"></script>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+ <link rel="stylesheet" href="css/style.css">
+ <link rel="shortcut icon" type="image/png" href="favicon.png">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+ <script src="js/riffwave.js"></script>
+ <title>AutoAudio</title>
+ </head>
+ <body>
+ <div id="navbar"></div>
+ <script src="navbar.js"></script>
+ <h2>AutoAudio</h2>
-<head>
-<script src="js/latexit.js"></script>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-<link rel="stylesheet" href="css/style.css">
-<link rel="shortcut icon" type="image/png" href="favicon.png">
-<title>AutoAudio</title>
-</head>
-<body>
+ <p>AutoAudio is a program that creates computer generated audio.<br>
+ For an explanation of AutoAudio, go <a href="explanation.html">here</a> <br>
+ After you click "Create", please wait until the audio finishes before listening to it.
+ </p>
-<h2>AutoAudio</h2>
-<a class="header_link" href="index.html">Home</a>
-<a class="header_link" href="all.html">All</a>
-<a class="header_link" href="mathematical.html">Mathematical Demonstrations</a>
-<a class="header_link" href="games.html">Games</a>
-<a class="header_link" href="apps.html">Android Apps</a>
-<hr>
+ <p id='Error'></p>
-<p>AutoAudio is a program that creates computer generated audio.<br>
-For an explanation of AutoAudio, go <a href="explanation.html">here</a> <br>
-After you click "Create", please wait until the audio finishes before listening to it.
-</p>
-<p id='Error'></p>
-<script src='js/riffwave.js'></script>
+ <form id='Options'>
+ <fieldset>
+ <legend>Options</legend>
+ Length: <input type="number" name="leninput" value="5"><br>
+ <input type='checkbox'> Notify me when it finishes.
+ </fieldset>
+ <fieldset>
+ <legend>Advanced Options</legend>
+ Single operator weight: <input type='number' value='1'><br>
+ Number weight: <input type='number' value='1'><br>
+ Function length: <input type='number' value='60'><br>
+ </fieldset>
+ </form>
-<form id='Options'>
-<fieldset>
-<legend>Options</legend>
-Length: <input type="number" name="leninput" value="5"><br>
-<input type='checkbox'> Notify me when it finishes.
-</fieldset>
-<fieldset>
-<legend>Advanced Options</legend>
-Single operator weight: <input type='number' value='1'><br>
-Number weight: <input type='number' value='1'><br>
-Function length: <input type='number' value='60'><br>
-</fieldset>
-</form>
+ <br>
+ <button onclick="create();" type='button' class="btn btn-success">Create</button>
+ <br><br>
-<br>
-<button onclick="create();" type='button' class="btn btn-success">Create</button>
-<br><br>
+ <audio id='Audio' controls></audio>
-<audio id='Audio' controls></audio>
+ <br><br>
-<br><br>
+ <p id='Time'></p>
-<p id='Time'></p>
+ <div id='Function' lang='latex'></div>
-<div id='Function' lang='latex'></div>
+ <script src="js/AutoAudio.js"></script>
+ <noscript>
+ <h1>This web application requires javascript.</h1>
+ </noscript>
-<script src="js/AutoAudio.js"></script>
-<noscript>
-<h1>This web application requires javascript.</h1>
-</noscript>
-
-</body>
-<footer>
-<p>AutoArt is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
-</footer>
+ </body>
+ <footer>
+ <p>AutoArt is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
+ </footer>
</html>
diff --git a/AutoHarmonograph.html b/AutoHarmonograph.html index cdd3fa6..a55ee71 100644 --- a/AutoHarmonograph.html +++ b/AutoHarmonograph.html @@ -1,20 +1,20 @@ <html> <head> -<title>AutoHarmonograph</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> + <title>AutoHarmonograph</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> </head> <body> -<h2>AutoHarmonograph</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>AutoHarmonograph</h2> -Number of pendulums: <input type="number" id="npendulums"><br> -Maximum damping: <input type="number" id="DMAX"><br> -<button onclick="start();">Start</button><br> -<button onclick="saveCanvas();">Save image</button><br> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<script src="js/AutoHarmonograph.js"></script> + Number of pendulums: <input type="number" id="npendulums"><br> + Maximum damping: <input type="number" id="DMAX"><br> + <button onclick="start();">Start</button><br> + <button onclick="saveCanvas();">Save image</button><br> + <script src="js/AutoHarmonograph.js"></script> </body> -</html>
\ No newline at end of file +</html> diff --git a/AutoImages.html b/AutoImages.html index 266eb04..35347f4 100644 --- a/AutoImages.html +++ b/AutoImages.html @@ -1,71 +1,68 @@ <html>
-<head>
-<script src="js/latexit.js"></script>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-<link rel="stylesheet" href="css/style.css">
-<link rel="shortcut icon" type="image/png" href="favicon.png">
-<title>AutoImages</title>
-</head>
+ <head>
+ <script src="js/latexit.js"></script>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+ <link rel="stylesheet" href="css/style.css">
+ <link rel="shortcut icon" type="image/png" href="favicon.png">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+ <title>AutoImages</title>
+ </head>
-<body>
+ <body>
+ <div id="navbar"></div>
+ <script src="navbar.js"></script>
-<h2>AutoImages</h2>
-<a class="header_link" href="index.html">Home</a>
-<a class="header_link" href="all.html">All</a>
-<a class="header_link" href="mathematical.html">Mathematical Demonstrations</a>
-<a class="header_link" href="games.html">Games</a>
-<a class="header_link" href="apps.html">Android Apps</a>
-<hr>
-<p>AutoImages is a program that creates computer generated images.<br>
-For an explanation of AutoImages, go <a href="explanation.html">here</a><br>
-First click the create button then the download button.<br>
-If the download button doesn't work, just right click on the image then click "Save image as...".
-Change X and Y to change the resolution of the image.<br>
-After you click create, wait until the image shows, then click "Download".</p>
+ <h2>AutoImages</h2>
+ <p>AutoImages is a program that creates computer generated images.<br>
+ For an explanation of AutoImages, go <a href="explanation.html">here</a><br>
+ First click the create button then the download button.<br>
+ If the download button doesn't work, just right click on the image then click "Save image as...".
+ Change X and Y to change the resolution of the image.<br>
+ After you click create, wait until the image shows, then click "Download".</p>
-<br>
-<button onclick="create();" type='button' class="btn btn-success">Create</button>
-<br><br>
+ <br>
+ <button onclick="create();" type='button' class="btn btn-success">Create</button>
+ <br><br>
-<form id='Options'>
-<fieldset>
-<legend>Options</legend>
-X: <input type="number" name="xinput" value="1000">
-<br>
-Y: <input type="number" name="yinput" value="500"><br>
-<input type='checkbox'> Notify me when it finishes.
-</fieldset>
-<fieldset>
-<legend>Advanced Options</legend>
-Single operator weight: <input type='number' value='1'><br>
-Number weight: <input type='number' value='1'><br>
-Function length: <input type='number' value='60'><br>
-</fieldset>
-</form>
+ <form id='Options'>
+ <fieldset>
+ <legend>Options</legend>
+ X: <input type="number" name="xinput" value="1000">
+ <br>
+ Y: <input type="number" name="yinput" value="500"><br>
+ <input type='checkbox'> Notify me when it finishes.
+ </fieldset>
+ <fieldset>
+ <legend>Advanced Options</legend>
+ Single operator weight: <input type='number' value='1'><br>
+ Number weight: <input type='number' value='1'><br>
+ Function length: <input type='number' value='60'><br>
+ </fieldset>
+ </form>
-<p id='Error'></p>
+ <p id='Error'></p>
-<p id='Time'></p>
+ <p id='Time'></p>
-<a id='Download' href="" download='AutoImage.png'></a>
+ <a id='Download' href="" download='AutoImage.png'></a>
-<br>
+ <br>
-<canvas id='Canvas' width=0 height=0></canvas>
+ <canvas id='Canvas' width=0 height=0></canvas>
-<br><br>
+ <br><br>
-<div id='Function' lang='latex'></div>
+ <div id='Function' lang='latex'></div>
-<script src="js/AutoImages.js"></script>
+ <script src="js/AutoImages.js"></script>
-<noscript>
-<h1>This web application requires javascript.</h1>
-</noscript>
+ <noscript>
+ <h1>This web application requires javascript.</h1>
+ </noscript>
-</body>
-<footer>
-<p>AutoArt is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
-</footer>
+ </body>
+ <footer>
+ <p>AutoArt is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
+ </footer>
</html>
diff --git a/AutoVideos.html b/AutoVideos.html index dffe44f..3ff960b 100644 --- a/AutoVideos.html +++ b/AutoVideos.html @@ -1,75 +1,74 @@ <html>
-
-
-<head>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-<link rel="stylesheet" href="css/style.css">
-<script src="js/latexit.js"></script>
-<link rel="shortcut icon" type="image/png" href="favicon.png">
-<title>AutoVideos</title>
-
-</head>
-
-
-<body>
-
-<h2>AutoVideos</h2>
-<div id="header_links_div"></div>
-<script src="js/header_links.js"></script>
-<hr>
-<p>AutoVideos is a program that creates computer generated videos.<br>
-For an explanation of AutoAudio, go <a href="explanation.html">here</a>
-First click the create button then the download button.<br>
-If the download button doesn't work, just right click on the image then click "Save image as...".
-Change X and Y to change the resolution of the image.<br>
-After you click create, wait until the image shows, then click "Download".</p>
-
-
-
-<form id='Options'>
-<fieldset>
-<legend>Options</legend>
-X: <input type="number" name="xinput" value="426">
-<br>
-Y: <input type="number" name="yinput" value="240">
-<br>
-Length: <input type='number' name='leninput' value='4'>
-<br>
-Frame rate: <input type='number' name='frinput' value='12'><br>
-<input type='checkbox'> Notify me when it finishes.
-</fieldset>
-<br>
-<fieldset>
-<legend>Advanced Options</legend>
-Single operation weight: <input type='number' value='1'><br>
-Number weight: <input type='number' value='1'><br>
-Function length: <input type='number' value='60'><br>
-</fieldset>
-</form>
-
-<br>
-<button onclick="create();" type='button' class="btn btn-success">Create</button>
-<br><br>
-
-<p id='Time'></p>
-
-<p id='Error'></p>
-
-<video width=0 height=0 id='Video' controls></video><br><br>
-<canvas id='Canvas' width=0 height=0></canvas>
-
-<div id='Function' lang='latex'></div>
-
-<script src="https://antimatter15.com/whammy/whammy.js"></script>
-<script src="js/AutoVideos.js"></script>
-
-<noscript>
-<h1>This web application requires javascript.</h1>
-</noscript>
-
-</body>
-<footer>
-<p>AutoArt is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
-</footer>
-
+ <head>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+ <link rel="stylesheet" href="css/style.css">
+ <script src="js/latexit.js"></script>
+ <link rel="shortcut icon" type="image/png" href="favicon.png">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+ <title>AutoVideos</title>
+
+ </head>
+
+
+ <body>
+
+ <div id="navbar"></div>
+ <script src="navbar.js"></script>
+
+ <h2>AutoVideos</h2>
+ <p>AutoVideos is a program that creates computer generated videos.<br>
+ For an explanation of AutoAudio, go <a href="explanation.html">here</a>
+ First click the create button then the download button.<br>
+ If the download button doesn't work, just right click on the image then click "Save image as...".
+ Change X and Y to change the resolution of the image.<br>
+ After you click create, wait until the image shows, then click "Download".</p>
+
+
+
+ <form id='Options'>
+ <fieldset>
+ <legend>Options</legend>
+ X: <input type="number" name="xinput" value="426">
+ <br>
+ Y: <input type="number" name="yinput" value="240">
+ <br>
+ Length: <input type='number' name='leninput' value='4'>
+ <br>
+ Frame rate: <input type='number' name='frinput' value='12'><br>
+ <input type='checkbox'> Notify me when it finishes.
+ </fieldset>
+ <br>
+ <fieldset>
+ <legend>Advanced Options</legend>
+ Single operation weight: <input type='number' value='1'><br>
+ Number weight: <input type='number' value='1'><br>
+ Function length: <input type='number' value='60'><br>
+ </fieldset>
+ </form>
+
+ <br>
+ <button onclick="create();" type='button' class="btn btn-success">Create</button>
+ <br><br>
+
+ <p id='Time'></p>
+
+ <p id='Error'></p>
+
+ <video width=0 height=0 id='Video' controls></video><br><br>
+ <canvas id='Canvas' width=0 height=0></canvas>
+
+ <div id='Function' lang='latex'></div>
+
+ <script src="https://antimatter15.com/whammy/whammy.js"></script>
+ <script src="js/AutoVideos.js"></script>
+
+ <noscript>
+ <h1>This web application requires javascript.</h1>
+ </noscript>
+
+ </body>
+
+ <footer>
+ <p>AutoArt is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
+ </footer>
</html>
diff --git a/DominoSimulator.html b/DominoSimulator.html index 6449d18..82e49fc 100644 --- a/DominoSimulator.html +++ b/DominoSimulator.html @@ -17,10 +17,10 @@ <script type="text/javascript">
<!--
var config = {
- width: 960,
+ width: 960,
height: 600,
params: { enableDebugging:"0" }
-
+
};
var u = new UnityObject2(config);
@@ -30,7 +30,7 @@ var $brokenScreen = jQuery("#unityPlayer").find(".broken");
$missingScreen.hide();
$brokenScreen.hide();
-
+
u.observeProgress(function (progress) {
switch(progress.pluginStatus) {
case "broken":
@@ -118,10 +118,9 @@ </style>
</head>
<body>
+ <div id="navbar"></div>
+ <script src="navbar.js"></script>
<h2>Domino Simulator</h2>
- <div id="header_links_div"></div>
- <script src="js/header_links.js"></script>
- <hr>
<p>Use the arrow keys to move, and WASD to rotate the camera, and press R and T to rotate the domino.
When you are done, press Enter, then click to shoot a cube at the dominos.
Domino Simulator requires the Unity Web Player, so it won't work on Google Chrome.</p>
diff --git a/Harmonograph.html b/Harmonograph.html index ec9c6c4..f9e1151 100644 --- a/Harmonograph.html +++ b/Harmonograph.html @@ -1,22 +1,25 @@ <html> -<head> -<title>Harmonograph</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -</head> -<body> + <head> + <title>Harmonograph</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> -<h2>Harmonograph</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> + <div id="navbar"></div> + <script src="navbar.js"></script> -<button onclick="start();">Start</button><br> -<button onclick="saveCanvas();">Save image</button><br> -<button onclick="addPendulum();">Add pendulum</button> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<script src="js/Harmonograph.js"></script> + <h2>Harmonograph</h2> -</body> -</html>
\ No newline at end of file + + <button onclick="start();">Start</button><br> + <button onclick="saveCanvas();">Save image</button><br> + <button onclick="addPendulum();">Add pendulum</button> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="js/Harmonograph.js"></script> + + </body> +</html> diff --git a/NameGenerator.html b/NameGenerator.html index 6b15438..5dab38a 100644 --- a/NameGenerator.html +++ b/NameGenerator.html @@ -1,49 +1,38 @@ <html> -<head> -<title>NameGenerator</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -<style> -#loading -{ - font-size: 20px; -} -button:active -{ - background-color: #ff0000; - color:#ff0000; -} -</style> - -<script src="js/NameGenerator.js"></script> - -</head> - - -<body> -<h2>Name Generator</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> -<p>Name Generator generates names using a method created by <a href="https://en.wikipedia.org/wiki/Claude_Shannon" target="_blank">Claude Shannon</a>. -Claude Shannon created fake English text by going to a random page in a book, and writing down the first letter on the page. -Let's say it was "h". Then, he would flip to another random page in the book, and find the first occurrence of the letter "h". Let's say -it was in the word "had". He would then write down the letter that followed the "h", in this case "a", then flip to another page in the book, -and find that the first occurrence of "a" was followed by "l", and so on. This program is slightly different. It takes two random (taking into -account the frequencies of letters in English) letters. It finds what those two letters are commonly followed by. Then it takes the last two letters, -and finds what those two letters are commonly followed by, and so on. There is also a faster offline version <a href="https://github.com/pommicket/NameGenerator" target="_blank">on GitHub</a><br><br> -After clicking "Create Names!", the button will become red until it has finished loading. To download the names, click on the download link, then press Ctrl+S/Command+S.</p> - -Number of names: <input type="number" id="numNames" value=10><br> -Display names at bottom <input id="outputNames" type="checkbox" checked=true> (Unchecking this option will mean that you will have to download the names to see them)<br><br> -<button id="button" onclick="createNames();">Create Names!</button><br> -<a id="download" target="_blank"></a> - -<div id="names"> -</div> - -<p id="loading">Loading...</p> - -</body> - -</html>
\ No newline at end of file + <head> + <title>NameGenerator</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <link rel="stylesheet" href="css/NameGenerator.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + <script src="js/NameGenerator.js"></script> + + </head> + + + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>Name Generator</h2> + <p>Name Generator generates names using a method created by <a href="https://en.wikipedia.org/wiki/Claude_Shannon" target="_blank">Claude Shannon</a>. + Claude Shannon created fake English text by going to a random page in a book, and writing down the first letter on the page. + Let's say it was "h". Then, he would flip to another random page in the book, and find the first occurrence of the letter "h". Let's say + it was in the word "had". He would then write down the letter that followed the "h", in this case "a", then flip to another page in the book, + and find that the first occurrence of "a" was followed by "l", and so on. This program is slightly different. It takes two random (taking into + account the frequencies of letters in English) letters. It finds what those two letters are commonly followed by. Then it takes the last two letters, + and finds what those two letters are commonly followed by, and so on. There is also a faster offline version <a href="https://github.com/pommicket/NameGenerator" target="_blank">on GitHub</a><br><br> + After clicking "Create Names!", the button will become red until it has finished loading. To download the names, click on the download link, then press Ctrl+S/Command+S.</p> + + Number of names: <input type="number" id="numNames" value=10><br> + Display names at bottom <input id="outputNames" type="checkbox" checked=true> (Unchecking this option will mean that you will have to download the names to see them)<br><br> + <button id="button" onclick="createNames();">Create Names!</button><br> + <a id="download" target="_blank"></a> + + <div id="names"> + </div> + + <p id="loading">Loading...</p> + + </body> + +</html> diff --git a/Navbar.html b/Navbar.html index a06bd8b..7c10651 100644 --- a/Navbar.html +++ b/Navbar.html @@ -1,9 +1,7 @@ -<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav style="margin-bottom: 0px" class="navbar navbar-default"> <div class="container-fluid"> - <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> @@ -2,4 +2,4 @@ You can view this website at https://pommicket.github.io/ -This has replaced http://autoart.neocities.org because of filetype and bandwidth restrictions. +Formerly http://autoart.neocities.org @@ -1,229 +1,226 @@ <html> <head> -<title>All</title> -<meta charset="utf-8"> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -<link rel="shortcut icon" type="image/png" href="favicon.png"> + <title>All</title> + <meta charset="utf-8"> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <link rel="shortcut icon" type="image/png" href="favicon.png"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> -<h2>All projects</h2> -<a class="header_link" href="index.html">Home</a> -<a class="header_link" href="mathematical.html">Mathematical Demonstrations</a> -<a class="header_link" href="games.html">Games</a> -<a class="header_link" href="apps.html">Android Apps</a> -<hr> - -<img src="screenshots/AutoImages.png" width=200 height=200><br> -<a href="AutoImages.html">AutoImages</a><br> -<p> -A computer program that creates art. It uses<br> -random functions to generate images. An explanation<br> -can be found <a href="explanation.html">here</a>.<br> -There is also AutoArtEvolve, which improves its<br> -images based on the ones you prefer:<br> -<iframe frameborder="0" src="https://itch.io/embed/43294?linkback=true&bg_color=fafafa&fg_color=000000&link_color=5ca4fa&border_color=9f9f9f" width="552" height="167"></iframe> -</p> -<hr> - -<video width="250" height="250" controls> - <source src="autovideo.mp4" type="video/mp4"> -</video><br> -<a href="AutoVideos.html">AutoVideos</a><br> -<p> -A computer program that creates videos. It uses<br> -random functions to generate videos. An explanation<br> -can be found <a href="explanation.html">here</a>.<br> -</p> -<hr> - -<audio controls> - <source src="autoaudio.wav" type="audio/wav"> -</audio><br> -<a href="AutoAudio.html">AutoAudio</a><br> -<p> -A computer program that creates audio. It uses<br> -random functions to generate audio. An explanation<br> -can be found <a href="explanation.html">here</a>.<br> -</p> -<hr> - - -<img src="screenshots/NameGenerator.png" width=200 height=200><br> -<a href="NameGenerator.html">NameGenerator</a><br> -<p> -A computer program that generates names! It uses<br> -the frequencies of trigrams.<br> -</p> -<hr> - -<p>Domino simulator <a href="DominoSimulator.html">web version</a> or <a href="https://qualum.itch.io/domino-simulator">offline version</a></p> -<iframe frameborder="0" src="https://itch.io/embed/77009?linkback=true" width="552" height="167"></iframe><br> -<p> -Place dominos, then knock them over. -</p> -<hr> - -<img src="screenshots/AutoHarmonograph.png" width=200 height=200><br> -<a href="AutoHarmonograph.html">AutoHarmonograph</a> or <a href="Harmonograph.html">Non-randomized</a><br> -<p> -A randomized <a href="https://en.wikipedia.org/wiki/Harmonograph">Harmonograph</a>. You pick the -number of pendulums. -</p> -<hr> - -<img src="screenshots/2d3d.png" width=200 height=200><img src="screenshots/2d3dcustom.png" width=200 height=200><br> -<a href="2d23d.html">2D becomes 3D</a> (and <a href="2d23dcustom.html">2D becomes 3D custom</a> -where you pick the starting shape)<br> -<p> -Different 2D shapes are moved around in circles<br> -to form 3D objects. -</p> -<hr> - -<img src="screenshots/clock.png" width=200 height=200><br> -<a href="clock.html">Clock</a><br> -<p> -A clock that shows the time of day with circles<br> -going around in circles. The colours of the circles<br> -change depending on the time. The innermost circle<br> -is seconds, the second is minutes, the third is<br> -hours, and the fourth is the day of the year.</p> -<hr> - -<img src="screenshots/mazesolver.png" width=200 height=200><br> -<a href="mazesolver.html">Maze Solver</a><br> -<p> -Create a maze, choose a starting point and an<br> -ending point, and your computer will solve the<br> -maze. -</p> -<hr> - -<img src="screenshots/ElementaryCellularAutomata.png" width=400 height=400><br> -<a href="elementarycellularautomata.html">Elementary cellular automata</a><br> -<p> -Run <a href="https://en.wikipedia.org/wiki/Elementary_cellular_automaton">elementary cellular automata</a>. -</p> -<hr> - -<img src="screenshots/h.png" width=200 height=200><br> -<a href="h.html">H</a><br> -<p> -Pick simple rules, and watch a cool pattern<br> -start to appear. -</p> -<hr> -<img src="screenshots/tree.png" width=200 height=200><br> -<a href="tree.html">Tree</a> and <a href="treegenerator.html">Tree generator</a> -<p> -Move your mouse around to see a tree change shape.<br> -In Tree Generator, you choose all the tree parameters<br> -but in Tree, you move your mouse around to pick the<br> parameters.<br> -<hr> - -<img src="screenshots/ballbounce.png" width=200 height=200><br> -<a href="ballbounce.html">Ball bounce</a><br> -<p> -Try to bounce a ball with your mouse. The game<br> -gets harder and harder because you can't see the<br> -ball behind its tracks.<br> -</p> -<hr> - -<img src="screenshots/magnets.png" width=200 height=200><br> -<a href="magnets.html">Magnets</a><br> -<p> -Try to avoid magnets which are attracted to your<br> -mouse. -</p> -<hr> - -<img src="screenshots/modularpascal.png" width=256 height=256><br> -<a href="modularpascal.html">Modular Pascal's Triangle</a><br> -<p> -A picture of Pascal's triangle mod x. Set x and<br> -Click update to see the triangle. </p> -<hr> - -<img src="screenshots/modularcircles.png" width=250 height=250><br> -<a href="modularcircles.html">Modular Circles</a><br> -<p> -There are a circle of points, each one corresponding<br> -to a number. Lines are drawn between points according<br> -to rules. Create interesting shapes like cardioids<br> -</p> -<hr> - -<img src="screenshots/shaperoller.png" width=250 height=250><br> -<a href="shaperoller.html">Shape Roller</a><br> -<p> -This program rolls (invisible) shapes around other <br> -(invisible) shapes and traces a point on the shape as<br> -it moves along. Create interesting shapes like cardioids.<br> -</p> -<hr> - -<img src="screenshots/mandelbrot.png" width=250 height=250><br> -<a href="mandelbrot.html">The Mandelbrot Set</a><br> -<p> -This program draws the Mandelbrot Set. You can<br> -zoom in and change the power.<br> -</p> -<hr> - -<img src="screenshots/ant.png" width=250 height=250><br> -<a href="ant.html">Langton's Ant</a><br> -<p> -This is the cellular automaton known as Langton's<br> -Ant. You can find out more about it <a href="https://en.wikipedia.org/wiki/Langton%27s_ant">here</a>. -</p> -<hr> - -<img src="screenshots/picalculator.png" width=250 height=250><br> -<a href="2pi.html">π Calculator</a><br> -<p> -Draw a circle, then find out how well your circle<br> -approximates π!<br> -</p> -<hr> - -<img src="screenshots/anagramgame.png" width=250 height=250><br> -<a href="anagramgame.html">The Anagram Game</a><br> -<p> -Find an anagram of a random 7-letter word. -</p> -<hr> - -<img src="screenshots/autoartapp.png" width=200><br> -<a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.autoart">AutoArt</a><br> -The Android app for <a href="AutoImages.html">AutoImages</a>.<br> -<hr> - -<img src="screenshots/magnetsapp.png" width=200><br> -<a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.magnets">Magnets</a><br> -<p> -The Android app for <a href="magnets.html">Magnets</a>.<br> -</p> -<hr> - -<img src="screenshots/ballbounceapp.png" width=200><br> -<a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.ballbounce">Ball Bounce</a><br> -<p> -The Android app for <a href="ballbounce.html">Ball Bounce</a>.<br> -</p> -<hr> - - - -<p> -More coming soon! -</p> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>All projects</h2> + + <img src="screenshots/AutoImages.png" width=200 height=200><br> + <a href="AutoImages.html">AutoImages</a><br> + <p> + A computer program that creates art. It uses<br> + random functions to generate images. An explanation<br> + can be found <a href="explanation.html">here</a>.<br> + There is also AutoArtEvolve, which improves its<br> + images based on the ones you prefer:<br> + <iframe frameborder="0" src="https://itch.io/embed/43294?linkback=true&bg_color=fafafa&fg_color=000000&link_color=5ca4fa&border_color=9f9f9f" width="552" height="167"></iframe> + </p> + <hr> + + <video width="250" height="250" controls> + <source src="autovideo.mp4" type="video/mp4"> + </video><br> + <a href="AutoVideos.html">AutoVideos</a><br> + <p> + A computer program that creates videos. It uses<br> + random functions to generate videos. An explanation<br> + can be found <a href="explanation.html">here</a>.<br> + </p> + <hr> + + <audio controls> + <source src="autoaudio.wav" type="audio/wav"> + </audio><br> + <a href="AutoAudio.html">AutoAudio</a><br> + <p> + A computer program that creates audio. It uses<br> + random functions to generate audio. An explanation<br> + can be found <a href="explanation.html">here</a>.<br> + </p> + <hr> + + + <img src="screenshots/NameGenerator.png" width=200 height=200><br> + <a href="NameGenerator.html">NameGenerator</a><br> + <p> + A computer program that generates names! It uses<br> + the frequencies of trigrams.<br> + </p> + <hr> + + <p>Domino simulator <a href="DominoSimulator.html">web version</a> or <a href="https://qualum.itch.io/domino-simulator">offline version</a></p> + <iframe frameborder="0" src="https://itch.io/embed/77009?linkback=true" width="552" height="167"></iframe><br> + <p> + Place dominos, then knock them over. + </p> + <hr> + + <img src="screenshots/AutoHarmonograph.png" width=200 height=200><br> + <a href="AutoHarmonograph.html">AutoHarmonograph</a> or <a href="Harmonograph.html">Non-randomized</a><br> + <p> + A randomized <a href="https://en.wikipedia.org/wiki/Harmonograph">Harmonograph</a>. You pick the + number of pendulums. + </p> + <hr> + + <img src="screenshots/2d3d.png" width=200 height=200><img src="screenshots/2d3dcustom.png" width=200 height=200><br> + <a href="2d23d.html">2D becomes 3D</a> (and <a href="2d23dcustom.html">2D becomes 3D custom</a> + where you pick the starting shape)<br> + <p> + Different 2D shapes are moved around in circles<br> + to form 3D objects. + </p> + <hr> + + <img src="screenshots/clock.png" width=200 height=200><br> + <a href="clock.html">Clock</a><br> + <p> + A clock that shows the time of day with circles<br> + going around in circles. The colours of the circles<br> + change depending on the time. The innermost circle<br> + is seconds, the second is minutes, the third is<br> + hours, and the fourth is the day of the year.</p> + <hr> + + <img src="screenshots/mazesolver.png" width=200 height=200><br> + <a href="mazesolver.html">Maze Solver</a><br> + <p> + Create a maze, choose a starting point and an<br> + ending point, and your computer will solve the<br> + maze. + </p> + <hr> + + <img src="screenshots/ElementaryCellularAutomata.png" width=400 height=400><br> + <a href="elementarycellularautomata.html">Elementary cellular automata</a><br> + <p> + Run <a href="https://en.wikipedia.org/wiki/Elementary_cellular_automaton">elementary cellular automata</a>. + </p> + <hr> + + <img src="screenshots/h.png" width=200 height=200><br> + <a href="h.html">H</a><br> + <p> + Pick simple rules, and watch a cool pattern<br> + start to appear. + </p> + <hr> + <img src="screenshots/tree.png" width=200 height=200><br> + <a href="tree.html">Tree</a> and <a href="treegenerator.html">Tree generator</a> + <p> + Move your mouse around to see a tree change shape.<br> + In Tree Generator, you choose all the tree parameters<br> + but in Tree, you move your mouse around to pick the<br> parameters.<br> + <hr> + + <img src="screenshots/ballbounce.png" width=200 height=200><br> + <a href="ballbounce.html">Ball bounce</a><br> + <p> + Try to bounce a ball with your mouse. The game<br> + gets harder and harder because you can't see the<br> + ball behind its tracks.<br> + </p> + <hr> + + <img src="screenshots/magnets.png" width=200 height=200><br> + <a href="magnets.html">Magnets</a><br> + <p> + Try to avoid magnets which are attracted to your<br> + mouse. + </p> + <hr> + + <img src="screenshots/modularpascal.png" width=256 height=256><br> + <a href="modularpascal.html">Modular Pascal's Triangle</a><br> + <p> + A picture of Pascal's triangle mod x. Set x and<br> + Click update to see the triangle. </p> + <hr> + + <img src="screenshots/modularcircles.png" width=250 height=250><br> + <a href="modularcircles.html">Modular Circles</a><br> + <p> + There are a circle of points, each one corresponding<br> + to a number. Lines are drawn between points according<br> + to rules. Create interesting shapes like cardioids<br> + </p> + <hr> + + <img src="screenshots/shaperoller.png" width=250 height=250><br> + <a href="shaperoller.html">Shape Roller</a><br> + <p> + This program rolls (invisible) shapes around other <br> + (invisible) shapes and traces a point on the shape as<br> + it moves along. Create interesting shapes like cardioids.<br> + </p> + <hr> + + <img src="screenshots/mandelbrot.png" width=250 height=250><br> + <a href="mandelbrot.html">The Mandelbrot Set</a><br> + <p> + This program draws the Mandelbrot Set. You can<br> + zoom in and change the power.<br> + </p> + <hr> + + <img src="screenshots/ant.png" width=250 height=250><br> + <a href="ant.html">Langton's Ant</a><br> + <p> + This is the cellular automaton known as Langton's<br> + Ant. You can find out more about it <a href="https://en.wikipedia.org/wiki/Langton%27s_ant">here</a>. + </p> + <hr> + + <img src="screenshots/picalculator.png" width=250 height=250><br> + <a href="2pi.html">π Calculator</a><br> + <p> + Draw a circle, then find out how well your circle<br> + approximates π!<br> + </p> + <hr> + + <img src="screenshots/anagramgame.png" width=250 height=250><br> + <a href="anagramgame.html">The Anagram Game</a><br> + <p> + Find an anagram of a random 7-letter word. + </p> + <hr> + + <img src="screenshots/autoartapp.png" width=200><br> + <a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.autoart">AutoArt</a><br> + The Android app for <a href="AutoImages.html">AutoImages</a>.<br> + <hr> + + <img src="screenshots/magnetsapp.png" width=200><br> + <a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.magnets">Magnets</a><br> + <p> + The Android app for <a href="magnets.html">Magnets</a>.<br> + </p> + <hr> + + <img src="screenshots/ballbounceapp.png" width=200><br> + <a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.ballbounce">Ball Bounce</a><br> + <p> + The Android app for <a href="ballbounce.html">Ball Bounce</a>.<br> + </p> + <hr> + + + + <p> + More coming soon! + </p> </body> <footer> -<p>This website is licensed under the <a href='LICENSE.txt'>GNU General public license</a>. All of the source code can be found <a href="http://github.com/pommicket/pommicket.github.io">here</a></p> -</footer> + <p>This website is licensed under the <a href='LICENSE.txt'>GNU General public license</a>. All of the source code can be found <a href="http://github.com/pommicket/pommicket.github.io">here</a></p> </footer> </html> diff --git a/anagramgame.html b/anagramgame.html index b272eec..7b12aba 100644 --- a/anagramgame.html +++ b/anagramgame.html @@ -3,13 +3,13 @@ <title>The Anagram Game</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> + <div id="navbar"></div> + <script src="navbar.js"></script> <h2>The Anagram Game</h2> - <div id="header_links_div"></div> - <script src="js/header_links.js"></script> - <hr> <p>The word list can be found <a href="https://raw.githubusercontent.com/sindresorhus/word-list/master/words.txt">here</a>.</p> <div id="loading">Loading word list...</div> <div id="word"></div> @@ -17,11 +17,11 @@ <input type="text" id="guess" onKeyDown="if(event.keyCode==13) submit();"> <button onclick="submit();">Submit guess</button> <button onclick="giveUp();">Give up?</button> - + </div> <div id="answer"></div> <button id="again" style="visibility: hidden;" onclick="play();">Play again</button> <script src="js/anagramgame.js"></script> </body> - + </html> @@ -1,21 +1,22 @@ <html> -<head> -<title>Langton's Ant</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -</head> -<body> -<h2>Langton's Ant</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> + <head> + <title>Langton's Ant</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>Langton's Ant</h2> -<button onclick="start();">Start</button><br> -<button onclick="stop();">Stop</button><br> -<button onclick="clearCells();">Clear</button><br> -<button onclick="resetPos();">Reset ant position</button><br> -<div>Speed: <input type="number" id="speed" value=1></div> + <button onclick="start();">Start</button><br> + <button onclick="stop();">Stop</button><br> + <button onclick="clearCells();">Clear</button><br> + <button onclick="resetPos();">Reset ant position</button><br> + <div>Speed: <input type="number" id="speed" value=1></div> -<script src="js/ant.js"></script> -</html>
\ No newline at end of file + <script src="js/ant.js"></script> + </body> +</html> @@ -1,32 +1,35 @@ +<!DOCTYPE html> <html> -<head> -<title>Android Apps</title> -<meta charset="utf-8"> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -<link rel="shortcut icon" type="image/png" href="favicon.png"> -<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -</head> + <head> + <title>Android Apps</title> + <meta charset="utf-8"> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <link rel="shortcut icon" type="image/png" href="favicon.png"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> -<body> -<div id="navbar"></div><script src="navbar.js"></script> -<h2>Android Apps</h2> -<img src="screenshots/autoartapp.png" width=200><br> -<a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.autoart">AutoArt</a><br> -The Android app for <a href="AutoImages.html">AutoImages</a>.<br> -<hr> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>Android Apps</h2> + <img src="screenshots/autoartapp.png" width=200><br> + <a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.autoart">AutoArt</a><br> + The Android app for <a href="AutoImages.html">AutoImages</a>.<br> + <hr> -<img src="screenshots/magnetsapp.png" width=200><br> -<a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.magnets">Magnets</a><br> -<p> -The Android app for <a href="magnets.html">Magnets</a>.<br> -</p> -<hr> + <img src="screenshots/magnetsapp.png" width=200><br> + <a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.magnets">Magnets</a><br> + <p> + The Android app for <a href="magnets.html">Magnets</a>.<br> + </p> + <hr> -<img src="screenshots/ballbounceapp.png" width=200><br> -<a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.ballbounce">Ball Bounce</a><br> -<p> -The Android app for <a href="ballbounce.html">Ball Bounce</a>.<br> -</p> + <img src="screenshots/ballbounceapp.png" width=200><br> + <a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.ballbounce">Ball Bounce</a><br> + <p> + The Android app for <a href="ballbounce.html">Ball Bounce</a>.<br> + </p> -</body> + </body> +</html> diff --git a/ballbounce.html b/ballbounce.html index 5042d15..73c525e 100644 --- a/ballbounce.html +++ b/ballbounce.html @@ -1,18 +1,18 @@ <html> -<head> -<title>Bounce the ball</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> + <head> + <title>Bounce the ball</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> -</head> -<body> -<h2>Ball Bounce</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> -<p>You can get the android app for Ball Bounce - <a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.ballbounce">here</a>.</p> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<script src="js/ballbounce.js"></script> -</body> -</html>
\ No newline at end of file + <h2>Ball Bounce</h2> + <p>You can get the android app for Ball Bounce + <a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.ballbounce">here</a>.</p> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="js/ballbounce.js"></script> + </body> +</html> @@ -1,16 +1,17 @@ <html> <head> -<title>Clock</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -<link rel="shortcut icon" type="image/png" href="clock.png"> + <title>Clock</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <link rel="shortcut icon" type="image/png" href="clock.png"> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> -<h2>Clock</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<script src="js/clock.js"></script> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>Clock</h2> + + <script src="js/clock.js"></script> </body> </html> diff --git a/css/NameGenerator.css b/css/NameGenerator.css new file mode 100644 index 0000000..96c2252 --- /dev/null +++ b/css/NameGenerator.css @@ -0,0 +1,9 @@ +#loading +{ + font-size: 20px; +} +button:active +{ + background-color: #ff0000; + color:#ff0000; +} diff --git a/css/cellularautomata.css b/css/cellularautomata.css new file mode 100644 index 0000000..814c0e7 --- /dev/null +++ b/css/cellularautomata.css @@ -0,0 +1,14 @@ +#start +{ + font-family: monospace; +} + +#error +{ + color: red; +} + +button:active +{ + background-color: #ff0000; +} diff --git a/css/style.css b/css/style.css index 047f5c9..17d4d3b 100644 --- a/css/style.css +++ b/css/style.css @@ -9,7 +9,7 @@ footer padding-right: 10px; padding-top: 5px; padding-bottom: 5px; - + background: #f9f9f9; } .header_link:hover @@ -21,4 +21,4 @@ footer body { margin: 10px; -}
\ No newline at end of file +} diff --git a/elementarycellularautomata.html b/elementarycellularautomata.html index e692196..dd1b960 100644 --- a/elementarycellularautomata.html +++ b/elementarycellularautomata.html @@ -1,59 +1,40 @@ <html> -<head> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> + <head> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> -<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<title>Elementary Cellular Automata</title> + <title>Elementary Cellular Automata</title> + <link rel="stylesheet" href="css/cellularautomata.css"> -<style> -#start -{ - font-family: monospace; -} + </head> -#error -{ - color: red; -} + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>Elementary Cellular Automata</h2> -button:active -{ - background-color: #ff0000; -} + <div id="explanation"> + This is a program which runs <a href="https://en.wikipedia.org/wiki/Elementary_cellular_automaton">elementary cellular automata</a> + like <a href="https://en.wikipedia.org/wiki/Rule_110">Rule 110</a>. Each cell is determined by the 3 cells above it (assuming speed of light = 1), using + rules specified by the rule number. The "speed of light", (A.K.A. the range) is how quickly information travels. Each cell is determined by + the 2c+1 cells where c is the "speed of light". Rule number < 2<sup>2<sup>2c+1</sup></sup> + </div> -</style> + Number of iterations: <input type="number" id="time" min="0" value="500"></input><br> + Size (if the length of the starting configuration is less than the size, zeros will be added to both sides): + <input type="number" id="size" value="500"><br> + Starting configuration: <input type="text" id="start" value="101" size="50"></input><br> + Rule number: <input type="number" id="rule" min="0" value="110"></input><br> + "Speed of light": <input type="number" id="c" min="0" value="1"></input><br> + <button id="run">Run</button> -</head> + <div id="error"></div><br> + <canvas id="canvas" width="1000" height="500"></canvas> -<body> -<h2>Elementary Cellular Automata</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> + <script src="js/elementarycellularautomata.js"></script> -<hr> - -<div id="explanation"> -This is a program which runs <a href="https://en.wikipedia.org/wiki/Elementary_cellular_automaton">elementary cellular automata</a> -like <a href="https://en.wikipedia.org/wiki/Rule_110">Rule 110</a>. Each cell is determined by the 3 cells above it (assuming speed of light = 1), using -rules specified by the rule number. The "speed of light", (A.K.A. the range) is how quickly information travels. Each cell is determined by -the 2c+1 cells where c is the "speed of light". Rule number < 2<sup>2<sup>2c+1</sup></sup> -</div> - -Number of iterations: <input type="number" id="time" min="0" value="500"></input><br> -Size (if the length of the starting configuration is less than the size, zeros will be added to both sides): -<input type="number" id="size" value="500"><br> -Starting configuration: <input type="text" id="start" value="101" size="50"></input><br> -Rule number: <input type="number" id="rule" min="0" value="110"></input><br> -"Speed of light": <input type="number" id="c" min="0" value="1"></input><br> -<button id="run">Run</button> - -<div id="error"></div><br> -<canvas id="canvas" width="1000" height="500"></canvas> - -<script src="js/elementarycellularautomata.js"></script> - -</body> + </body> </html> diff --git a/explanation.html b/explanation.html index c7d778e..8434177 100644 --- a/explanation.html +++ b/explanation.html @@ -1,69 +1,66 @@ <html>
-<head>
-<script src="js/latexit.js"></script>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-<link rel="stylesheet" href="css/style.css">
+ <head>
+ <script src="js/latexit.js"></script>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+ <link rel="stylesheet" href="css/style.css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+ <title>AutoArt Explanation</title>
+ </head>
-<title>AutoArt Explanation</title>
-</head>
+ <body>
-<body>
+ <div id="navbar"></div>
+ <script src="navbar.js"></script>
-<h2>Explanation of AutoArt</h2>
-<a class="header_link" href="index.html">Home</a>
-<a class="header_link" href="all.html">All</a>
-<a class="header_link" href="mathematical.html">Mathematical Demonstrations</a>
-<a class="header_link" href="games.html">Games</a>
-<a class="header_link" href="apps.html">Android Apps</a>
-<hr>
+ <h2>Explanation of AutoArt</h2>
-<h4><a href="AutoImages.html">AutoImages:</a></h4>
-<p>AutoImages works by creating random functions using Markov Chains. Every image on your computer is made up of many very small squares called "pixels". Each pixel has a red, green
-and blue value. If a pixel has a red of 255, a green of 0, and a blue of 0, the pixel will be red. AutoImages creates 3 functions, the red function, green function, and blue function.
-Each function takes in the x and y position of each pixel (where the pixel is), and returns the red, green, or blue value for that pixel.
+ <h4><a href="AutoImages.html">AutoImages:</a></h4>
+ <p>AutoImages works by creating random functions using Markov Chains. Every image on your computer is made up of many very small squares called "pixels". Each pixel has a red, green
+ and blue value. If a pixel has a red of 255, a green of 0, and a blue of 0, the pixel will be red. AutoImages creates 3 functions, the red function, green function, and blue function.
+ Each function takes in the x and y position of each pixel (where the pixel is), and returns the red, green, or blue value for that pixel.
-<div lang="latex">
-\\
-R(x, y) =$ the red value of the pixel at position $(x, y)\\
-G(x, y) =$ the green value of the pixel at position $(x, y)\\
-B(x, y) =$ the blue value of the pixel at position $(x, y)\\
-$Where $R, G,$ and $B$ are created randomly.
-</div>
+ <div lang="latex">
+ \\
+ R(x, y) =$ the red value of the pixel at position $(x, y)\\
+ G(x, y) =$ the green value of the pixel at position $(x, y)\\
+ B(x, y) =$ the blue value of the pixel at position $(x, y)\\
+ $Where $R, G,$ and $B$ are created randomly.
+ </div>
-<p>It uses the random functions to calculate the colour of each pixel in the image.</p>
+ <p>It uses the random functions to calculate the colour of each pixel in the image.</p>
-<h4><a href="AutoVideos.html">AutoVideos:</a></h4>
-<p>
-AutoImages works by creating random functions using Markov Chains. Every video on your computer is made up of many images called "frames". When you play a video, you are just
-seeing a series of images played very quickly (at 24 images per second). Each image is made up of pixels, and each pixel has a red, green, and blue value. AutoVideos' functions
-given the colour of each pixel given its x and y positions, and its frame number (the first frame is frame #0, the second is frame #1 and so on).
-</p>
-<div lang="latex">
-\\
-t =$ Frame number$\\
-R(x, y, t) =$ the red value of the pixel at position $(x, y)$ in frame number $t\\
-G(x, y, t) =$ the green value of the pixel at position $(x, y)$ in frame number $t\\
-B(x, y, t) =$ the blue value of the pixel at position $(x, y)$ in frame number $t\\
-$Where $R, G,$ and $B$ are created randomly.
+ <h4><a href="AutoVideos.html">AutoVideos:</a></h4>
+ <p>
+ AutoImages works by creating random functions using Markov Chains. Every video on your computer is made up of many images called "frames". When you play a video, you are just
+ seeing a series of images played very quickly (at 24 images per second). Each image is made up of pixels, and each pixel has a red, green, and blue value. AutoVideos' functions
+ given the colour of each pixel given its x and y positions, and its frame number (the first frame is frame #0, the second is frame #1 and so on).
+ </p>
+ <div lang="latex">
+ \\
+ t =$ Frame number$\\
+ R(x, y, t) =$ the red value of the pixel at position $(x, y)$ in frame number $t\\
+ G(x, y, t) =$ the green value of the pixel at position $(x, y)$ in frame number $t\\
+ B(x, y, t) =$ the blue value of the pixel at position $(x, y)$ in frame number $t\\
+ $Where $R, G,$ and $B$ are created randomly.
-</div>
+ </div>
-<h4><a href="AutoAudio.html">AutoAudio:</a></h4>
-<p>
-All audio is stored as a series of samples. Each sample has a y position. For example the function</p>
-<div lang="latex">
-\\
-y(t) = sin(880 \pi t)\\
-$If $t$ is the time at which the sample is played
-</div>
-<p> sounds like an A
-on a piano. AutoAudio creates a random function, then plays it.
-</p>
-<div lang="latex">
-S(t) =$ the $y$ position of sample at time $t
-</div>
+ <h4><a href="AutoAudio.html">AutoAudio:</a></h4>
+ <p>
+ All audio is stored as a series of samples. Each sample has a y position. For example the function</p>
+ <div lang="latex">
+ \\
+ y(t) = sin(880 \pi t)\\
+ $If $t$ is the time at which the sample is played
+ </div>
+ <p> sounds like an A
+ on a piano. AutoAudio creates a random function, then plays it.
+ </p>
+ <div lang="latex">
+ S(t) =$ the $y$ position of sample at time $t
+ </div>
-</body>
+ </body>
</html>
@@ -1,56 +1,51 @@ <html> -<head> -<title>Games</title> -<meta charset="utf-8"> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -<link rel="shortcut icon" type="image/png" href="favicon.png"> -<style> -body -{ - margin-left: 10px; -} -</style> -</head> - -<body> -<h2>Games</h2> -<a class="header_link" href="index.html">Home</a> -<a class="header_link" href="all.html">All</a> -<a class="header_link" href="mathematical.html">Mathematical Demonstrations</a> -<a class="header_link" href="apps.html">Android Apps</a> -<hr> - - -<img src="screenshots/ballbounce.png" width=200 height=200><br> -<a href="ballbounce.html">Ball bounce</a><br> -<p> -Try to bounce a ball with your mouse. The game<br> -gets harder and harder because you can't see the<br> -ball behind its tracks.<br> -</p> -<hr> - -<img src="screenshots/magnets.png" width=200 height=200><br> -<a href="magnets.html">Magnets</a><br> -<p> -Try to avoid magnets which are attracted to your<br> -mouse. -</p> -<hr> - -<img src="screenshots/picalculator.png" width=250 height=250><br> -<a href="2pi.html">π Calculator</a><br> -<p> -Draw a circle, then find out how well your circle<br> -approximates π!<br> -</p> -<hr> - -<p>Domino simulator <a href="DominoSimulator.html">web version</a> or <a href="https://qualum.itch.io/domino-simulator">offline version</a></p> -<iframe frameborder="0" src="https://itch.io/embed/77009?linkback=true" width="552" height="167"></iframe><br> -<p> -Place dominos, then knock them over. -</p> - -</body>
\ No newline at end of file + <head> + <meta charset="utf-8"> + <title>Games</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + <link rel="stylesheet" href="css/style.css"> + <link rel="shortcut icon" type="image/png" href="favicon.png"> + </head> + + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + + <h2>Games</h2> + <hr> + + + <img src="screenshots/ballbounce.png" width=200 height=200><br> + <a href="ballbounce.html">Ball bounce</a><br> + <p> + Try to bounce a ball with your mouse. The game<br> + gets harder and harder because you can't see the<br> + ball behind its tracks.<br> + </p> + <hr> + + <img src="screenshots/magnets.png" width=200 height=200><br> + <a href="magnets.html">Magnets</a><br> + <p> + Try to avoid magnets which are attracted to your<br> + mouse. + </p> + <hr> + + <img src="screenshots/picalculator.png" width=250 height=250><br> + <a href="2pi.html">π Calculator</a><br> + <p> + Draw a circle, then find out how well your circle<br> + approximates π!<br> + </p> + <hr> + + <p>Domino simulator <a href="DominoSimulator.html">web version</a> or <a href="https://qualum.itch.io/domino-simulator">offline version</a></p> + <iframe frameborder="0" src="https://itch.io/embed/77009?linkback=true" width="552" height="167"></iframe><br> + <p> + Place dominos, then knock them over. + </p> + + </body> +</html> @@ -1,47 +1,48 @@ <html> -<head> -<link rel='stylesheet' href='css/bootstrap.min.css'> -<link rel='stylesheet' href='css/style.css'> -<link rel="shortcut icon" type="image/png" href="hfavicon.png"> -<title>H</title> -</head> - -<body> -<h2 style='font-family: Times New Roman'>H</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> - -<script src='js/h.js'></script> - -<p>Line lengths controls the size of the Hs, width and height control -how big the H can get, and wait between iterations changes how quickly the -Hs are generated. Click begin to start, and once you think it has -grown enough, click stop. You can then download the H or continue to make -more Hs by clicking begin again.</p> - -Line lengths: <input type='number' id='lineLength' value=6><br> -Width: <input type='number' id='w' value=500><br> -Height: <input type='number' id='h' value=500><br> -Wait between iterations (ms): <input type='number' id='delay' value=1000> -<br> -Chance that a new branch will form: -<input type='number' min=0 max=1 id='chance' value=1 step=0.1> -<br> - - -<button onclick='beginH();'>Begin</button><br> -<button onclick='stop();'>Stop</button><br> - -<canvas width=100 height=100 id='canvas'></canvas> - -<footer> -<p class='footer'>This program is licensed under the -<a href='http://autoart.neocities.org/LICENSE.txt'>GNU General public license</a> -</p> -</footer> - -</body> + <head> + <link rel="shortcut icon" type="image/png" href="hfavicon.png"> + <title>H</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel='stylesheet' href='css/style.css'> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + + <h2 style='font-family: Times New Roman'>H</h2> + + <script src='js/h.js'></script> + + <p>Line lengths controls the size of the Hs, width and height control + how big the H can get, and wait between iterations changes how quickly the + Hs are generated. Click begin to start, and once you think it has + grown enough, click stop. You can then download the H or continue to make + more Hs by clicking begin again.</p> + + Line lengths: <input type='number' id='lineLength' value=6><br> + Width: <input type='number' id='w' value=500><br> + Height: <input type='number' id='h' value=500><br> + Wait between iterations (ms): <input type='number' id='delay' value=1000> + <br> + Chance that a new branch will form: + <input type='number' min=0 max=1 id='chance' value=1 step=0.1> + <br> + + + <button onclick='beginH();'>Begin</button><br> + <button onclick='stop();'>Stop</button><br> + + <canvas width=100 height=100 id='canvas'></canvas> + + <footer> + <p class='footer'>This program is licensed under the + <a href='http://autoart.neocities.org/LICENSE.txt'>GNU General public license</a> + </p> + </footer> + + </body> @@ -1,35 +1,33 @@ <html> - <head> - <title>AutoArt</title> - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> - <link rel="stylesheet" href="css/style.css"> - <link rel="shortcut icon" type="image/png" href="favicon.png"> - - </head> - <body> - <h2>AutoArt</h2> - <a class="header_link" href="all.html">All</a> - <a class="header_link" href="mathematical.html">Mathematical Demonstrations</a> - <a class="header_link" href="games.html">Games</a> - <a class="header_link" href="apps.html">Android Apps</a> - - <hr> - <p> - AutoArt is a website with mathematical demonstrations, games, and more.<br> - The main projects on the website are: - - <ul> - <li><a href="AutoImages.html">Auto Images</a></li> - <li><a href="AutoVideos.html">Auto Videos</a></li> - <li><a href="AutoAudio.html">Auto Audio</a></li> - </ul> - </p> - <p>Image from <a href='AutoImages.html'>AutoImages</a>:<br></p> - <img src="screenshots/AutoImages.png" title="Example of AutoImages" style="width:500px;height:250px"> - </body> - <footer> -<p>This website is licensed under the <a href='LICENSE.txt'>GNU General public license</a>. All of the source code can be found <a href="http://github.com/pommicket/pommicket.github.io">here</a></p> -</footer> + <head> + <title>AutoArt</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <link rel="shortcut icon" type="image/png" href="favicon.png"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + + <h2>AutoArt</h2> + <p> + AutoArt is a website with mathematical demonstrations, games, and more.<br> + The main projects on the website are: + + <ul> + <li><a href="AutoImages.html">Auto Images</a></li> + <li><a href="AutoVideos.html">Auto Videos</a></li> + <li><a href="AutoAudio.html">Auto Audio</a></li> + </ul> + </p> + <p>Image from <a href='AutoImages.html'>AutoImages</a>:<br></p> + <img src="screenshots/AutoImages.png" title="Example of AutoImages" style="width:500px;height:250px"> + </body> + <footer> + <p>This website is licensed under the <a href='LICENSE.txt'>GNU General public license</a>. All of the source code can be found <a href="http://github.com/pommicket/pommicket.github.io">here</a></p> + </footer> + </body> </html> diff --git a/js/AutoVideos.js b/js/AutoVideos.js index bd3a744..08a47fc 100644 --- a/js/AutoVideos.js +++ b/js/AutoVideos.js @@ -10,7 +10,6 @@ var numberweights = {"Constant":1}; var numberweight; var singleweight; var eqlength; -var functionp = document.getElementById('Function'); var notify; for(var i = 0; i < single.length; i++) @@ -224,7 +223,7 @@ function create() ' y = Math.floor((i/4) / xsize);'+ ' r = Math.abs(Math.round((' + requation + ') % 255));'+ ' g = Math.abs(Math.round((' + gequation + ') % 255));'+ - ' b = Math.abs(Math.round((' + bequation + ') % 255));'+ + ' b = Math.abs(Math.round((' + bequation + ') % 255));'+ ' data[i] = r;'+ ' data[i+1] = g;'+ ' data[i+2] = b;'+ @@ -239,21 +238,21 @@ function create() var url = webkitURL.createObjectURL(output); video.src = url; - ctx.drawImage(video, 0, 0); + $("#Canvas").hide(); + d = new Date(); var end = d.getTime(); - var timeparagraph = document.getElementById('Time'); var timetaken = Math.round((end-start)/1000); if (timetaken == 1) { - timeparagraph.innerHTML = 'The time it took was 1 second.'; + $("#Time").html('The time it took was 1 second.'); } else { - timeparagraph.innerHTML = 'The time it took was ' + timetaken + ' seconds.'; + $("#Time").html('The time it took was ' + timetaken + ' seconds.'); } - functionp.innerHTML = '$Functions: \\newline\\newline Red: $' + rmvmath(requation) + '$\\newline\\newline Green: $' + rmvmath(gequation) + '$\\newline\\newline Blue: $' + rmvmath(bequation) + '$'; + $("#Function").html('$Functions: \\newline\\newline Red: $' + rmvmath(requation) + '$\\newline\\newline Green: $' + rmvmath(gequation) + '$\\newline\\newline Blue: $' + rmvmath(bequation) + '$'); LatexIT.render('*',false); if(notify) diff --git a/magnets.html b/magnets.html index c8a99f7..4851095 100644 --- a/magnets.html +++ b/magnets.html @@ -1,17 +1,19 @@ <html> -<head> -<title>Magnets</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -</head> -<body> -<h2>Magnets</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> + <head> + <title>Magnets</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> -<p>You can get the Android app for Magnets <a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.magnets">here</a>.</p> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<script src="js/magnets.js"></script> -</body> + <div id="navbar"></div> + <script src="navbar.js"></script> + + <h2>Magnets</h2> + + <p>You can get the Android app for Magnets <a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.magnets">here</a>.</p> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="js/magnets.js"></script> + </body> </html> diff --git a/magnets_old_version.html b/magnets_old_version.html index 189d4ec..6ac6014 100644 --- a/magnets_old_version.html +++ b/magnets_old_version.html @@ -1,15 +1,17 @@ <html> -<head> -<title>Magnets</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -</head> -<body> -<h2>Magnets</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<script src="js/magnets_old_version.js"></script> -</body> + <head> + <title>Magnets</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + + <h2>Magnets</h2> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="js/magnets_old_version.js"></script> + </body> </html> diff --git a/mandelbrot.html b/mandelbrot.html index e5d7cf3..e46eaca 100644 --- a/mandelbrot.html +++ b/mandelbrot.html @@ -1,20 +1,19 @@ <html> -<head> -<title>The Mandelbrot Set</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> + <head> + <title>The Mandelbrot Set</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>Mandelbrot Set</h2> -</head> -<body> -<h2>Mandelbrot Set</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> - -<p>The Mandelbrot Set is a <a target="_blank" href="https://en.wikipedia.org/wiki/Fractal">fractal</a>. An explanation of how it works can be found <a href="mandelbrot_explanation.html">here</a>. Click on a spot to zoom in on that spot or press A to zoom in and -Q to zoom out. Press P to increase the power, and L to decrease it. Press I to increase the maximum number of iterations and K to decrease it.<br> -<b>Every time you zoom in or out, change the power, or change the maximum number of iterations it will take a bit of time to load.</b></p> -<canvas width=500 height=500 id="canvas"></canvas> -<script src="js/mandelbrot.js"></script> -</body> + <p>The Mandelbrot Set is a <a target="_blank" href="https://en.wikipedia.org/wiki/Fractal">fractal</a>. An explanation of how it works can be found <a href="mandelbrot_explanation.html">here</a>. Click on a spot to zoom in on that spot or press A to zoom in and + Q to zoom out. Press P to increase the power, and L to decrease it. Press I to increase the maximum number of iterations and K to decrease it.<br> + <b>Every time you zoom in or out, change the power, or change the maximum number of iterations it will take a bit of time to load.</b></p> + <canvas width=500 height=500 id="canvas"></canvas> + <script src="js/mandelbrot.js"></script> + </body> </html> diff --git a/mandelbrot_explanation.html b/mandelbrot_explanation.html index 961076c..36f7032 100644 --- a/mandelbrot_explanation.html +++ b/mandelbrot_explanation.html @@ -1,72 +1,71 @@ <html> -<head> -<script src="js/latexit.js"></script> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> + <head> + <script src="js/latexit.js"></script> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + <title>Mandelbrot Set Explanation</title> + </head> -<title>Mandelbrot Set Explanation</title> -</head> + <body> -<body> + <div id="navbar"></div> + <script src="navbar.js"></script> -<h2>Explanation of the Mandelbrot Set</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> + <h2>Explanation of the Mandelbrot Set</h2> -Consider the function -<div lang="latex"> -f_c(z) = z^2+c\\ -</div><br> -Where z and c are complex numbers. Complex numbers are numbers in the form of -<div lang="latex"> -\\ -ai+b\\ -$Where $i=\sqrt{-1} -</div> -<br> -Now let's check if 0.5 is in the Mandelbrot Set. To do so, start at 0 -<div lang="latex"> -\\ -f_{0.5}(0) = 0^2 + 0.5 = 0.5\\ -f_{0.5}(0.5) = 0.5^2 + 0.5 = 0.75\\ -f_{0.5}(0.75) = 1.0625\\ -f_{0.5}(1.0625) = 1.62890625\\ -f_{0.5}(1.62890625) = 3.15333557\\ -</div> -<br> -It can be proven that if the function passes 2, it will go to infinity if you continually apply the function. -Since this function has passed 2, 0.5 is not in the Mandelbrot Set. Compare this to 0.25. + Consider the function + <div lang="latex"> + f_c(z) = z^2+c\\ + </div><br> + Where z and c are complex numbers. Complex numbers are numbers in the form of + <div lang="latex"> + \\ + ai+b\\ + $Where $i=\sqrt{-1} + </div> + <br> + Now let's check if 0.5 is in the Mandelbrot Set. To do so, start at 0 + <div lang="latex"> + \\ + f_{0.5}(0) = 0^2 + 0.5 = 0.5\\ + f_{0.5}(0.5) = 0.5^2 + 0.5 = 0.75\\ + f_{0.5}(0.75) = 1.0625\\ + f_{0.5}(1.0625) = 1.62890625\\ + f_{0.5}(1.62890625) = 3.15333557\\ + </div> + <br> + Since this function has passed 2, 0.5 is not in the Mandelbrot Set. Compare this to 0.25. -<div lang="latex"> -\\ -f_{0.25}(0) = 0^2+0.25 = 0.25\\ -f_{0.25}(0.25) = 0.3125\\ -f_{0.25}(0.3125) = 0.34765625\\ -f_{0.25}(0.34765625) = 0.370864868\\ -f_{0.25}(0.370864868) = 0.38754075\\ -f_{0.25}(0.38754075) = 0.400187833\\ -f_{0.25}(0.400187833) = 0.410150302\\ -f_{0.25}(0.410150) = 0.418223\\ -f_{0.25}(0.418223) = 0.424911\\ -f_{0.25}(0.424911) = 0.430549\\ -f_{0.25}(0.430549) = 0.435373\\ -f_{0.25}(0.435373) = 0.439549\\ -f_{0.25}(0.439549) = 0.443204\\ -f_{0.25}(0.443204) = 0.446429\\ -f_{0.25}(0.446429) = 0.449299\\ -</div> -<br> -This will never pass 2, so 0.25 is in the Mandelbrot Set. -<br> -This process can also be done to complex numbers.<br> -<br> -<div lang="latex"> -M(x) =$ the number of iterations required for $f_x$ to pass 2.$ -</div> + <div lang="latex"> + \\ + f_{0.25}(0) = 0^2+0.25 = 0.25\\ + f_{0.25}(0.25) = 0.3125\\ + f_{0.25}(0.3125) = 0.34765625\\ + f_{0.25}(0.34765625) = 0.370864868\\ + f_{0.25}(0.370864868) = 0.38754075\\ + f_{0.25}(0.38754075) = 0.400187833\\ + f_{0.25}(0.400187833) = 0.410150302\\ + f_{0.25}(0.410150) = 0.418223\\ + f_{0.25}(0.418223) = 0.424911\\ + f_{0.25}(0.424911) = 0.430549\\ + f_{0.25}(0.430549) = 0.435373\\ + f_{0.25}(0.435373) = 0.439549\\ + f_{0.25}(0.439549) = 0.443204\\ + f_{0.25}(0.443204) = 0.446429\\ + f_{0.25}(0.446429) = 0.449299\\ + </div> + <br> + This will never pass 2, so 0.25 is in the Mandelbrot Set. + <br> + This process can also be done to complex numbers.<br> + <br> + <div lang="latex"> + M(x) =$ the number of iterations required for $f_x$ to pass 2.$ + </div> -The website is just a 2d plot of M(x). + The website is just a 2d plot of M(x). -</body> + </body> </html> diff --git a/mathematical.html b/mathematical.html index 9482b49..1d78992 100644 --- a/mathematical.html +++ b/mathematical.html @@ -1,127 +1,126 @@ <html> -<head> -<title>Mathematical Demonstrations</title> -<meta charset="utf-8"> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -<link rel="shortcut icon" type="image/png" href="favicon.png"> -</head> - -<body> -<h2>Mathematical Demonstrations</h2> -<a class="header_link" href="index.html">Home</a> -<a class="header_link" href="all.html">All</a> -<a class="header_link" href="games.html">Games</a> -<a class="header_link" href="apps.html">Android Apps</a> -<hr> - -<img src="screenshots/modularpascal.png" width=256 height=256><br> -<a href="modularpascal.html">Modular Pascal's Triangle</a><br> -<p> -A picture of Pascal's triangle mod x. Set x and<br> -Click update to see the triangle. </p> -<hr> - -<img src="screenshots/modularcircles.png" width=250 height=250><br> -<a href="modularcircles.html">Modular Circles</a><br> -<p> -There are a circle of points, each one corresponding<br> -to a number. Lines are drawn between points according<br> -to rules. Create interesting shapes like cardioids<br> -</p> -<hr> - -<img src="screenshots/shaperoller.png" width=250 height=250><br> -<a href="shaperoller.html">Shape Roller</a><br> -<p> -This program rolls (invisible) shapes around other <br> -(invisible) shapes and traces a point on the shape as<br> -it moves along. Create interesting shapes like cardioids.<br> -</p> -<hr> - -<img src="screenshots/mandelbrot.png" width=250 height=250><br> -<a href="mandelbrot.html">The Mandelbrot Set</a><br> -<p> -This program draws the Mandelbrot Set. You can<br> -zoom in and change the power.<br> -</p> -<hr> - -<img src="screenshots/ant.png" width=250 height=250><br> -<a href="ant.html">Langton's Ant</a><br> -<p> -This is the cellular automaton known as Langton's<br> -Ant. You can find out more about it <a href="https://en.wikipedia.org/wiki/Langton%27s_ant">here</a>. -</p> -<hr> - -<img src="screenshots/ElementaryCellularAutomata.png" width=400 height=400><br> -<a href="elementarycellularautomata.html">Elementary cellular automata</a><br> -<p> -Run <a href="https://en.wikipedia.org/wiki/Elementary_cellular_automaton">elementary cellular automata</a>. -</p> -<hr> - -<img src="screenshots/mazesolver.png" width=200 height=200><br> -<a href="mazesolver.html">Maze Solver</a><br> -<p> -Create a maze, choose a starting point and an<br> -ending point, and your computer will solve the<br> -maze. -</p> -<hr> - - -<img src="screenshots/AutoImages.png" width=200 height=200><br> -<a href="AutoImages.html">AutoImages</a><br> -<p> -A computer program that creates art. It uses<br> -random functions to generate images. An explanation<br> -can be found <a href="explanation.html">here</a>.<br> -There is also AutoArtEvolve, which improves its<br> -images based on the ones you prefer:<br> -<iframe frameborder="0" src="https://itch.io/embed/43294?linkback=true&bg_color=fafafa&fg_color=000000&link_color=5ca4fa&border_color=9f9f9f" width="552" height="167"></iframe> -</p> -<hr> - -<video width="250" height="250" controls> - <source src="autovideo.mp4" type="video/mp4"> -</video><br> -<a href="AutoVideos.html">AutoVideos</a><br> -<p> -A computer program that creates videos. It uses<br> -random functions to generate videos. An explanation<br> -can be found <a href="explanation.html">here</a>.<br> -</p> -<hr> - -<audio controls> - <source src="autoaudio.wav" type="audio/wav"> -</audio><br> -<a href="AutoAudio.html">AutoAudio</a><br> -<p> -A computer program that creates audio. It uses<br> -random functions to generate audio. An explanation<br> -can be found <a href="explanation.html">here</a>.<br> -</p> -<hr> - - -<img src="screenshots/NameGenerator.png" width=200 height=200><br> -<a href="NameGenerator.html">NameGenerator</a><br> -<p> -A computer program that generates names! It uses<br> -the frequencies of trigrams.<br> -</p> -<hr> - -<img src="screenshots/picalculator.png" width=250 height=250><br> -<a href="2pi.html">π Calculator</a><br> -<p> -Draw a circle, then find out how well your circle<br> -approximates π!<br> -</p> - - -</body> + <head> + <title>Mathematical Demonstrations</title> + <meta charset="utf-8"> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <link rel="shortcut icon" type="image/png" href="favicon.png"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>Mathematical Demonstrations</h2> + + <img src="screenshots/modularpascal.png" width=256 height=256><br> + <a href="modularpascal.html">Modular Pascal's Triangle</a><br> + <p> + A picture of Pascal's triangle mod x. Set x and<br> + Click update to see the triangle. </p> + <hr> + + <img src="screenshots/modularcircles.png" width=250 height=250><br> + <a href="modularcircles.html">Modular Circles</a><br> + <p> + There are a circle of points, each one corresponding<br> + to a number. Lines are drawn between points according<br> + to rules. Create interesting shapes like cardioids<br> + </p> + <hr> + + <img src="screenshots/shaperoller.png" width=250 height=250><br> + <a href="shaperoller.html">Shape Roller</a><br> + <p> + This program rolls (invisible) shapes around other <br> + (invisible) shapes and traces a point on the shape as<br> + it moves along. Create interesting shapes like cardioids.<br> + </p> + <hr> + + <img src="screenshots/mandelbrot.png" width=250 height=250><br> + <a href="mandelbrot.html">The Mandelbrot Set</a><br> + <p> + This program draws the Mandelbrot Set. You can<br> + zoom in and change the power.<br> + </p> + <hr> + + <img src="screenshots/ant.png" width=250 height=250><br> + <a href="ant.html">Langton's Ant</a><br> + <p> + This is the cellular automaton known as Langton's<br> + Ant. You can find out more about it <a href="https://en.wikipedia.org/wiki/Langton%27s_ant">here</a>. + </p> + <hr> + + <img src="screenshots/ElementaryCellularAutomata.png" width=400 height=400><br> + <a href="elementarycellularautomata.html">Elementary cellular automata</a><br> + <p> + Run <a href="https://en.wikipedia.org/wiki/Elementary_cellular_automaton">elementary cellular automata</a>. + </p> + <hr> + + <img src="screenshots/mazesolver.png" width=200 height=200><br> + <a href="mazesolver.html">Maze Solver</a><br> + <p> + Create a maze, choose a starting point and an<br> + ending point, and your computer will solve the<br> + maze. + </p> + <hr> + + + <img src="screenshots/AutoImages.png" width=200 height=200><br> + <a href="AutoImages.html">AutoImages</a><br> + <p> + A computer program that creates art. It uses<br> + random functions to generate images. An explanation<br> + can be found <a href="explanation.html">here</a>.<br> + There is also AutoArtEvolve, which improves its<br> + images based on the ones you prefer:<br> + <iframe frameborder="0" src="https://itch.io/embed/43294?linkback=true&bg_color=fafafa&fg_color=000000&link_color=5ca4fa&border_color=9f9f9f" width="552" height="167"></iframe> + </p> + <hr> + + <video width="250" height="250" controls> + <source src="autovideo.mp4" type="video/mp4"> + </video><br> + <a href="AutoVideos.html">AutoVideos</a><br> + <p> + A computer program that creates videos. It uses<br> + random functions to generate videos. An explanation<br> + can be found <a href="explanation.html">here</a>.<br> + </p> + <hr> + + <audio controls> + <source src="autoaudio.wav" type="audio/wav"> + </audio><br> + <a href="AutoAudio.html">AutoAudio</a><br> + <p> + A computer program that creates audio. It uses<br> + random functions to generate audio. An explanation<br> + can be found <a href="explanation.html">here</a>.<br> + </p> + <hr> + + + <img src="screenshots/NameGenerator.png" width=200 height=200><br> + <a href="NameGenerator.html">NameGenerator</a><br> + <p> + A computer program that generates names! It uses<br> + the frequencies of trigrams.<br> + </p> + <hr> + + <img src="screenshots/picalculator.png" width=250 height=250><br> + <a href="2pi.html">π Calculator</a><br> + <p> + Draw a circle, then find out how well your circle<br> + approximates π!<br> + </p> + + + </body> +</html> diff --git a/mazesolver.html b/mazesolver.html index e62fcbb..64d15a4 100644 --- a/mazesolver.html +++ b/mazesolver.html @@ -1,39 +1,40 @@ <html>
-<head>
-<link href="css/bootstrap.min.css" rel="stylesheet">
-<link href="css/style.css" rel="stylesheet">
-<title>Maze Solver</title>
-</head>
+ <head>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+ <link href="css/style.css" rel="stylesheet">
+ <title>Maze Solver</title>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+ </head>
-<body>
+ <body>
-<h2>Maze Solver</h2>
-<div id="header_links_div"></div>
-<script src="js/header_links.js"></script>
-<hr>
+ <div id="navbar"></div>
+ <script src="navbar.js"></script>
+ <h2>Maze Solver</h2>
+ <hr>
-<p>Maze Solver is a computer program that can solve mazes.<br>
-It works using <a href='https://www.khanacademy.org/computing/computer-science/algorithms/intro-to-algorithms/a/route-finding'>this algorithm</a>. To create a
-maze, just left-click and drag on the screen below to create walls, middle-click to clear walls, and right-click to place start and ending locations. Then,
-click the button saying "Solve Maze" and it will draw red circles connecting your start location to your end location.</p>
+ <p>Maze Solver is a computer program that can solve mazes.<br>
+ It works using <a href='https://www.khanacademy.org/computing/computer-science/algorithms/intro-to-algorithms/a/route-finding'>this algorithm</a>. To create a
+ maze, just left-click and drag on the screen below to create walls, middle-click to clear walls, and right-click to place start and ending locations. Then,
+ click the button saying "Solve Maze" and it will draw red circles connecting your start location to your end location.</p>
-<button onclick='startCreation();' id='StartButton'>Create Maze</button><br><br>
+ <button onclick='startCreation();' id='StartButton'>Create Maze</button><br><br>
-<p id='DoesItWork' style="color:#ff0000;"></p>
+ <p id='DoesItWork' style="color:#ff0000;"></p>
-<form id='Form'>
-Size: <input type='number' value=50>
-</form>
+ <form id='Form'>
+ Size: <input type='number' value=50>
+ </form>
-<canvas height=0 width=0 id='Canvas' oncontextmenu='return false;'></canvas>
+ <canvas height=0 width=0 id='Canvas' oncontextmenu='return false;'></canvas>
-<script src="js/mazesolver.js"></script>
+ <script src="js/mazesolver.js"></script>
-</body>
-<footer>
-<p>MazeSolver is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
-</footer>
+ </body>
+ <footer>
+ <p>MazeSolver is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
+ </footer>
</html>
diff --git a/modularcircles.html b/modularcircles.html index 6760130..21fbec8 100644 --- a/modularcircles.html +++ b/modularcircles.html @@ -1,22 +1,22 @@ <html>
-<head>
-<title>Modular circles</title>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-<link rel="stylesheet" href="css/style.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
-</head>
-<body>
-<h2>Modular circles</h2>
-<div id="header_links_div"></div>
-<script src="js/header_links.js"></script>
-<hr>
+ <head>
+ <title>Modular circles</title>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+ <link rel="stylesheet" href="css/style.css">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+ </head>
+ <body>
+ <div id="navbar"></div>
+ <script src="navbar.js"></script>
+ <h2>Modular circles</h2>
-<p>Each point corresponds to a number. The points are connected based on rules.</p>
+ <p>Each point corresponds to a number. The points are connected based on rules.</p>
-<script src="js/modularcircles.js"></script>
-Number of points: <input min="1" value="300" type="number" id="npoints"><br>
-Add/Multiply: <input value="2" step="0.2" type="number" id="amount"><br>
-Multiply? <input id="should_mul" type="radio" value="multiply" name="muloradd" checked="true"><br>
-Add? <input id="should_add" type="radio" value="add" name="muloradd"><br>
-</body>
-</html>
\ No newline at end of file + <script src="js/modularcircles.js"></script>
+ Number of points: <input min="1" value="300" type="number" id="npoints"><br>
+ Add/Multiply: <input value="2" step="0.2" type="number" id="amount"><br>
+ Multiply? <input id="should_mul" type="radio" value="multiply" name="muloradd" checked="true"><br>
+ Add? <input id="should_add" type="radio" value="add" name="muloradd"><br>
+ </body>
+</html>
diff --git a/modularpascal.html b/modularpascal.html index e744e67..2fb5b6f 100644 --- a/modularpascal.html +++ b/modularpascal.html @@ -1,22 +1,20 @@ <html>
-<head>
-<title>Modular pascal</title>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-<link rel="stylesheet" href="css/style.css">
+ <head>
+ <title>Modular pascal</title>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+ <link rel="stylesheet" href="css/style.css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
+ </head>
+ <body>
+ <div id="navbar"></div>
+ <script src="navbar.js"></script>
+ <h2>Modular Pascal's Triangle</h2>
+ <p>A picture of Pascal's triangle mod x. This program might be a bit slow.</p>
-</head>
-<body>
-<h2>Modular Pascal's Triangle</h2>
-<div id="header_links_div"></div>
-<script src="js/header_links.js"></script>
-<hr>
-<p>A picture of Pascal's triangle mod x. This program might be a bit slow.</p>
-
-
-<script src="js/modularpascal.js"></script>
-x: <input min="1" value="2" type="number" id="mod"><br>
-<button onclick="updateTriangle();">Update</button><br>
-</body>
-</html>
\ No newline at end of file + <script src="js/modularpascal.js"></script>
+ x: <input min="1" value="2" type="number" id="mod"><br>
+ <button onclick="updateTriangle();">Update</button><br>
+ </body>
+</html>
diff --git a/shaperoller.html b/shaperoller.html index 476ef31..0873237 100644 --- a/shaperoller.html +++ b/shaperoller.html @@ -1,55 +1,54 @@ <html> -<head> -<title>Shape roller</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> + <head> + <title>Shape roller</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>Shape Roller</h2> + <p>This program rolls (invisible) shapes around other (invisible) shapes and traces a point on the shape as it moves along.<br> + Here's an animation of how it works (from Wikimedia):<br> <img width=100 height=100 src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Cardiod_animation.gif" target="_blank"></p> -</head> -<body> -<h2>Shape Roller</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> -<p>This program rolls (invisible) shapes around other (invisible) shapes and traces a point on the shape as it moves along.<br> -Here's an animation of how it works (from Wikimedia):<br> <img width=100 height=100 src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Cardiod_animation.gif" target="_blank"></p> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="js/shaperoller.js"></script> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<script src="js/shaperoller.js"></script> + Speed: <input type="number" id="speed" value="0.5"><br> + <p>Quality will be lost at higher speeds</p> -Speed: <input type="number" id="speed" value="0.5"><br> -<p>Quality will be lost at higher speeds</p> + <div id="shapes"> -<div id="shapes"> + <span id="rt0">Radius:</span> + <input type="number" value="100" id="radius0"> + <span id="st0">Shape:</span> + <select id="shape0"> + <option value="circle">Circle</option> + <option value="square">Square</option> + </select> + <button id="del0" onclick="deleteShape(0);">Delete</button><br id="br0"> -<span id="rt0">Radius:</span> -<input type="number" value="100" id="radius0"> -<span id="st0">Shape:</span> -<select id="shape0"> -<option value="circle">Circle</option> -<option value="square">Square</option> -</select> -<button id="del0" onclick="deleteShape(0);">Delete</button><br id="br0"> + <span id="rt1">Radius:</span> + <input type="number" value="50" id="radius1"> + <span id="st1">Shape:</span> + <select id="shape1"> + <option value="circle">Circle</option> + <option value="square">Square</option> + </select> + <button id="del1" onclick="deleteShape(1);">Delete</button><br id="br1"> -<span id="rt1">Radius:</span> -<input type="number" value="50" id="radius1"> -<span id="st1">Shape:</span> -<select id="shape1"> -<option value="circle">Circle</option> -<option value="square">Square</option> -</select> -<button id="del1" onclick="deleteShape(1);">Delete</button><br id="br1"> + </div> -</div> + <button onclick="addShape();">Add shape</button><br> + <button onclick="startDrawing();">Start!</button> -<button onclick="addShape();">Add shape</button><br> -<button onclick="startDrawing();">Start!</button> + <div id="canvasSpot"></div> -<div id="canvasSpot"></div> + </body> -</body> - -</html>
\ No newline at end of file +</html> @@ -1,15 +1,15 @@ <html> -<head> -<title>Tree</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -</head> -<body> -<h2>Tree</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<script src="js/tree.js"></script> -</body> -</html>
\ No newline at end of file + <head> + <title>Tree</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>Tree</h2> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="js/tree.js"></script> + </body> +</html> diff --git a/treegenerator.html b/treegenerator.html index 28e345b..f1a58dd 100644 --- a/treegenerator.html +++ b/treegenerator.html @@ -1,25 +1,25 @@ <html> -<head> -<title>Tree Generator</title> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -<link rel="stylesheet" href="css/style.css"> -</head> -<body> -<h2>Tree Generator</h2> -<div id="header_links_div"></div> -<script src="js/header_links.js"></script> -<hr> + <head> + <title>Tree Generator</title> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + </head> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>Tree Generator</h2> -Angle: -<input type="number" id="angle" min="0" step="0.01" value="1"> -<br> -Angle decay: -<input type="number" id="angledecay" min="0" step="0.01" value="0.1"> -<br> -Size: -<input type="number" id="size" min="0" max="700" value="400"><br> -<button onclick="saveTree();">Save image</button><br><br> -<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> -<script src="js/treegenerator.js"></script> -</body> -</html>
\ No newline at end of file + Angle: + <input type="number" id="angle" step="0.01" value="1"> + <br> + Angle decay: + <input type="number" id="angledecay" step="0.01" value="0.1"> + <br> + Size: + <input type="number" id="size" min="0" max="700" value="400"><br> + <button onclick="saveTree();">Save image</button><br><br> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="js/treegenerator.js"></script> + </body> +</html> |