In Tribute to Simon Plouffe
How do I make an in tribute to simon plouffe?
Inspiration from Mathologer, "Times Tables, Mandelbrot and the Heart of Mathematics": https://www.youtube.com/watch?v=qhbuKbxJsk8. What is a in tribute to simon plouffe? How do you make a in tribute to simon plouffe? This script and codes were developed by Johan Karlsson on 26 July 2022, Tuesday.
In Tribute to Simon Plouffe - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>In Tribute to Simon Plouffe</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Here is another similar Pen with just one circle where you can tweak the parameters your self: http://codepen.io/DonKarlssonSan/pen/XmygjK
--> <script src="js/index.js"></script>
</body>
</html>
In Tribute to Simon Plouffe - Script Codes CSS Codes
body { background-color: black;
}
In Tribute to Simon Plouffe - Script Codes JS Codes
/* Johan Karlsson (DonKarlssonSan)
*/
var canvases = [];
var contexts = [];
var numberOfCanvases = 12;
for(var i = 0; i < numberOfCanvases; i++){ var canvas = document.createElement("canvas"); canvas.width = 200; canvas.height = 200; document.body.appendChild(canvas); canvases.push(canvas); var ctx = canvas.getContext("2d"); contexts.push(ctx);
}
var centerX = 100;
var centerY = 100;
var radius = 99;
var x, y;
var angle;
var numberOfPointsAlongCircle = 2;
var iteration = 0;
var maxIterations = 1500;
function drawSingleCanvas(index, table) { canvas = canvases[index]; ctx = contexts[index]; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, Math.PI*2, true); ctx.stroke(); for(var i = 1; i < numberOfPointsAlongCircle; i++) { angle = Math.PI*2/numberOfPointsAlongCircle*i; x = Math.cos(angle)*radius + centerX; y = Math.sin(angle)*radius + centerY; ctx.beginPath(); ctx.moveTo(x, y); angle = angle*table; x = Math.cos(angle)*radius + centerX; y = Math.sin(angle)*radius + centerY; ctx.lineTo(x, y); ctx.strokeStyle = "hsl(" + (100 + i) + ", 100%, 50%)"; ctx.stroke(); }
}
function drawAll() { if(iteration < maxIterations) { requestAnimationFrame(drawAll); } iteration++; for(var index = 0; index < numberOfCanvases; index++) { drawSingleCanvas(index, index+2); } numberOfPointsAlongCircle += 0.2;
}
drawAll();
Developer | Johan Karlsson |
Username | DonKarlssonSan |
Uploaded | July 26, 2022 |
Rating | 4.5 |
Size | 2,376 Kb |
Views | 54,648 |
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!
Name | Size |
Random Fractal | 2,751 Kb |
Circuit Board Warper | 4,057 Kb |
SoundCloud Music Visualizer | 4,211 Kb |
Brownian Motion | 2,549 Kb |
Phone Case Pattern Animation | 2,774 Kb |
Brownian Gnats | 2,822 Kb |
Wayward Walker Worms | 3,123 Kb |
Fireflies | 2,572 Kb |
Antenna Generator | 2,624 Kb |
Text by Brownian Motion | 3,182 Kb |
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!
Name | Username | Size |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
Super Discount | Orrinward | 3,225 Kb |
Improve | Gavra | 1,652 Kb |
Loader | MikitaLisavets | 3,321 Kb |
Border image | JohnRiordan | 2,120 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!