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
I used an Arduino potentiometer to change the horizontal position of the ellipse in the p5js sketch. The values read from the potentiometer are mapped to the x coordinates of the ellipse, moving it across the horizontal axis in the middle of the screen.
Video of implementation:
Code:
let left = 0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
fill("red");
ellipse(left, 50, 50, 50);
}
function keyPressed() {
if (key == " ") {
// important to have in order to start the serial connection!!
setUpSerial();
}
}
function readSerial(data) {
left = map(data, 0, 1023, 0, 400);
}
//// Arduino Code
/*
void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
}
void loop() {
// put your main code here, to run repeatedly:
int sensor = analogRead(A0);
delay(5);
Serial.println(sensor);
}
*/
Exercise 2: make something that controls the LED brightness from p5
To control the led brightness through P5JS, I created a brightness slider similar to that in our smartphones. The value of the slider is sent to Arduino to be the value of the analog write of the led and change its brightness.
Video of implementation:
Code:
let brightnessSlider;
let brightnessValue = 0;
function setup() {
createCanvas(400, 200);
// Create a brightness slider
brightnessSlider = createSlider(0, 255, 128);
brightnessSlider.position(width/2-50, height/2);
brightnessSlider.style('width', '100px');
}
function draw() {
background(255);
// Get the brightness value from the slider
brightnessValue = brightnessSlider.value();
}
function keyPressed() {
if (key == " ") {
// important to have in order to start the serial connection!!
setUpSerial();
}
}
function readSerial(data) {
console.log(data);
let dataToSend = brightnessValue + ", \n";
writeSerial(dataToSend);
}
///Arduino COde
/*
const int ledPin = 9; // Digital output pin for the LED
void setup() {
pinMode(ledPin, OUTPUT);
// Start serial communication
Serial.begin(9600);
}
void loop() {
Serial.println("sensor");
// Check if data is available from p5.js
if (Serial.available() > 0) {
// Read the brightness value from p5.js
int brightness = Serial.parseInt();
// Map the received value to the LED brightness range
brightness = constrain(brightness, 0, 255);
// Set the LED brightness
analogWrite(ledPin, brightness);
}
}
*/
Exercise 3: take the gravity wind example and 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
When the ball touches the ground, the value of the variable Led changes accordingly (either 0 or 1) and then sent to the Arduino to toggle the led at pin 9. For the wind effect, I used a potentiometer where its values are mapped to values between -2 and 2, making a smooth wind effect moving the ball horizontally.
Video of implementation:
Code:
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let led = 0;
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);
applyForce(wind);
applyForce(gravity);
velocity.add(acceleration);
velocity.mult(drag);
position.add(velocity);
acceleration.mult(0);
ellipse(position.x,position.y,mass,mass);
if (position.y > height-mass/2) {
velocity.y *= -0.9; // A little dampening when hitting the bottom
position.y = height-mass/2;
}
if(position.y == height-mass/2 && (velocity.y > 0.5 || velocity.y < -0.5)){
led = 1;
}else{
led = 0;
}
}
function applyForce(force){
// Newton's 2nd law: F = M * A
// or A = F / M
let f = p5.Vector.div(force, mass);
acceleration.add(f);
}
function keyPressed(){
if (key == "n") {
// important to have in order to start the serial connection!!
setUpSerial();
}
if (key==' '){
mass=random(15, 80);
position.y=-mass;
velocity.mult(0);
}
}
function readSerial(data) {
if (data != null) {
// make sure there is actually a message
// split the message
wind.x = data;
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = led + "\n";
writeSerial(sendToArduino);
}
}
///Arduino COde
/*
int ledPin = 9;
void setup() {
// Start serial communication so we can send data
// over the USB connection to our p5js sketch
Serial.begin(9600);
pinMode(ledPin, OUTPUT);
}
void loop() {
int sensor = analogRead(A0);
int wind = map(sensor, 0, 1023, -2, 2);
Serial.println(wind);
delay(10);
if (Serial.available() > 0) {
// Read the brightness value from p5.js
int touch = Serial.parseInt();
// Set the LED brightness
digitalWrite(ledPin, touch);
}
}
*/
