Roulette

Size
2,756 Kb
Views
30,360

How do I make an roulette?

[ #CodeVember Day 9 | Pen #12 ] Based on differential geometry of curves ( cycloids, epicycloids, hypocycloids, trochoids, and involutes ). Roulette is a type of curve. The theta value of this animation is controlled by the current time, so you don't know what you're going to get && it's constantly changing. Here's a gif taken at 5:20pm EST: . What is a roulette? How do you make a roulette? This script and codes were developed by Tiffany Rayside on 19 November 2022, Saturday.

Roulette Previews

Roulette - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Roulette</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 id="canv"></canvas>
<!--
*NOTE: The theta value is controlled by the current time, so you don't know what you're going to get && it's constantly changing. At times it may just draw some stupid circles...if so, consider coming back in a few mins ;)
You can check out the pics in the details panel to see some of the designs it runs through.
Roulette:
Based on differential geometry of curves (cycloids, epicycloids, hypocycloids, trochoids, and involutes ).
Roulette is a type of curve.
!--> <script src="js/index.js"></script>
</body>
</html>

Roulette - Script Codes CSS Codes

body{ width:100%; overflow:hidden; margin:0;
}
button{ top:0; left:0; position:absolute;
}

Roulette - Script Codes JS Codes

var c = document.getElementById("canv");
var $ = c.getContext("2d");
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var _w = w/2;
var _h = h/2;
var rc = 10000;
var rm = 9800;
var rd = 150;
draw();
function draw(){ $.fillStyle = 'hsla(0, 0%, 95%,0.8)'; $.fillRect(0, 0, w, h); $.globalCompositeOperation = "source-over"; var t = (new Date().getTime()) / 750; var delta = (t / 2000) % 10; t += Math.PI*2;	var Pt = calc(t);	$.beginPath();	$.moveTo(Pt.x + _w, Pt.y + _h);	for (var i = 0; i < 400; i++) {	Pt = calc(t);	t += delta;	$.lineTo(Pt.x + _w, Pt.y + _h);	} $.lineWidth = 0.7; $.strokeStyle = 'hsla(0,0%,10%,1)';	$.stroke();	window.requestAnimationFrame(draw);
}
function calc(t) {	var Px = (rc - rm) * Math.cos(t) + rd * Math.cos((rc - rm) / rm * t);	var Py = (rc - rm) * Math.sin(t) - rd * Math.sin((rc - rm) / rm * t);	return {x:Px, y:Py};
}
window.addEventListener('resize', function(){ c.width = w = window.innerWidth; c.height = h = window.innerHeight;
}, false);
Roulette - Script Codes
Roulette - Script Codes
Home Page Home
Developer Tiffany Rayside
Username tmrDevelops
Uploaded November 19, 2022
Rating 4.5
Size 2,756 Kb
Views 30,360
Do you need developer help for Roulette?

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!

Tiffany Rayside (tmrDevelops) Script Codes
Name
Fractal Cell
GOOey
Breakout
Super Mega
LED Marquee
Legions
Imperfect Buttons
3D Pyramid
The Net
Topiary
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!