{"id":18937012,"url":"https://github.com/qc20/circlecircleinteraction","last_synced_at":"2026-05-05T21:31:04.045Z","repository":{"id":246839760,"uuid":"822326031","full_name":"QC20/CircleCircleInteraction","owner":"QC20","description":"This project showcases an interactive animation of moving circles using HTML5 Canvas and JavaScript. The animation features multiple circles that move around the screen, bounce off the edges, and display intersection points when they overlap.","archived":false,"fork":false,"pushed_at":"2024-07-03T14:43:04.000Z","size":118,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-25T07:40:47.978Z","etag":null,"topics":["creative-coding","css","html","human-computer-interaction","interaction-design","javascript","website"],"latest_commit_sha":null,"homepage":"https://qc20.github.io/CircleCircleInteraction/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QC20.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-06-30T23:16:34.000Z","updated_at":"2024-07-03T14:43:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"bd2ec8f4-27a6-45cc-a6d0-5b6524072d9a","html_url":"https://github.com/QC20/CircleCircleInteraction","commit_stats":null,"previous_names":["qc20/circlecircleinteraction"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/QC20/CircleCircleInteraction","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FCircleCircleInteraction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FCircleCircleInteraction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FCircleCircleInteraction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FCircleCircleInteraction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QC20","download_url":"https://codeload.github.com/QC20/CircleCircleInteraction/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FCircleCircleInteraction/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32669302,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["creative-coding","css","html","human-computer-interaction","interaction-design","javascript","website"],"created_at":"2024-11-08T12:09:33.488Z","updated_at":"2026-05-05T21:31:04.028Z","avatar_url":"https://github.com/QC20.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CircleCircleInteraction - Interactive Circle Animation\n\nThis project showcases an interactive animation of moving circles using HTML5 Canvas and JavaScript. The animation features multiple circles that move around the screen, bounce off the edges, and display intersection points when they overlap.\n\n## Features\n\n- Dynamic circle generation with random sizes and velocities\n- Smooth animation using requestAnimationFrame\n- Edge detection and bouncing behavior\n- Intersection point calculation and visualization\n- Responsive design that adapts to window resizing\n\n## Technologies Used\n\n- HTML5\n- CSS3\n- JavaScript (ES6+)\n- Canvas API\n\n## How It Works\n\nThe main components of this project are:\n\n1. `index.html`: Sets up the basic structure and includes necessary scripts and styles.\n2. `styles.css`: Provides styling for the full-screen canvas.\n3. `sketch.js`: Contains the core logic for circle creation, movement, and intersection detection.\n\nThe animation creates a set number of circles with random properties (size, position, velocity). Each frame, it updates the positions of the circles, checks for collisions with the canvas edges, and calculates intersection points between overlapping circles.\n\n## Getting Started\n\nTo run this project locally:\n\n1. Clone the repository\n2. Open `index.html` in a modern web browser\n\n## Customization\n\nYou can easily customize the animation by modifying the following variables in `sketch.js`:\n\n- `circlesNum`: Change the number of circles in the animation\n- `Circle()`: Adjust the min/max values for circle radius and velocity\n\n## Contributing\n\nContributions, issues, and feature requests are welcome. Feel free to check [issues page](link-to-your-issues-page) if you want to contribute.\n\n## License\n\nThis project is open source and available under the [MIT License](link-to-license).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqc20%2Fcirclecircleinteraction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqc20%2Fcirclecircleinteraction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqc20%2Fcirclecircleinteraction/lists"}