В этом уроке мы создадим иллюзию Эббингауза, используя p5.js.

Что такое иллюзия Эббингауза?

Прежде чем развивать эту иллюзию, давайте посмотрим на происхождение этой иллюзии. Его открыл немецкий психолог Герман Эббингауз (1850–1909). Эту иллюзию также называют кругами Титченера. В этой иллюзии желтый круг справа кажется больше по размеру по сравнению с желтым кругом слева. Но на самом деле оба круга имеют одинаковый размер. Это происходит потому, что восприятие меняется из-за большие и маленькие лепестки цветка. Возможные подробные объяснения этой иллюзии можно найти в Указателе иллюзий. Вот как это будет выглядеть в конце этого урока.

Создайте новый проект с помощью веб-редактора p5.js. Функции — это фрагменты кода, которые принимают некоторый ввод, обрабатывают его и возвращают вывод. Новый проект в веб-редакторе p5js имеет следующие две функции. Функция setup() запускается только один раз, а draw()функция запускается в цикле. сильный>. В функции setup() создается холст шириной 600 пикселей и высотой 400 пикселей. Canvas — это элемент в окне браузера, где мы собираемся рисовать наши фигуры. Мы будем выполнять большую часть работы в функции рисования.

В функции рисования создадим два круга одинакового размера с помощью функции эллипс(ось x, ось y, ширина, высота) в разных точках по оси x. -ось, а ось Y остается прежней. Теперь задайте одинаковый цвет обоим кругам в fill(color).

У вас на экране появятся два круга, как показано ниже.

Теперь вокруг первого круга давайте нарисуем большие круги для лепестков. Начнем с двух верхних кругов. Ось Y обоих верхних кругов одинакова, а ось X рассчитывается соответственно.

Придайте лепесткам другой цвет, используя RGB в fill(r , g , b). Здесь мы придали фиолетовый цвет лепесткам, где r равно 155, g равно 0, а синий — 215. Добавьте noStroke(), чтобы удалить границы вокруг кругов.

Вызов:

Аналогичным образом теперь попробуйте сделать боковые и нижние лепестки, регулируя их оси x и y.

Начните делать маленькие лепестки вокруг второго круга. Сохраняйте одинаковый цвет всех лепестков, но уменьшите размер лепестка до 25.

Вызов:

Теперь попробуйте расположить остальные лепестки, регулируя их оси x и y. Второй круг с лепестками будет выглядеть так.

Эта иллюзия почти готова, теперь давайте добавим функцию map(), чтобы лепестки исчезали и появлялись. Эта функция повторно отображает число из одного диапазона в другой. В этом случае мы собираемся сопоставить один диапазон, который является положением мыши по оси x, начиная с 0 в крайнем левом углу, заканчивая шириной холста в крайнем правом углу, в другой диапазон, начиная с 200 и заканчивая 0 .

Теперь поместите локальную переменную, назначенную для map(), в альфа-значениелепестков fill(r , g , b , alpha) функция .В заливке после значений RGB можно назначить альфа-значение, чтобы сделать цвета светлее. Чем меньше (0–150) тем альфа-значение больше прозрачности. И чем больше альфа-значение (150-255), меньше прозрачность. Итак, когда программа запускается, лепестки видны, а затем они исчезают, когда мы перемещаем курсор.

Вы можете проверить код решения здесь.

Вызов:

Попробуйте увеличить и уменьшить размер лепестков с помощью функции map() и изменить альфа-значение.

Поздравляем!!! вы создали свою первую иллюзию. Чтобы получить больше удовольствия от иллюзий, проверьте еще одну простую иллюзию, чтобы попробовать себя.

Ресурсы:

Начало работы с p5.js — книга о программировании на p5.js.