overview:
In this assignment, I worked with Fady John to achieve the three exercises in class
Exercise 1:
p5 js
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:
//// 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:
P5 js
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:
///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:
P5 js
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:
///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); } } */
BOUNCING BALL VIDEO