This project presents a straightforward implementation of Dijkstra's algorithm for calculating the shortest path on a mesh surface using Three.js. Leveraging Vite for rapid development, Three.js for 3D graphics, and React-Three-Fiber for seamless integration with React, it creates an interactive visualization where users can explore and understand the algorithm's functionality in real-time.

Github Repository 

Demo

Dijkstra's Shortest Path

Earth Data Visualization is a proof-of-concept project developed during a hackathon. It offers a simple tool for visualizing data usage on a globe. It uses datasets with geographic coordinates, and the tool plots the data points on the Earth globe accordingly. It provides a straightforward means of exploring data geographically within a limited scope. It was created using three.js for the 3D graphics and Next.js as a framework.

Try Earth Data Visualisation

Earth Data Visualisation

This project is an experimental blend of Three.js and GLSL shaders, designed to generate dynamic particle effects upon hovering over images. It originated as a variation of @brunoimbrizi's Interactive Particles repository and is featured in his Domestika course, Creative Coding 2.0 in JS: Animation, Sound, & Color. The demo showcases a series of Buddhist mandalas, offering users the opportunity to interact with them by simply hovering over each image.

Try Particle Effects

Particle Effects

As part of the Domestica <a href=“https://www.domestika.org/en/courses/2729-creative-coding-making-visuals-with-javascript”>Creative Coding: Making Visuals with JavaScript</a> course by <a href=“https://www.brunoimbrizi.com/”>Bruno Imbrizi</a>, is an variation of the previous exercise done during the course to learn about typography and bitmap mapping with canvas-sketch. This one is using an image as the source of data instead of a text. There is a control panel that allows you to input text, choose the glyphs you want to map and tweak multiple parameters in order to achieve different results. 

Try out Glyph Images

Glyph Images

As part of the Domestica <a href=“https://www.domestika.org/en/courses/2729-creative-coding-making-visuals-with-javascript”>Creative Coding: Making Visuals with JavaScript</a> course by <a href=“https://www.brunoimbrizi.com/”>Bruno Imbrizi</a>, is an variation of an exercise done during the course to learn about typography and bitmap mapping with canvas-sketch. There is a control panel that allows you to input text, choose the glyphs you want to map and tweak multiple parameters in order to achieve different results. 

Try Glyph Typography

Glyph Typography

As part of the Domestica <a href=“https://www.domestika.org/en/courses/2729-creative-coding-making-visuals-with-javascript”>Creative Coding: Making Visuals with JavaScript</a> course by <a href=“https://www.brunoimbrizi.com/”>Bruno Imbrizi</a>, is an variation of an exercise done during the course to learn about trigonometry, arcs and randomness with canvas-sketch. You can refresh the page to generate a random new image, or you can try the animated version as well.

Try Arc Generator Sketch (static)

Try Arc Generator Sketch (animated)

Random Arc Generator

As part of the <a href=“https://threejs-journey.com/”>Three.js Journey</a> course by <a href=“https://bruno-simon.com/”>Bruno Simon</a> I further developed an exercise done during the course, in order to improve the portal shader and make it look like there is another world behind. Everything in this experiment was modelled, coloured and textured by me. It is using baked lighting to achieve better performance. Modelling and baking were done using <a href=“https://www.blender.org/”>Blender</a>.

Click here to try Portal Shader

Portal Shader

As part of the <a href=“https://threejs-journey.com/”>Three.js Journey</a> course by <a href=“https://bruno-simon.com/”>Bruno Simon</a>, this exercise focused on creating a configurable galaxy shader with millions of particles moving at different speeds. 

Click here and try Galaxy Shader

Galaxy shader

As part of the <a href=“https://threejs-journey.com/”>Three.js Journey</a> course by <a href=“https://bruno-simon.com/”>Bruno Simon</a>, this exercise focused on creating an ocean shader, on which I tried to improve slightly by adding an environment map, reflections and some refraction. Still very far away from a realistic shading but I will continue to work on this one.

Click here to try the Ocean Shader

Ocean shader

As part of the <a href=“https://threejs-journey.com/”>Three.js Journey</a> course by <a href=“https://bruno-simon.com/”>Bruno Simon</a>, this exercise focused on creating a simple geometry instancing with matcap shading in order to create an interesting effect. Although it isn’t technically impressive, it sort of stands out visually by itself. 

Click here to see and try experiment

Everything You Can Imagine

This happened as part of an accident while playing with shaders some years ago, trying to create a geometry displacement shader that would become transparent on hover. The result was this sort of black hole into hell, which I thought looked quite interesting. 