Сценарий: нужно искусство. Может быть, вам нужен новый компьютерный фон, может быть, вам нужен стильный принт для вашей новой квартиры, может быть, вам нужен новый баннер для вашей страницы в LinkedIn. Вам нужно искусство, и оно вам нужно быстро.
Решение? Создавайте собственное искусство! Вы можете создать пастельные пузыри выше с помощью графической библиотеки JavaScript, p5.js, менее чем за 10 строк кода!
Давайте создадим генеративное искусство
Генеративное искусство - это искусство, созданное компьютерной программой. Мои пастельные пузыри - это результат генеративного искусства, и каждый может программировать свое собственное искусство.
Во-первых, давайте настроим нашу среду программирования. Перейдите в редактор p5.js и настройте учетную запись, если хотите сохранить свою работу.
Когда вы впервые откроете редактор, вы увидите этот стартовый код:
function setup() { createCanvas(400, 400); } function draw() { background(220); }
Код, который мы пишем внутри функции setup
, будет выполняться один раз, а код, который мы пишем внутри функции draw
, будет запускаться повторно в бесконечном цикле после этого.
Мы будем работать только внутри setup
, поэтому удалите функцию draw
и все, что внутри нее. Вы действительно не хотите, чтобы фон закодировал там, так как он закрасит все рисунки, которые мы добавим setup
.
У вас должно остаться:
function setup() { createCanvas(400, 400); }
Этот код создает холст размером 400x400 (измеряется в пикселях, который в основном представляет собой точку на экране). Мне нужен холст побольше, поэтому я скажу компьютеру рисовать изображения внутри всего окна. В частности, мой холст будет иметь размер windowWidth
x windowHeight
.
Обновите функцию setup
, чтобы холст заполнял все окно:
function setup() { createCanvas(windowWidth, windowHeight); }
Теперь я собираюсь заполнить холст кучей случайно окрашенных, случайно расположенных кругов произвольного размера!
Эффективный способ нарисовать 1000 кругов
В информатике, если вы хотите, чтобы какой-то код запускался снова и снова, вы часто помещаете его в цикл. Мы можем использовать цикл, называемый циклом for, чтобы некоторый код выполнялся определенное количество раз.
Чтобы нарисовать 1000 кругов, давайте напишем цикл, который выполняется 1000 раз. Добавьте этот код в свою setup
функцию:
for (let i = 0; i < 1000; i++) { }
По сути, мы собираемся использовать переменную i
для подсчета от 0 до 1000.
Внутри цикла for мы напишем код для рисования круга случайного цвета, случайного положения и случайного размера.
Случайность: отличительная черта генеративного искусства
В p5.js вы можете сгенерировать случайное число от 0 до x с помощью функции random: random(x)
.
Мы будем использовать эту функцию для генерации случайных цветов, положений и размеров нашего круга.
Во-первых, давайте сгенерируем случайный цвет. В компьютерах используется цветовая модель RGB, в которой цвета получаются путем комбинирования различного количества красного, зеленого и синего цветов по шкале от 0 до 255.
Следовательно, мы можем получить случайный цвет, смешав случайное количество красного, зеленого и синего цветов следующим образом:
random(255), random(255), random(255)
Если вы добавите четвертый random(255)
, это добавит прозрачности цвету по шкале от 0 (полностью прозрачный) до 255 (полностью непрозрачный).
Давайте обновим наш цикл for, чтобы использовать функцию fill
в p5.js, чтобы установить случайный цвет для каждого круга.
fill
принимает значения красного, зеленого, синего и прозрачности от 0 до 255.
for (let i = 0; i < 1000; i++) { fill(random(255), random(255), random(255), random(255)); }
Пока что цикл for ничего не рисует. Но мы можем использовать функцию ellipse
в p5.js, чтобы нарисовать круг!
ellipse
принимает координаты x, y и размер круга. Мы будем генерировать их случайным образом. Обновите цикл for, чтобы нарисовать эллипс после установки цвета:
for (let i = 0; i < 1000; i++) { fill(random(255), random(255), random(255), random(255)); ellipse(random(windowWidth), random(windowHeight), random(100)); }
Теперь этот код должен нарисовать 1000 случайных кругов!
Тестирование вашего кода
Попробуйте запустить свой код, нажав розовую кнопку «play» в верхнем левом углу!
У вас получаются красивые радужные пузыри?
Если вам не нравится черный контур на пузырях, не стесняйтесь нажать return после строки 2 и написать строку с надписью noStroke();
, чтобы удалить контуры.
Итоговый код (всего 8 строк!):
function setup() { createCanvas(windowWidth, windowHeight); noStroke(); for (let i = 0; i < 1000; i++) { fill(random(255), random(255), random(255), random(255)); ellipse(random(windowWidth), random(windowHeight), random(100)); } }
Если вы довольны своим искусством как есть, вы можете настроить размер экрана, запустить код еще раз и сделать снимок экрана для обложки в социальных сетях (или искусства квартиры).
Возиться с вашим кодом
Если вы хотите настроить искусство, вы можете настроить его в первую очередь, отрегулировав диапазоны чисел для случайности. Попробуйте отрегулировать…
- Размер кружков
- Диапазоны значений красного, зеленого и синего цветов. Что произойдет, если вы оставите значения «красного» и «синего» равными
random(255)
, но уменьшите значение «зеленого» (второго) до0
? - Значение прозрачности
- Количество запусков цикла for
Совет от профессионала: помните, что когда вы генерируете случайное число от 0 (мин.) До x (макс.), Говорить random(x)
на самом деле то же самое, что и random(x) + 0
.
Поэтому, если вы хотите, чтобы минимальное значение было выше 0, вы можете добавить его к случайному выражению. Но вам нужно будет обновить x
, чтобы он представлял диапазон значений вместо максимального значения.
Например, если вы хотите сгенерировать значение от 25 до 100, диапазон значений будет 75. Таким образом, вы сгенерируете random(75)
, но добавите 25, чтобы получить значения от 25 до 100. Выражение в вашем коде будет random(75) + 25
.
Вы создали удивительное искусство? Поделитесь этим ниже!