1st Exercise
p5js:
// Serial port object
let port;
// Latest sensor value
let sensorVal = 0;
function setup() {
createCanvas(400, 300);
background(220);
// Create the serial connection object
port = createSerial();
// If a port was used before, auto-reconnect
let used = usedSerialPorts();
if (used.length > 0) {
port.open(used[0], 9600);
}
}
function draw() {
background(220);
// Read one line of text until newline "\n"
let str = port.readUntil("\n");
// Make sure we actually received something
if (str.length > 0) {
// Convert the string into an integer
let val = int(str.trim());
// Map sensor value (0–1023) to screen X position (0–400)
let x = map(val, 0, 1023, 0, width);
// Draw a circle at mapped position
ellipse(x, height / 2, 40, 40);
} else {
// If empty data is received, print it for debugging
console.log("Empty:", str);
}
}
Arduino Code:
const int sensor=A2;
int sensorValue;
void setup() {
// put your setup code here, to run once:
pinMode(sensor,INPUT);
Serial.begin(9600);
// while (Serial.available() <= 0) {
Serial.println(0); // send a starting message
}
void loop() {
// put your main code here, to run repeatedly:
sensorValue=analogRead(sensor);
delay(60);
Serial.println(sensorValue);
}
2nd exercise:
p5js
int ledPin = 9;
void setup() {
Serial.begin(9600);
pinMode(ledPin, OUTPUT);
}
void loop() {
if (Serial.available() > 0) {
int brightness = Serial.read(); // 0–255
analogWrite(ledPin, brightness); // PWM LED brightness
}
}
P5JS CODE:
let port;
let brightnessToSend = 0;
const baudrate = 9600;
function setup() {
createCanvas(400, 400);
// Create the serial port
port = createSerial();
// connect automatically if used before
let usedPorts = usedSerialPorts();
if (usedPorts.length > 0) {
port.open(usedPorts[0], baudrate);
} else {
connectBtn = createButton("Connect to Serial");
connectBtn.position(10, 10);
connectBtn.mousePressed(() => port.open(baudrate));
}
}
function draw() {
background(30);
drawStarButton(80, 150, 40, 20, 5, 64);
drawStarButton(160, 150, 40, 20, 5, 128);
drawStarButton(240, 150, 40, 20, 5, 192);
drawStarButton(320, 150, 40, 20, 5, 255);
fill(255);
textAlign(CENTER);
text("Current brightness: " + brightnessToSend, width / 2, 280);
}
function mousePressed() {
if (!port.opened()) return; // p5.webserial function to check if open
let stars = [
{ x: 80, brightness: 64 },
{ x: 160, brightness: 128 },
{ x: 240, brightness: 192 },
{ x: 320, brightness: 255 }
];
for (let s of stars) {
if (dist(mouseX, mouseY, s.x, 150) < 30) {
brightnessToSend = s.brightness;
// Send brightness (0–255)
port.write(brightnessToSend);
}
}
}
function drawStarButton(x, y, radius1, radius2, points, brightness) {
let angle = TWO_PI / points;
let halfAngle = angle / 2;
if (brightnessToSend === brightness) fill(255, 200, 0);
else fill(255);
push();
translate(x, y);
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
vertex(cos(a) * radius1, sin(a) * radius1);
vertex(cos(a + halfAngle) * radius2, sin(a + halfAngle) * radius2);
}
endShape(CLOSE);
pop();
}
Arduino:
// const int ledPin = 5;
// const int lightPin = A0;
// const int a=0;
// void setup() {
// Serial.begin(9600);
// pinMode(ledPin, OUTPUT);
// // pinMode(lightPin, INPUT);
// while (Serial.available() <= 0) {
// Serial.println(0);
// ; }
// }
// void loop() {
// int a=Serial.read();
// Serial.print("message print ");
// Serial.print(a);
// digitalWrite(ledPin, a);
// while (Serial.available()) {
// int ledState = Serial.parseInt();
// if (Serial.read() == '\n') {
// digitalWrite(ledPin, ledState);
// Serial.println(analogRead(lightPin));
// }
// }
// }
int led = 5;
void setup() {
Serial.begin(9600); // initialize serial communications
}
void loop() {
if (Serial.available()) {
int ballState = Serial.parseInt(); // reads full number like 0 or 1
if (ballState == 1) {
digitalWrite(led, HIGH); // ball on ground
} else {
digitalWrite(led, LOW); // ball in air or default
}
}
// read the input pin:
int potentiometer = analogRead(A1);
//
//remap the pot value to 0-400:
int mappedPotValue = map(potentiometer, 0, 1023, 0, 900);
// print the value to the serial port.
Serial.println(mappedPotValue);
// slight delay to stabilize the ADC:
delay(1);
// Delay so we only send 10 times per second and don't
// flood the serial connection leading to missed characters on the receiving side
delay(100);
}
video:
3rd exercise:
p5js
let velocity; // velocity vector of the ball
let gravity; // gravity force vector
let position; // position of the ball
let acceleration; // accumulated acceleration each frame
let wind; // wind force vector
let drag = 0.99; // drag factor to slow down velocity a bit
let mass = 50; // "mass" of the ball, also used as its size
let port; // serial port object for Arduino ↔ p5 communication
let button; // button to trigger serial connection popup
let open=false; // flag to track if we've tried to open the port
function setup() {
createCanvas(640, 360);
noFill();
position = createVector(width/2, 0); // start ball at top center
velocity = createVector(0,0); // start with no movement
acceleration = createVector(0,0); // acceleration accumulates forces
gravity = createVector(0, 0.5*mass); // gravity pulls ball downward
wind = createVector(0,0); // wind starts with no force
port = createSerial(); //port is an object that will be used to send message and receeieve message from arudnio
//createbutton creates button in p5js with quote ma lekyeko kura aayera
button=createButton("Connect to Arduino");
button.position(width/2,height/2); //where you want your button to be
button.mousePressed(openArduino); //mousePressed bhayo yo button ma bhanye kun function open garne pass garne ani it opens "openArduino" wala function
}
function openArduino(){
if(!port.opened()){ //to check if the port is opened or not we use function opened
port.open(9600) // we open the port for communication with 9600 frequency
button.remove() // once arudino is opended we removed the button to connect to ardunio
open=true; //just a variable to check if we opended the port or not
}
}
function draw() {
if(port.opened()){ // run main logic only if serial port is open
background(255); // clear canvas every frame
applyForce(wind); // apply wind force first
applyForce(gravity); // then apply gravity force
velocity.add(acceleration); // a → v
velocity.mult(drag); // apply drag to slowly reduce velocity
position.add(velocity); // v → position
acceleration.mult(0); // reset acceleration so next frame starts fresh
ellipse(position.x,position.y,mass,mass); // draw the ball
}
// collision + LED control are outside the port.opened() block,
// so they always run based on current position
if (position.y > height-mass/2) {
velocity.y *= -0.9; // A little dampening when hitting the bottom (bounce)
position.y = height-mass/2; // keep ball from sinking below the "floor"
port.write("1\n") // send "1" to Arduino → turn LED ON
}
else{
port.write("0\n") // otherwise send "0" → turn LED OFF
}
potvalue=port.readUntil("\n"); // read a line from Arduino (pot value as text)
// console.log(potvalue);
if(potvalue>514){ // simple threshold: above midpoint = wind to the right
wind.x=1
}
else{ // below midpoint = wind to the left
wind.x=-1
}
}
function applyForce(force){
// Newton's 2nd law: F = M * A
// or A = F / M
let f = p5.Vector.div(force, mass); // scale force by mass → acceleration
acceleration.add(f); // accumulate acceleration for this frame
}
function keyPressed(){
if (keyCode==LEFT_ARROW){
wind.x=-1; // keyboard override: push ball left
}
if (keyCode==RIGHT_ARROW){
wind.x=1; // keyboard override: push ball right
}
if (key==' '){
mass=random(15,80); // randomize mass (and drawn size)
position.y=-mass; // reset ball above the top so it falls back down
velocity.mult(0); // clear velocity so it restarts clean
}
}
int greenLight=7;
int sensor=A0;
void setup() {
// put your setup code here, to run once:
pinMode(greenLight,OUTPUT);
pinMode(sensor,INPUT);
Serial.begin(9600);
digitalWrite(greenLight,0);
}
void loop() {
// put our main code here, to run repeatedly:
// Serial.print("0");
int value= analogRead(sensor);
Serial.print(value);
Serial.print("\n");
while(Serial.available()>0){ //avaiable checks if there is any message in inbox of ardino
String a=Serial.readStringUntil('\n');
a.trim();
if(a=="1"){ //if we receive 1 then the light turns on else turn off
digitalWrite(greenLight,1);
}
else{
digitalWrite(greenLight,0);
}
}
}
video link: Google Drive