Dragon curve

Developer
Pimskie
Size
2,662 Kb
Views
76,912
  1. Dragon curve Previews
  2. Dragon curve HTML Codes
  3. Dragon curve CSS Codes
  4. Dragon curve JS Codes

How do I make an dragon curve?

Dragon curve fractal. What is a dragon curve? How do you make a dragon curve? This script and codes were developed by Pimskie on 13 June 2022, Monday.

Dragon curve Previews
IQ Test

Dragon curve - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dragon curve</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas class="canvas canvas-dragon"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dragon curve - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background: #000;
}

Dragon curve - Script Codes JS Codes

const SEGMENT_WIDTH = 5;
const ctx = document.querySelector('canvas').getContext('2d');
const drawSet = (path, x, y, segmentAngle) => {	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);	let angle = 0;	ctx.beginPath();	ctx.lineWidth = 1;	ctx.strokeStyle = '#ff0000';	ctx.moveTo(x, y);	path.forEach((turn) => {	x -= Math.cos(angle) * SEGMENT_WIDTH;	y += Math.sin(angle) * SEGMENT_WIDTH;	ctx.lineTo(x, y);	angle += segmentAngle * turn;	});	ctx.stroke();	ctx.closePath();
}
const getPath = (currentPath, currentDepth, maxDepth) => {	/*	each iteration is formed by taking the previous iteration,	adding an R at the end (1), and then taking the original iteration again (2), flipping it retrograde (3),	swapping each letter (4) adding the result after the R.	https://en.wikipedia.org/wiki/Dragon_curve#.5BUn.5DFolding_the_Dragon	*/	currentPath = currentPath // (1) adding an R at the end .concat([-1].concat( // (2) taking the original iteration again currentPath .slice() // (3) flipping it retrograde .reverse() // (4) swapping each letter .map((turn) => turn * -1)	));	return currentPath;
}
let tween;
const reset = () => {	ctx.canvas.width = window.innerWidth;	ctx.canvas.height = window.innerHeight;	let path = [];	let depth = 12;	while (depth--) {	path = getPath(path);	}	const anim = {	angle: -Math.PI * 0.5	};	TweenMax.killAll();	tween = TweenMax.to(anim, 5, {	angle: Math.PI * 0.5,	yoyo: true,	repeat: -1,	repeatDelay: 2,	ease: Sine.easeInOut,	onUpdate: () => {	drawSet(	path,	window.innerWidth >> 1,	window.innerHeight >> 1,	anim.angle	);	}	});
}
window.addEventListener('resize', reset);
reset();
Dragon curve - Script Codes
Dragon curve - Script Codes
Home Page Home
Developer Pimskie
Username pimskie
Uploaded June 13, 2022
Rating 4
Size 2,662 Kb
Views 76,912
Do you need developer help for Dragon curve?

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!

Pimskie (pimskie) Script Codes
Name
Rainbow particles
Particles Clifford attractor
Duplicate geometry
Aizawa Attractor
Circles pattern
Tree mirror
A Pen by pimskie
A Pen by pimskie
Glitching image - USA style
Exploding hamburger - and more
Create amazing video scripts 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!