https://github.com/fingerpich/sinus-studio

Draws and animates a 3D spirograph-like curves.
https://github.com/fingerpich/sinus-studio

animate drawing react redux rxjs6 spirograph webgl

Last synced: about 1 year ago
JSON representation

Draws and animates a 3D spirograph-like curves.

• Host: GitHub
• URL: https://github.com/fingerpich/sinus-studio
• Owner: fingerpich
• Created: 2017-01-18T08:06:35.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-07-06T11:13:04.000Z (almost 4 years ago)
• Last Synced: 2025-03-27T23:41:53.086Z (about 1 year ago)
• Topics: animate, drawing, react, redux, rxjs6, spirograph, webgl
• Language: JavaScript
• Homepage: https://fingerpich.github.io/sinus-studio/
• Size: 18.9 MB
• Stars: 25
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Sinus Studio

Draws and animates a 3d spirograph-like curves using webGL.

## Examples

Click on the following examples so you would see lines animations and if you changed the parameters you would have another animation.

[](https://fingerpich.github.io/sinus-studio/?EEEE0V3V8V1ZVE1V28V8V0ZZVEZVEZZVE0V0V1V20V20V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V20V2V1ZVE791V6V10V1ZVE249V1V10V0ZZVEZVEZZVE0V0V1V360V360V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V20V2V0ZVE0V6V10V1ZVE1520V1V10V0ZZVEE614V5V10V0ZZVEZZVE0V0V1V360V360V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V3V7V0ZVE2484V73V2V0ZVE1223V19V16V1ZZVEZVEZZVE0V0V1V360V360V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V2V7V0ZVE0V212V24V1ZZVEZVEZZVE0V0V1V320V320V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V91V10V0ZVE0V120V7V1ZZVEZVEZZVE0V1V1V360V360V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V91V10V0ZVE0V120V7V1ZZVEZVEZZVE0V0V1V273V364V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V90V3V0ZVE61405V1V5V0ZVE0V91V8V1ZZVEZVEZZVE0V0V1V360V360V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V91V3V0ZVE0V7V7V1ZZVEZVEZZVE0V0V1V360V360V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V3V16V0ZVE0V165V3V1ZZVEZVEZZVE0V0V1V320V320V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V1V16V0ZVE90V171V3V0ZZVEZVEZZVE0V0V1V136V320V1ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V11V10V0ZZVEE2190V6V10V0ZZVEE0V5V10V1ZZZVE0V0V1V194V360V1ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V11V10V0ZVE0V40V10V1ZZVEZVEZZVE0V0V1V360V360V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V47V10V1ZVE3599V187V2V0ZVE3604V1V7V0ZZVEZVEZZVE0V0V1V74V3600V1ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE706V10V13V0ZVE3850V206V1V0ZVE0V21V10V1ZZVEZVEZZVE0V0V1V320V320V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE372V84V6V0ZVE0V7V3V1ZVE1472V14V18V0ZZVEZVEZZVE0V0V1V360V360V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE1419V105V10V0ZVE0V157V7V1ZZVEZVEZZVE0V0V1V327V419V1ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V91V4V1ZVE64939V20V10V0ZVE0V11V2V1ZZVEZVEZZVE0V0V1V3600V3600V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE98V1V13V0ZVE0V148V12V1ZZVEZVEZZVE0V0V1V1000V900V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE5490V47V18V0ZVE0V179V3V1ZVE0V94V13V1ZZVEZVEZZVE0V0V1V186V320V1ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V1V19V0ZVE0V173V3V1ZZVEE145V5V6V0ZVE0V2V5V1ZZVEZZVE0V0V1V320V320V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE440V89V3V0ZVE61480V2V5V0ZVE0V92V8V1ZZVEZVEZZVE0V0V1V60V360V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE5441V14V16V0ZVE0V168V3V1ZVE0V91V13V1ZZVEZVEZZVE0V0V1V320V320V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE5441V14V16V0ZVE0V168V3V1ZVE0V97V13V1ZZVEZVEZZVE0V0V1V320V320V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE831V89V3V0ZVE67558V87V5V0ZVE0V93V7V1ZZVEZVEZZVE0V0V1V360V360V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE1750V186V10V0ZVE2820V188V6V0ZVE90V182V10V0ZZVEZVEZZVE0V0V1V270V5001V1ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE6425V26V9V0ZVE0V31V8V1ZZVEZVEZZVE0V0V1V20V20V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE5482V19V8V0ZVE0V19V8V1ZZVEE0V16V6V1ZVE4872V19V6V0ZZVEE0V16V5V1ZVE4555V19V6V0ZZZVE0V0V0V3601V3601V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE5441V171V16V0ZVE0V168V3V1ZVE0V91V13V1ZZVEZVEZZVE0V0V1V320V320V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE4910V177V10V0ZZVEE0V90V10V1ZZVEE0V89V10V1ZZZVE0V1V1V5000V5000V0ZZ)[](https://fingerpich.github.io/sinus-studio/?EEEE5298V177V10V0ZZVEE0V178V10V1ZZVEE0V148V10V1ZZZVE0V1V1V419V5000V1ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE0V15V7V1ZVE0V61V2V1ZZVEE2120V135V10V0ZVE0V45V10V1ZZVEE0V45V10V1ZVE90V90V10V0ZVE90V75V10V0ZZZVE0V1V1V3600V3600V0ZZ)

[](https://fingerpich.github.io/sinus-studio/?EEEE5992V79V18V0ZVE0V198V3V1ZVE0V118V13V1ZZVEZVEZZVE0V0V1V3200V3200V0ZZ)

## Introduction

A [Hypotrochoid](http://mathworld.wolfram.com/Hypotrochoid.html) is a 

[roulette](http://mathworld.wolfram.com/Roulette.html) traced by a point

 attached to a circle rolling around the inside of an another fixed circle.

The idea is using infinite number of roulette rolling around another 

roulette circle in a 3d space and each can be controlled.