Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kfahn22/torus_knots

This repository contains a collection of P5 sketches that render torus knots with a shader
https://github.com/kfahn22/torus_knots

Last synced: 20 days ago
JSON representation

This repository contains a collection of P5 sketches that render torus knots with a shader

Host: GitHub
URL: https://github.com/kfahn22/torus_knots
Owner: kfahn22
License: cc0-1.0
Created: 2022-12-02T16:13:10.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-01-01T12:42:54.000Z (about 2 years ago)
Last Synced: 2023-03-04T04:50:38.086Z (almost 2 years ago)
Language: JavaScript
Size: 60.5 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # 3D Knots

This repository contains a collection of P5 sketches that render torus knots, which you can think of as a string wrapped around a donut.  More formally:

>A (p,q)-torus knot is obtained by looping a string through the hole of a torus p times with q revolutions before joining its ends. [Wolfram MathWorld](https://mathworld.wolfram.com/TorusKnot.html)

My journey with rendering knots started with Daniel Shiffman's [3D knot coding challenge](https://thecodingtrain.com/challenges/https://thecodingtrain.com/challenges/87-3d-knots).  He renders a knot using the following code, incrementing beta each time through the draw loop.

`let r = 100 * (0.8 + 1.2 * sin(6.0 * beta));`  

`let theta = 2 * beta;`  

`let phi = 0.6 * PI * sin(12 * beta);`  

`let x = r * cos(phi) * cos(theta);`    

`let y = r * cos(phi) * sin(theta);`  

`let z = r * sin(phi);`



I have used Daniel's code, but I have replaced the code to calculate the cartesian coordinates. Equations from Lee Stemkoski at [Parameterized Knots](https://home.adelphi.edu/~stemkoski/knotgallery/). 

`let phi = p * beta;`  

`let theta = q * beta;`  

`x = r * cos(theta) * (sc + cos(phi));`  

`y = r * sin(theta) * (sc + cos(phi));`  

`z = r * sin(phi);`

Example: (8,9) torus knot 



- [Live Version](https://kfahn22.github.io/torus_knots/)

- [Animated torus knot](https://editor.p5js.org/kfahn/sketches/gKqXNfljn)  

- [Code](https://github.com/kfahn22/torus_knots/tree/main/torusKnot)

Here I have rendered three different torus knots with different radii.

![](GIFS/torus_ball.gif)

- [Code](https://github.com/kfahn22/torus_knots/tree/main/p5%20sketches/triple_torus_knot)

- [P5 sketch](https://editor.p5js.org/kfahn/sketches/IpjfsH0X9)

## Knotty and Nice Animation

In this version, I am rendering multiple tori at the same time and using Dave Pagurek's FrameBuffer library to 

add blur. Thanks to Daniel Shiffman for his [short](https://www.youtube.com/shorts/CEnfKhs6wLg) showing how to render a perfect GIF loop using the new p5.js saveGif() function.

![](GIFS/GIF_blue.gif)

- [Code](https://github.com/kfahn22/torus_knots/tree/main/p5%20sketches/knotty_and_nice_blue)

- [P5 sketch](https://editor.p5js.org/kfahn/sketches/yq8kvMGcU)

## 2D Mathematical Rose

If `z = -sin(phi)` is used instead of `z = r * sin(phi);`, you get a 2D curve.  If the parameter c

= 0, you get a mathematical rose. 

`let k = n / d;`  

`let r = 70 * (c + cos(k * theta));`  

`let x = r * cos(theta);`  

`let y = r * sin(theta);`  

I am not sure what the official name for this is, but I am calling it a polar donut. Rendered with  

n = 7, d = 2, c = 1.25



- [Polar Donut](https://editor.p5js.org/kfahn/sketches/ycprY17Yf)

- [Mathematical Rose Coding Challenge](https://thecodingtrain.com/challenges/55-mathematical-rose-patterns)

## Torus Knots Rendered with a shader

I have also rendered the torus knot with a shader in P5.js. The Art of Code's YouTube tutorial [Torus Knots explained!](https://www.youtube.com/watch?v=2dzJZx0yngg) was very helpful in explaining how to render a torus knot in shadertoy, which I ported to P5.js.  I have three different versions, which are sequentially loaded in the p5 sketch.

In this torus knot, we are rotating a square instead of a circle which is how we obtain a ribbon effect.

Solomon's Seal / Cinquefoil torus knot (5,2)



(3,1) torus knot



(7,2) torus knot



- [Code](https://github.com/kfahn22/torus_knots/tree/main/torus_knot)

- [P5 sketch](https://editor.p5js.org/kfahn/sketches/y3-Ck-kch)