In the differential geometry of curves, a roulette is a kind of curve, generalizing cycloids, epicycloids, hypocycloids, trochoids, and involutes.
This p5.js sketch implements hypotrochoid and epicycloid roulettes.
| package path | |
| type SpatialHash struct { | |
| CellSize float64 | |
| Cells map[SpatialHashKey][]interface{} | |
| } | |
| type SpatialHashKey struct { | |
| X, Y int | |
| } |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style>body {padding: 0; margin: 0;}</style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js"></script> | |
| <script> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style>body {padding: 0; margin: 0; overflow: hidden;}</style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js"></script> | |
| <script src="https://www.michaelfogleman.com/static/tree-paths.js"></script> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style>body {padding: 0; margin: 0; overflow: hidden;}</style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js"></script> | |
| <script src="paths.js"></script> |
In the differential geometry of curves, a roulette is a kind of curve, generalizing cycloids, epicycloids, hypocycloids, trochoids, and involutes.
This p5.js sketch implements hypotrochoid and epicycloid roulettes.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style>body {padding: 0; margin: 0; overflow: hidden;}</style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js"></script> |
| from __future__ import division | |
| def meet(x, vi, vf, a): | |
| x1 = (2 * a * x + vi * vi - vf * vf) / (4 * a) | |
| x2 = x - x1 | |
| v = (vi * vi + 2 * a * x1) ** 0.5 | |
| t1 = (v - vi) / a | |
| t2 = (vf - v) / -a | |
| cx1 = vi * t1 + 0.5 * a * t1 * t1 | |
| cx2 = v * t2 + 0.5 * -a * t2 * t2 |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style>body {padding: 0; margin: 0; overflow: hidden;}</style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js"></script> | |
| <script src="pieces.js"></script> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style>body {padding: 0; margin: 0; overflow: hidden;}</style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js"></script> | |
| <script src="pieces.js"></script> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style>body {padding: 0; margin: 0; overflow: hidden;}</style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js"></script> | |
| <script src="pieces.js"></script> |