Times Table on Circle

Developer
Yukulélé
Size
4,525 Kb
Views
32,384
  1. Times Table on Circle Previews
  2. Times Table on Circle HTML Codes
  3. Times Table on Circle CSS Codes
  4. Times Table on Circle JS Codes

How do I make an times table on circle?

Https://www.youtube.com/watch?v=-X49VQgi86E. What is a times table on circle? How do you make a times table on circle? This script and codes were developed by Yukulélé on 26 August 2022, Friday.

Times Table on Circle Previews
IQ Test

Times Table on Circle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Times Table on Circle</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> <div class="ctrl"> <div><input type="range" name="mul" min="0" max="100" step="1" value="2"/> mul = <span>2</span></div> <div><input type="range" name="mod" min="0" max="1000" step="1" value="30"/> mod = <span>30</span></div> <div><label><input type="checkbox" name="color"/> color</label></div> <div><label><input type="checkbox" name="number"/> number</label></div>
</div>
<div class="step"> <input type="range" name="step" min="0" max="5" step="1" value="0" /> step = <span>1</span>
</div> <script src='js/ejmqbm.js'></script> <script src="js/index.js"></script>
</body>
</html>

Times Table on Circle - Script Codes CSS Codes

body
html padding 0 margin 0 background black overflow hidden color #fff
canvas vertical-align top
.ctrl position absolute width 100% input vertical-align top &[type=range] width calc(100% - 150px)
.step position absolute bottom 0 left 0

Times Table on Circle - Script Codes JS Codes

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const ctrl = { mul: 2, mod: 30
}
let win
let middle
function draw() { ctx.globalCompositeOperation = "source-over" ctx.fillStyle = '#000' ctx.fillRect(0, 0, win.x, win.y) ctx.globalCompositeOperation = "screen" const radius = Math.min(middle.x, middle.y) * 0.8 ctx.beginPath() ctx.fillStyle = ctx.strokeStyle = '#fff' circle(middle.x, middle.y, radius) ctx.stroke() ctx.font = "10px sans serif" ctx.textAlign = "center" ctx.textBaseline = "middle" for (let i = 0; i < ctrl.mod; i++) { ctx.beginPath() let ang = i / ctrl.mod let hue = ang * 360 ang *= 2 * Math.PI if (ctrl.color) ctx.fillStyle = ctx.strokeStyle = `hsl(${hue},100%,50%` const a = middle.add(Vector.polar(radius, ang - Math.PI / 2)) const b = middle.add(Vector.polar(radius, ang * ctrl.mul - Math.PI / 2)) if (ctrl.number) { const t = middle.add(Vector.polar(radius + 10, ang - Math.PI / 2)) ctx.fillText(i, ...t.arr()) } ctx.moveTo(...a.arr()) ctx.lineTo(...b.arr()) ctx.stroke() }
}
function circle(x, y, radius) { ctx.arc(x, y, radius, 0, 2 * Math.PI)
}
function resize() { win = new Vector(canvas.width = window.innerWidth, canvas.height = window.innerHeight) middle = win.div(2) draw()
}
window.addEventListener('resize', () => { resize()
})
resize()
document.querySelector(".ctrl").addEventListener("input", (e) => { const t = e.target if (t.type !== 'range') return t.nextElementSibling.innerHTML = ctrl[t.name] = +t.value draw()
})
document.querySelector(".ctrl").addEventListener("change", (e) => { const t = e.target if (t.type !== 'checkbox') return ctrl[t.name] = t.checked draw()
})
document.querySelector(".step").addEventListener("input", (e) => { const t = e.target const v = Math.pow(2, +t.value) t.nextElementSibling.innerHTML = v == 1 ? 1 : '1/' + v Array.prototype.forEach.call(document.querySelectorAll(".ctrl input"), elm => elm.step = 1 / v) draw()
})
document.body.appendChild(canvas)
Times Table on Circle - Script Codes
Times Table on Circle - Script Codes
Home Page Home
Developer Yukulélé
Username yukulele
Uploaded August 26, 2022
Rating 4
Size 4,525 Kb
Views 32,384
Do you need developer help for Times Table on Circle?

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!

Yukulélé (yukulele) Script Codes
Name
Pure CSS Star Wars opening crawl
Table reverse
Shepard Piano
Musical scale visualisation
Perlin noise animation
Nested divs animated by CSS
CSS torus animation
CSS Vortex
Pure css responsive Shadow of the Beast
Acid swiming pool
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!