Spirograph

Developer
Endre Simo
Size
2,519 Kb
Views
6,072
  1. Spirograph Previews
  2. Spirograph HTML Codes
  3. Spirograph CSS Codes
  4. Spirograph JS Codes

How do I make an spirograph?

What is a spirograph? How do you make a spirograph? This script and codes were developed by Endre Simo on 28 November 2022, Monday.

Spirograph Previews
IQ Test

Spirograph - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spirograph</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Spirograph - Script Codes CSS Codes

body { margin:0; background: -webkit-radial-gradient(rgb(22, 42, 60), rgb(6, 20, 34)); background: radial-gradient(rgb(22, 42, 60), rgb(6, 20, 34));
}

Spirograph - Script Codes JS Codes

// https://en.wikipedia.org/wiki/Hypotrochoid
var frames = 0;
var delta = 0;
function spirograph(R, r, d, theta) { var x = (R - r) * cos(theta) + d * cos(0.5 * delta + (R - r) / r * theta); var y = (R - r) * sin(theta) - d * sin(0.5 * delta + (R - r) / r * theta); return createVector(x, y);
}
function gcf(n, d) { var gcd = function gcd(a, b) { return b ? gcd(b, a % b) : a; }; gcd = gcd(n, d); return d / gcd;
}
var GUI = function() { this.R = 19; this.r = 10; this.d = 18; this.rotation = 0; this.dimension = 1;
};
var controls = new GUI();
function setup() { var gui = new dat.GUI({width: 300}); gui.add(controls, 'R', 1, 32).step(1); gui.add(controls, 'r', 1, 32).step(1); gui.add(controls, 'd', 1, 32); gui.add(controls, 'dimension', 1, 4).step(0.1); gui.add(controls, 'rotation', 0, 360); createCanvas(windowWidth, windowHeight);
}
function windowResized() { resizeCanvas(windowWidth, windowHeight);
}
function hexToRgb(hex, opacity) { if (hex.indexOf('rgb') !== -1) { return hex; } hex = hex.replace('#',''); r = parseInt(hex.substring(0,2), 16); g = parseInt(hex.substring(2,4), 16); b = parseInt(hex.substring(4,6), 16); result = 'rgb('+r+','+g+','+b+')'; return result;
}
function createSpiro(R, r, d, N, dim, color) { var lo = createVector(0, 0); var hi = createVector(0, 0); for (var i = 0; i < 360 * N; i++) { var v = spirograph(R, r, d, radians(i)); lo.x = min(lo.x, v.x); lo.y = min(lo.y, v.y); hi.x = max(hi.x, v.x); hi.y = max(hi.y, v.y); } var w = hi.x - lo.x; var h = hi.y - lo.y; var sx = (width * 0.75) / w; var sy = (height * 0.75) / h; var s = min(sx, sy) * dim; stroke(hexToRgb(color)); strokeWeight(2); strokeJoin(ROUND); beginShape(); for (var i = 0; i < 360 * N; i++) { var v = spirograph(R, r, d, radians(i)); vertex(v.x * s, v.y * s); } endShape(CLOSE);
}
function draw() { clear(); var R = controls.R; var r = controls.r; var d = controls.d; var N = gcf(R, r); var dim = controls.dimension; frames++; delta = frames / 50; translate(width / 2, height / 2); rotate(radians(controls.rotation)); createSpiro(R, r, d, N, dim, "rgb(100,100,200)"); rotate(radians(controls.rotation+10)); createSpiro(R, r, d, N, dim, "#ff0000"); background('rgba(0,0,0,0)'); noFill();
}
draw();
Spirograph - Script Codes
Spirograph - Script Codes
Home Page Home
Developer Endre Simo
Username esimov
Uploaded November 28, 2022
Rating 4
Size 2,519 Kb
Views 6,072
Do you need developer help for 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!

Endre Simo (esimov) Script Codes
Name
DeJong attractor
Minecraft map generator
Flipping Clock
Landscape
404 canvas page
Worley noise cellular pattern
Perlin metaball
Perlin Noise based Minecraft Tunnel
Fractal Tree
Navier Stoke Fluid Simulation
Create amazing blog posts 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!