{"id":25321498,"url":"https://github.com/stabla/guillochejs","last_synced_at":"2025-10-29T00:31:21.326Z","repository":{"id":88226765,"uuid":"85401145","full_name":"stabla/guillocheJS","owner":"stabla","description":"〰️ Generate, animate your Hypotrochoid, Epitrochoid \u0026 Hypocycloid ","archived":false,"fork":false,"pushed_at":"2024-03-03T13:06:00.000Z","size":25,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-09T05:29:52.641Z","etag":null,"topics":["animate","animation","canvas","guilloche","javascript"],"latest_commit_sha":null,"homepage":"https://stabla.github.io/guillocheJS/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stabla.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-03-18T12:55:22.000Z","updated_at":"2024-06-12T07:30:39.000Z","dependencies_parsed_at":"2023-03-11T12:16:10.592Z","dependency_job_id":null,"html_url":"https://github.com/stabla/guillocheJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabla%2FguillocheJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabla%2FguillocheJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabla%2FguillocheJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabla%2FguillocheJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stabla","download_url":"https://codeload.github.com/stabla/guillocheJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238747864,"owners_count":19523849,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animate","animation","canvas","guilloche","javascript"],"created_at":"2025-02-13T22:54:01.287Z","updated_at":"2025-10-29T00:31:21.016Z","avatar_url":"https://github.com/stabla.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Guilloché Animator \n\nPre-notes: Feel free to contribute to the project.\n\nhttps://stabla.github.io/guillocheJS/\n\n## Install it\nDownload the guilloche-animator.js and put it in your project's folder\n```\n\u003cscript src=\"guiloche-animator.js\"\u003e\u003c/script\u003e\n```\n\nSet the values you want in guilloche-animator.js in the `figure: { ... `\n\n## How it work\n### Guilloché Animator\n\nGenerating some spirography (Hypotrochoid, Epitrochoid or Hypocycloid) and make possible animation. \n\nThe first step is to create a HTML5 canvas.\nThe second step is to draw the figure, but how exactly to draw the figure ? We have to know, what's a spirograph. At this time, the script only allow to make an Hypotrochoid, Epitrochoid or an Hypocycloid. So let's go to understand how draw a Hypotrochoid.\n\n### Hypotrochoid\n\n![hypotrochoid](https://upload.wikimedia.org/wikipedia/commons/f/fa/HypotrochoidOutThreeFifths.gif?raw=true)\n\n\nSo, this is, visually how it works. Now, lets do it by math. \n\nNot reinvent the wheel. So open your favorite search-engine and check more about \" hypotrochoid \", we immediatly falling on [Wikipedia](https://en.wikipedia.org/wiki/Hypotrochoid). \n\nThe radius of the biggest circle will be called `major`, `R` above in the equation.\n\nThe radius of the internal circle will be called `minor`, `r` above.\n\nThe point attached to the internal circle is to a distance d from the center of this same internal circle. Let's call it `radius`.\n\nOn wikipedia, we have our equation, so replace it with our notation :\n\n![hypotrochoid_equation_x](https://wikimedia.org/api/rest_v1/media/math/render/svg/8be83627a6dc32417ac02b2b19f5fe6e0fe9cc0f?raw=true)\n\n![hypotrochoid_equation_y](https://wikimedia.org/api/rest_v1/media/math/render/svg/67138f5859d844b0c0b507fe5300c313e87eccd4?raw=true)\n\n\nIn loop, we will draw it progressively, for each new incrementation, we change θ.\n\n\nSet the value you want, and you can get something like that :\n![hypotrochoid_preview](https://www.dropbox.com/s/e5naqrecg0hfw4j/hypotrochoid_preview_github.png?raw=true)\n\n\n### Epitrochoid\n\n![epitrochoid](https://upload.wikimedia.org/wikipedia/commons/2/20/EpitrochoidIn3.gif?raw=true)\n\nSame for epitrochoid, we have this equation:\n\n![epitrochoid_equation_x](https://wikimedia.org/api/rest_v1/media/math/render/svg/dda715d99f0bf446d5c5ef60e27f60a401e03dcc?raw=true)\n\n![epitrochoid_equation_y](https://wikimedia.org/api/rest_v1/media/math/render/svg/ec2c6ea0a7878b1c0d59ff413e7922327a103637?raw=true)\n\nSet the value value you want, and you can get something like that :\n![epitrochoid_preview](https://www.dropbox.com/s/n1u8oaqudhemrfu/epitrochoid_preview_github.png?raw=true)\n\n### Hypocycloid -- not done.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstabla%2Fguillochejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstabla%2Fguillochejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstabla%2Fguillochejs/lists"}