NakedNous

Welcome to my visual computing experiments blog using tools I develop.

Blur with focal target & first person lightning

This demo delves into a WEBGL p5 sketch that builds upon the blur effect with added features. It introduces uniformsUI for interactive shader uniform variables setting (here just the blur intensity), incorporates a focal target defined by the scene’s sole sphere (amidst random toruses and boxes) for enhanced visual depth, and employs first-person directional light to improve immersion. It also showcases the applyShader function, demonstrating its role in applying and managing custom shader effects within the sketch....

March 23, 2024 · 5 min · Theme PaperMod

Visualizing Perspective Transformation to NDC

Perspective projection is a fundamental concept in 3D graphics. This transformation, akin to morphing a view frustum shape into a cube (known as Normalized Device Coordinates (NDC)), generates a realistic foreshortening effect when applied to all scene vertices. The visualization below showcases this transformation on a set of cajas, rendered with a custom shader for shape morphing and viewed from a third-person perspective using a secondary camera, which enables the display of the main view frustum....

March 1, 2024 · 8 min · Theme PaperMod

Post-effects

Post-effects significantly enhance visual rendering, enabling the interactive blending of shader effects like bloom, motion blur, and ambient occlusion into rendered scenes. This demo showcases the blend of blur, noise and pixelate effects using frame buffer objects (FBOs) and WEBGL2 shaders, applied to a scene featuring randomly placed toruses and boxes, with a sphere acting as the dynamic focal point for the blur effect, thereby creating a visually engaging experience....

February 20, 2024 · 8 min · Theme PaperMod

Image convolution visualizer

In the field of image processing, the application of convolution matrices to images stands as a cornerstone technique. This post focuses on illustrating this process through an interactive visualization, utilizing the Quadrille filter method alongside custom display functions. The visualization aims to clarify how various masks affect individual pixels in a source image, making the intricate process of image convolution more comprehensible. By offering an interactive experience, it sheds light on the significant impact these matrices have on digital images, providing a deeper insight into a key image manipulation method....

November 23, 2023 · 11 min · Theme PaperMod

Chess Pattern Recognition

Harnessing the art of chess pattern recognition—emphasized by experts, among them Grandmaster Jonathan Rowson in “The Seven Deadly Chess Sins”—the demonstration below utilizes the powerful quadrille search method to identify key tactical patterns on the provided board, given in FEN notation. These patterns, which encompass maneuvers like knight forks where a piece simultaneously threatens multiple opponent pieces, can decisively influence the game’s dynamics. The p5.quadrille.js library aids players in detecting and adeptly deploying these patterns, thereby refining gameplay and strategic decision-making on the chessboard....

October 10, 2023 · 4 min · Theme PaperMod