{"id":22710073,"url":"https://github.com/heldercorreia/iris","last_synced_at":"2025-03-29T21:23:30.122Z","repository":{"id":265946707,"uuid":"896938304","full_name":"heldercorreia/iris","owner":"heldercorreia","description":" A mesmerizing 60fps plasma effect demo on HTML5 Canvas, featuring palette rotation and dynamic visual patterns. Customizable with built-in presets and real-time parameter adjustments.","archived":false,"fork":false,"pushed_at":"2024-12-01T17:14:46.000Z","size":5,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-04T22:16:45.402Z","etag":null,"topics":["demo","html5-canvas"],"latest_commit_sha":null,"homepage":"","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/heldercorreia.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,"publiccode":null,"codemeta":null}},"created_at":"2024-12-01T17:12:17.000Z","updated_at":"2024-12-01T21:04:41.000Z","dependencies_parsed_at":"2024-12-01T18:23:25.218Z","dependency_job_id":"b9ba4aae-f03d-4cb3-a412-63d47950a32f","html_url":"https://github.com/heldercorreia/iris","commit_stats":null,"previous_names":["heldercorreia/iris"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heldercorreia%2Firis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heldercorreia%2Firis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heldercorreia%2Firis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heldercorreia%2Firis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heldercorreia","download_url":"https://codeload.github.com/heldercorreia/iris/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246244824,"owners_count":20746531,"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":["demo","html5-canvas"],"created_at":"2024-12-10T11:13:09.233Z","updated_at":"2025-03-29T21:23:30.085Z","avatar_url":"https://github.com/heldercorreia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Iris\n\nA simple demo of a palette rotation plasma effect implemented using HTML5 Canvas\nand JavaScript. This project showcases smooth, vibrant color transitions and a\nmesmerizing visual effect.\n\n## History\n\nThis demo was first written in 2012, during the early stages of [HTML5 Canvas](https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element).\nSee this old [blog post](https://helderfoo.blogspot.com/2012/12/iris-more-html5-canvas-pixel.html)\nI wrote then for context.\n\n## Demo\n\nCheck out the [live demo](https://heldercorreia.bitbucket.io/html5/canvas/iris/index.html).\n\n![Iris Screenshot](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEyj6MRnARxlAgaK6cioz80dV4CuP6YflTU8hHftPVAYMouj6kQ5pYrVoqCF6SNmo9aaSilGzI562AKSEOak06iZuGkeFXWwUuxF5_Zuy0aeNmyHTbvFNEw6yChrSqxbD_lV8ahbsEf2R9/s320/iris.png)\n\n\n## Customization\n\nThe plasma effect demo comes with several pre-defined presets and customization\noptions, allowing you to tweak and experiment with the visuals easily. Here's\nhow you can customize the effect:\n\n### Pattern Presets\n\nThe effect includes 10 pre-defined presets, each with unique parameters that\ncontrol the visual appearance of the plasma. You can switch between these\npresets using the following keyboard keys:\n\n- `0` to `9`: Select a specific preset (e.g., press `0` for the first preset,\n`1` for the second, etc.).\n\n### Dynamic Adjustments\n\nUse these keyboard controls to modify the effect in real time:\n\n#### Plasma Parameters\n- **Amplitude / Frequency**: `W` `X` `A` `D`\n\n#### Resize Modes\n- `N`: Shrink the canvas size.\n- `M`: Grow the canvas size.\n- `F`: Resize to fit the full viewport.\n\n### Animation Control\n- `H`: Toggle animation on or off.\n\n### Angle Functions\nChange the mathematical function used for the plasma's angle calculations:\n- `S`: Use `Math.sin`.\n- `T`: Use `Math.tan`.\n- `U`: Use `Math.atan`.\n\n### Base Color Channel\nSwitch the primary color channel used in the effect:\n- `R`: Red channel.\n- `G`: Green channel.\n- `B`: Blue channel.\n\n### Randomization\nEvery 3 seconds, the effect will automatically randomize the color channel and\npattern preset, keeping the visuals fresh and dynamic. You can manually trigger\nthese randomizations via the JavaScript function `randomizeEffects()`.\n\n\nExperiment with these options to create unique and mesmerizing plasma effects!\n\n\n## FPS Display\n\nThe current frames-per-second (FPS) is displayed in the top-left corner of the\nviewport. This helps you monitor the performance of the plasma effect in real\ntime as you experiment with different presets and customizations.\n\n\n## License\n\nThis project is open-source and available under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheldercorreia%2Firis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheldercorreia%2Firis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheldercorreia%2Firis/lists"}