Об эксперименте
На этой странице собраны два эксперимента с творческим программированием. В первом печатная плата постепенно возникает из линий, контактных площадок и акварельных заливок. Во втором пиксельный маскот становится интерактивным 3D-объектом, который можно вращать мышью или пальцем.
Как сделано
Обе сцены сделаны на p5.js. Визуализация платы использует p5.brush: библиотека добавляет живые штрихи, фактуру и полупрозрачные заливки, а элементы схемы появляются и исчезают по заданному циклу. Маскот работает в режиме WebGL: он собран из объёмных геометрических блоков, а Pointer Events превращают движение мыши или пальца во вращение по двум осям.
Что такое Processing, p5.js и WebGL
Processing — среда и язык для творческого программирования: изображения и анимация создаются не вручную в графическом редакторе, а с помощью кода. p5.js переносит этот подход в браузер и позволяет рисовать средствами JavaScript. WebGL использует видеокарту для быстрой отрисовки трёхмерной графики. В этом эксперименте он отвечает за геометрию, глубину, освещение и поворот маскота в реальном времени.
Такой подход удобен для генеративной графики: каждый элемент можно оживить, связать с данными или управлением пользователя и получать новые варианты одной сцены без покадровой отрисовки.