{"id":26270703,"url":"https://github.com/yllvar/interactive-bubble","last_synced_at":"2025-08-08T13:24:12.971Z","repository":{"id":278529271,"uuid":"935916629","full_name":"yllvar/Interactive-Bubble","owner":"yllvar","description":"A 3D Web Animation Effect Using paper.js ","archived":false,"fork":false,"pushed_at":"2025-02-20T08:41:17.000Z","size":64,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-20T09:34:28.228Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/yllvar.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":"2025-02-20T08:24:51.000Z","updated_at":"2025-02-20T08:41:21.000Z","dependencies_parsed_at":"2025-02-20T09:44:32.453Z","dependency_job_id":null,"html_url":"https://github.com/yllvar/Interactive-Bubble","commit_stats":null,"previous_names":["yllvar/interactive-bubble"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yllvar%2FInteractive-Bubble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yllvar%2FInteractive-Bubble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yllvar%2FInteractive-Bubble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yllvar%2FInteractive-Bubble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yllvar","download_url":"https://codeload.github.com/yllvar/Interactive-Bubble/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243532548,"owners_count":20306157,"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":[],"created_at":"2025-03-14T06:16:54.644Z","updated_at":"2025-03-14T06:16:55.181Z","avatar_url":"https://github.com/yllvar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"600\" alt=\"Screenshot 2025-02-20 at 16 34 41\" src=\"https://github.com/user-attachments/assets/5c09ffdf-7ad5-4cbe-94cc-309e2b7b91cb\" /\u003e\n\n# Interactive 3D Bubble Blob\n\n### A Digital Playground for Interactive Organic Shapes\n\nThis project creates lively, interactive digital organisms that react to each other and respond to cursor movement. Imagine a virtual lava lamp meets a bouncy castle—only with code! 😂\n\n## 🎯 Core Mechanics\n\n### 🫧 Blob Physics\nEach blob behaves like a soft, elastic entity that:\n- Stretches and squishes on impact 💫\n- Maintains its overall volume 🎈\n- Glows with inner energy ✨\n\n### 🎨 Visual Effects\n- **Smooth organic motion** using control points.\n- **Vibrant, ever-changing colors** with dynamic blending.\n- **Soft glow effect** for a mesmerizing look.\n\n### 🖱️ Interactivity\n- Blobs react to cursor movement.\n- They collide and bounce off each other naturally.\n- They attract and repel based on proximity.\n\n## 🧬 The Anatomy of a Blob\n\nEach blob is structured as follows:\n\n```typescript\nclass Ball {\n  radius: number        // Blob size\n  point: Paper.Point    // Position in space\n  vector: Paper.Point   // Movement direction\n  numSegment: number    // Smoothness of shape\n  boundOffset: number[] // Deformation limits\n  path: Paper.Path      // Visual representation\n}\n```\n\n## 🎭 The Art of Blob Design\n\n### 🌿 Organic Shape\nBlobs are generated with multiple control points for natural, fluid movement:\n\n```typescript\nfor (let i = 0; i \u003c this.numSegment; i++) {\n  this.sidePoints.push(\n    new Paper.Point({\n      angle: (360 / this.numSegment) * i,\n      length: 1\n    })\n  )\n}\n```\n\n### 🎨 Living Colors\nEach blob gets a unique hue, creating a vibrant effect:\n\n```typescript\nthis.path = new Paper.Path({\n  fillColor: {\n    hue: Math.random() * 360, // Random color\n    saturation: 1,            // Full saturation\n    brightness: 1             // High brightness\n  },\n  blendMode: 'lighter'       // Creates glowing effect\n})\n```\n\n## 🎪 The Physics of Motion\n\n### 🏃 Basic Movement\nBlobs move naturally within the space:\n\n```typescript\niterate() {\n  this.checkBorders()\n  \n  if (this.vector.length \u003e this.maxVec)\n    this.vector.length = this.maxVec\n    \n  this.point = this.point.add(this.vector)\n}\n```\n\n### 🤝 Collision Handling\nBlobs react to each other's presence with soft bouncing physics:\n\n```typescript\nreact(b: Ball) {\n  const dist = this.point.getDistance(b.point)\n  if (dist \u003c this.radius + b.radius \u0026\u0026 dist !== 0) {\n    const overlap = this.radius + b.radius - dist\n    const direc = this.point.subtract(b.point)\n                           .normalize(overlap * 0.015)\n    this.vector = this.vector.add(direc)\n    b.vector = b.vector.subtract(direc)\n  }\n}\n```\n\n## 🎮 Interactive Features\n\n### 🖱️ Mouse Interaction\nBlobs are attracted to the cursor, creating a playful interaction:\n\n```typescript\nattractToPoint(point: Paper.Point, force: number) {\n  const direction = point.subtract(this.point)\n  const distance = direction.length\n  \n  if (distance \u003c 200) {\n    const strength = (200 - distance) / 200 * force\n    this.vector = this.vector.add(\n      direction.normalize(strength)\n    )\n  }\n}\n```\n\n## 🎬 Animation Loop\n\nThe continuous animation loop keeps everything in motion:\n\n```typescript\nPaper.view.onFrame = () =\u003e {\n  for (let i = 0; i \u003c balls.length - 1; i++) {\n    for (let j = i + 1; j \u003c balls.length; j++) {\n      balls[i].react(balls[j])\n    }\n  }\n}\n```\n\n## 🚀 Get Started\n\n### 1️⃣ Install Dependencies\nEnsure you have Paper.js included in your project:\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js\"\u003e\u003c/script\u003e\n```\n\n### 2️⃣ Initialize the Canvas\nCreate an HTML canvas element and link it to Paper.js:\n```html\n\u003ccanvas id=\"myCanvas\" resize\u003e\u003c/canvas\u003e\n```\n\n### 3️⃣ Run the Code\nLoad and execute the JavaScript file that contains the blob logic.\n\n## 📜 License\nThis project is open-source and available under the MIT License. Feel free to modify and build upon it!\n\n---\nEnjoy creating your own interactive digital playground! 🎈✨\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyllvar%2Finteractive-bubble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyllvar%2Finteractive-bubble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyllvar%2Finteractive-bubble/lists"}