Posts

Context and Opportunity An invitation to contribute to the Education Sciences Special Issue on Sustainability of Digital Game-Based Learning was extended following the publication of the article p5.quadrille.js: p5.js quadrille library in SoftwareX 1. The Special Issue, guest edited by Dr. Panagiotis Fotaris, focuses on sustainable strategies for digital game-based learning. The submission deadline is 30 June 2025. This presents a timely opportunity to further explore and formalize the methodological foundations of sustainable educational game design—especially in settings shaped by limited resources, evolving roles, and long-term scalability goals. ...

Tree-like affine transformation hierarchies are at the core of many tasks in rendering, interaction, and computer vision—from view frustum & occlusion culling and collision detection to motion retargeting and post-WIMP interfaces. Our recent publication, nub: A Rendering and Interaction Library for Visual Computing in Processing, introduces a functional and declarative API, built around a dataflow-based architecture that integrates rendering and event-driven interaction through a simple yet powerful scene graph model. Built on top of Processing’s 2D/3D environment, nub offers a lightweight and expressive foundation for education, research, and experimentation in visual computing. It supports hierarchical rendering, multi-view scenes, view-based interaction, and extensible workflows for interactive content. This post presents an overview of its architecture and capabilities, and outlines future work extending it to the web through p5.treegl, with research directions focused on scene graphs, picking, gesture-based control, post-effects, and AI-assisted visual computing. ...

Segunda Adenda al esclarecimiento del reintegro de licencia no remunerada Daños a mi equipo de cómputo y solicitud de reposición ocurridos en el pasado El 16/8/12, al regresar de las vacaciones de aquel entonces, encontré mi oficina violentada y en un estado caótico debido a obras eléctricas realizadas sin previo aviso en el Edificio Aulas de Ingeniería. Restos de ladrillo y polvo cubrían mis sistemas de cómputo, y varios bienes personales y de la Universidad resultaron dañados, incluyendo la pantalla del monitor de mi computador (placa 2317636), rota, un cuadro perforado y una caja de fuente de poder manipulada. Este daño en el monitor fue confirmado el 15 de agosto al intentar encender el equipo. En su momento, solicité que se tomaran medidas para establecer responsabilidades, prevenir futuros incidentes, y reponer el monitor esencial para mis labores; sin embargo, a la fecha de hoy, el equipo no ha sido repuesto ni reemplazado. ...

This Rosetta demo is intended to give readers a starting point for porting the Brush VR app to three.js and WebGL2, highlighting some of the lower-level aspects of managing shaders. code let color, depth, brush, escorzo = true, fallback = [], points = [], record let basicShader function preload() { loadJSON('/cloud_500.json', json => fallback = json.map(entry => ({ worldPosition: createVector(entry.x, entry.y, entry.z), color: entry.color })) ) } function setup() { createCanvas(600, 400, WEBGL) colorMode(RGB, 1) document.oncontextmenu = () => false points = [...fallback] const o = parsePosition(Tree.ORIGIN, { from: Tree.WORLD, to: Tree.SCREEN }) depth = createSlider(0, 1, o.z, 0.001) depth.position(10, 10) depth.style('width', '580px') color = createColorPicker('#C7C08D') color.position(width - 70, 40) brush = sphereBrush basicShader = parseShader(`#version 300 es precision highp float; uniform vec4 uMaterialColor; out vec4 fragColor; void main() { fragColor = uMaterialColor; }`, Tree.pMatrix | Tree.vMatrix | Tree.mMatrix) } function draw() { (mouseY >= 30) && orbitControl() shader(basicShader) record && update() background('#222226') axes({ size: 50, bits: Tree.X | Tree.Y | Tree.Z }) for (const point of points) { push() translate(point.worldPosition) brush(point) pop() } } function keyPressed() { key === 'c' && (points = []) key === 'f' && focus() key === 'r' && (record = !record) key === 's' && saveCloud() } function update() { points.push({ worldPosition: parsePosition([mouseX, mouseY, depth.value()], { from: Tree.SCREEN, to: Tree.WORLD }), color: color.color(), }) } function focus() { const center = [0, 0, 0] const position = parsePosition() const up = parseDirection(Tree.j) camera(...position.array(), ...center, ...up.array()) const o = parsePosition(Tree.ORIGIN, { from: Tree.WORLD, to: Tree.SCREEN }) depth.value(o.z) } function sphereBrush(point) { push() noStroke() fill(point.color) sphere(1) pop() } function saveCloud() { const data = points.map(point => ({ x: point.worldPosition.x, y: point.worldPosition.y, z: point.worldPosition.z, color: [red(point.color) / 255, green(point.color) / 255, blue(point.color) / 255, alpha(point.color) / 255] })) saveJSON(data, 'custom_cloud.json') } Shader Declaration A key difference in this version is the use of parseShader, which defines a basic shader that handles color through the uMaterialColor uniform: ...

The following 3D brush painting algorithm integrates depth control for VR experiences by leveraging p5.treegl’s parsePosition function. This allows users to paint dynamically in 3D space, using mouse input and a depth slider to place brush strokes with precision. code 'use strict' let color, depth, brush, escorzo = true, fallback = [], points = [], record function preload() { loadJSON('cloud_500.json', json => fallback = json.map(entry => ({ worldPosition: createVector(entry.x, entry.y, entry.z), color: entry.color })) ) } function setup() { createCanvas(600, 400, WEBGL) colorMode(RGB, 1) document.oncontextmenu = () => false points = [...fallback] const o = parsePosition(Tree.ORIGIN, { from: Tree.WORLD, to: Tree.SCREEN }) depth = createSlider(0, 1, o.z, 0.001) depth.position(10, 10) depth.style('width', '580px') color = createColorPicker('#C7C08D') color.position(width - 70, 40) brush = sphereBrush } function draw() { (mouseY >= 30) && orbitControl() record && update() background('#222226') axes({ size: 50, bits: Tree.X | Tree.Y | Tree.Z }) for (const point of points) { push() translate(point.worldPosition) brush(point) pop() } } function keyPressed() { key === 'c' && (points = []) key === 'f' && focus() key === 'r' && (record = !record) key === 's' && saveCloud() } function sphereBrush(point) { push() noStroke() fill(point.color) sphere(1) pop() } function update() { points.push({ worldPosition: parsePosition([mouseX, mouseY, depth.value()], { from: Tree.SCREEN, to: Tree.WORLD }), color: color.color(), }) } function focus() { const center = [0, 0, 0] const position = parsePosition() const up = parseDirection(Tree.j) camera(...position.array(), ...center, ...up.array()) const o = parsePosition(Tree.ORIGIN, { from: Tree.WORLD, to: Tree.SCREEN }) depth.value(o.z) } function saveCloud() { const data = points.map(point => ({ x: point.worldPosition.x, y: point.worldPosition.y, z: point.worldPosition.z, color: [red(point.color) / 255, green(point.color) / 255, blue(point.color) / 255, alpha(point.color) / 255] })) saveJSON(data, 'custom_cloud.json') } Key Elements of the 3D Brush Algorithm The primary functionality revolves around transforming user input from screen space to world space, enabling dynamic point placement. Using the parsePosition function, we map 2D screen coordinates and depth values into the 3D world, allowing the brush to paint accurately in VR space. ...

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

Platonic solids, named after the philosopher Plato, are highly symmetrical, three-dimensional shapes. Each face of a Platonic solid is the same regular polygon, and the same number of polygons meet at each vertex. This sketch demonstrates the rendering of Platonic solids using the p5.platonic library, showcasing both the immediate mode and retained mode rendering of the shapes. Check out the platonic cells example, which fills quadrille cells with the Platonic solids introduced here. ...

Toon shading, or cel shading, is a non-photorealistic rendering technique that gives 3D graphics a cartoon-like appearance, commonly seen in various forms of visual media, such as video games and animations. The outlined toon shader achieves the effect signature flat look by quantizing diffuse reflection into a finite number of discrete shades. The makeShader function parses the fragment shader source code to create a vertex shader and an interactive user interface, returning a toon p5.Shader that applyShader then uses for interactive real-time rendering of the scene. ...

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

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