GlassMorph

Transform Your Images with Stunning Glasslike Distortions

Comment

Inspiration

The inspiration for this project came from observing stunning image transformations that create a glass-like distortion effect. Upon reviewing the Canva AppStore, I found that no current apps offer this type of glass fractal effect, so I became interested in finding a way to implement this transformation programmatically by myself.

What it does

GlassMorph is a tool that applies a glass fractal effect to images. It allows users to transform their images by creating a distortion that resembles looking through fractured glass. The tool offers options to adjust the intensity of the effect and choose between horizontal and vertical distortion patterns.

How we built it

The development process involved several steps:

*Observed the implementation of similar effects in photo editing software like Photoshop. *Initially attempted to recreate the effect using Python. *Translated the Python implementation to JavaScript for web compatibility. *Integrated the JavaScript code with the Canva SDK, carefully studying the documentation to ensure proper implementation. *Refined the algorithm to achieve the desired visual effect.

Challenges we ran into

  • Initial code implementations produced unsatisfactory results, more akin to simple image noise than the desired glass effect.
  • Achieving the correct gradient application for the distortion effect required multiple iterations and fine-tuning.
  • Adapting the effect to work within the constraints of the Canva SDK presented its own set of challenges.

Accomplishments that we're proud of

  • Successfully implemented a complex image transformation effect in a web-based environment.
  • Created a user-friendly tool that makes a professional-level effect accessible to users without extensive photo editing experience.
  • This project represents my first development effort with potential for real-world application and users.

What we learned

Through this project, I gained valuable experience in image processing techniques, working with SDKs, and translating complex visual effects into code. The process also improved my problem-solving skills, especially in overcoming technical obstacles.

What's next for GlassMorph

Future development plans include:

  • Expanding the range of distortion patterns beyond horizontal and vertical, such as circular or wavy distortions.
  • Further research into different forms of gradient rectangles to create more varied glass transformation effects.
  • Optimizing the algorithm for better performance and potentially adding more customization options for users.

Built With

Share this project:

Updates