Кодирование простых форм Playdoh с использованием P5.js и Makey Makey: 7 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:49

Проекты Макея Макея »

Это проект физических вычислений, который позволяет вам создать фигуру с помощью Playdoh, закодировать эту фигуру с помощью p5.js и вызвать отображение этой фигуры на экране компьютера, прикоснувшись к фигуре Playdoh с помощью Makey Makey.

p5.js - это открытая веб-среда для творческого кодирования на Javascript. Узнайте больше здесь:

Для этого проекта вам не нужен опыт программирования. Это можно было бы использовать как введение в текстовое кодирование (в отличие от блочных языков, таких как Scratch). Вам нужно всего лишь написать 4 строки кода, чтобы завершить этот проект. Есть несколько способов изменить и расширить эту основную идею.

Запасы

Набор Makey Makey Kit (с 2 зажимами типа «аллигатор»)

Playdoh (любой цвет)

Ноутбук с подключением к Интернету

Шаг 1. Создайте форму Playdoh

Сделайте форму из Playdoh. Это может быть круг, овал, квадрат, прямоугольник или треугольник. Имейте в виду, что вам нужно будет кодировать эту форму позже, поэтому чем проще форма, тем легче будет кодирование. Однако p5.js может кодировать множество различных форм, даже пользовательских, поэтому вы можете выбрать уровень сложности, который хотите попробовать.

Шаг 2. Начните работу с P5.js

Если вы раньше не использовали p5.js, я рекомендую проверить страницу начала работы на веб-сайте:

Я также настоятельно рекомендую посетить канал YouTube The Coding Train, где есть отличные руководства по использованию p5.js. Вот ссылка на список воспроизведения, в котором описаны все основы:

Поскольку p5.js основан на веб-технологиях, вы можете писать код в Интернете с помощью веб-редактора p5. Для работы над этим проектом вам не нужна учетная запись, но если вы хотите сохранить свою работу, вам нужно будет создать учетную запись.

Веб-редактор:

Веб-редактор p5.js имеет область для написания кода слева и холст, на котором будут отображаться результаты кода справа.

Каждый скетч p5.js включает функцию setup () и функцию draw (). Функция setup () запускается один раз при первом запуске скетча. В функции setup () есть функция createCanvas, которая создает пространство, в котором будет нарисована ваша фигура. Числа в скобках функции createCanvas задают ось X (слева направо) и ось Y (сверху вниз) холста. Номера по умолчанию - 400, 400, что означает, что размер вашего холста составляет 400 пикселей слева направо и 400 пикселей сверху вниз (вы всегда можете изменить их по своему усмотрению). Имейте в виду, что верхний левый угол холста - это точка 0, 0. Это важно знать, когда вы кодируете свою форму.

Функция draw () работает как цикл, что означает, что она постоянно обновляется, прибл. 60 раз в секунду. Это может позволить нам создавать анимацию в наших эскизах. Внутри функции draw () находится функция фона, которая добавляет цвет нашему холсту. Значение по умолчанию - 220, что соответствует оттенкам серого. 0 = черный, 255 = белый, а число между ними будет разных оттенков серого. Функция фона также может принимать значения RGB, которые позволяют нам добавлять цвет. Подробнее об этом в следующем шаге.

Шаг 3. Создайте код своей формы в P5.js

Чтобы закодировать свою форму, вам нужно будет только добавить строки кода внутри функции draw ().

У каждой формы своя функция, чтобы она отображалась на холсте. Вот справочная страница для всех фигур в p5.js:

Чтобы сделать круг, мы воспользуемся функцией эллипса. Эта функция принимает 3 аргумента (числа в скобках). Первое число - это положение X центра круга на холсте, а второе число - положение Y на холсте. Помните, что верхний левый угол равен 0, 0, а размер холста составляет 400 на 400 пикселей. Поэтому, если я хочу, чтобы круг появился в середине холста, я поставлю его на 200 по оси X и 200 по оси Y. Вы можете поэкспериментировать с этими числами, чтобы понять, как размещать предметы на холсте.

Третье число устанавливает размер круга. В этом примере он установлен на 100 пикселей в диаметре. Функция эллипса также может принимать четвертый аргумент, который изменит третий аргумент, чтобы повлиять на диаметр X, а четвертым аргументом будет диаметр Y. Это можно использовать для создания овальных форм вместо идеально круглых кругов.

Чтобы установить цвет нашей формы, мы используем функцию заливки. Здесь используются 3 аргумента, которые являются значениями RGB (R = красный, G = зеленый, B = синий). Каждое значение может быть числом от 0 до 255. Например, чтобы сделать красный цвет, мы должны положить 255, 0, 0, которые будут полностью красными без зеленого или синего. Различные комбинации этих чисел создадут разные цвета.

Есть несколько веб-сайтов, которые предоставляют значения RGB для разных цветов, например этот:

Как только вы найдете значение RGB, соответствующее вашему цвету PlayDoh, напишите функцию заливки над функцией формы.

Затем вы можете нажать кнопку воспроизведения в веб-редакторе, и ваша фигура должна появиться на экране.

Шаг 4: Сделайте так, чтобы ваша форма отображалась нажатием клавиши

Поскольку мы хотим, чтобы наш скетч p5.js был интерактивным с Макеем Макеем, нам нужно добавить код, чтобы что-то происходило, когда мы нажимаем клавишу на клавиатуре. В этом случае мы хотим, чтобы форма появлялась только при нажатии клавиши. Для этого нам понадобится условный оператор. Это означает, что что-то в нашем коде произойдет только при выполнении определенного условия, в данном случае при нажатии клавиши.

Чтобы сделать этот условный оператор условным, мы начинаем со слова if, за которым следуют круглые скобки. В круглых скобках будет указано условие, которое мы хотим выполнить. В p5.js есть встроенная переменная с именем keyIsPressed (убедитесь, что вы используете заглавные буквы точно так же, как написано здесь). keyIsPressed - это логическая переменная. Это означает, что он может иметь значение true или false. Когда клавиша нажата, ее значение истинно, а когда она не нажата, ее значение ложно.

Наконец, мы добавляем фигурные скобки {}. Внутри фигурных скобок будет код, который мы хотим выполнить, если наше условие выполнено. Итак, мы просто поместим наш код, чтобы сделать фигуру между фигурными скобками.

Теперь, когда мы запускаем наш скетч, мы не увидим форму, пока не нажмем клавишу на клавиатуре.

ВАЖНОЕ ПРИМЕЧАНИЕ: при добавлении нажатия клавиш в наш код веб-редактор должен знать, нажимаем ли мы клавишу для написания кода в текстовом редакторе или нажимаем клавишу, чтобы сделать то, что мы закодировали для нажатия клавиши. Когда вы нажимаете кнопку воспроизведения, наведите указатель мыши на холст и нажмите на холст. Это перенесет фокус редактора на эскиз, и нажатие клавиши вызовет код нажатия клавиши, который мы хотим выполнить

Шаг 5. Настройте Makey Makey

Достаньте плату Makey Makey, USB-кабель и два зажима из кожи аллигатора. Прикрепите один зажим «крокодил» к Земле, а другой - к клавише «Пробел» (поскольку мы не указали ключ в нашем коде, любая клавиша, которую мы нажимаем, вызовет появление формы).

Возьмите зажим «крокодил», прикрепленный к клавише «Пробел», и вдавите другой конец в форму Playdoh.

Подключите кабель USB к ноутбуку.

Шаг 6: прикоснитесь к форме Playdoh

Возьмитесь за металлический конец зажима из кожи аллигатора, который прикреплен к Земле на Makey Makey, и коснитесь формы Playdoh. Когда вы касаетесь фигуры Playdoh, закодированная фигура должна появиться на холсте вашего эскиза.

Вот ссылка на эскиз p5.js для этого проекта:

Если фигура не появляется:

1. Убедитесь, что вы щелкнули мышью по холсту эскиза p5.js, прежде чем касаться Playdoh.

2. Убедитесь, что вы держите металлический зажим заземляющего провода.

Шаг 7: разные формы

Желтый треугольник:

Синий квадрат: