Сценарий: нужно искусство. Может быть, вам нужен новый компьютерный фон, может быть, вам нужен стильный принт для вашей новой квартиры, может быть, вам нужен новый баннер для вашей страницы в 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.

Вы создали удивительное искусство? Поделитесь этим ниже!