https://github.com/fecapark/metaball-interaction

Dynamic metaball with user interaction.
https://github.com/fecapark/metaball-interaction

interaction interaction-design interaction-design-project metaball metaball-particles metaballs pixi pixi-js pixijs side-project

Last synced: 3 months ago
JSON representation

Dynamic metaball with user interaction.

• Host: GitHub
• URL: https://github.com/fecapark/metaball-interaction
• Owner: fecapark
• Created: 2023-07-10T07:20:44.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-10-11T15:22:18.000Z (almost 2 years ago)
• Last Synced: 2025-05-07T09:52:13.941Z (5 months ago)
• Topics: interaction, interaction-design, interaction-design-project, metaball, metaball-particles, metaballs, pixi, pixi-js, pixijs, side-project
• Language: TypeScript
• Homepage: https://fecapark.github.io/metaball-interaction/
• Size: 193 KB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Metaball Interaction

by fecapark

## Demo

[Project Link](https://fecapark.github.io/metaball-interaction/)

![demo](https://github.com/fecapark/metaball-interaction/assets/101973955/fdc98c7d-f485-462c-8f27-ad7e440a5e00)

## Implementing Metaballs

[Blog](https://velog.io/@fecapark/%EC%9C%A0%EC%A0%80-%EC%9D%B8%ED%84%B0%EB%9E%99%EC%85%98%EA%B3%BC-%EB%A9%94%ED%83%80%EB%B3%BC-%ED%9A%A8%EA%B3%BC%EB%A5%BC-%ED%95%A9%EC%B9%98%EB%A9%B4-Metaball-Interaction)

In computer graphics, [metaballs](https://en.wikipedia.org/wiki/Metaballs) can be implemented using alpha-[thresholding]() method with [Gaussian Blur](https://en.wikipedia.org/wiki/Gaussian_blur).

![demo](https://github.com/fecapark/metaball-interaction/assets/101973955/f27269ee-b861-465e-8725-3f7a070a868b)

In general, 60fps was possible, due to WebGL([PIXI.js](https://github.com/pixijs/pixijs)) for high performance.

I need blur filter and alpha-threshold filter, but PIXI.js doesn't have the threshold filter, so I made [it](https://github.com/fecapark/metaball-interaction/blob/master/src/utils/filters.ts) using GLSL.