isladjan selected projects
under construction
Check out some of my featured works below to see my passion for coding in action.
[ scroll ]
ROW
COLUMN
LAB: image pixelation No dependencies (Vite.js only for building project)
MADE WITH: JavaScript, HTML5 Canvas
This project uses JavaScript and HTML5 canvas to add a pixelation effect to images as they scroll into view.Images start in pixelated form and gradually sharpen, with customizable "steps" for controlling the transition intensity. To detect if the image is displayed in the viewport, Intersection Observer is used. Each pixelation step executes in about 10-20ms for smooth transitions.
Live
LAB: image pixelation No dependencies (Vite.js only for building project)
MADE WITH: JavaScript, HTML5 Canvas
This project uses JavaScript and HTML5 canvas to add a pixelation effect to images as they scroll into view.Images start in pixelated form and gradually sharpen, with customizable "steps" for controlling the transition intensity. To detect if the image is displayed in the viewport, Intersection Observer is used. Each pixelation step executes in about 10-20ms for smooth transitions.
Live
This module leverages Three.js and GLSL shaders to create ASCII effect by mapping pixel brightness to characters. Instead of rendering text, it samples a character texture generated by a canvas for better performance and flexibility.Configurable parameters include character set, font, size, cell size, color, and inversion. Note: The original three/examples/jsm library includes an ASCII effect, but it's too slow for production use. I recommend avoiding it.
MADE WITH: javascript, three.js, postprocessing, shaders
This is yet another ASCII effect achieved using Three.js and shaders. The effect is generated by mapping pixel brightness to characters.The effect generates a texture containing specified ASCII characters using an HTML canvas, which the shader samples to replace image pixels with characters (a much better solution in terms of performance than using actual text). I apply this ASCII effect to an animated model created with a custom fragmentShader, which dynamically changes based on mouse movement.
MADE WITH: javascript, three.js, postprocessing, shaders
LAB: image pixelation No dependencies (Vite.js only for building project)
MADE WITH: JavaScript, HTML5 Canvas
This project uses JavaScript and HTML5 canvas to add a pixelation effect to images as they scroll into view.Images start in pixelated form and gradually sharpen, with customizable "steps" for controlling the transition intensity. To detect if the image is displayed in the viewport, Intersection Observer is used. Each pixelation step executes in about 10-20ms for smooth transitions.
LiveLAB: image pixelation No dependencies (Vite.js only for building project)
MADE WITH: JavaScript, HTML5 Canvas
This project uses JavaScript and HTML5 canvas to add a pixelation effect to images as they scroll into view.Images start in pixelated form and gradually sharpen, with customizable "steps" for controlling the transition intensity. To detect if the image is displayed in the viewport, Intersection Observer is used. Each pixelation step executes in about 10-20ms for smooth transitions.
LiveSELECTED PROJECTS
Over the last six years, my expertise has centered around JavaScript and CSS, encompassing code writing and refactoring. My experience extends beyond, having worked with diverse tech stacks.
My journey does not stop there. I love animations and moving things, and I am always excited to try out new animation techniques.
work
My Story
Over the last six years, my expertise has centered around JavaScript and CSS, encompassing code writing and refactoring. My experience extends beyond, having worked with diverse tech stacks.
My journey does not stop there. I love animations and moving things, and I am always excited to try out new animation techniques.
about