Posts

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. By employing a user-space array, these effects are sequentially applied to a source FBO layer with the applyEffects(layer, effects, uniforms, flip) function. ...

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. ...

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. ...

Before diving into development, thoroughly reading the Quadrille API documentation is key to efficient coding, preventing mistakes, and ensuring optimal performance. By acquainting yourself with the API’s nuances, you set the stage for informed decision-making, seamless collaboration, and a smoother development journey. The following demo illustrates the game of life using a pentadecathlon pattern as its initial seed, rendered as a surface texture on p5 3D shapes in WEBGL mode: (mouse drag to navigate; [1..7] keys change shape, other keys reset) ...

La disposición de las hojas en el tallo de una planta, conocida como phyllotaxis, se puede modelar a partir del ángulo de oro, número mágico íntimamente relacionado con la secuencia de Fibonacci que rige diversas formas de la naturaleza: desde una flor de girasol, el brócoli o el romanesco, e incluso los brazos de las galaxias. La siguiente visualización ilustra la disposición de los pétalos del girasol obediciendo al modelo propuesto por H. Vogel hacia 19791. ...

This demo visualization shows a photomosaic (& videomosaic) implemented in hardware: (press r to randomly pick another painting) ...

In object-oriented programming (OOP), maximizing API use streamlines development, leading to simpler and more concise code. This clarity not only improves readability but also eases debugging. Leveraging an API effectively in OOP thus ensures a blend of simplicity, efficiency and maintainability in software development. This demo (partially) implements the minesweeper video game using the p5.quadrille.js API to instantiate and handle two quadrilles: a board and a mask. The former embodies the game board, while the latter covers it. As gameplay progresses clicking on mask cells uncovers the underlying board. ...