The Rainbow Spirograph

Developer
Johan Karlsson
Size
4,016 Kb
Views
54,648
  1. The Rainbow Spirograph Previews
  2. The Rainbow Spirograph HTML Codes
  3. The Rainbow Spirograph CSS Codes
  4. The Rainbow Spirograph JS Codes

How do I make an the rainbow spirograph?

Http://en.wikipedia.org/wiki/Spirograph. What is a the rainbow spirograph? How do you make a the rainbow spirograph? This script and codes were developed by Johan Karlsson on 26 July 2022, Tuesday.

The Rainbow Spirograph Previews
IQ Test

The Rainbow Spirograph - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Rainbow Spirograph</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/slate/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="top"> <button id="random" class="btn btn-default">Random</button> <a tabindex="0" role="button" id="shareButton" class="btn btn-default" title="" data-toggle="modal" data-target="#shareModal" data-placement="bottom" data-content="Click to share this unique pattern" data-trigger="focus"> <i class="fa fa-share"></i> Share </a> <button id="advancedButton" class="btn btn-default"><i class="fa fa-cog"></i> Toggle advanced controls</button> <span id="advanced" class="hidden"> <input type="number" id="R"/> <input type="number" id="r"/> <input type="number" id="p"/> <button id="setValues" class="btn btn-default">Set</button> <button id="clear" class="btn btn-default" style="display: none;">Clear</button> </span><br>
</div>
<div id="shareModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="shareModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>Copy the link and share it!</h3> </div> <div class="modal-body"> <p id="shareUrl">htttp://replace.me!</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div>
</div>
<canvas id="canvas" width="300" height="300"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

The Rainbow Spirograph - Script Codes CSS Codes

/* Font Awesome CSS included under settings */
body { color: white; background-color: black; /* Avoid scrollbars */ margin: 0; overflow: hidden;
}
.hidden { display: none;
}
.top { position: absolute;
}
.top button, .top input, .top a { margin-left: 10px;
}
@media (max-width: 600px) { .top { display: none; }
}

The Rainbow Spirograph - Script Codes JS Codes

/* Johan Karlsson (DonKarlssonSan) http://en.wikipedia.org/wiki/Spirograph */
(function(){ var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext('2d'); // The angle var t = 0; // This is the point we want to draw var x, y; // radius of outer circle var R; // radius of inner circle var r; // a point inside the inner circle, distance from it's center var p; var l; var k; var red; var green; var blue; var i; R = getValueOrDefaultAndSet("R", 350); r = getValueOrDefaultAndSet("r", 220); p = getValueOrDefaultAndSet("p", 180); l = p/r; k = r/R; var numberOfShareNotifications = 0; var maxNumberOfShareNotifications = 2; function getValueOrDefaultAndSet(variableName, defaultValue) { var value = parseInt(getQueryVariable(variableName), 10); if(isNaN(value)) { value = defaultValue; } document.getElementById(variableName).value = value; return value; } function draw() { for(i = 0; i < 800; ++i) { // This is the core spirograph algorithm. Adjusted to be in the middle of the screen. x = R * ((1-k) * Math.cos(t) + l * k * Math.cos((1-k)/k*t)) + canvas.width/2; y = R * ((1-k) * Math.sin(t) - l * k * Math.sin((1-k)/k*t)) + canvas.height/2; red = Math.round((Math.sin(t) + 1) * 128); green = Math.round((Math.sin(t+Math.PI*2/3) + 1) * 128); blue = Math.round((Math.sin(t+Math.PI*4/3) + 1) * 128); ctx.fillStyle = "rgba(" + red + ", " + green + ", " + blue + ", 0.5)"; ctx.fillRect(x, y, 1, 1); ctx.fill(); t += 0.001; }	window.requestAnimationFrame(draw); } window.requestAnimationFrame(draw); function getRandomNumberWithMax (max) { return Math.floor(Math.random() * max); } function clear() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function startRandom() { clear(); // A real spirograph must have R > r > p // we are cheating. R = getRandomNumberWithMax(600); r = getRandomNumberWithMax(600); //(R); p = getRandomNumberWithMax(600); //(r); l = p/r; k = r/R; document.getElementById("R").value = R; document.getElementById("r").value = r; document.getElementById("p").value = p; updateUrl(); console.log("R: " + R + ", r: " + r + ", p:" + p); if(++numberOfShareNotifications <= maxNumberOfShareNotifications) { setTimeout(function() { $('#shareButton').popover('show'); }, 4000); setTimeout(function() { $('#shareButton').popover('destroy'); }, 10000); } } function setValues() { clear(); R = document.getElementById("R").value; r = document.getElementById("r").value; p = document.getElementById("p").value; l = p/r; k = r/R; updateUrl(); } function updateUrl() { history.replaceState( "dummy", "dummy", "?R=" + R + "&r=" + r + "&p=" + p ); } $('#shareModal').on('show.bs.modal', function (event) { var shareUrl = "http://codepen.io/DonKarlssonSan/full/PwxMem?R=" + R + "&r=" + r + "&p=" + p; $('#shareUrl').text(shareUrl); }); function toggleAdvanced () { document.getElementById("advanced").classList.toggle("hidden"); } document.getElementById("random").addEventListener("click", startRandom); document.getElementById("setValues").addEventListener("click", setValues); document.getElementById("clear").addEventListener("click", clear); document.getElementById("advancedButton").addEventListener("click", toggleAdvanced); // This works fine on desktop but not // on iOS function resize () { if(canvas.width != window.innerWidth) {	canvas.width = window.innerWidth; } if(canvas.height != window.innerHeight) {	canvas.height = window.innerHeight; } } function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; //var debouncedResize = debounce(resize, 250); //window.addEventListener("resize", debouncedResize, false); function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } }
})();
The Rainbow Spirograph - Script Codes
The Rainbow Spirograph - Script Codes
Home Page Home
Developer Johan Karlsson
Username DonKarlssonSan
Uploaded July 26, 2022
Rating 4
Size 4,016 Kb
Views 54,648
Do you need developer help for The Rainbow Spirograph?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Johan Karlsson (DonKarlssonSan) Script Codes
Name
Circuit Board Warper
Apply Filter Effects to Music
Random Fractal
Cash by Brownian Motion
The Birth of a Sine Wave
Laser Writer
Portrait by Brownian Motion
Brownian Motion
The Rainbow Spirograph
Rainbow 6-fold Pentille
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!