diff options
| author | pommicket <leonardomtenenbaum@gmail.com> | 2016-08-31 14:58:23 -0400 |
|---|---|---|
| committer | pommicket <leonardomtenenbaum@gmail.com> | 2016-08-31 14:58:23 -0400 |
| commit | a982632b1cc3218d74acec2b5f6a69ffc5e97ead (patch) | |
| tree | d7a7761c1a905450c3d57f4ae75048616850c06b | |
| parent | afff994f985121e89de4b1e3bb509b62eb956e5a (diff) | |
Cleaned up code and improved website layout.
52 files changed, 1582 insertions, 1237 deletions
@@ -4,12 +4,12 @@ <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> <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 7775f64..02ab3bd 100644 --- a/2d23dcustom.html +++ b/2d23dcustom.html @@ -4,6 +4,7 @@ <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> <div id="navbar"></div> @@ -12,7 +13,6 @@ <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> @@ -14,7 +14,7 @@ <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> + <button class="btn btn-sm btn-primary" onclick="calculate();">Calculate π</button><br> <div id="info"></div> <script src="js/2pi.js"></script> </body> diff --git a/AutoAudio.html b/AutoAudio.html index 8b452a8..e4c57b6 100644 --- a/AutoAudio.html +++ b/AutoAudio.html @@ -14,42 +14,69 @@ <script src="navbar.js"></script>
<h2>AutoAudio</h2>
+ <div class="container-fluid">
+ <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12" id="explanation">
+ AutoAudio is a program that creates computer generated audio.
+ An explanation of AutoAudio can be found <a href="explanation.html">here</a>.
+ To download the audio, right-click on the play button, and click "Save audio as...".
+ </div>
+ </div>
- <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>
-
-
-
-
- <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>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Length</span>
+ <input id="length" class="form-control" type="number" value="5">
+ </div>
+ </div><br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">
+ <input id="notify" class="checkbox" type="checkbox">
+ </span>
+ <span class="form-control">Notify me when it finishes.</span>
+ </div>
+ </div>
+ </div><br>
<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>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Single operator weight</span>
+ <input id="single" class="form-control" type="number" value="1">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Number weight</span>
+ <input id="number" class="form-control" type="number" value="1">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Function length</span>
+ <input id="flength" class="form-control" type="number" value="60">
+ </div>
+ </div>
+ <br>
+ </div>
<br>
- <button onclick="start();" type='button' id="Create" class="btn btn-success">Create</button>
+ <button onclick="start();" type="button" id="Create" class="btn btn-success">Create</button>
<br><br>
- <audio id='Audio' controls></audio>
+ <audio id="Audio" controls></audio>
<br><br>
- <p id='Time'></p>
+ <p id="Error" class="text-danger"></p>
+ <p id="Time"></p>
- <div id='Function' lang='latex'></div>
+ <div id="Function" lang="latex"></div>
<script src="js/AutoAudio.js"></script>
<noscript>
@@ -58,6 +85,6 @@ </body>
<footer>
- <p>AutoArt is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
+ <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 a55ee71..6080151 100644 --- a/AutoHarmonograph.html +++ b/AutoHarmonograph.html @@ -10,11 +10,25 @@ <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> + <div class="container-fluid"> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">Number of pendulums</span> + <input type="number" class="form-control" value="10" id="npendulums"> + </div> + </div> + <br> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">Maximum damping</span> + <input type="number" class="form-control" value="0.0003" id="DMAX"> + </div> + </div> + </div> + <br> + <button class="btn btn-sm btn-primary with-margin" id="start" onclick="start();">Start</button><br> + <button class="btn btn-sm btn-primary with-margin" onclick="saveCanvas();">Save image</button><br> + <div id="Error" class="text-danger"></div> <script src="js/AutoHarmonograph.js"></script> </body> </html> diff --git a/AutoImages.html b/AutoImages.html index 84f840a..332a9fd 100644 --- a/AutoImages.html +++ b/AutoImages.html @@ -14,46 +14,85 @@ <script src="navbar.js"></script>
<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>
+ <div class="container-fluid">
+ <div class="col-lg-5 col-md-6 col-sm-8 col-xs-12" id="explanation">
+ AutoImages is a program that creates computer generated images.
+ An explanation of AutoImages can be found <a href="explanation.html">here</a>.
+ If the download button doesn't work, just right click on the image then click "Save image as...".
+ </div>
+ </div>
+
<br>
<button onclick="start();" type="button" id="Create" class="btn btn-success">Create</button>
<br><br>
- <form id='Options'>
- <fieldset>
<legend>Options</legend>
- X: <input type="number" name="xinput" value="1000">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Width</span>
+ <input id="width" class="form-control" type="number" value="1000">
+ </div>
+ </div>
+ <br>
+
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Height</span>
+ <input id="height" class="form-control" type="number" value="500">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">
+ <input id="notify" class="checkbox" type="checkbox">
+ </span>
+ <span class="form-control">Notify me when it finishes.</span>
+ </div>
+ </div>
+ </div>
<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>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Single operator weight</span>
+ <input id="single" class="form-control" type="number" value="1">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Number weight</span>
+ <input id="number" class="form-control" type="number" value="1">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Function length</span>
+ <input id="flength" class="form-control" type="number" value="60">
+ </div>
+ </div>
+ <br>
+ </div>
+
- <p id='Error'></p>
+ <p class="text-danger" 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>
- <canvas id='Canvas' width=0 height=0></canvas>
+ <canvas id="Canvas" width="0" height="0"></canvas>
<br><br>
- <div id='Function' lang='latex'></div>
+ <div id="Function" lang="latex"></div>
<script src="js/AutoImages.js"></script>
@@ -63,6 +102,6 @@ </body>
<footer>
- <p>AutoArt is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
+ <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 ba81097..ff2dbc5 100644 --- a/AutoVideos.html +++ b/AutoVideos.html @@ -16,48 +16,94 @@ <script src="navbar.js"></script>
<h2>AutoVideos</h2>
- <p>AutoVideos is a program that creates computer generated videos.<br>
- For an explanation of AutoVideos, 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>
+ <div class="container-fluid">
+ <div class="col-lg-5 col-md-6 col-sm-8 col-xs-12" id="explanation">
+ AutoVideos is a program that creates computer generated videos.
+ An explanation of AutoVideos can be found <a href="explanation.html">here</a>.
+ To download the video, right click on the play button, and click "Save video as...". Name it
+ something.webm
+ </div>
+ </div>
- <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>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Width</span>
+ <input id="width" class="form-control" type="number" value="426">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Height</span>
+ <input id="height" class="form-control" type="number" value="240">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Length</span>
+ <input id="length" class="form-control" type="number" value="4">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Frame rate</span>
+ <input id="framerate" class="form-control" type="number" value="12">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">
+ <input id="notify" class="checkbox" type="checkbox">
+ </span>
+ <span class="form-control">Notify me when it finishes.</span>
+ </div>
+ </div>
+ <br>
+ </div>
+ <legend>Advanced Options</legend>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Single operator weight</span>
+ <input id="single" class="form-control" type="number" value="1">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Number weight</span>
+ <input id="number" class="form-control" type="number" value="1">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Function length</span>
+ <input id="flength" class="form-control" type="number" value="60">
+ </div>
+ </div>
+ <br>
+ </div>
<br>
- <button onclick="start();" type='button' id='Create' class="btn btn-success">Create</button>
+ <button onclick="start();" type="button" id="Create" class="btn btn-success">Create</button>
<br><br>
- <p id='Time'></p>
+ <p id="Time"></p>
- <p id='Error'></p>
+ <p class="text-danger" id="Error"></p><br>
- <video width=0 height=0 id='Video' controls></video><br><br>
- <canvas id='Canvas' width=0 height=0></canvas>
+ <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>
+ <div id="Function" lang="latex"></div>
<script src="https://antimatter15.com/whammy/whammy.js"></script>
<script src="js/AutoVideos.js"></script>
@@ -69,6 +115,6 @@ </body>
<footer>
- <p>AutoArt is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
+ <p>AutoArt is licensed under the <a href="LICENSE.txt">GNU General public license</a>.</p>
</footer>
</html>
diff --git a/Harmonograph.html b/Harmonograph.html index f9e1151..14991ac 100644 --- a/Harmonograph.html +++ b/Harmonograph.html @@ -16,7 +16,7 @@ <button onclick="start();">Start</button><br> <button onclick="saveCanvas();">Save image</button><br> - <button onclick="addPendulum();">Add pendulum</button> + <button onclick="addPendulum();">Add pendulum</button><br> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> <script src="js/Harmonograph.js"></script> diff --git a/NameGenerator.html b/NameGenerator.html index 975a092..2c5babe 100644 --- a/NameGenerator.html +++ b/NameGenerator.html @@ -14,18 +14,37 @@ <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" class="btn btn-primary" onclick="create();">Create Names!</button><br> + <div class="container-fluid"> + <div class="col-lg-5 col-md-6 col-sm-8 col-xs-12" id="explanation"> + 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.</div> + </div> + </div> + <br><br> + <div class="container-fluid"> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10 with-margin"> + <span class="input-group-addon">Number of names</span> + <input id="numNames" class="form-control" type="number" value="20"> + </div> + </div> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10 with-margin"> + <span class="input-group-addon"> + <input id="outputNames" class="checkbox" type="checkbox" checked="true"> + </span> + <span class="form-control">Display names</span> + </div> + </div> + </div> + <button id="button" class="btn btn-sm btn-primary" onclick="create();">Create Names!</button><br> <a id="download" target="_blank"></a> <div id="names"> @@ -13,211 +13,262 @@ <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> + + <div class="container-fluid"> + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/AutoImages.png" width=200 height=200><br> + <div class="project-title"><a href="AutoImages.html">AutoImages</a></div> + A computer program that creates art. It uses + random functions to generate images. An explanation + can be found <a href="explanation.html">here</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <iframe frameborder="0" src="https://itch.io/embed/43294?link_color=27a0c3" width="208" height="167"></iframe> + <div class="project-title"><a href="https://qualum.itch.io/autoartevolve">AutoArtEvolve</a></div> + AutoArtEvolve improves its + images based on the ones you prefer + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <video width="250" height="250" controls> + <source src="autovideo.mp4" type="video/mp4"> + </video><br> + <div class="project-title"><a href="AutoVideos.html">AutoVideos</a></div> + A computer program that creates videos. It uses + random functions to generate videos. An explanation + can be found <a href="explanation.html">here</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <audio controls> + <source src="autoaudio.wav" type="audio/wav"> + </audio><br> + <div class="project-title"><a href="AutoAudio.html">AutoAudio</a></div> + A computer program that creates audio. It uses + random functions to generate audio. An explanation + can be found <a href="explanation.html">here</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/NameGenerator.png" width=200 height=200><br> + <div class="project-title"><a href="NameGenerator.html">NameGenerator</a></div> + A computer program that generates names! It uses + the frequencies of trigrams. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <iframe frameborder="0" src="https://itch.io/embed/77009?link_color=18829f" width="208" height="167"></iframe><br> + <div class="full-title"> + <span class="project-title">Domino simulator</span> + <a href="DominoSimulator.html">web version</a> or <a href="https://qualum.itch.io/domino-simulator">offline version</a> + </div> + Place dominos, then knock them over. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/AutoHarmonograph.png" width=200 height=200><br> + <div class="full-title"> + <span class="project-title"><a href="AutoHarmonograph.html">AutoHarmonograph</a></span> or + <span class="project-title"><a href="Harmonograph.html">Non-randomized</a></span> + </div> + A randomized <a href="https://en.wikipedia.org/wiki/Harmonograph">Harmonograph</a>. You pick the + number of pendulums. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/2d3d.png" width=200 height=200><img src="screenshots/2d3dcustom.png" width=200 height=200><br> + <div class="full-title"> + <span class="project-title"><a href="2d23d.html">2D becomes 3D</a></span> + (and <span class="project-title"><a href="2d23dcustom.html">2D becomes 3D custom</a></span> + where you pick the starting shape) + </div> + Different 2D shapes are moved around in circles + to form 3D objects. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/clock.png" width=200 height=200><br> + <div class="project-title"><a href="clock.html">Clock</a></div> + A clock that shows the time of day with circles + going around in circles. The colours of the circles + change depending on the time. The innermost circle + is seconds, the second is minutes, the third is + hours, and the fourth is the day of the year. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/mazesolver.png" width=200 height=200><br> + <div class="project-title"><a href="mazesolver.html">Maze Solver</a></div> + Create a maze, choose a starting point and an + ending point, and your computer will solve the + maze. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/ElementaryCellularAutomata.png" width=400 height=400><br> + <div class="project-title"><a href="elementarycellularautomata.html">Elementary cellular automata</a></div> + Run <a href="https://en.wikipedia.org/wiki/Elementary_cellular_automaton">elementary cellular automata</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/h.png" width=200 height=200><br> + <div class="project-title"><a href="h.html">H</a></div> + Pick simple rules, and watch a cool pattern + start to appear. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/tree.png" width=200 height=200><br> + <div class="full-title"> + <span class="project-title"><a href="tree.html">Tree</a></span> and + <span class="project-title"><a href="treegenerator.html">Tree generator</a></span> + </div> + Move your mouse around to see a tree change shape. + In Tree Generator, you choose all the tree parameters + but in Tree, you move your mouse around to pick the parameters. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/ballbounce.png" width=200 height=200><br> + <div class="project-title"><a href="ballbounce.html">Ball bounce</a></div> + Try to bounce a ball with your mouse. The game + gets harder and harder because you can't see the + ball behind its tracks. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/magnets.png" width=200 height=200><br> + <div class="project-title"><a href="magnets.html">Magnets</a></div> + Try to avoid magnets which are attracted to your + mouse. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/modularpascal.png" width=256 height=256><br> + <div class="project-title"><a href="modularpascal.html">Modular Pascal's Triangle</a></div> + A picture of Pascal's triangle mod x. Set x and + Click update to see the triangle. + </div> + </div> + + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/modularcircles.png" width=250 height=250><br> + <div class="project-title"><a href="modularcircles.html">Modular Circles</a></div> + There are a circle of points, each one corresponding + to a number. Lines are drawn between points according + to rules. Create interesting shapes like cardioids + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/shaperoller.png" width=250 height=250><br> + <div class="project-title"><a href="shaperoller.html">Shape Roller</a></div> + This program rolls (invisible) shapes around other + (invisible) shapes and traces a point on the shape as + it moves along. Create interesting shapes like cardioids. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/mandelbrot.png" width=250 height=250><br> + <div class="project-title"><a href="mandelbrot.html">The Mandelbrot Set</a></div> + This program draws the Mandelbrot Set. You can + zoom in and change the power. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/ant.png" width=250 height=250><br> + <div class="project-title"><a href="ant.html">Langton's Ant</a></div> + This is the cellular automaton known as Langton's + Ant. You can find out more about it <a href="https://en.wikipedia.org/wiki/Langton%27s_ant">here</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/picalculator.png" width=250 height=250><br> + <div class="project-title"><a href="2pi.html">π Calculator</a></div> + Draw a circle, then find out how well your circle + approximates π! + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/anagramgame.png" width=250 height=250><br> + <div class="project-title"><a href="anagramgame.html">The Anagram Game</a></div> + Find an anagram of a random 7-letter word. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/autoartapp.png" width=200> + <div class="project-title"><a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.autoart">AutoArt App</a></div> + The Android app for <a href="AutoImages.html">AutoImages</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/magnetsapp.png" width=200> + <div class="project-title"><a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.magnets">Magnets App</a></div> + The Android app for <a href="magnets.html">Magnets</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/ballbounceapp.png" width=200> + <div class="project-title"><a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.ballbounce">Ball Bounce App</a></div> + The Android app for <a href="ballbounce.html">Ball Bounce</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + More coming soon! + </div> + </div> + </div> </body> <footer> diff --git a/anagramgame.html b/anagramgame.html index 7b12aba..9d415c2 100644 --- a/anagramgame.html +++ b/anagramgame.html @@ -14,13 +14,23 @@ <div id="loading">Loading word list...</div> <div id="word"></div> <div id="hidden" style="visibility: hidden;"> - <input type="text" id="guess" onKeyDown="if(event.keyCode==13) submit();"> - <button onclick="submit();">Submit guess</button> - <button onclick="giveUp();">Give up?</button> + <div class="container-fluid"> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <input class="form-control input-lg" type="text" id="guess" onKeyDown="if(event.keyCode==13) submit();"> + <span class="input-group-addon"> + <button class="btn btn-sm btn-primary" onclick="submit();">Submit guess</button> + </span> + <span class="input-group-addon"> + <button class="btn btn-sm btn-danger" onclick="giveUp();">Give up?</button> + </span> + </div> + </div> + </div> </div> <div id="answer"></div> - <button id="again" style="visibility: hidden;" onclick="play();">Play again</button> + <button id="again" class="btn btn-sm btn-primary" style="visibility: hidden;" onclick="play();">Play again</button> <script src="js/anagramgame.js"></script> </body> @@ -10,12 +10,19 @@ <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> + <hr> + <button class="btn btn-sm btn-primary with-margin" onclick="start();">Start</button><br> + <button class="btn btn-sm btn-primary with-margin" onclick="stop();">Stop</button><br> + <button class="btn btn-sm btn-primary with-margin" onclick="clearCells();">Clear</button><br> + <button class="btn btn-sm btn-primary with-margin" onclick="resetPos();">Reset ant position</button><br> + <div class="container-fluid"> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">Speed</span> + <input id="speed" class="form-control" type="number" value="10"> + </div> + </div> + </div> <script src="js/ant.js"></script> </body> @@ -13,23 +13,38 @@ <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> + <div class="container-fluid"> + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/autoartapp.png" width=200> + <div class="project-title"><a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.autoart">AutoArt App</a></div> + The Android app for <a href="AutoImages.html">AutoImages</a>. + </div> + </div> - <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> + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/magnetsapp.png" width=200> + <div class="project-title"><a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.magnets">Magnets App</a></div> + The Android app for <a href="magnets.html">Magnets</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/ballbounceapp.png" width=200> + <div class="project-title"><a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.ballbounce">Ball Bounce App</a></div> + The Android app for <a href="ballbounce.html">Ball Bounce</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + More coming soon! + </div> + </div> + </div> </body> </html> diff --git a/ballbounce.html b/ballbounce.html index 73c525e..9ab67ce 100644 --- a/ballbounce.html +++ b/ballbounce.html @@ -4,6 +4,7 @@ <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> <div id="navbar"></div> @@ -11,8 +12,7 @@ <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> + <a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.ballbounce">here</a>.</p> <script src="js/ballbounce.js"></script> </body> </html> diff --git a/css/cellularautomata.css b/css/cellularautomata.css index 814c0e7..56017ca 100644 --- a/css/cellularautomata.css +++ b/css/cellularautomata.css @@ -2,13 +2,3 @@ { font-family: monospace; } - -#error -{ - color: red; -} - -button:active -{ - background-color: #ff0000; -} diff --git a/css/style.css b/css/style.css index 17d4d3b..eb501f3 100644 --- a/css/style.css +++ b/css/style.css @@ -2,23 +2,24 @@ footer { font-size:12px; } -.header_link + +body { - font-size: 16px; - padding-left: 10px; - padding-right: 10px; - padding-top: 5px; - padding-bottom: 5px; + margin: 10px; +} - background: #f9f9f9; +.project-title +{ + font-size: 22px; } -.header_link:hover + +.checkbox { - text-decoration: none; - background: #eeeeee; + width: 20px; + height: 20px; } -body +.with-margin { - margin: 10px; + margin-bottom: 5px; } diff --git a/elementarycellularautomata.html b/elementarycellularautomata.html index dd1b960..6fcd379 100644 --- a/elementarycellularautomata.html +++ b/elementarycellularautomata.html @@ -15,23 +15,57 @@ <div id="navbar"></div> <script src="navbar.js"></script> <h2>Elementary Cellular Automata</h2> + <div class="container-fluid"> + <div class="col-lg-5 col-md-6 col-sm-8 col-xs-12" 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> + </div> + <br> + <div class="container-fluid"> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">Number of iterations</span> + <input id="time" class="form-control" type="number" min="1" value="500"> + </div> + </div> + <br> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">Size</span> + <input id="size" class="form-control" type="number" min="1" value="500"> + </div> + </div> + <br> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">Starting configuration</span> + <input id="start" class="form-control" type="text" value="101"> + </div> + </div> + <br> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">Rule number</span> + <input id="rule" class="form-control" type="number" min="0" value="110"> + </div> + </div> + <br> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">"Speed of light"</span> + <input id="c" class="form-control" type="number" min="1" value="1"> + </div> + </div> - <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> + <br> - 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> + <button class="btn btn-primary" id="run">Run</button> - <div id="error"></div><br> + <div class="text-danger" id="error"></div><br> <canvas id="canvas" width="1000" height="500"></canvas> <script src="js/elementarycellularautomata.js"></script> @@ -13,39 +13,46 @@ <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> - + <div class="container-fluid"> + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/ballbounce.png" width=200 height=200><br> + <div class="project-title"><a href="ballbounce.html">Ball bounce</a></div> + Try to bounce a ball with your mouse. The game + gets harder and harder because you can't see the + ball behind its tracks. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/magnets.png" width=200 height=200><br> + <div class="project-title"><a href="magnets.html">Magnets</a></div> + Try to avoid magnets which are attracted to your + mouse. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/picalculator.png" width=250 height=250><br> + <div class="project-title"><a href="2pi.html">π Calculator</a></div> + Draw a circle, then find out how well your circle + approximates π! + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <iframe frameborder="0" src="https://itch.io/embed/77009?link_color=18829f" width="208" height="167"></iframe><br> + <div class="full-title"> + <span class="project-title">Domino simulator</span> + <a href="DominoSimulator.html">web version</a> or <a href="https://qualum.itch.io/domino-simulator">offline version</a> + </div> + Place dominos, then knock them over. + </div> + </div> + + </div> </body> </html> @@ -3,7 +3,7 @@ <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'> + <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> @@ -11,36 +11,68 @@ <div id="navbar"></div> <script src="navbar.js"></script> - <h2 style='font-family: Times New Roman'>H</h2> + <h2 style="font-family: Times New Roman">H</h2> - <script src='js/h.js'></script> + <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> + <div class="container-fluid"> + <div class="col-lg-5 col-md-6 col-sm-8 col-xs-12" id="explanation"> + Width and height control + how big it can get, and wait between iterations changes how quickly it grows. + When you click "Stop", you can download it. + </div> + </div> - 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> + <div class="container-fluid"> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">Line length</span> + <input id="lineLength" class="form-control" type="number" value="4"> + </div> + </div> + <br> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">Width</span> + <input id="w" class="form-control" type="number" value="500"> + </div> + </div> + <br> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">Height</span> + <input id="h" class="form-control" type="number" value="500"> + </div> + </div> + <br> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon">Wait between iterations (ms)</span> + <input id="delay" class="form-control" type="number" value="0"> + </div> + </div> + <br> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <span class="input-group-addon hidden-xs">Chance that a new branch will form</span> + <span class="input-group-addon hidden-sm hidden-md hidden-lg">New branch chance</span> + <input id="chance" class="form-control" type="number" min="0" max="1" step="0.1" value="1"> + </div> + </div> + </div> <br> - <button onclick='beginH();'>Begin</button><br> - <button onclick='stop();'>Stop</button><br> + <button class="btn btn-sm btn-success with-margin" id="begin" onclick="beginH();">Begin</button><br> + <button class="btn btn-sm btn-danger with-margin" id="stop" onclick="stop();">Stop</button><br> - <canvas width=100 height=100 id='canvas'></canvas> + <div id="download"> + <a href="#" id="link" download="h.png">Download H</a> + </div> + + <canvas width="100" height="100" id="canvas"></canvas><br> - <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> @@ -23,7 +23,7 @@ </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"> + <img src="screenshots/AutoImages.png" title="Example of AutoImages"> </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> diff --git a/js/2d23d.js b/js/2d23d.js index c3ac565..1e597e9 100644 --- a/js/2d23d.js +++ b/js/2d23d.js @@ -29,7 +29,7 @@ function draw() if (waiting) { iterations++; - + if (iterations > 150) { iterations = 0; @@ -39,45 +39,45 @@ function draw() } return; } - var ca = cos(angle) * radius + radius + 50; - var sa = sin(angle) * radius + radius + 50; - + var x = cos(angle) * radius + radius + 50; + var y = sin(angle) * radius + radius + 50; + angle += 0.1/6; - + if (angle > TWO_PI) rotations++; - + checkRotations(); - + angle %= TWO_PI; - + if (state == 0) - ellipse(ca, sa, 50, 50); - + ellipse(x, y, 50, 50); + else if (state == 1) - rect(ca, sa, 50, 50); + rect(x, y, 50, 50); else if (state == 2) - triangle(ca, sa, ca+50, sa, ca, sa+50); + triangle(x, y, x+50, y, x, y+50); + - else if (state == 3) - triangle(ca, sa, ca+25, sa+25, ca, sa+50); + triangle(x, y, x+25, y+25, x, y+50); + - else if (state == 4) - ellipse(ca, sa, 100, 50); + ellipse(x, y, 100, 50); + - else if (state == 5) - line(ca, sa, ca+50, sa); + line(x, y, x+50, y); + - else if (state == 6) - line(ca, sa, ca, sa+50); + line(x, y, x, y+50); else if (state >= 7) - arc(ca, sa, 50, 50, 0, (HALF_PI + state) % TWO_PI); + arc(x, y, 50, 50, 0, (HALF_PI + state) % TWO_PI); + - -}
\ No newline at end of file +} diff --git a/js/2d23dcustom.js b/js/2d23dcustom.js index 3b55fd9..4465d28 100644 --- a/js/2d23dcustom.js +++ b/js/2d23dcustom.js @@ -27,7 +27,7 @@ function outOfBounds(x) function mouseDragged() { - if (outOfBounds(pmouseX) || outOfBounds(mouseX) || + if (outOfBounds(pmouseX) || outOfBounds(mouseX) || outOfBounds(pmouseY) || outOfBounds(mouseY)) return; stroke(0, 0, 0); @@ -37,13 +37,12 @@ function mouseDragged() function mouseClicked() { - if (straightLine) { line(slFirstPos[0], slFirstPos[1], mouseX, mouseY); drawing.line(slFirstPos[0], slFirstPos[1], mouseX, mouseY); straightLine = false; - return; + return; } slFirstPos = [mouseX, mouseY]; } @@ -70,21 +69,21 @@ function draw() cursor(ARROW); if (!ret_pressed) return; - + if (done) return; - + if (angle > TWO_PI) return; - + stroke(255, 0, 0); tint(255, 0, 0); - var ca = cos(angle) * radius + radius + 50; - var sa = sin(angle) * radius + radius + 50; - - - image(drawing, ca, sa); + var x = cos(angle) * radius + radius + 50; + var y = sin(angle) * radius + radius + 50; + + + image(drawing, x, y); angle += 0.1/6; - -}
\ No newline at end of file + +} @@ -27,7 +27,7 @@ function center() var centerX = 0; var centerY = 0; for (var i = 0; i < vertices.length; i++) - { + { centerX += vertices[i][0] / vertices.length; centerY += vertices[i][1] / vertices.length; } @@ -38,12 +38,12 @@ function twoPiApprox() { var o = center(); var c = circumference(); - + ellipseMode(CENTER); fill(0, 0, 200); noStroke(); ellipse(o[0], o[1], 5, 5); - + var avgR = 0; var minLocation; var maxLocation; @@ -51,9 +51,9 @@ function twoPiApprox() { var d = dist(vertices[i][0], vertices[i][1], o[0], o[1]); avgR += d / vertices.length; - + } - + stroke(0, 255, 0); noFill(); line(o[0], o[1], o[0]+avgR, o[1]); @@ -61,10 +61,10 @@ function twoPiApprox() ellipse(o[0], o[1], 2*avgR, 2*avgR); stroke(255, 200, 0); ellipse(o[0], o[1], c/PI, c/PI); - - + + return c/(2*avgR); - + } function setup() @@ -90,11 +90,12 @@ function calculate() { percentError = 100*(PI/avgPi - 1); } - var div = document.getElementById("info"); - div.innerHTML = "Your approximation | True value<br> 2π = " + 2 * avgPi + " | " + TWO_PI + "<br> π = " + - + avgPi + " | " + PI + ".<br>" + percentError + "% error.<br>" + $("#info").html("<div class='col-xs-12 col-sm-8 col-md-6 col-lg-4'>" + + "<table class='table table-bordered table-hover'> <tr><th></th><th>Your approximation</th><th>True value</th></tr><tr><td>2π</td><td>" + 2 * avgPi + + "</td><td>" + TWO_PI + "</td></tr><tr><td>π</td><td>" + + + avgPi + "</td><td>" + PI + "</table>" + percentError + "% error.<br>" + "The blue dot is the center of your shape. The green line is the average radius of the shape.<br>" + "The red circle is a circle with the same radius as your shape, and the orange circle is a<br>" + "circle with the same circumference as your shape. The closer they are, the better your<br>" - + "approximation of π"; -}
\ No newline at end of file + + "approximation of π</div>"); +} diff --git a/js/AutoAudio.js b/js/AutoAudio.js index d3cf4f0..f3376d7 100644 --- a/js/AutoAudio.js +++ b/js/AutoAudio.js @@ -1,32 +1,11 @@ -var length; var single = ["Math.sqrt", "Math.cos", "Math.sin"]; //Operations on a single number -var singleweights = {}; var binary = ["*", "+", "-", "/"]; //Operations for 2 numbers -var binaryweights = {}; var varlist = ["x"]; var numlist = ["Constant"]; numlist = numlist.concat(varlist); -var numberweights = {"Constant":1}; var numberweight = 1; var singleweight = 1; -var eqlength; -var notify; -var functionp = document.getElementById('Function'); - -for(var i = 0; i < single.length; i++) -{ - singleweights[single[i]] = 1; -} - -for(var i = 0; i < binary.length; i++) -{ - binaryweights[binary[i]] = 1; -} - -for(var i = 0; i < varlist.length; i++) -{ - numberweights[varlist[i]] = 1; -} +var flength; function randItem(l) { @@ -64,10 +43,10 @@ function rmvmath(str) return newstr; } -function randEquation() +function randFunction() { var hasx = false; - var equation; + var func; var lasttype; var thistype; var chanceend; @@ -79,7 +58,7 @@ function randEquation() while (!hasx) { //Types: b for binary, s for single, f for first, n for number - equation = ''; + func = ''; lasttype = 'f'; thistype = 0; hasx = false; @@ -88,7 +67,7 @@ function randEquation() while (true) { - chanceend = Math.pow((1.0 - (1.0 / length)), eqlength); + chanceend = Math.pow((1.0 - (1.0 / length)), flength); if (lasttype == 'n') { number = Math.random(); @@ -96,16 +75,16 @@ function randEquation() { break; } - equation = '(' + equation + ')' + randItem(binary); + func = '(' + func + ')' + randItem(binary); lasttype = 'b'; } else if (lasttype == 's' || lasttype == 'b' || lasttype == 'f') { - equation += '('; + func += '('; thistype = Math.random(); if (thistype < singleweight / (singleweight + numberweight)) { - equation += randItem(single); + func += randItem(single); lasttype = 's'; } else @@ -113,98 +92,86 @@ function randEquation() what = randItem(numlist); if (what == 'Constant') { - equation += (Math.random()*100+100).toString(); + func += (Math.random()*100+100).toString(); } else { - equation += what; + func += what; if (what == 'x') { hasx = true; } } lasttype = 'n'; - equation += ')'; + func += ')'; } } length++; } } - while (countChar(equation, '(') > countChar(equation, ')')) + while (countChar(func, '(') > countChar(func, ')')) { - equation += ')'; + func += ')'; } - return equation; + return func; } -function evalEquation(eq, x) -{ - try - { - eval('var result = ' + eq); - return result; - } - catch(err) - { - return 0; - } -} function create() { + var notify; + var length; var date = new Date(); var start = date.getTime(); - var form = document.getElementById('Options'); - var errtag = document.getElementById('Error'); + $("#Error").html(""); - errtag.innerHTML = ''; - for (var i = 0; i < form.elements.length; i++) - { - if (form.elements[i].value == '') - { - errtag.innerHTML = 'Please enter a valid number.'; - return; - } - } + length = parseInt($("#length").val()); + notify = $("#notify").prop("checked"); - length = parseInt(form.elements[1].value); - notify = form.elements[2].checked; + singleweight = parseFloat($("#single").val()); + numberweight = parseFloat($("#number").val()); + flength = parseFloat($("#flength").val()); - singleweight = parseFloat(form.elements[4].value); - numberweight = parseFloat(form.elements[5].value); - eqlength = parseFloat(form.elements[6].value); + if (isNaN(length) || isNaN(singleweight) || isNaN(numberweight) || isNaN(flength)) + { + $("#Error").html("Please enter a valid number."); + stopLoading(); + return; + } var data = []; - var equation = randEquation(); + var func = randFunction(); + + eval( + "for (var x=0; x<length * 10000; x++)" + + "{" + + "var value = (" + func + ") % 1;" + + "data[x] = Math.abs(255 * value);" + + "}"); - for (var i=0; i<length * 10000; i++) - { - var value = evalEquation(equation, i); - value %= 1; - data[i] = Math.abs(255 * value); - } var wave = new RIFFWAVE(data); - audio = document.getElementById('Audio'); + var audio = document.getElementById('Audio'); audio.src = wave.dataURI; date = new Date(); - end = date.getTime(); - var timeparagraph = document.getElementById('Time'); + var end = date.getTime(); 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 = '$Function: $' + rmvmath(equation); + $("#Function").html("$Function: $" + rmvmath(func)); LatexIT.render('*',false); stopLoading(); + $("#Audio").show(); + if(notify) { alert('Your audio has finished.'); @@ -233,3 +200,8 @@ function start() startLoading(); window.setTimeout(create, 1); } + +$(function() +{ + $("#Audio").hide(); +}); diff --git a/js/AutoHarmonograph.js b/js/AutoHarmonograph.js index b4158db..95eb357 100644 --- a/js/AutoHarmonograph.js +++ b/js/AutoHarmonograph.js @@ -24,7 +24,7 @@ var Pendulum = function() this.p = random(-PDIF, PDIF)+basepx; else this.p = random(-PDIF, PDIF)+basepy; - + pendulums.push(this); } @@ -63,16 +63,22 @@ function calculate() function setup() { - document.getElementById("npendulums").value = 10; - document.getElementById("DMAX").value = DMAX; + createCanvas(600, 600); } function start() { - + $("#start").prop("disabled", true); createCanvas(800, 800); frameRate(1000); - DMAX = document.getElementById("DMAX").value; + DMAX = parseFloat($("#DMAX").val()); + var npendulums = parseInt($("#npendulums").val()); + + if (isNaN(DMAX) || isNaN(npendulums)) + { + $("#Error").html("Please enter a valid number."); + } + basepx = random(PMAX); basepy = random(PMAX); Ax = random(AMAX); @@ -81,12 +87,12 @@ function start() fy = random(FMAX); dx = random(DMIN, DMAX); dy = random(DMIN, DMAX); - + pendulums = []; - - for (var i = 0; i < document.getElementById("npendulums").value; i++) + + for (var i = 0; i < npendulums; i++) new Pendulum(); - + } function saveCanvas() @@ -100,8 +106,8 @@ function draw() curr = calculate(); if (t !== 0) line(pp[0], pp[1], curr[0], curr[1]); - - + + t++; pp = curr; } diff --git a/js/AutoImages.js b/js/AutoImages.js index 502fff6..12d6957 100644 --- a/js/AutoImages.js +++ b/js/AutoImages.js @@ -1,6 +1,7 @@ -var canvas = document.getElementById('Canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("Canvas"); +var ctx = canvas.getContext("2d"); +var flength; var single = ["Math.sqrt", "Math.cos", "Math.sin"]; //Operations on a single number var singleweights = {}; @@ -12,13 +13,6 @@ numlist = numlist.concat(varlist); var numberweights = {"Constant":1} var numberweight; var singleweight; -var eqlength; -var xsize; -var ysize; -var functionp = document.getElementById('Function'); -var notify; -var latex; -var mathjax; for(var i = 0; i < single.length; i++) { @@ -38,10 +32,10 @@ for(var i = 0; i < varlist.length; i++) function rmvmath(str) { //A function that removes all the Math.'s in a string - var newstr = ''; + var newstr = ""; for(var i = 0; i < str.length - 5; i++) { - if(str[i] + str[i+1] + str[i+2] + str[i+3] + str[i+4] !== 'Math.') + if(str[i] + str[i+1] + str[i+2] + str[i+3] + str[i+4] !== "Math.") { newstr += str[i] } @@ -73,11 +67,11 @@ function countChar(string, letter) -function randEquation() +function randFunction() { var hasx = false; var hasy = false; - var equation; + var func; var lasttype; var thistype; var chanceend; @@ -88,8 +82,8 @@ function randEquation() while (!(hasx && hasy)) { //Types: b for binary, s for single, f for first, n for number - equation = ''; - lasttype = 'f'; + func = ""; + lasttype = "f"; thistype = 0; hasx = false; hasy = false; @@ -98,152 +92,151 @@ function randEquation() while (true) { - chanceend = Math.pow((1.0 - (1.0 / length)), eqlength); - if (lasttype === 'n') + chanceend = Math.pow((1.0 - (1.0 / length)), flength); + if (lasttype === "n") { number = Math.random(); if (number < chanceend) { break; } - equation = '(' + equation + ')' + randItem(binary); - lasttype = 'b'; + func = "(" + func + ")" + randItem(binary); + lasttype = "b"; } - else if (lasttype === 's' || lasttype === 'b' || lasttype === 'f') + else if (lasttype === "s" || lasttype === "b" || lasttype === "f") { - equation += '('; + func += "("; thistype = Math.random(); if (thistype < singleweight / (singleweight + numberweight)) { - equation += randItem(single); - lasttype = 's'; + func += randItem(single); + lasttype = "s"; } else { what = randItem(numlist); - if (what === 'Constant') + if (what === "Constant") { - equation += (Math.random(100, 200)).toString(); + func += (Math.random(100, 200)).toString(); } else { - equation += what; - if (what === 'x') + func += what; + if (what === "x") { hasx = true; } - else if (what === 'y') + else if (what === "y") { hasy = true; } } - lasttype = 'n'; - equation += ')'; + lasttype = "n"; + func += ")"; } } length++; } } - while (countChar(equation, '(') > countChar(equation, ')')) + while (countChar(func, "(") > countChar(func, ")")) { - equation += ')'; + func += ")"; } - return equation; + return func; } function create() { + var width; + var height; + var notify; + var date = new Date(); var start = date.getTime(); - form = document.getElementById('Options'); + $("#Error").html(""); - var errtag = document.getElementById('Error'); - errtag.innerHTML = ''; - for (var i = 0; i < form.elements.length; i++) - { - if (form.elements[i].value === '') - { - errtag.innerHTML = 'Please enter a valid number.'; - return; - } - } + width = parseInt($("#width").val()); + height = parseInt($("#height").val()); + notify = $("#notify").prop("checked"); - xsize = parseInt(form.elements[1].value); - ysize = parseInt(form.elements[2].value); - notify = form.elements[3].checked; + singleweight = parseFloat($("#single").val()); + numberweight = parseFloat($("#number").val()); + flength = parseFloat($("#flength").val()); - singleweight = parseFloat(form.elements[5].value); - numberweight = parseFloat(form.elements[6].value); - eqlength = parseFloat(form.elements[7].value); + if (isNaN(width) || isNaN(height) || isNaN(singleweight) || isNaN(numberweight) || isNaN(flength)) + { + stopLoading(); + $("#Error").html("Please enter a valid number."); + return; + } - canvas.width = xsize; - canvas.height = ysize; - var imgData = ctx.createImageData(xsize, ysize); - var requation = randEquation(); - var gequation = randEquation(); - var bequation = randEquation(); + canvas.width = width; + canvas.height = height; + var imgData = ctx.createImageData(width, height); + var rfunction = randFunction(); + var gfunction = randFunction(); + var bfunction = randFunction(); var x; var y; var r; var g; var b; eval( - 'for (var i=0;i<imgData.data.length;i+=4)'+ - '{'+ - ' x = (i/4) % xsize;'+ - ' y = Math.floor((i/4) / xsize);'+ - ' r = (' + requation + ') % 255;'+ - ' g = (' + gequation + ') % 255;'+ - ' b = (' + bequation + ') % 255;'+ - ' r = Math.abs(Math.round(r));' + - ' g = Math.abs(Math.round(g));' + - ' b = Math.abs(Math.round(b));' + - - ' imgData.data[i] = r;' + - ' imgData.data[i+1] = g;' + - ' imgData.data[i+2] = b;' + - ' imgData.data[i+3] = 255;' + - '}'); + "for (var i=0;i<imgData.data.length;i+=4)"+ + "{"+ + " x = (i/4) % width;"+ + " y = Math.floor((i/4) / width);"+ + " r = (" + rfunction + ") % 255;"+ + " g = (" + gfunction + ") % 255;"+ + " b = (" + bfunction + ") % 255;"+ + " r = Math.abs(Math.round(r));" + + " g = Math.abs(Math.round(g));" + + " b = Math.abs(Math.round(b));" + + + " imgData.data[i] = r;" + + " imgData.data[i+1] = g;" + + " imgData.data[i+2] = b;" + + " imgData.data[i+3] = 255;" + + "}"); ctx.putImageData(imgData,0,0); var date = new Date(); var end = date.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) + '$'; - LatexIT.render('*',false); + $("#Function").html("$Functions: \\newline\\newline Red: $" + rmvmath(rfunction) + "$\\newline\\newline Green: $" + rmvmath(gfunction) + "$\\newline\\newline Blue: $" + rmvmath(bfunction) + "$"); + LatexIT.render("*",false); stopLoading(); if(notify) { - alert('Your image has finished.'); + alert("Your image has finished."); } - document.getElementById('Download').innerHTML = "Download"; + document.getElementById("Download").innerHTML = "Download"; } function startLoading() { - $('#Create').prop('disabled', true); - $('#Create').html('Loading...'); + $("#Create").prop("disabled", true); + $("#Create").html("Loading..."); } function stopLoading() { - $('#Create').prop('disabled', false); - $('#Create').html('Create'); + $("#Create").prop("disabled", false); + $("#Create").html("Create"); } function start() @@ -254,9 +247,9 @@ function start() function download() { - var dt = canvas.toDataURL('image/png'); + var dt = canvas.toDataURL("image/png"); this.href = dt; } -var downloadLink = document.getElementById('Download'); -downloadLink.addEventListener('click', download, false); +var downloadLink = document.getElementById("Download"); +downloadLink.addEventListener("click", download, false); diff --git a/js/AutoVideos.js b/js/AutoVideos.js index f92ea9d..5e13195 100644 --- a/js/AutoVideos.js +++ b/js/AutoVideos.js @@ -9,7 +9,7 @@ numlist = numlist.concat(varlist); var numberweights = {"Constant":1}; var numberweight; var singleweight; -var eqlength; +var flength; var notify; for(var i = 0; i < single.length; i++) @@ -30,10 +30,10 @@ for(var i = 0; i < varlist.length; i++) function rmvmath(str) { //A function that removes all the Math.'s in a string - var newstr = ''; + var newstr = ""; for(var i = 0; i < str.length - 5; i++) { - if(str[i] + str[i+1] + str[i+2] + str[i+3] + str[i+4] !== 'Math.') + if(str[i] + str[i+1] + str[i+2] + str[i+3] + str[i+4] !== "Math.") { newstr += str[i] } @@ -64,12 +64,12 @@ function countChar(string, letter) } -function randEquation() +function randFunction() { var hasx = false; var hasy = false; var hast = false; - var equation; + var func; var lasttype; var thistype; var chanceend; @@ -81,8 +81,8 @@ function randEquation() while (!(hasx && hasy && hast)) { //Types: b for binary, s for single, f for first, n for number - equation = ''; - lasttype = 'f'; + func = ""; + lasttype = "f"; thistype = 0; hasx = false; hasy = false; @@ -92,148 +92,131 @@ function randEquation() while (true) { - chanceend = Math.pow((1.0 - (1.0 / length)), eqlength); - if (lasttype == 'n') + chanceend = Math.pow((1.0 - (1.0 / length)), flength); + if (lasttype == "n") { number = Math.random(); if (number < chanceend) { break; } - equation = '(' + equation + ')' + randItem(binary); - lasttype = 'b'; + func = "(" + func + ")" + randItem(binary); + lasttype = "b"; } - else if (lasttype == 's' || lasttype == 'b' || lasttype == 'f') + else if (lasttype == "s" || lasttype == "b" || lasttype == "f") { - equation += '('; + func += "("; thistype = Math.random(); if (thistype < singleweight / (singleweight + numberweight)) { - equation += randItem(single); - lasttype = 's'; + func += randItem(single); + lasttype = "s"; } else { what = randItem(numlist); - if (what == 'Constant') + if (what == "Constant") { - equation += (Math.random(100, 200)).toString(); + func += (Math.random(100, 200)).toString(); } else { - equation += what; - if (what == 'x') + func += what; + if (what == "x") { hasx = true; } - else if (what == 'y') + else if (what == "y") { hasy = true; } - else if (what == 't') + else if (what == "t") { hast = true; } } - lasttype = 'n'; - equation += ')'; + lasttype = "n"; + func += ")"; } } length++; } } - while (countChar(equation, '(') > countChar(equation, ')')) + while (countChar(func, "(") > countChar(func, ")")) { - equation += ')'; - } - return equation; -} - -function evalEquation(eq, x, y, t) -{ - try - { - eval('var result = ' + eq); - return result; - } - catch(err) - { - return 0; + func += ")"; } + return func; } function create() { var d = new Date(); var start = d.getTime(); - var xsize; - var ysize; + var width; + var height; var length; var framerate; - var form = document.getElementById('Options'); + $("#Error").html(""); - var errtag = document.getElementById('Error'); - errtag.innerHTML = ''; + width = parseInt($("#width").val()); + height = parseInt($("#height").val()); + length = parseFloat($("#length").val()); + framerate = parseInt($("#framerate").val()); + notify = $("#notify").prop("checked"); - for (var i = 0; i < form.elements.length; i++) + singleweight = parseFloat($("#single").val()); + numberweight = parseFloat($("#number").val()); + flength = parseFloat($("#flength").val()); + + if (isNaN(width) || isNaN(height) || isNaN(length) || isNaN(framerate) || isNaN(singleweight) || isNaN(numberweight) || isNaN(flength)) { - if (form.elements[i].value == '') - { - errtag.innerHTML = 'Please enter a valid number.'; - return; - } + stopLoading(); + $("#Error").html("Please enter a valid number."); + return; } - xsize = parseInt(form.elements[1].value); - ysize = parseInt(form.elements[2].value); - length = parseFloat(form.elements[3].value); - framerate = parseInt(form.elements[4].value); - notify = form.elements[5].checked; - - singleweight = parseFloat(form.elements[7].value); - numberweight = parseFloat(form.elements[8].value); - eqlength = parseFloat(form.elements[9].value); - - var requation = randEquation(); - var gequation = randEquation(); - var bequation = randEquation(); + var rfunction = randFunction(); + var gfunction = randFunction(); + var bfunction = randFunction(); + console.log("1Hi"); var x; var y; var r; var g; var b; var encoder = new Whammy.Video(framerate); - var video = document.getElementById('Video'); - var canvas = document.getElementById('Canvas'); - video.width = xsize; - video.height = ysize; - canvas.width = xsize; - canvas.height = ysize; - var ctx = canvas.getContext('2d'); - var apx = ctx.getImageData(0, 0, xsize, ysize); + var video = document.getElementById("Video"); + var canvas = document.getElementById("Canvas"); + video.width = width; + video.height = height; + canvas.width = width; + canvas.height = height; + var ctx = canvas.getContext("2d"); + var apx = ctx.getImageData(0, 0, width, height); var data = apx.data; eval( - 'for(var t = 0; t < Math.round(framerate * length); t++)'+ - '{'+ - ' for(var i = 0; i < data.length; i+=4)'+ - ' {'+ - ' x = (i/4) % xsize;'+ - ' 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));'+ - ' data[i] = r;'+ - ' data[i+1] = g;'+ - ' data[i+2] = b;'+ - ' data[i+3] = 255;'+ - ' }'+ - ' apx.data = data;'+ - ' ctx.putImageData(apx, 0, 0);'+ - ' encoder.add(ctx);'+ - '}' + "for(var t = 0; t < Math.round(framerate * length); t++)"+ + "{"+ + " for(var i = 0; i < data.length; i+=4)"+ + " {"+ + " x = (i/4) % width;"+ + " y = Math.floor((i/4) / width);"+ + " r = Math.abs(Math.round((" + rfunction + ") % 255));"+ + " g = Math.abs(Math.round((" + gfunction + ") % 255));"+ + " b = Math.abs(Math.round((" + bfunction + ") % 255));"+ + " data[i] = r;"+ + " data[i+1] = g;"+ + " data[i+2] = b;"+ + " data[i+3] = 255;"+ + " }"+ + " apx.data = data;"+ + " ctx.putImageData(apx, 0, 0);"+ + " encoder.add(ctx);"+ + "}" ); var output = encoder.compile(); var url = webkitURL.createObjectURL(output); @@ -246,36 +229,37 @@ function create() var timetaken = Math.round((end-start)/1000); if (timetaken == 1) { - $("#Time").html('The time it took was 1 second.'); + $("#Time").html("The time it took was 1 second."); } else { - $("#Time").html('The time it took was ' + timetaken + ' seconds.'); + $("#Time").html("The time it took was " + timetaken + " seconds."); } - $("#Function").html('$Functions: \\newline\\newline Red: $' + rmvmath(requation) + '$\\newline\\newline Green: $' + rmvmath(gequation) + '$\\newline\\newline Blue: $' + rmvmath(bequation) + '$'); - LatexIT.render('*',false); + $("#Function").html("$Functions: \\newline\\newline Red: $" + rmvmath(rfunction) + "$\\newline\\newline Green: $" + rmvmath(gfunction) + "$\\newline\\newline Blue: $" + rmvmath(bfunction) + "$"); + LatexIT.render("*",false); stopLoading(); - if(notify) + if (notify) { - alert('Your video has finished.'); + alert("Your video has finished."); } + stopLoading(); } function startLoading() { - $('#Create').prop('disabled', true); - $('#Create').html('Loading...'); + $("#Create").prop("disabled", true); + $("#Create").html("Loading..."); } function stopLoading() { - $('#Create').prop('disabled', false); - $('#Create').html('Create'); + $("#Create").prop("disabled", false); + $("#Create").html("Create"); } function start() diff --git a/js/Harmonograph.js b/js/Harmonograph.js index a2e12a6..be219b8 100644 --- a/js/Harmonograph.js +++ b/js/Harmonograph.js @@ -14,8 +14,8 @@ var started = false; function sinExp(A, t, f, p, d) { - - + + return A*sin(t*f + p) * exp(-d*t); } @@ -42,7 +42,7 @@ Pendulum.prototype.swing = function() var x = 0; var y = sinExp(this.a, t, this.f, this.p, this.d); } - + return [x, y]; } @@ -75,7 +75,7 @@ function addPendulum() txt.id = "pt" + npendulums; document.body.appendChild(txt); document.body.appendChild(p); - + txt = document.createElement("p"); txt.innerHTML = "Amplitude:"; txt.id = "at" + npendulums; @@ -85,7 +85,7 @@ function addPendulum() a.id = "A" + npendulums; document.body.appendChild(txt); document.body.appendChild(a); - + txt = document.createElement("p"); txt.innerHTML = "Damping:"; txt.id = "dt" + npendulums; @@ -95,8 +95,8 @@ function addPendulum() d.id = "d" + npendulums; document.body.appendChild(txt); document.body.appendChild(d); - - + + txt = document.createElement("p"); txt.innerHTML = "Frequency:"; var f = document.createElement("input"); @@ -106,7 +106,7 @@ function addPendulum() txt.id = "ft" + npendulums; document.body.appendChild(txt); document.body.appendChild(f); - + txt = document.createElement("p"); txt.innerHTML = "Is it a Y pendulum? (you should have at least one X and Y pendulum) "; var xy = document.createElement("input"); @@ -119,8 +119,8 @@ function addPendulum() var br = document.createElement("br"); br.id = "br" + npendulums; document.body.appendChild(br); - - + + txt = document.createTextNode("Delete this pendulum"); var delBtn = document.createElement("button"); delBtn.setAttribute("onclick", "deletePendulum(" + npendulums + ");"); @@ -138,16 +138,16 @@ function deletePendulum(x) document.body.removeChild(document.getElementById("f" +x)); document.body.removeChild(document.getElementById("A" +x)); document.body.removeChild(document.getElementById("xy" +x)); - + document.body.removeChild(document.getElementById("pt" +x)); document.body.removeChild(document.getElementById("dt" +x)); document.body.removeChild(document.getElementById("ft" +x)); document.body.removeChild(document.getElementById("at" +x)); document.body.removeChild(document.getElementById("xyt" +x)); - + document.body.removeChild(document.getElementById("db" +x)); document.body.removeChild(document.getElementById("br" +x)); - + for (var i = x+1; i < npendulums; i++) { document.getElementById("p"+i).id = "p"+(i-1); @@ -175,15 +175,14 @@ function start() frameRate(1000); for (var i = 0; i < npendulums; i++) { - //document.write("Hello"); - var a = document.getElementById("A" + i).value; - var f = document.getElementById("f" + i).value; - var p = document.getElementById("p" + i).value; - var d = document.getElementById("d" + i).value; - var xy = document.getElementById("xy"+i).checked; + var a = $("#A" + i).value; + var f = $("#f" + i).value; + var p = $("#p" + i).value; + var d = $("#d" + i).value; + var xy = $("#xy"+i).checked; new Pendulum(parseFloat(a), parseFloat(d), parseFloat(f), parseFloat(p), xy); } - + } function saveCanvas() @@ -199,8 +198,8 @@ function draw() curr = calculate(); if (t !== 0) line(pp[0], pp[1], curr[0], curr[1]); - - + + t++; pp = curr; -}
\ No newline at end of file +} diff --git a/js/NameGenerator.js b/js/NameGenerator.js index 2a11411..c7ffa09 100644 --- a/js/NameGenerator.js +++ b/js/NameGenerator.js @@ -5,19 +5,19 @@ var sumStartsWith = {}; function loadTrigrams(responseText) { - var lines = responseText.split('\n'); + var lines = responseText.split("\n"); for (var i = 0; i < lines.length; i++) { var trigram = lines[i].substring(0, 3); var value = parseInt(lines[i].substring(4, lines[i].length)); - if (trigram == '' || isNaN(value)) + if (trigram == "" || isNaN(value)) continue; trigrams[trigram] = value; } trigramKeyList = Object.keys(trigrams); - document.getElementById("loading").innerHTML = ""; + $("#loading").html(""); } function start() @@ -43,7 +43,7 @@ function pickFirst2() for (var i = 0; i < trigramKeyList.length; i++) { - if (trigramKeyList[i][0] == ' ') + if (trigramKeyList[i][0] == " ") { sum += trigrams[trigramKeyList[i]]; } @@ -54,7 +54,7 @@ function pickFirst2() for (var i = 0; i < trigramKeyList.length; i++) { - if (trigramKeyList[i][0] == ' ') + if (trigramKeyList[i][0] == " ") { count += trigrams[trigramKeyList[i]]; if (selected < count) @@ -103,14 +103,14 @@ function generateName() { var first = pickFirst2(); var name = first; - var next = ''; + var next = ""; var length = 0; do { name += next; next = nextChar(name); } - while (next != ' '); + while (next != " "); name = name[0].toUpperCase() + name.substring(1); @@ -121,41 +121,36 @@ function generateName() function createNames() { - var nameStr = ''; - var numNames = document.getElementById("numNames").value; - var nameDiv = document.getElementById("names"); + var nameStr = ""; + var numNames = $("#numNames").val(); - window.setTimeout(50, function() {document.getElementById("loading").innerHTML = "Loading...";}); - - nameDiv.innerHTML = ""; + $("#names").html(); for (var i = 0; i < numNames; i++) nameStr += generateName() + "<br>"; - if (document.getElementById("outputNames").checked) - nameDiv.innerHTML = nameStr; + if ($("#outputNames").prop("checked")) + $("#names").html(nameStr); - document.getElementById("loading").innerHTML = ""; + $("#loading").html(""); - var dload; - dload = document.getElementById("download"); - dload.innerHTML = "Download names (.txt)"; + $("#download").html("Download names (.txt)"); var txt = nameStr.replace(/<br>/g, "\n"); - dload.href = "data:text/plain;charset=utf-8," + encodeURI(txt); + $("#download").prop("href", "data:text/plain;charset=utf-8," + encodeURI(txt)); stopLoading(); } function startLoading() { - $('#button').prop('disabled', true); - $('#button').html('Loading...'); + $("#button").prop("disabled", true); + $("#button").html("Loading..."); } function stopLoading() { - $('#button').prop('disabled', false); - $('#button').html('Create Names!'); + $("#button").prop("disabled", false); + $("#button").html("Create Names!"); } diff --git a/js/anagramgame.js b/js/anagramgame.js index f313452..c50c403 100644 --- a/js/anagramgame.js +++ b/js/anagramgame.js @@ -67,16 +67,16 @@ function findWord() function play() { - document.getElementById("hidden").style = "visibility: hidden;"; - document.getElementById("again").style = "visibility: hidden;"; - document.getElementById("answer").style = "visibility: hidden;"; - document.getElementById("guess").value = ""; - document.getElementById("loading").innerHTML = "Finding a word with an anagram..."; + $("#hidden").attr("style", "visibility: hidden;"); + $("#again").attr("style", "visibility: hidden;"); + $("#answer").attr("style", "visibility: hidden;"); + $("#guess").val(""); + $("#loading").html("Finding a word with an anagram..."); findWord(); - document.getElementById("loading").innerHTML = ""; - document.getElementById("word").innerHTML = "Find an anagram of " + word + "."; - document.getElementById("hidden").style = ""; - + $("#loading").html(""); + $("#word").html("Find an anagram of " + word + "."); + $("#hidden").attr("style", ""); + } function isWord(x) @@ -100,34 +100,34 @@ function loadWords() } play(); } - }; + }; xhttp.open("GET", "https://raw.githubusercontent.com/sindresorhus/word-list/master/words.txt", true); xhttp.send(); } function submit() { - var guess = document.getElementById("guess").value.toLowerCase(); + var guess = $("#guess").val().toLowerCase(); if (guess != word && letterCounts(guess).equals(letterCounts(word)) && isWord(guess)) { - document.getElementById("answer").style = ""; - document.getElementById("answer").innerHTML = "<span style='color: green'>Correct!</span>"; - - document.getElementById("again").style = ""; + $("#answer").attr("style", ""); + $("#answer").html("<span style='color: green'>Correct!</span>"); + + $("#again").attr("style", ""); } else { - document.getElementById("answer").style = ""; - document.getElementById("answer").innerHTML = "<span style='color: red'>Incorrect!</span>"; + $("#answer").attr("style", ""); + $("#answer").html("<span style='color: red'>Incorrect!</span>"); } } function giveUp() { - document.getElementById("answer").style = ""; - document.getElementById("answer").innerHTML = "<span style='color: red'>The answer was " + anagram + ".</span>"; - - document.getElementById("again").style = ""; + $("#answer").attr("style", ""); + $("#answer").html("<span style='color: red'>The answer was " + anagram + ".</span>"); + + $("#again").attr("style", ""); } loadWords(); @@ -20,7 +20,17 @@ function turnright(d) function turnleft(d) { - return turnright(turnright(turnright(d))); + switch(d) + { + case 'u': + return 'l'; + case 'd': + return 'r'; + case 'r': + return 'u'; + case 'l': + return 'd'; + } } @@ -29,7 +39,7 @@ function setup() frameRate(100); createCanvas(500, 500); antPos = [width/2, height/2]; - + for (var i = 0; i < height; i++) { cells.push([]); @@ -75,27 +85,32 @@ function draw() { if (!running) return; - - for (var i = 0; i < parseInt(document.getElementById("speed").value); i++) + + var speed = parseInt($("#speed").val()); + + if (isNaN(speed)) + speed = 0; + + for (var i = 0; i < speed; i++) { - + if (antPos[0] < 0 || antPos[0] >= width || antPos[1] < 0 || antPos[1] >= height) { running = false; } - + if (!running) return; - + if (cells[antPos[1]][antPos[0]] == 1) direction = turnright(direction); else direction = turnleft(direction); - - + + cells[antPos[1]][antPos[0]] = 1-cells[antPos[1]][antPos[0]]; drawCell(antPos[0], antPos[1]); - + if (direction == 'u') antPos[1]--; else if (direction == 'l') @@ -104,13 +119,13 @@ function draw() antPos[1]++; else if (direction == 'r') antPos[0]++; - + stroke(255, 0, 0); point(antPos[0], antPos[1]); } } -function mouseDragged() +function mouseDragged() { if (mouseX < 0 || mouseX >= width || mouseY < 0 || mouseY >= height) return; @@ -132,4 +147,4 @@ function clearCells() background(255); stroke(255, 0, 0); point(antPos[0], antPos[1]); -}
\ No newline at end of file +} diff --git a/js/ballbounce.js b/js/ballbounce.js index 15c3a53..e0b9f6f 100644 --- a/js/ballbounce.js +++ b/js/ballbounce.js @@ -1,7 +1,7 @@ var WIDTH = 500; var HEIGHT = 500; var ball_radius = 25; -var ball_pos = [WIDTH/2, 0]; +var ball_pos = [WIDTH/2, HEIGHT/4]; var ball_vel = [0, 0]; var score = 0; var started = false; @@ -22,7 +22,7 @@ function reset() function draw() { - + fill(0,0,0); ellipse(ball_pos[0], ball_pos[1], ball_radius*2, ball_radius*2); fill(255, 0, 0); @@ -34,21 +34,21 @@ function draw() ball_pos[1] -= 10; score++; started = true; - } + } } if (started) ball_vel[1] += 0.1; - + ball_pos[0] += ball_vel[0]; ball_pos[1] += ball_vel[1]; - + if (ball_pos[1] > HEIGHT) { alert("You lost. Score: " + score); reset(); - ball_pos = [WIDTH/2, 0]; + ball_pos = [WIDTH/2, HEIGHT/4]; ball_vel = [0, 0]; score = 0; started = false; } -}
\ No newline at end of file +} diff --git a/js/elementarycellularautomata.js b/js/elementarycellularautomata.js index 402c9c7..2d079a2 100644 --- a/js/elementarycellularautomata.js +++ b/js/elementarycellularautomata.js @@ -85,89 +85,114 @@ function getNewValue(rule, above, c, binStrings) return rule[binStrings.indexOf(above)]; } +function startLoading() +{ + $("#run").prop("disabled", true); + $("#run").html("Loading..."); +} -$(document).ready(function() { - $("#run").click(function() +function stopLoading() +{ + $("#run").prop("disabled", false); + $("#run").html("Run"); +} + +function run() +{ + $("#error").html(""); + /* An elementary cellular automaton (e.g. Rule 110 (https://en.wikipedia.org/wiki/Rule_110)) */ + var time = parseInt($("#time").val()); /* Amount of time to run the automaton for. */ + var size = parseInt($("#size").val()); /* Size of the starting automaton (bits). */ + var c = parseInt($("#c").val()); + var startingConfig = $("#start").val(); /* Starting configuration for the automaton. */ + var ruleNumber = parseInt($("#rule").val()); /* Rule number (e.g. 110). (0 <= x < 256) This must be converted to a binary number before use. */ + + if (!check(time > 0, "Error - The value " + time + " is an invalid time. Time > 0.")) { - $("#error").html(""); - /* An elementary cellular automaton (e.g. Rule 110 (https://en.wikipedia.org/wiki/Rule_110)) */ - var time = parseInt($("#time").val()); /* Amount of time to run the automaton for. */ - var size = parseInt($("#size").val()); /* Size of the starting automaton (bits). */ - var c = parseInt($("#c").val()); - var startingConfig = $("#start").val(); /* Starting configuration for the automaton. */ - var ruleNumber = parseInt($("#rule").val()); /* Rule number (e.g. 110). (0 <= x < 256) This must be converted to a binary number before use. */ - - if (!check(time > 0, "Error - The value " + time + " is an invalid time. Time > 0.")) - { - /* Check for invalid time argument. */ - return; - } + /* Check for invalid time argument. */ + stopLoading(); + return; + } - if (!check(ruleNumber >= 0 && ruleNumber < Math.pow(2, Math.pow(2, 2*c+1)), - "Error - Rule number " + ruleNumber + " does not exist. 0 ≤ Rule number ≤ 2<sup>2<sup>2c+1</sup></sup>")) - { - /* Check for an out-of-bounds rule number. */ - return; - } - if (!check(startingConfigValid(startingConfig), "Error - Starting configuration invalid: " + startingConfig)) + if (!check(ruleNumber >= 0 && ruleNumber < Math.pow(2, Math.pow(2, 2*c+1)), + "Error - Rule number " + ruleNumber + " does not exist. 0 ≤ Rule number ≤ 2<sup>2<sup>2c+1</sup></sup>")) + { + /* Check for an out-of-bounds rule number. */ + stopLoading(); + return; + } + if (!check(startingConfigValid(startingConfig), "Error - Starting configuration invalid: " + startingConfig)) + { + /* Check for an invalid starting configuration. e.g. 024930283848 */ + stopLoading(); + return; + } + + if (!check(startingConfig.length <= size, "Error - Starting configuration length is greater than size!")) + { + stopLoading(); + return; + } + + if (!check(size > 0, "Error - Invalid size: " + size + ". Size > 0")) + { + /* Check for invalid size argument. */ + stopLoading(); + return; + } + + var rule = bin(ruleNumber, Math.pow(2, 2*c+1)); + + $("#canvas").prop("width", size*2); + $("#canvas").prop("height", time*2); + + + ctx = document.getElementById("canvas").getContext("2d"); + + ctx.fillStyle = "#ffffff" + ctx.fillRect(0, 0, size, time); + ctx.fillStyle = "#000000" + + startingConfig = padConfiguration(startingConfig, size); + /* Run the automaton. */ + + drawState(startingConfig, 0); + var binStrings = Array.from(Array(Math.pow(2, 2*c+1)).keys()).map(function(x) { return bin(x, 2*c+1); }).reverse(); + var lastState = startingConfig; + + for (var t = 1; t < time; t++) + { + var nextState = ""; + for (var i = 0; i < c; i++) { - /* Check for an invalid starting configuration. e.g. 024930283848 */ - return; + nextState += getNewValue(rule, pad(lastState.substring(0, i+c+1), 2*c+1), c, binStrings) } - if (!check(startingConfig.length <= size, "Error - Starting configuration length is greater than size!")) + for (var i = c; i < size-c; i++) { - return; + nextState += getNewValue(rule, lastState.substring(i-c, i+c+1), c, binStrings); } - if (!check(size > 0, "Error - Invalid size: " + size + ". Size > 0")) + for (var i = size-c; i < size; i++) { - /* Check for invalid size argument. */ - return; + nextState += getNewValue(rule, pad(lastState.substring(i-c, size), 2*c+1), c, binStrings); } - var rule = bin(ruleNumber, Math.pow(2, 2*c+1)); - - document.getElementById("canvas").width = size*2; - document.getElementById("canvas").height = time*2; - - - ctx = document.getElementById("canvas").getContext("2d"); + drawState(nextState, t); + lastState = nextState; + } - ctx.fillStyle = "#ffffff" - ctx.fillRect(0, 0, size, time); - ctx.fillStyle = "#000000" + stopLoading(); - startingConfig = padConfiguration(startingConfig, size); - /* Run the automaton. */ +} - drawState(startingConfig, 0); - var binStrings = Array.from(Array(Math.pow(2, 2*c+1)).keys()).map(function(x) { return bin(x, 2*c+1); }).reverse(); - var lastState = startingConfig; - - for (var t = 1; t < time; t++) - { - var nextState = ""; - for (var i = 0; i < c; i++) - { - nextState += getNewValue(rule, pad(lastState.substring(0, i+c+1), 2*c+1), c, binStrings) - } - - for (var i = c; i < size-c; i++) - { - nextState += getNewValue(rule, lastState.substring(i-c, i+c+1), c, binStrings); - } - - for (var i = size-c; i < size; i++) - { - nextState += getNewValue(rule, pad(lastState.substring(i-c, size), 2*c+1), c, binStrings); - } - - drawState(nextState, t); - lastState = nextState; - } +$(document).ready(function() { + $("#run").click(function() + { + startLoading(); + window.setTimeout(run, 1); }); @@ -1,5 +1,3 @@ -try -{ var lineLength = 5; var canvas; var ctx; @@ -46,14 +44,14 @@ function multiple(e) if (allendpoints[i].equals(e)) { count++; - + if (count > 1) return true; } } - + return false; - + } function rmvAll(e) @@ -70,30 +68,30 @@ function iterate() { var indexOfThis = endpoints.indexOf(this); endpoints.splice(indexOfThis, 1); - - if (this.direction == 'h') + + if (this.direction == "h") { line(this.x-lineLength, this.y, this.x+lineLength, this.y); - var e1 = new Endpoint(this.x-lineLength, this.y, 'v'); - var e2 = new Endpoint(this.x+lineLength, this.y, 'v'); - + var e1 = new Endpoint(this.x-lineLength, this.y, "v"); + var e2 = new Endpoint(this.x+lineLength, this.y, "v"); + } else { line(this.x, this.y-lineLength, this.x, this.y+lineLength); - var e1 = new Endpoint(this.x, this.y-lineLength, 'h'); - var e2 = new Endpoint(this.x, this.y+lineLength, 'h'); - + var e1 = new Endpoint(this.x, this.y-lineLength, "h"); + var e2 = new Endpoint(this.x, this.y+lineLength, "h"); + } - + if (Math.random() < chance) endpoints.push(e1); if (Math.random() < chance) endpoints.push(e2); allendpoints.push(e1); allendpoints.push(e2); - + } Endpoint.prototype.equals=equals; @@ -102,34 +100,33 @@ Endpoint.prototype.iterate=iterate; function iterateAll() { - + var cpy = endpoints.slice(); - + for (var i = 0; i < cpy.length; i++) if (multiple(cpy[i])) rmvAll(cpy[i]); - + cpy = endpoints.slice(); for (var i = 0; i < cpy.length; i++) cpy[i].iterate(); - + iterateTimeout = setTimeout(iterateAll, delay); } function stop() { + $("#stop").hide(); running = false; + if (!stopped) { clearTimeout(iterateTimeout); - var download = document.createElement('a'); - download.innerHTML = 'Download H'; - download.href = canvas.toDataURL(); - download.download = 'h.png'; - download.id = 'download'; - document.body.appendChild(download); + $("#download").show(); + $("#link").prop("href", canvas.toDataURL()); stopped = true; } + } function start() @@ -137,13 +134,13 @@ function start() if (!running) { running = true; - - + + w = canvas.width; h = canvas.height; endpoints = []; allendpoints = []; - var a = new Endpoint(w/2, h/2, 'h'); + var a = new Endpoint(w/2, h/2, "h"); endpoints.push(a); a.iterate(); iterateAll(); @@ -153,51 +150,39 @@ function start() function beginH() { -try{ + $("#begin").hide(); if (!stopped) { - canvas = document.getElementById('canvas'); - - var w = parseInt(document.getElementById('w').value); - var h = parseInt(document.getElementById('h').value); + canvas = document.getElementById("canvas"); + + var w = parseInt($("#w").val()); + var h = parseInt($("#h").val()); canvas.width = w; canvas.height = h; - - ctx = canvas.getContext('2d'); + + ctx = canvas.getContext("2d"); ctx.strokeStyle = "#000"; - ctx.fillStyle = '#fff'; - + ctx.fillStyle = "#fff"; + ctx.fillRect(0, 0, w, h); - - lineLength= document.getElementById('lineLength').value; - lineLength = parseInt(lineLength); - - delay = parseInt(document.getElementById('delay').value); - - document.body.appendChild(canvas); - document.body.appendChild(document.createElement('br')); - - chance = parseFloat(document.getElementById('chance').value); - - + + lineLength = parseInt($("#lineLength").val()); + + delay = parseInt($("#delay").val()); + + chance = parseFloat($("#chance").val()); + + start(); } else { - document.body.removeChild(document.getElementById('download')); iterateAll(); stopped = false; } - } -catch(e) -{ - document.write(e); } -} - -} -catch(e) +$(function() { - document.write(e); -}
\ No newline at end of file + $("#download").hide(); +}); diff --git a/js/magnets.js b/js/magnets.js index 7d82507..c532e74 100644 --- a/js/magnets.js +++ b/js/magnets.js @@ -65,7 +65,7 @@ function draw() safe_zone_radius *= 0.9995; ellipse(mouseX, mouseY, safe_zone_radius, safe_zone_radius); - if ((mouseX > width || mouseY > height) && magnets.length > 0) + if ((mouseX > width || mouseY > height || mouseY < 0) && magnets.length > 0) { gameOver = true; alert("You went out of bounds. Score: " + magnets.length); diff --git a/js/mandelbrot.js b/js/mandelbrot.js index cdfc467..93929ce 100644 --- a/js/mandelbrot.js +++ b/js/mandelbrot.js @@ -37,7 +37,7 @@ function cpower(re, im, power) i++; } return x; - + } function iterate(z, power, c) @@ -66,14 +66,12 @@ function num_iterations(power, c, max_iterations) function draw_mandelbrot() { var size = width*increment; - - - + var endI = startI+size; var endJ = startJ+size; - + var imgData = ctx.createImageData(width, height); - + for (var i = startI; i < endI; i+=increment) { for (var j = startJ; j < endJ; j+=increment) @@ -82,14 +80,14 @@ function draw_mandelbrot() var jpos = j*(1.0/increment)-startJ*(1.0/increment); jpos = Math.floor(Math.round(jpos)); ipos = Math.floor(Math.round(ipos)); - + var x = num_iterations(power, [i, j], iterations)/iterations * 255 imgData.data[4*(jpos*width+ipos)] = x; imgData.data[1+4*(jpos*width+ipos)] = x; imgData.data[2+4*(jpos*width+ipos)] = x; imgData.data[3+4*(jpos*width+ipos)] = 255; - - + + } } ctx.putImageData(imgData, 0, 0); @@ -109,25 +107,25 @@ function mousePressed(e) { var x; var y; - if (e.pageX || e.pageY) { + if (e.pageX || e.pageY) { x = e.pageX; y = e.pageY; } - else { - x = e.clientX; - y = e.clientY; - } + else { + x = e.clientX; + y = e.clientY; + } x -= canvas.offsetLeft; y -= canvas.offsetTop; if (x < 0 || x > width || y < 0 || y > height) return; - + if (e.button == 0) { increment /= 2; startI = map(x, 0, width, startI, startI+width*increment); startJ = map(y, 0, height, startJ, startJ+width*increment); - + draw_mandelbrot(); } } @@ -141,7 +139,7 @@ function keyPressed(e) increment /= 2; startI = startI+width*increment/2; startJ = startJ+height*increment/2; - + draw_mandelbrot(); } if (key == "Q") @@ -176,4 +174,3 @@ canvas.addEventListener("mousedown", mousePressed); document.body.addEventListener("keydown", keyPressed); draw_mandelbrot(); -
\ No newline at end of file diff --git a/js/mazesolver.js b/js/mazesolver.js index c2b5b89..815aa59 100644 --- a/js/mazesolver.js +++ b/js/mazesolver.js @@ -1,6 +1,5 @@ -var canvas = document.getElementById('Canvas'); -var form = document.getElementById('Form'); +var canvas = document.getElementById("Canvas"); var X; @@ -26,7 +25,7 @@ for (var i = 0; i < Y; i++) } -var ctx = canvas.getContext('2d'); +var ctx = canvas.getContext("2d"); var mouseDown = false; @@ -37,7 +36,6 @@ var begun = false; var start; //(location) var end; //(location) -var doesItWorkParagraph = document.getElementById('DoesItWork'); function reset() { @@ -198,38 +196,21 @@ function getTilesToGoal() while (!(equals2d(tilesToGoal, oldTTG))); - - /*for (var y = 0; y < tilesToGoal.length; y++) - { - for (var x = 0; x < tilesToGoal[y].length; x++) - document.write(tilesToGoal[y][x] + ' '); - - document.write('<br>'); - }*/ - - if (tilesToGoal[start[1]][start[0]] < 0) return false; return true; } -function remove(element) -{ - element.parentNode.removeChild(element); -} - function startCreation() { - var size = form.elements[0].value; + var size = $("#size").val(); X = size; Y = size; - var button = document.getElementById('StartButton'); - button.innerHTML = 'Solve Maze'; - button.onclick = function(){try{begin();}catch(err){document.write(err)}}; - remove(form); - canvas.width = 500; - canvas.height = 500; + $("#Canvas").show(); + $("#begin").show(); + $("#StartButton").html("Clear maze"); + $("#form").hide(); reset(); clear(); @@ -240,7 +221,7 @@ function begin() if (!(startPlaced && endPlaced)) { - doesItWorkParagraph.innerHTML = 'You must choose a start and end location (right-click).'; + $("#Error").html("You must choose a start and end location (right-click)."); reset(); clear(); return; @@ -250,7 +231,7 @@ function begin() var mazeWorks = getTilesToGoal(); if (mazeWorks === false) { - doesItWorkParagraph.innerHTML = 'Maze cannot be solved.'; + $("#Error").html("Maze cannot be solved."); reset(); clear(); return; @@ -268,7 +249,7 @@ function begin() x = location[0]; y = location[1]; - circle(x * TILEWIDTH + TILEWIDTH / 2, y * TILEWIDTH + TILEWIDTH / 2, parseInt(TILEWIDTH / 2.5), '#ffaaaa'); + circle(x * TILEWIDTH + TILEWIDTH / 2, y * TILEWIDTH + TILEWIDTH / 2, parseInt(TILEWIDTH / 2.5), "#aaf"); surroundingTiles = [[x+1, y], [x, y+1], [x-1, y], [x, y-1]]; if (y === tilesToGoal.length - 1) surroundingTiles = rmvArray(surroundingTiles, [x, y+1]); if (y === 0) surroundingTiles = rmvArray(surroundingTiles, [x, y-1]); @@ -287,7 +268,7 @@ function begin() x = location[0]; y = location[1]; - circle(x * TILEWIDTH + TILEWIDTH / 2, y * TILEWIDTH + TILEWIDTH / 2, parseInt(TILEWIDTH / 2.5), '#ffaaaa'); + circle(x * TILEWIDTH + TILEWIDTH / 2, y * TILEWIDTH + TILEWIDTH / 2, parseInt(TILEWIDTH / 2.5), "#aaf"); reset(); @@ -320,7 +301,7 @@ function mouseMoved(event) if (button === 1) { - rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, '#dddddd'); + rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, "#dddddd"); tiles[tiley][tilex] = false; if (equals([tilex, tiley], start)) { @@ -343,7 +324,7 @@ function mouseMoved(event) if (notClickedOnStart && notClickedOnEnd) { - rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, '#aaaaaa'); + rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, "#aaaaaa"); tiles[tiley][tilex] = true; } @@ -351,7 +332,7 @@ function mouseMoved(event) function clear() { - rect(0, 0, canvas.width, canvas.height, '#dddddd'); + rect(0, 0, canvas.width, canvas.height, "#dddddd"); started = false; } @@ -388,13 +369,13 @@ function mousePressed(event) if ((!startPlaced) && (!tiles[tiley][tilex])) { start = [tilex, tiley]; - rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, '#00ff00'); + rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, "#00ff00"); startPlaced = true; } else if ((!endPlaced) && (!tiles[tiley][tilex])) { end = [tilex, tiley]; - rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, '#ffff00'); + rect(tilex * TILEWIDTH, tiley * TILEWIDTH, TILEWIDTH, TILEWIDTH, "#ffff00"); endPlaced = true; return; } @@ -408,9 +389,9 @@ function mouseReleased(event) -canvas.addEventListener('mousemove', mouseMoved, false); -canvas.addEventListener('mousedown', mousePressed, false); -canvas.addEventListener('mouseup', mouseReleased, false); +canvas.addEventListener("mousemove", mouseMoved, false); +canvas.addEventListener("mousedown", mousePressed, false); +canvas.addEventListener("mouseup", mouseReleased, false); function circle(x, y, r, colour) { @@ -430,14 +411,14 @@ function rect(x, y, w, h, colour) function text(str, x, y) { - ctx.font = "20px Helvetica"; - ctx.fillStyle = '#000000'; + ctx.font = "20px Arial"; + ctx.fillStyle = "#000000"; ctx.fillText(str, x, y); } function line(x1, y1, x2, y2) { - ctx.strokeStyle = '#000000'; + ctx.strokeStyle = "#000000"; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); @@ -453,4 +434,10 @@ function line(x1, y1, x2, y2, color) ctx.stroke(); }; -rect(0, 0, canvas.width, canvas.height, '#dddddd'); +rect(0, 0, canvas.width, canvas.height, "#dddddd"); + +$(function() +{ + $("#begin").hide(); + $("#Canvas").hide(); +}); diff --git a/js/modularcircles.js b/js/modularcircles.js index 8b588f9..8e346e0 100644 --- a/js/modularcircles.js +++ b/js/modularcircles.js @@ -5,45 +5,45 @@ function setup() function nPoints()
{
- return document.getElementById("npoints").value;
+ return parseInt($("#npoints").val());
}
function shouldMul()
{
- return document.getElementById("should_mul").checked;
+ return $("#should_mul").prop("checked");
}
function amount()
{
- return parseFloat(document.getElementById("amount").value);
+ return parseFloat($("#amount").val());
}
function getPos(number)
{
- angle = 2*PI * number/(nPoints());
+ angle = 2*PI * number/(nPoints());
return [cos(angle)*250+300, sin(angle)*250+300];
}
function draw()
{
if (shouldMul())
- document.getElementById("amount").step = 0.1;
+ $("#amount").prop("step", 0.1);
else
- document.getElementById("amount").step = 1;
+ $("#amount").prop("step", 1);
background(255);
ellipseMode(CENTER);
noStroke();
fill(0);
for (var i = 0; i < nPoints(); i++)
ellipse(getPos(i)[0], getPos(i)[1], 3, 3);
-
+
stroke(0);
for (var i = 0; i < nPoints(); i++)
{
if (shouldMul())
{
stroke(map(map((amount()*i)%nPoints(), 0, nPoints(), 0, 256) - map(i, 0, nPoints(), 0, 256), -256, 256, 0, 256), map(i, 0, nPoints(), 0, 256), map((amount()*i)%nPoints(), 0, nPoints(), 0, 256));
- line(getPos(i)[0], getPos(i)[1], getPos((amount()*i)%nPoints())[0], getPos((amount()*i)%nPoints())[1]);
+ line(getPos(i)[0], getPos(i)[1], getPos((amount()*i)%nPoints())[0], getPos((amount()*i)%nPoints())[1]);
}
else
{
@@ -51,4 +51,4 @@ function draw() line(getPos(i)[0], getPos(i)[1], getPos((amount()+i)%nPoints())[0], getPos((amount()+i)%nPoints())[1]);
}
}
-}
\ No newline at end of file +}
diff --git a/js/modularpascal.js b/js/modularpascal.js index ea91de1..a2c4c1a 100644 --- a/js/modularpascal.js +++ b/js/modularpascal.js @@ -1,15 +1,16 @@ -var triangle = [];
-var colors = [];
-var currentX;
+
function getX()
{
- return document.getElementById("mod").value;
+ return $("#mod").val();
}
function updateTriangle()
{
+ var triangle = [];
+ var colors = [];
+ var currentX;
var x = getX();
triangle = [];
currentX = x;
diff --git a/js/shaperoller.js b/js/shaperoller.js index f0360d6..cd67fac 100644 --- a/js/shaperoller.js +++ b/js/shaperoller.js @@ -33,7 +33,7 @@ function deleteShape(num) removeElementById("radius"+num); removeElementById("del"+num); removeElementById("br"+num); - + } function updateShapes() @@ -49,7 +49,7 @@ function updateShapes() radii.push(document.getElementById("radius" + i).value); } speed = parseFloat(document.getElementById("speed").value); - + } function loadShapes() @@ -69,7 +69,7 @@ function addShape() updateShapes(); var nShapes = getNumShapes(); var shapesDiv = document.getElementById("shapes"); - shapesDiv.innerHTML += '<span id="rt' + nShapes + '">Radius:</span> <input type="number" value="50" id="radius' + nShapes + '"> <span id="st' + nShapes + '">Shape:</span> ' + + shapesDiv.innerHTML += '<span id="rt' + nShapes + '">Radius:</span> <input type="number" value="50" id="radius' + nShapes + '"> <span id="st' + nShapes + '">Shape:</span> ' + '<select id="shape' + nShapes + '"><option value="circle">Circle</option><option value="square">Square</option></select> <button id="del' + nShapes + '" onclick="deleteShape(' + nShapes + ');">Delete</button><br id="br' + nShapes + '">'; shapes.push(0); radii.push(50); @@ -104,7 +104,7 @@ function squos(angle) if (angle > QUARTER_PI && angle < 3*QUARTER_PI) return -map(angle, QUARTER_PI, 3*QUARTER_PI, -1, 1); return map(angle, 5*QUARTER_PI, 7*QUARTER_PI, -1, 1); - + } function getPointOnShape(shape, radius, centerX, centerY, angle) @@ -123,7 +123,7 @@ function setup() } function draw() -{ +{ updateShapes(); try{ if (drawing) @@ -131,36 +131,36 @@ function draw() background(255); stroke(0); noFill(); - + var centerX = width/2; var centerY = height/2; var nextPoint; - + for (var i = 0; i < shapes.length; i++) { - + var angle = map(currentAngle%radii[i], 0, radii[i], 0, TWO_PI); nextPoint = getPointOnShape(shapes[i], radii[i], centerX, centerY, angle); centerX = nextPoint[0]; centerY = nextPoint[1]; - + } - - + + points.push([centerX, centerY]); - - - + + + if (points.length != 1 && dist(points[0][0], points[0][1], points[points.length-1][0], points[points.length-1][1]) < speed) drawing = false; - - + + for (var i = 1; i < points.length; i++) { line(points[i-1][0], points[i-1][1], points[i][0], points[i][1]); } - - + + currentAngle += speed; if (drawing) { @@ -169,4 +169,4 @@ function draw() ellipse(centerX, centerY, 7, 7); } }}catch(e){document.write(e + "<br>");} -}
\ No newline at end of file +} @@ -1,24 +1,24 @@ - function draw_branch(x, y, t) { - if (t > 8) - return; - var sz = (400 * pow(0.5, t)) * map(255-frameCount%256, 0, 255, 0, 1); - var angle = map(mouseX, 0, width, 0, HALF_PI) + t * map(mouseY, 0, height, -HALF_PI, HALF_PI); - line(x, y, x+cos(angle)*sz, y-sin(angle)*sz); - line(x, y, x-cos(angle)*sz, y-sin(angle)*sz); - draw_branch((x+cos(angle)*sz), (y-sin(angle)*sz), t+1); - draw_branch((x-cos(angle)*sz), (y-sin(angle)*sz), t+1); + if (t > 8) + return; + var sz = (400 * pow(0.5, t)) * map(255-frameCount%256, 0, 255, 0, 1); + var angle = map(mouseX, 0, width, 0, HALF_PI) + t * map(mouseY, 0, height, -HALF_PI, HALF_PI); + line(x, y, x+cos(angle)*sz, y-sin(angle)*sz); + line(x, y, x-cos(angle)*sz, y-sin(angle)*sz); + draw_branch((x+cos(angle)*sz), (y-sin(angle)*sz), t+1); + draw_branch((x-cos(angle)*sz), (y-sin(angle)*sz), t+1); } + function setup() { - - createCanvas(700, 700); - background(255); - draw_branch(width/2, height, 0); + createCanvas(700, 700); + background(255); + draw_branch(width/2, height, 0); } + function draw() { - background(255); - draw_branch(width/2, height, 0); + background(255); + draw_branch(width/2, height, 0); } diff --git a/js/treegenerator.js b/js/treegenerator.js index 225c639..599cade 100644 --- a/js/treegenerator.js +++ b/js/treegenerator.js @@ -1,37 +1,36 @@ - var size; var start_angle; var angle_decay; + function draw_branch(x, y, t) { - if (t > 8) - return; - var sz = size * pow(0.5, t); - var angle = start_angle + angle_decay * t; - line(x, y, x+cos(angle)*sz, y-sin(angle)*sz); - line(x, y, x-cos(angle)*sz, y-sin(angle)*sz); - draw_branch(x+cos(angle)*sz, y-sin(angle)*sz, t+1); - draw_branch(x-cos(angle)*sz, y-sin(angle)*sz, t+1); - + if (t > 8) + return; + var sz = size * pow(0.5, t); + var angle = start_angle + angle_decay * t; + line(x, y, x+cos(angle)*sz, y-sin(angle)*sz); + line(x, y, x-cos(angle)*sz, y-sin(angle)*sz); + draw_branch(x+cos(angle)*sz, y-sin(angle)*sz, t+1); + draw_branch(x-cos(angle)*sz, y-sin(angle)*sz, t+1); + } + function setup() { - - createCanvas(700, 700); - stroke(0); + createCanvas(750, 750); + stroke(0); } function draw() { - size = parseFloat(document.getElementById("size").value); - start_angle = parseFloat(document.getElementById("angle").value); - angle_decay = parseFloat(document.getElementById("angledecay").value); - background(255); - draw_branch(width/2, height, 0); + size = parseFloat($("#size").val()); + start_angle = parseFloat($("#angle").val()); + angle_decay = parseFloat($("#angledecay").val()); + background(255); + draw_branch(width/2, height, 0); } function saveTree() -{ +{ save("tree.png"); - -}
\ No newline at end of file +} diff --git a/magnets.html b/magnets.html index 4851095..8626df5 100644 --- a/magnets.html +++ b/magnets.html @@ -4,6 +4,7 @@ <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> @@ -13,7 +14,7 @@ <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 6ac6014..f3173a1 100644 --- a/magnets_old_version.html +++ b/magnets_old_version.html @@ -4,14 +4,15 @@ <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> <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 e46eaca..93fbbbc 100644 --- a/mandelbrot.html +++ b/mandelbrot.html @@ -10,10 +10,15 @@ <script src="navbar.js"></script> <h2>Mandelbrot Set</h2> - <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> + <div class="container-fluid"> + <div class="col-lg-5 col-md-6 col-sm-8 col-xs-12" id="explanation"> + 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> + </div> + </div> + <br> + <canvas width="500" height="500" id="canvas"></canvas> <script src="js/mandelbrot.js"></script> </body> </html> diff --git a/mathematical.html b/mathematical.html index 1d78992..e91d638 100644 --- a/mathematical.html +++ b/mathematical.html @@ -13,114 +13,142 @@ <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> - + <div class="container-fluid"> + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/modularpascal.png" width=256 height=256><br> + <div class="project-title"><a href="modularpascal.html">Modular Pascal's Triangle</a></div> + A picture of Pascal's triangle mod x. Set x and + Click update to see the triangle. + </div> + </div> + + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/modularcircles.png" width=250 height=250><br> + <div class="project-title"><a href="modularcircles.html">Modular Circles</a></div> + There are a circle of points, each one corresponding + to a number. Lines are drawn between points according + to rules. Create interesting shapes like cardioids + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/shaperoller.png" width=250 height=250><br> + <div class="project-title"><a href="shaperoller.html">Shape Roller</a></div> + This program rolls (invisible) shapes around other + (invisible) shapes and traces a point on the shape as + it moves along. Create interesting shapes like cardioids. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/mandelbrot.png" width=250 height=250><br> + <div class="project-title"><a href="mandelbrot.html">The Mandelbrot Set</a></div> + This program draws the Mandelbrot Set. You can + zoom in and change the power. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/ant.png" width=250 height=250><br> + <div class="project-title"><a href="ant.html">Langton's Ant</a></div> + This is the cellular automaton known as Langton's + Ant. You can find out more about it <a href="https://en.wikipedia.org/wiki/Langton%27s_ant">here</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/ElementaryCellularAutomata.png" width=400 height=400><br> + <div class="project-title"><a href="elementarycellularautomata.html">Elementary cellular automata</a></div> + Run <a href="https://en.wikipedia.org/wiki/Elementary_cellular_automaton">elementary cellular automata</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/mazesolver.png" width=200 height=200><br> + <div class="project-title"><a href="mazesolver.html">Maze Solver</a></div> + Create a maze, choose a starting point and an + ending point, and your computer will solve the + maze. + </div> + </div> + + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/autoartapp.png" width=200> + <div class="project-title"><a href="https://play.google.com/store/apps/details?id=org.neocities.autoart.autoart">AutoArt App</a></div> + The Android app for <a href="AutoImages.html">AutoImages</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/AutoImages.png" width=200 height=200><br> + <div class="project-title"><a href="AutoImages.html">AutoImages</a></div> + A computer program that creates art. It uses + random functions to generate images. An explanation + can be found <a href="explanation.html">here</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <video width="250" height="250" controls> + <source src="autovideo.mp4" type="video/mp4"> + </video><br> + <div class="project-title"><a href="AutoVideos.html">AutoVideos</a></div> + A computer program that creates videos. It uses + random functions to generate videos. An explanation + can be found <a href="explanation.html">here</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <audio controls> + <source src="autoaudio.wav" type="audio/wav"> + </audio><br> + <div class="project-title"><a href="AutoAudio.html">AutoAudio</a></div> + A computer program that creates audio. It uses + random functions to generate audio. An explanation + can be found <a href="explanation.html">here</a>. + </div> + </div> + + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/NameGenerator.png" width=200 height=200><br> + <div class="project-title"><a href="NameGenerator.html">NameGenerator</a></div> + A computer program that generates names! It uses + the frequencies of trigrams. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/picalculator.png" width=250 height=250><br> + <div class="project-title"><a href="2pi.html">π Calculator</a></div> + Draw a circle, then find out how well your circle + approximates π! + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + More coming soon! + </div> + </div> + + </div> </body> </html> diff --git a/mazesolver.html b/mazesolver.html index 64d15a4..2002f73 100644 --- a/mazesolver.html +++ b/mazesolver.html @@ -14,27 +14,35 @@ <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>
+ <div class="container-fluid">
+ <div class="col-lg-5 col-md-6 col-sm-8 col-xs-12" id="explanation">
+ Left-click to create walls, middle-click (press the scroll wheel) to clear walls, and right-click to place start and ending locations.
+ </div>
+ </div>
+ <br>
- <button onclick='startCreation();' id='StartButton'>Create Maze</button><br><br>
+ <button class="btn btn-sm btn-primary with-margin" onclick="startCreation();" id="StartButton">Create maze</button><br>
+ <button class="btn btn-sm btn-primary with-margin" onclick="begin();" id="begin">Solve maze</button><br><br>
+ <p id="Error" class="text-danger"></p>
- <p id='DoesItWork' style="color:#ff0000;"></p>
+ <div class="container-fluid" id="form">
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Size</span>
+ <input id="size" class="form-control" type="number" value="50">
+ </div>
+ </div>
+ </div><br>
- <form id='Form'>
- Size: <input type='number' value=50>
- </form>
- <canvas height=0 width=0 id='Canvas' oncontextmenu='return false;'></canvas>
+ <canvas height="500" width="500" id="Canvas" oncontextmenu="return false;"></canvas>
<script src="js/mazesolver.js"></script>
</body>
<footer>
- <p>MazeSolver is licensed under the <a href='LICENSE.txt'>GNU General public license</a>.</p>
+ <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 21fbec8..84fa6be 100644 --- a/modularcircles.html +++ b/modularcircles.html @@ -13,10 +13,40 @@ <p>Each point corresponds to a number. The points are connected based on rules.</p>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Number of points</span>
+ <input id="npoints" class="form-control" type="number" value="300">
+ </div>
+ </div>
+ <br>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">Add/Multiply</span>
+ <input id="amount" class="form-control" type="number" value="2">
+ </div>
+ </div>
+ <br>
+ <div class="row with-margin">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">
+ <input id="should_mul" class="checkbox" type="radio" value="multiply" name="muloradd" checked="true">
+ </span>
+ <span class="form-control">Multiply?</span>
+ </div>
+ </div>
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">
+ <input id="should_add" type="radio" value="add" name="muloradd" class="checkbox">
+ </span>
+ <span class="form-control">Add?</span>
+ </div>
+ </div>
+ </div>
+ <br>
+
<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 2472aaf..4f36997 100644 --- a/modularpascal.html +++ b/modularpascal.html @@ -11,10 +11,17 @@ <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>
+ <p>A picture of Pascal's triangle mod x.</p>
<script src="js/modularpascal.js"></script>
- x: <input min="1" value="2" type="number" id="mod"><br><br>
+ <div class="container-fluid with-margin">
+ <div class="row">
+ <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+ <span class="input-group-addon">x</span>
+ <input id="mod" class="form-control" type="number" value="2">
+ </div>
+ </div>
+ </div>
<button class="btn btn-sm btn-primary" onclick="updateTriangle();">Update</button><br>
</body>
</html>
diff --git a/shaperoller.html b/shaperoller.html index 0873237..1eddb8a 100644 --- a/shaperoller.html +++ b/shaperoller.html @@ -4,16 +4,15 @@ <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> <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> - - - <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + Here's an animation of how it works:<br> + <img width="100" height="100" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Cardiod_animation.gif" target="_blank"></p> <script src="js/shaperoller.js"></script> Speed: <input type="number" id="speed" value="0.5"><br> @@ -4,12 +4,12 @@ <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> <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 f1a58dd..b627a42 100644 --- a/treegenerator.html +++ b/treegenerator.html @@ -4,22 +4,38 @@ <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> <div id="navbar"></div> <script src="navbar.js"></script> + <h2>Tree Generator</h2> - 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> + <div class="container-fluid"> + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10 with-margin"> + <span class="input-group-addon">Angle</span> + <input id="angle" class="form-control" type="number" step="0.01" value="1"> + </div> + </div> + + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10 with-margin"> + <span class="input-group-addon">Angle decay</span> + <input id="angledecay" class="form-control" type="number" step="0.01" value="0.1"> + </div> + </div> + + <div class="row"> + <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10 with-margin"> + <span class="input-group-addon">Size</span> + <input id="size" class="form-control" type="number" step="20" value="400"> + </div> + </div> + </div> + <button class="btn btn-sm btn-primary" onclick="saveTree();">Save image</button><br> + <script src="js/treegenerator.js"></script> </body> </html> |