Objetos

Every course that teaches 2D arrays produces the same artifact: a char[][] or bool[][] with nested loops around it, rendered — if at all — through a hand-rolled rect loop. p5.quadrille.js 3.5.0-rc.3 meets that code where it lives: drawQuadrille now accepts a raw 1D/2D JS array and renders it through a live, zero-copy view — no conversion, no copy, and no createQuadrille anywhere in this post. Your array stays yours; rendering becomes a service. One contract powers everything: empty is null — the same convention behind the algebra, flood fill, and order, met here on day one. ...

A maze looks like a special data structure, but it isn’t one: it is an ordinary quadrille whose filled cells happen to be walls. That single decision — walls are filled cells, corridors are empty cells — is what the new p5.quadrille.js 3.5.0-rc.4 release builds on: maze(value) generates a perfect maze in place, reach(row, col) returns which cells a seed can reach (and in how many steps) as another quadrille, path(row1, col1, row2, col2) walks between two cells, and Quadrille.thinWall renders the walls thin — as draw params, never touching storage. Because passability is just emptiness, the two queries work on any quadrille: mazes, game boards with pieces, hand-authored bitboards. ...

Drag and drop looks like a physics problem — hit testing, ghosting, snapping, collision — but on a grid it reduces to data. This post distills a mechanic that keeps resurfacing across object-oriented programming projects — and, most recently, in a student serious-game prototype — into a three-sketch progression using p5-v2 and the Quadrille API, where the same gesture acquires increasingly rich drop semantics: Dragging values — the payload is a single cell value (a color, an emoji, a display function, a number); dropping is fill. Dragging pieces — the payload is a 3×3 quadrille; dropping is grid algebra (and gates, or commits). Dragging boards — the payload is again a 3×3 quadrille, but it nests whole into a single cell of the board, rendering itself through the display contract. All three sketches share one skeleton: mousePressed grabs a quadrille (a crop or a clone — never the source), draw ghosts it under the mouse with drawingContext.globalAlpha, and mouseReleased commits it — or doesn’t. State mutation happens at exactly one point, which keeps each sketch easy to reason about. In the first and last sketches, holding SHIFT while dropping switches the commit from a point operation to a region operation: flood fill. ...

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 p5-v2 and the Quadrille API with a four-layer strategy. Each layer is one quadrille with a single responsibility: mines — the bombs. counts — the numbers next to bombs. cover — a two-tone internal layer (red over filled cells, green over empty cells) that distinguishes the two click zones and drives flood fill. mask — the uniformly magenta layer the player actually sees, derived from cover. As gameplay progresses, clicking on cells uncovers them by clearing either individual or connected cells from cover; mask is re-derived from cover after each click. ...

This demo illustrates new capabilities of the WebGL mode in the next major upcoming version of p5.quadrille.js, currently under development. It showcases how Platonic solids can be stored in quadrille cells and rendered using either immediate or retained mode with the p5.platonic library. Platonic Cells Platonic cells are cell functions (cellFn) that implement the filling of Platonic solid cells in a quadrille game. Retained Mode (mouse click to clear/add Platonic solids, drag to navigate; press s (or c) to save) ...

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