Исследуйте творческий код с P5.JS

Jan 27, 2026

Инструкции

Провести день с Брендан Доус в Генерировать Лондон и откройте для себя как Данные одинарны Отказ В этой цеховой семинаре он объяснит, как принять данные, которые окружают нас каждый день и превращают его в что-то красивое, используя обработку и P5.JS. Забронируйте сейчас !

P5.JS. это библиотека, предназначенная для обеспечения силы Обработка к сети. Он направлен на то, чтобы ввести художников, дизайнеров и преподавателей в мир программирования, а также предлагая универсальные инструменты для привлечения разработчиков и инженеров в визуальное искусство.

Давайте погрузимся и создадим наш первый «эскиз». Наша цель - построить инструмент для рисования, который преобразует простое изображение в поле анимированных звезд. Во-первых, мы определим несколько глобальных переменных и напишем нашего настраивать() функция. P5's. настраивать() Запускается один раз, когда эскиз загружен, так что это идеальное место для обработки инициализации.

Загрузите файлы, которые вам понадобятся здесь Отказ

 VAR HINTIMAGE, SkyImage, Stars = [];
Настройка функций () {...}

Внутри нашего настраивать Функция, мы создадим холст и скрываю курсор мыши, чтобы мы могли нарисовать наше. По умолчанию P5 добавляет контур вокруг форм - мы хотим отключить удары в этом случае.

 CreateCanvas (800 500);
Nocursor ();
NoStroke ();

The background image – this night sky scene provides the setting for our animation — Фоновое изображение - эта ночь Сцена неба обеспечивает настройку для нашей анимации

Далее мы загрузим пару изображений. Один послужит фоном - в этом случае сцена ночного неба. Другой будет «подсказка» - черный и белый дизайн наш окончательный дизайн будет основан на. Идея состоит в том, чтобы поставить большую часть звезд над черными пикселями в нашем подсказке, чтобы воссоздать дизайн на нашей фоновой сцене. Было бы легко создавать эти изображения с текстовыми и чертежными инструментами P5, но ради краткости мы будем использовать статические активы.

 HINTIMAGE = LOADIMAGE («// BIT.LY/HINTIMAGE»);
SkyImage = loadimage ("// bit.ly/skyimage") ;

The hint image, which dictates the positioning of our stars — Изображение подсказки, которое диктует позиционирование наших звезд

Функция рисования

Это это для настраивать() ! Другая ключевая функция рисовать() Отказ Это вызывается в непрерывной петле, что полезно для анимации и добавления элементов со временем.

 Функция Draw () {...}

В рамках функции розыгрыша наша первая задача - заполнить холст с нашим фоновым изображением. P5 не очищает автоматически холст между рисовать() Звонки, поэтому нам нужно сделать это каждый кадр или мы получим некоторые странные эффекты накопления. Чтобы разместить загруженный образ на холсте, используйте изображение() Функция и дать х и Y координаты для позиционирования.

 изображение (SkyImage, 0, 0);

Далее мы будем снимать текущее местоположение мыши и хранить его как P5.Vector, используя Createvector () Отказ Этот объект поставляется с удобными функциями для решения точек в пространстве, но мы в основном просто используем его как контейнер.

 положение VAR = Createvector (Tousex, мышью);

Используя нашу вновь сохраненную позицию мыши, мы можем нарисовать наш курсор. Мы настроим цвет рисования с наполнять() Передав значения RGB и использовать эллипс() Нарисовать круг на месте мыши.

 заполнить (255, 192, 0);
Эллипс (Position.x, position.y, 8, 8);

Мы только хотим нарисовать новые звезды, пока мышь нажата, поэтому мы проверим P5's мысемся прежде чем продолжить. Если мышь снизится, нам нужно рассчитать хорошее место для нашей следующей звезды. Мы сделаем это с пользовательской функцией под названием FindPixel () , который мы определим позже.

Discover the creative side of code with Brendan Dawes at Generate London — Откройте для себя творческую сторону кода с Brendan Dawes на Generate London

Как только у нас будет цель, мы создадим новый экземпляр пользовательского звездного объекта (более ниже) и нажимайте его на конец нашего звездного массива. Если мы введем более 2000 звезд, мы начнем отбрасывать самые старые.

 Если (мышевидший) {
var target = findpixel ();
var star = новая звезда (позиция, цель);
Stars.push (звезда);
если (stars.length & gt; 2000) stars.shift ();
}

Наконец, мы будем петь через наш массив звезд и позвонить Обновить() и рисовать() на каждом из них. Мы погрузимся в эти методы позже.

 для (var i = 0; i let; stars.length; i ++) {
звезды [я] .update ();
звезды [я] .draw ();
}

Функции помощника

Сейчас же настраивать() и рисовать() На месте мы будем работать над функциями и объектами помощника. Во-первых, мы определим функцию, которая находит положение отдыха для каждой новой звезды. Все, что нам нужно сделать, это проверять несколько случайных пикселей в нашем изображении подсказки, используя получать() чтобы увидеть, черные они или белые.

На самом деле мы должны смотреть только на их красное значение, потому что в обоих случаях значения RGB совпадают. Если мы найдем не белый пиксель, мы вернем его, потому что мы ударим наш дизайн. Если нет, мы просто вернемся за последний пиксель, и он будет служить случайной звездой.

 Функция FindPixel () {
var x, y;
для (var i = 0; i let; 15; i ++) {
х = пол (случайное (hintImage.width));
y = пол (случайно (hintimage.height));

если (красный (hintimage.get (x, y)) & lt; 255) разрыв;
}
Вернуть Createvector (X, Y);
}

Последний до нашего пользовательского звездного объекта. Проще говоря, мы хотим многоразовый контейнер, который хранит информацию о каждой звезде, а также предоставляет средства для обновления и их рисования. JavaScript не предоставляет способ создания классов в традиционном смысле, но мы можем получить тот же результат, определяя функцию и расширяя ее для наших собственных потребностей.

Каждая звезда имеет несколько свойств (исходное положение, окончательное местоположение и случайным образом генерируемый диаметр), который мы определимся в «Функции конструктора», которая вызывается для каждой новой звезды, созданной в нашей петле Draw.

 Функциональная звезда (позиция, цель) {
Это. Разложить = положение;
this.target = target;
this.diameter = случайный (1, 5);
}

Далее мы добавим Обновить() Метод Star, который будет использовать P5.Vector's lerp () Для расчета нового местоположения между текущими и целевыми позициями Star. В этом случае мы перемещаем четыре процента оставшегося расстояния для каждого розыгрыша, что эффективно дает нам эффект ослабления.

Если бы мы хотели получить причудливые, мы также сможем имитировать здесь какую-то физику, но на данный момент мы будем держать его простым.

 Star.Prototype.update = Функция () {
this.position = p5.vector.lerp (
эта позиция,
this.target,
0.04.
);
};

Рисование звезд

Наконец, звезда рисовать() Метод на самом деле рисует звезду на холсте. Еще раз, мы используем наполнять() и эллипс() , хотя на этот раз мы звоним наполнять() С ценностью серого и альфа-значением для прозрачности.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Каждый кадр, линейная интерполяция дает нам новую точку вдоль пути между текущей звездой и ее местом назначения

Чтобы дать звездам мерцание, альфа-значение определяется с использованием P5's шум() функция. Это возвращает значение шума Perlin для указанных координат, что означает, что вы получаете гладкую жидкую последовательность случайных чисел. Для третьего параметра мы проходим значение на основе времени, а не пространственное значение, так что шум будет анимировать со временем.

 Star.Prototype.draw = Функция () {
var alpha = шум (
this.target.x,
this.target.y,
Millis () / 1000.0
);

заполнить (255, альфа * 255);

эллипс(
this.position.x, this.position.y,
Это.diameter, this.diameter.
);
};

Вот это для нашего первого эскиза! Нажмите и перетащите, чтобы увидеть новые звезды, появляются и соответствуют изображению подсказки.

Что дальше?

Отсюда вы можете добавить некоторые элементы HTML для управления переменными, используя дополнение P5.DOD или даже добавить звук на визуальные эффекты, используя P5.Sound Отказ

Мы только поцарапали поверхность того, что возможно с P5.js, а с новыми функциями на пути, еще больше, чтобы с нетерпением ждать. Радоваться, веселиться!

Узнайте больше о творческой стороне кодирования в Генерировать Лондон ! Брендан Доус научит вас использовать обработку и P5.js, чтобы превратить данные в вещи красоты В его мастерской ;он также будет говорить о радости работе с Бумага, пластик и пиксели Отказ Забронируйте свой билет сейчас !

Исследуйте творческий код с P5.JS

Функция рисования

Функции помощника

Рисование звезд

Что дальше?

Инструкции - Самые популярные статьи

Как репост на Instagram

Используйте Framer X для создания интерактивных прототипов

Как ускорить ретопологию в майю

Как создать 3D оборотень в нереальном двигателе

Как нарисовать эльфийскую деву

Создайте эффекты коллажа в браузере с CSS

Как сделать Mandelbulb

Как сделать свой собственный персонаж Библии

Категории