Fractal Spirograph
How do I make an fractal spirograph?
What is a fractal spirograph? How do you make a fractal spirograph? This script and codes were developed by Anwesh Mishra on 08 January 2023, Sunday.
Fractal Spirograph - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fractal Spirograph</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="c1" width="500px" height="500px">
</canvas> <script src="js/index.js"></script>
</body>
</html>
Fractal Spirograph - Script Codes CSS Codes
#c1{ border:1px solid black;
}
Fractal Spirograph - Script Codes JS Codes
var canvas = document.getElementById('c1')
var context = canvas.getContext('2d')
var speed = 1,k = 5
var startRadius = 100,startX = 100,startY = 100
var circles = []
var spiroPathX = [],spiroPathY = []
var setDimensions = ()=>{ canvas.width = window.innerWidth/2 canvas.height = window.innerHeight startX = canvas.width/2 startY = canvas.height/2 startRadius = Math.min(canvas.width,canvas.height)/4 context = canvas.getContext('2d')
}
window.onresize = ()=>{ setDimensions()
}
class Circle { constructor(x,y,r,speed) { this.x = x this.y = y this.deg = 0 this.r = r this.speed = speed this.mDeg = 0 } setNeighbor(circle) { this.neighbor = circle } setMidPoint(x,y,mDeg) { this.mx = x this.my = y this.mDeg = mDeg } draw() { context.strokeStyle = 'green' context.save() context.translate(this.x,this.y) context.rotate(this.deg*Math.PI/180) context.beginPath() context.arc(0,0,this.r,0,2*Math.PI) context.stroke() if(this.neighbor!=undefined) { this.neighbor.draw() } context.restore() } updateMidPointOfNeighbor() { var neighbor = this.neighbor if(neighbor!=undefined) { if(neighbor.neighbor!=undefined) { neighbor.setMidPoint(this.mx+(neighbor.r+this.r)*Math.cos((this.mDeg+this.deg-90)*Math.PI/180),this.my+(neighbor.r+this.r)*Math.sin((this.mDeg+this.deg-90)*Math.PI/180),this.mDeg+this.deg) } else { neighbor.setMidPoint(this.mx+(2*neighbor.r+this.r)*Math.cos((this.mDeg+this.deg-90)*Math.PI/180),this.my+(2*neighbor.r+this.r)*Math.sin((this.mDeg+this.deg-90)*Math.PI/180),this.mDeg+this.deg) } } } rotate() { this.deg += this.speed }
}
var initCircles = ()=>{ for(var i=0;i<10;i++) { var dir = i%2==0 ?-1:1 circles.push(new Circle(startX,startY,startRadius,speed*dir)) startX = 0 startY = -startRadius startRadius/=(7/2) startY -=startRadius speed*=k } circles[0].setMidPoint(canvas.width/2,canvas.height/2,0) for(var i=9;i>=1 ;i--) { circles[i-1].setNeighbor(circles[i]) } updateSpiroPath()
}
var updateSpiroPath = ()=>{ circles.forEach((circle)=>{ circle.updateMidPointOfNeighbor() }) if(circles.length>2) { var circle = circles[circles.length-1] spiroPathX.push(circle.mx) spiroPathY.push(circle.my) }
}
setDimensions()
initCircles()
var render = ()=>{ context.clearRect(0,0,canvas.width,canvas.height) context.lineCap="round" if(circles.length>0) { circles[0].draw() pathX = circles[0] } circles.forEach((circle)=>{ circle.rotate() }) updateSpiroPath() context.strokeStyle="red" context.beginPath() for(var i=0;i<spiroPathX.length;i++) { var x = spiroPathX[i],y = spiroPathY[i] if(i == 0) { context.moveTo(x,y) } else { context.lineTo(x,y) } } context.stroke() if(circles.length>0 && Math.abs(circles[0].deg)>=360) { console.log("clear") clearInterval(interval) }
}
var interval = setInterval(render,30)
Developer | Anwesh Mishra |
Username | Anwesh43 |
Uploaded | January 08, 2023 |
Rating | 3 |
Size | 2,501 Kb |
Views | 12,144 |
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 |
SettingButton | 2,255 Kb |
MovingBall | 2,105 Kb |
A Pen by Anwesh Mishra | 1,524 Kb |
SeeSaw | 2,195 Kb |
Html5CanvasPingPong | 2,033 Kb |
TumblingPins | 2,187 Kb |
Jumping Triangles | 2,350 Kb |
EllipticalSwitch | 2,077 Kb |
Clapperboard | 2,540 Kb |
Material Boxes Animation | 2,257 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 |
Scroll to top button | DominicFrancois | 3,743 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Transition | Shayhowe | 1,632 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Tree growth tests | Orchard | 3,818 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
Improve | Gavra | 1,652 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!