xxxxxxxxxx59
<!--This code is mostly code written by Logan Franken. Franken posted this projecton their blog/site on July 25th 2011. Quote from Franken's README:"Circle-Puzzle=============HTML5 rotating concentric circle puzzle created with the HTML5 canvas elementhttps://github.com/loganfranken/Circle-Puzzlehttp://www.loganfranken.com/blog/22/html5-circle-puzzle/"The code was adapted to:- use p5.js- change variable names: puzzle -> volvelle- reorganise code- allow the user to upload their own image to create a volvelle- allow user to set the percentages at which the volvelles are cut at--><html><head> <meta charset="UTF-8"> <title>create a volvelle from an image</title> <link rel="stylesheet" type="text/css" href="volvelle-image.css"></head><body><div style="max-width: 900px;"> <p>⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳</p> <p>Drag the volvelles to rotate them below, or upload your own image to rotate your own digital volvelle. Click on the icons below to see these images rotate as digital volvelles.</p> <div style="text-align: center"> <img onclick="createRotatingVolvelle(terhi)" style="cursor: pointer; width: 150px; margin-right: 30px; border-radius: 50%" src="img/terhi.png"></img> <img onclick="createRotatingVolvelle(christine)" style="cursor: pointer; width: 150px; margin-right: 30px; border-radius: 50%" src="img/christine.jpg"></img> <img onclick="createRotatingVolvelle(nightlyTest)" style="cursor: pointer; width: 150px; margin-right: 30px; border-radius: 50%" src="img/terhi-test.png"></img> <img onclick="createRotatingVolvelle(barros)" style="cursor: pointer; width: 150px; margin-right: 30px; border-radius: 50%" src="img/TABall-low-1.png"></img> </div> <p>This code was adapted from Logan Franken's HTML5 Circle puzzle, 2011. <br>Visit Franken's project at: <br><a style="color:white" href="https://github.com/loganfranken/Circle-Puzzle">https://github.com/loganfranken/Circle-Puzzle</a></p> <p>⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳⟳</p> <p style="font-size: 30px;">🗑 Note that this page does not save your volvelle 🗑 </p> <p id="uploadButtonInfo">Upload your own volvelle (square image, centered): <input type="file" id="uploadButton" name="userVolvelle" accept="image/png, image/jpeg"></p></div><div id="puzzle-canvas-wrapper"> </div> <script type="text/javascript" src="lib/p5.min.js"></script> <script type="text/javascript" src="volvelle-image.js"></script></body></html>