Креативное кодирование/генеративное искусство становится еще интереснее, когда оно выполняется со звуковым вводом. В этом проекте мы будем перемещать фигуры относительно звуковой частоты, определяемой микрофоном. При этом используется язык p5.js, представляющий собой библиотеку javascript. Это можно сделать в любом редакторе (атом, скобка и т.д.) или даже в онлайн-редакторе p5.

Начиная

Прежде чем приступить к скетчу, убедитесь, что у вас есть готовая к работе папка, в которой есть звуковая библиотека p5, включенная в HTML-документ (папка шаблона доступна в ресурсах в конце). Если вы работаете над веб-редактором p5.js, он уже будет готов к использованию. После этого я разделил чтение на разделы: сначала прочитайте код, попытайтесь понять его, а затем прочитайте объяснение, данное сразу после кода, чтобы проверить, о чем вы подумали.

Давайте приступим к работе над эскизом прямо сейчас!

Настройка холста и микрофона

function setup() 
{
 createCanvas(600, 400);
 background(0);
 mic = new p5.AudioIn();
 mic.start();
}

В настройках добавьте конструктор p5.audioIn и запустите микрофон. Это включит микрофон на вашем компьютере и начнет обнаруживать звук. Вот и все в настройке, давайте перейдем к функции рисования.

Нарисуйте его с петлей

Уровень звука и холст

function draw()
{
 var micLevel = mic.getLevel();
 var sd = micLevel*100;
 fill(0,10);
 rect(0,0,width,height);

В функции рисования начните с считывания амплитуды (уровня громкости) обнаруженного звука, это будет выполняться каждый раз при выполнении цикла. Это значение (micLevel) находится в диапазоне от 0 до 1, где 1 — максимум. Это необработанное значение очень мало, поэтому мы не можем работать с ним самим, поэтому мы умножаем число, чтобы получить значение (sd), которое можно использовать для перемещения фигуры на экране. Это значение множителя основано на пробах и ошибках, чем больше умноженное число, тем больше будет движение фигуры. Выберите число, которое соответствует чувствительности вашего микрофона и звуковому входу. Для начала поработаем со 100. Теперь поместите полупрозрачный прямоугольник (размер окна) в начале цикла. Это покажет след, а не распечатает форму постоянно на экране. Теперь давайте поработаем над заключительной частью, то есть размещением фигур.

Создавайте и рисуйте фигуры

 var radius = width * 0.3;
 var i= cos(radians(-sd)) * radius;
 var j= sin(radians(-sd)) * radius;
 stroke(random(0,255), 35,80);
 square(j+250,i-30,i-60); //top left square
 var m = cos(radians(sd)) * radius;
 var n = sin(radians(sd)) * radius;
 stroke(random(0,255), 35,80);
 square(n+250,m-30,m-60); // top right square
 stroke(random(0,255), 35,80);
 square(n+220,m+130,m-90); // bottom square
}

В этом для движения мы будем использовать концепцию греха и соза. Это только для пути, по которому пойдет форма. Используйте уровень звука (sd) и передайте его в углы в sin и cos, но как отрицательные значения, а затем передайте эти значения (i,j) в координатах x и y фигуры.

Здесь я использую квадрат, положение которого равно значению i и j плюс 250,-30 соответственно. Эти дополнительные номера также являются методом проб и ошибок. Эти значения представляют собой квадратную позицию, когда звук не обнаружен или звук минимальный. По мере увеличения значения звука квадрат будет двигаться к верхнему левому углу.

Давайте сделаем то же самое еще с двумя квадратами, изменив входные данные sin и cos на положительные. И обратите внимание, что в последнем квадрате я изменил значение координаты x на 220 и y на 30 и уменьшил размер на -90. Это будет нижний маленький квадрат. Готово, теперь запустите скетч и воспроизведите звук. Вы увидите, как квадраты возвращаются всякий раз, когда увеличивается объем.

В этом, потому что мы использовали sin и cos, квадраты делают круговой поворот, а не идут в линейном направлении. Вы можете удалить sin и cos и просто умножить звуковое значение (sd) на позиции x, y квадратов. Это заставит его двигаться по одной прямой.

Как это выглядит?

Проект завершен, и он должен выглядеть примерно так.

Я думаю, это похоже на лицо, а как выглядит ваше? Теперь вы можете экспериментировать со значениями, изменять форму, положение, цвет и т. д. Все файлы, используемые в этом проекте, прикреплены к разделу ресурсов в конце. если у вас есть какие-либо вопросы, добавьте их в раздел комментариев. Расскажите нам больше о своем эксперименте и как вам это понравилось! Надеюсь, вам понравилось это делать. Спасибо за чтение!

Ресурсы:

p5.js — https://p5js.org/

Папка шаблона для любого проекта p5 — https://github.com/HimaniKumawat/Template_p5

Получите код и все файлы, используемые в этом проекте, на GitHub (для компьютерных редакторов) — https://github.com/HimaniKumawat/Square-dance.

Код для веб-редактора p5.js — https://editor.p5js.org/Himani/sketches/jhWDj8_4J