Exercise 1.
Make something that uses only one sensor on Arduino and makes the ellipse in p5 move on the horizontal axis, in the middle of the screen, and nothing on Arduino is controlled by p5.
p5 code:
let position;
let mass = 50;
let potValue = 0;
function setup() {
createCanvas(640, 360);
noFill();
// Initialize position of the ellipse
position = createVector(width / 2, height / 2);
}
function draw() {
background(255);
// Map potentiometer value to horizontal position
position.x = map(potValue, 0, 1023, 0, width);
// Keep the ellipse in the middle
ellipse(position.x, height / 2, mass, mass);
}
function keyPressed(){
if (key == " ") { //set up serial
setUpSerial();
}
}
function readSerial(value) {
potValue = int(value); // Parse the potentiometer value
}
let position;
let mass = 50;
let potValue = 0;
function setup() {
createCanvas(640, 360);
noFill();
// Initialize position of the ellipse
position = createVector(width / 2, height / 2);
}
function draw() {
background(255);
// Map potentiometer value to horizontal position
position.x = map(potValue, 0, 1023, 0, width);
// Keep the ellipse in the middle
ellipse(position.x, height / 2, mass, mass);
}
function keyPressed(){
if (key == " ") { //set up serial
setUpSerial();
}
}
function readSerial(value) {
potValue = int(value); // Parse the potentiometer value
}
let position; let mass = 50; let potValue = 0; function setup() { createCanvas(640, 360); noFill(); // Initialize position of the ellipse position = createVector(width / 2, height / 2); } function draw() { background(255); // Map potentiometer value to horizontal position position.x = map(potValue, 0, 1023, 0, width); // Keep the ellipse in the middle ellipse(position.x, height / 2, mass, mass); } function keyPressed(){ if (key == " ") { //set up serial setUpSerial(); } } function readSerial(value) { potValue = int(value); // Parse the potentiometer value }
Arduino:
void setup() {
Serial.begin(9600); // Start serial communication
}
void loop() {
int potValue = analogRead(A0); // Read the potentiometer value
Serial.println(potValue); // Send the value to p5.js
delay(10);
}
void setup() {
Serial.begin(9600); // Start serial communication
}
void loop() {
int potValue = analogRead(A0); // Read the potentiometer value
Serial.println(potValue); // Send the value to p5.js
delay(10);
}
void setup() { Serial.begin(9600); // Start serial communication } void loop() { int potValue = analogRead(A0); // Read the potentiometer value Serial.println(potValue); // Send the value to p5.js delay(10); }
Exercise 2.
Make something that controls the LED brightness from p5.
p5 code:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(225);
// brightness based on cursor's x position
let brightness = map(mouseX, 0, width, 0, 255);
brightness = constrain(brightness, 0, 255); // Ensure brightness stays within range
// Send brightness value to Arduino if serial is active
if (serialActive) {
writeSerial(`${brightness}\n`);
}
}
function keyPressed(){
if (key == " ") { //set up serial
setUpSerial();
}
}
function readSerial(value) {
potValue = int(value); // Parse the potentiometer value
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(225);
// brightness based on cursor's x position
let brightness = map(mouseX, 0, width, 0, 255);
brightness = constrain(brightness, 0, 255); // Ensure brightness stays within range
// Send brightness value to Arduino if serial is active
if (serialActive) {
writeSerial(`${brightness}\n`);
}
}
function keyPressed(){
if (key == " ") { //set up serial
setUpSerial();
}
}
function readSerial(value) {
potValue = int(value); // Parse the potentiometer value
}
function setup() { createCanvas(400, 400); } function draw() { background(225); // brightness based on cursor's x position let brightness = map(mouseX, 0, width, 0, 255); brightness = constrain(brightness, 0, 255); // Ensure brightness stays within range // Send brightness value to Arduino if serial is active if (serialActive) { writeSerial(`${brightness}\n`); } } function keyPressed(){ if (key == " ") { //set up serial setUpSerial(); } } function readSerial(value) { potValue = int(value); // Parse the potentiometer value }
Arduino:
int ledPin = 9;
int brightness = 0;
void setup() {
Serial.begin(9600); // Start serial communication
pinMode(ledPin, OUTPUT); //LED pin as output
}
void loop() {
if (Serial.available() > 0) {
// Read the incoming brightness value
brightness = Serial.parseInt();
brightness = constrain(brightness, 0, 255);
// Set the LED brightness
analogWrite(ledPin, brightness);
}
}
int ledPin = 9;
int brightness = 0;
void setup() {
Serial.begin(9600); // Start serial communication
pinMode(ledPin, OUTPUT); //LED pin as output
}
void loop() {
if (Serial.available() > 0) {
// Read the incoming brightness value
brightness = Serial.parseInt();
brightness = constrain(brightness, 0, 255);
// Set the LED brightness
analogWrite(ledPin, brightness);
}
}
int ledPin = 9; int brightness = 0; void setup() { Serial.begin(9600); // Start serial communication pinMode(ledPin, OUTPUT); //LED pin as output } void loop() { if (Serial.available() > 0) { // Read the incoming brightness value brightness = Serial.parseInt(); brightness = constrain(brightness, 0, 255); // Set the LED brightness analogWrite(ledPin, brightness); } }
Exercise 3.
Make it so every time the ball bounces one led lights up and then turns off, and you can control the wind from one analog sensor.
p5 code:
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let potValue = 0; // potentiometer value
let serialConnected = false;
let onGround = false; // whether ball is on the ground
function setup() {
createCanvas(640, 360);
noFill();
position = createVector(width / 2, 0);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
gravity = createVector(0, 0.5 * mass);
wind = createVector(0, 0);
}
function draw() {
background(255);
if (!serialConnected) {
textAlign(CENTER, CENTER);
fill(0);
text("Press 'Space' key on the keyboard", width / 2, height / 2);
return;
}
applyForce(wind);
applyForce(gravity);
velocity.add(acceleration);
velocity.mult(drag);
position.add(velocity);
acceleration.mult(0);
// check for bounce on the x axis
if (position.x > width - mass / 2) {
if(!onGround){
position.x = width - mass / 2;
velocity.x *= -0.9;
}
}
else if (position.x < mass / 2) {
position.x = mass / 2;
velocity.x *= -0.9;
}
// check for bounce on the y axis
if (position.y > height - mass / 2) {
velocity.y *= -0.9;
position.y = height - mass / 2;
if (!onGround) {
sendBounceSignal();
onGround = true;
}
} else {
onGround = false;
}
wind.x = map(potValue, 0, 1023, -1, 1);
ellipse(position.x, position.y, mass, mass);
// boundaries on x axis
if (position.x > width - mass / 2 || position.x < mass / 2) {
velocity.x *= -0.9;
}
}
function applyForce(force) {
let f = p5.Vector.div(force, mass);
acceleration.add(f);
}
// bouncing signal to Arduino
function sendBounceSignal() {
if (serialActive) {
let sendToArduino = "1\n";
writeSerial(sendToArduino);
}
}
// receive data from Arduino
function readSerial(data) {
potValue = int(trim(data));
}
// initialize serial connection
function keyPressed() {
if (key == ' ') {
mass = random(10,100);
setUpSerial();
serialConnected = true;
}
}
function serialOpened() {
serialActive = true;
}
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let potValue = 0; // potentiometer value
let serialConnected = false;
let onGround = false; // whether ball is on the ground
function setup() {
createCanvas(640, 360);
noFill();
position = createVector(width / 2, 0);
velocity = createVector(0, 0);
acceleration = createVector(0, 0);
gravity = createVector(0, 0.5 * mass);
wind = createVector(0, 0);
}
function draw() {
background(255);
if (!serialConnected) {
textAlign(CENTER, CENTER);
fill(0);
text("Press 'Space' key on the keyboard", width / 2, height / 2);
return;
}
applyForce(wind);
applyForce(gravity);
velocity.add(acceleration);
velocity.mult(drag);
position.add(velocity);
acceleration.mult(0);
// check for bounce on the x axis
if (position.x > width - mass / 2) {
if(!onGround){
position.x = width - mass / 2;
velocity.x *= -0.9;
}
}
else if (position.x < mass / 2) {
position.x = mass / 2;
velocity.x *= -0.9;
}
// check for bounce on the y axis
if (position.y > height - mass / 2) {
velocity.y *= -0.9;
position.y = height - mass / 2;
if (!onGround) {
sendBounceSignal();
onGround = true;
}
} else {
onGround = false;
}
wind.x = map(potValue, 0, 1023, -1, 1);
ellipse(position.x, position.y, mass, mass);
// boundaries on x axis
if (position.x > width - mass / 2 || position.x < mass / 2) {
velocity.x *= -0.9;
}
}
function applyForce(force) {
let f = p5.Vector.div(force, mass);
acceleration.add(f);
}
// bouncing signal to Arduino
function sendBounceSignal() {
if (serialActive) {
let sendToArduino = "1\n";
writeSerial(sendToArduino);
}
}
// receive data from Arduino
function readSerial(data) {
potValue = int(trim(data));
}
// initialize serial connection
function keyPressed() {
if (key == ' ') {
mass = random(10,100);
setUpSerial();
serialConnected = true;
}
}
function serialOpened() {
serialActive = true;
}
let velocity; let gravity; let position; let acceleration; let wind; let drag = 0.99; let mass = 50; let potValue = 0; // potentiometer value let serialConnected = false; let onGround = false; // whether ball is on the ground function setup() { createCanvas(640, 360); noFill(); position = createVector(width / 2, 0); velocity = createVector(0, 0); acceleration = createVector(0, 0); gravity = createVector(0, 0.5 * mass); wind = createVector(0, 0); } function draw() { background(255); if (!serialConnected) { textAlign(CENTER, CENTER); fill(0); text("Press 'Space' key on the keyboard", width / 2, height / 2); return; } applyForce(wind); applyForce(gravity); velocity.add(acceleration); velocity.mult(drag); position.add(velocity); acceleration.mult(0); // check for bounce on the x axis if (position.x > width - mass / 2) { if(!onGround){ position.x = width - mass / 2; velocity.x *= -0.9; } } else if (position.x < mass / 2) { position.x = mass / 2; velocity.x *= -0.9; } // check for bounce on the y axis if (position.y > height - mass / 2) { velocity.y *= -0.9; position.y = height - mass / 2; if (!onGround) { sendBounceSignal(); onGround = true; } } else { onGround = false; } wind.x = map(potValue, 0, 1023, -1, 1); ellipse(position.x, position.y, mass, mass); // boundaries on x axis if (position.x > width - mass / 2 || position.x < mass / 2) { velocity.x *= -0.9; } } function applyForce(force) { let f = p5.Vector.div(force, mass); acceleration.add(f); } // bouncing signal to Arduino function sendBounceSignal() { if (serialActive) { let sendToArduino = "1\n"; writeSerial(sendToArduino); } } // receive data from Arduino function readSerial(data) { potValue = int(trim(data)); } // initialize serial connection function keyPressed() { if (key == ' ') { mass = random(10,100); setUpSerial(); serialConnected = true; } } function serialOpened() { serialActive = true; }
Arduino:
const int potPin = A0;
const int ledPin = 13;
int potValue = 0;
bool ledState;
void setup() {
pinMode(ledPin, OUTPUT);
Serial.begin(9600);
}
void loop() {
// read the potentiometer value
potValue = analogRead(potPin);
// send potentiometer value to p5
Serial.println(potValue);
// check for data from p5
if (Serial.available() > 0) {
char received = Serial.read();
if (received == '1' && !ledState) {
// turn on the LED
digitalWrite(ledPin, HIGH);
ledState = true;
delay(100);
// turn off the LED
digitalWrite(ledPin, LOW);
}
else if (received != '1'){
ledState = false;
}
}
delay(50);
}
const int potPin = A0;
const int ledPin = 13;
int potValue = 0;
bool ledState;
void setup() {
pinMode(ledPin, OUTPUT);
Serial.begin(9600);
}
void loop() {
// read the potentiometer value
potValue = analogRead(potPin);
// send potentiometer value to p5
Serial.println(potValue);
// check for data from p5
if (Serial.available() > 0) {
char received = Serial.read();
if (received == '1' && !ledState) {
// turn on the LED
digitalWrite(ledPin, HIGH);
ledState = true;
delay(100);
// turn off the LED
digitalWrite(ledPin, LOW);
}
else if (received != '1'){
ledState = false;
}
}
delay(50);
}
const int potPin = A0; const int ledPin = 13; int potValue = 0; bool ledState; void setup() { pinMode(ledPin, OUTPUT); Serial.begin(9600); } void loop() { // read the potentiometer value potValue = analogRead(potPin); // send potentiometer value to p5 Serial.println(potValue); // check for data from p5 if (Serial.available() > 0) { char received = Serial.read(); if (received == '1' && !ledState) { // turn on the LED digitalWrite(ledPin, HIGH); ledState = true; delay(100); // turn off the LED digitalWrite(ledPin, LOW); } else if (received != '1'){ ledState = false; } } delay(50); }
Video demonstration:
Video Player
00:00
00:00