I want to create a hands-on experience for users to monitor the growth of a virtual plant on their computer screen by interacting with a physical soil sensor using Arduino and p5 js. The Interactive Plant Growth Monitor provides a basic yet engaging experience where users can observe the impact of watering on a virtual plant. This project aims to introduce the concept of real-time data exchange between physical sensors and digital simulations in a user-friendly manner.
Components: Physical Soil Sensor, Digital Plant Simulation, Real-time Data Exchange, User Interaction, Feedback System
Arduino-powered soil moisture sensor to measure the soil’s moisture level. P5.js for a simple and visually appealing digital plant simulation on the computer screen. Arduino collects real-time soil moisture data and sends it to the P5.js environment. Users water the virtual plant by physically adding water to the soil sensor. Visual feedback in the P5.js simulation reflects the plant’s growth based on the soil moisture level.
According to Charles Eames, design depends largely on constraints. The sequence of events challenges the so-called trickle down effect whereby advances in mainstream design are expected to eventually find their way into specialist products for people with disabilities, smaller markets that could not have supported cost of their development. Flow in the opposite direction is just as interesting. When the issues around disability catalyze new design thinking and influence a broader design culture in return.
Initially, closed captioning was introduced in the 1970s as a response to the needs of the deaf and hard-of-hearing community. However, its impact has expanded beyond its original purpose. Nowadays, closed captioning is commonly used by people who are not deaf or hard of hearing but find it helpful in various situations, such as when watching videos in noisy environments or in situations where audio is not desirable. The inclusive design principles that emerged from addressing the needs of the deaf and hard-of-hearing community have influenced the broader design culture. Designers now recognize the importance of creating products and services that are accessible to diverse user groups. This shift in mindset has led to the integration of accessibility features in various technologies, ranging from mobile applications to online platforms, making them more user-friendly for everyone.
The evolution of closed captioning illustrates how addressing specific disability-related challenges can lead to innovative design solutions that, in turn, benefit a much larger and diverse audience. This example underscores the idea that inclusive design, inspired by considerations for people with disabilities, can have a positive ripple effect throughout the design landscape.
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
For Arduino, I used a potentiometer to change the position of the ellipse in the p5js sketch. The ellipse starts from the left of the canvas, and it moves horizontally as the values from the potentiometer increase. The values from the potentiometer are mapped to the x coordinates of the ellipse, moving it across the horizontal axis in the middle of the screen.
//// 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);
//}
let left = 0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220,110,250);
fill("green");
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);
}
Exercise 2:
make something that controls the LED brightness from p5
In this p5.js sketch, moving the mouse horizontally controls the brightness of an LED, represented by the variable `mybrightness`. The canvas background changes in shades of blue with the mouse’s x-position. Pressing the space bar initiates a serial connection to the Arduino, enabling real-time communication. The `readSerial` function reads data from the Arduino, and the current brightness value is sent back by appending a new line character. This simple interaction allows the LED brightness to respond in real time to the horizontal mouse movement on the canvas.
Arduino Code:
// - 5 - LED
int ledpin=5;//pin for led to be used
void setup() {
// Start serial communication so we can send data
// over the USB connection to our p5js sketch
Serial.begin(9600);
pinMode(5,OUTPUT);//setting mode as output
pinMode(LED_BUILTIN, OUTPUT);
}
void loop() {
// wait for data from p5 before doing something
while (Serial.available()) {//while we read from serial
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
int brightness=Serial.parseInt();//the brightness is gotten from data from p5
if (Serial.read() == '\n') {//if we read \n,
analogWrite(ledpin, brightness);//turn on the led based on the intensity gotten from p5
Serial.println();//send \n
}
}
digitalWrite(LED_BUILTIN, LOW);//if it is not reading, turn of checker light
}
P5 js Code:
let mybrightness=0;
function setup() {
createCanvas(255,255);//make the canvas size 255 by 255
textSize(18);//set text size to 18
}
function draw() {
background(0,0,mouseX);//background be shades of blue
fill(255);//text be white
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
}
mybrightness=mouseX;//equate the mouseX to mybrightness
}
function keyPressed() {
if (key == " ") {
// important to have in order to start the serial connection!!
setUpSerial();//when space is pressed connect to arduino
}
}
// This function will be called by the web-serial library
// with each new line of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
let sendToArduino = mybrightness+'\n';
writeSerial(sendToArduino);//send mybrightness to arduino
}
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
The p5.js sketch features a blue ball that bounces on the canvas, and a corresponding LED turns on whenever the ball hits the floor. The wind effect on the ball’s movement is controlled by an analog sensor connected to the Arduino. When a ‘d’ key is pressed, a serial connection is established between p5.js and the Arduino. Pressing the space bar creates a new bouncing ball with a random mass and resets its position. The Arduino reads the wind intensity from an analog light sensor, and the LED is turned on or off based on the received brightness value from p5.js. The wind strength is then sent back to p5.js, completing the real-time interaction between the bouncing ball simulation and the Arduino-controlled LED.
Arduino Code:
int LedPin = 5;//pin to display light
void setup() {
// Start serial communication so we can send data
// over the USB connection to our p5js sketch
Serial.begin(9600);
// We'll use the builtin LED as a status output.
// We can't use the serial monitor since the serial connection is
// used to communicate to p5js and only one application on the computer
// can use a serial port at once.
pinMode(LED_BUILTIN, OUTPUT);
// Outputs on these pins
pinMode(LedPin, OUTPUT);//set pin as output
}
void loop() {
// wait for data from p5 before doing something
while (Serial.available()) {//while we read from serial
digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data for checker
int bright = Serial.parseInt();//read data from p5 and store in bright
if (Serial.read() == '\n') {//if the serial read is \n,
digitalWrite(LedPin, bright);//turn on or off led depending on the value of bright
int windsens=analogRead(A0);//read the windspeed from lightsensor
delay(5);//wait small to get reading
Serial.println(windsens);//send windspeed to p5
}
}
digitalWrite(LED_BUILTIN, LOW);//if not active turn checker led off
}
P5 js Code:
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let led=0;//variable controlling the led
function setup() {
createCanvas(640, 360);
fill(0,0,255);//ball to be blue
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(0,50);//background black with transperacy 50
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){led=1;}//if the ball touches the floor, turn on led
else{led=0;}//otherwise turn led off
}
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 == "d") {//when d is pressed create connection
// important to have in order to start the serial connection!!
setUpSerial();
}
if (key==' '){//when space is pressed create new ball and call bounce effect
mass=random(15,80);
position.y=-mass;
velocity.mult(0);
}
}
function readSerial(data) {
wind.x=map(int(data),0,1023,-2,2);//map the value gotten from the arduino to wind.x
let sendToArduino = led+'\n';
writeSerial(sendToArduino);//send the value of led to the srduino
}
My Arduino project combines an ultrasonic distance measurement sensor, a switch button, and a buzzer to create an interactive instrument. The ultrasonic sensor, consisting of a trig pin (connected to pin 10) and an echo pin (connected to pin 11), is utilized to measure the distance between the sensor and an object. The setup initializes the pins and sets up serial communication. In the loop function, the sensor is triggered to emit ultrasonic waves, and the duration of the wave’s round trip is measured. The distance is then calculated in centimeters based on the speed of sound. Additionally, a switch button connected to analog pin A0 turns on the music when I press the switch button.
int trig = 10;
int echo = 11;
long duration;
long distance;
int switch;
void setup() {
pinMode(echo, INPUT);
pinMode(trig, OUTPUT);
Serial.begin(9600);
}
void loop() {
digitalWrite(trig, LOW); //triggers on/off and then reads data
delayMicroseconds(2);
digitalWrite(trig, HIGH);
delayMicroseconds(10);
digitalWrite(trig, LOW);
duration = pulseIn(echo, HIGH);
distance = (duration / 2) * .0344; //344 m/s = speed of sound. We're converting into cm
int notes[7] = {261, 294, 329, 349, 392, 440, 494}; //Putting several notes in an array
// mid C D E F G A B
switch = analogRead(A0); //defining switch as digital button
if (distance < 0 || distance > 50 || force < 100) { //if not presed and not in front
noTone(12); //dont play music
}
else if ((force > 100)) { //if pressed
int sound = map(distance, 0, 50, 0, 6); //map distance to the array of notes
tone(12, notes[sound]); //call a certain note depending on distance
}
}
The musical aspect of the project involves an array of seven notes, representing the musical scale from mid-C to B. When the conditions are met (distance within a certain range and sufficient force applied), the distance is mapped to an index in the notes array. The corresponding note is then played using the tone function on pin 12. The project incorporates conditional statements to determine when to play a note and when to remain silent, providing an interactive experience where the user can generate musical tones by manipulating the distance and switch parameters.
I used this video to learn about the distance sensor and the tips to make a code for the music notes. To enhance my project, consider implementing error handling for the distance measurements, such as checking for valid sensor readings or outliers. I believe that adding comments to clarify the purpose of specific code sections can improve code readability, making it easier for others to understand the logic behind each step. Additionally, I want to incorporate debounce mechanisms for the switch button to prevent false triggers. Experimenting with different musical scales or incorporating dynamic melodies based on changing sensor inputs could add depth and creativity to the musical aspect of my project.
“My child can’t tie his shoelaces, but can use the iPad.”
I would like to write about the problem of using touch screens starting from the young generation these days. In the passage, the interesting part for me was that ” A child can’t understand Hamlet, but can understand Cat In The Hat. Yet, it’s Shakespeare, not Dr. Seuss, who is the centerpiece of our culture’s literature.” Today, tools that are dumbed down for children’s minds or children’s bodies are called “toys”. The younger generation using iPads more than books comes with a few concerns. Firstly, reading on screens might not be as good for understanding as reading from a real book. Also, the quick and fun stuff on iPads can make kids want more instant rewards, possibly leading to addiction-like behavior. iPads can make it easy to switch between apps and do many things at once, which could make it hard for kids to focus. The lack of a real, hands-on experience with books means missing out on a unique way of learning. Lastly, relying too much on iPads might limit kids from experiencing different things. I believe it is important to find a balance between screen time and other activities for healthier development.
Thus, to solve this kind of problem coming from touch screens, creating brain interfaces for kids should focus on making learning fun and balanced. These programs should help with reading, thinking, and problem-solving, while also making sure kids don’t spend too much time on screens. It’s important to give rewards in a fair way, so kids feel good about their achievements without getting too hooked. Making the programs interactive and including things to see and hear can make learning more exciting. Encouraging movement and using different senses is also good for helping kids develop important skills. These programs should cover a lot of different subjects and work together with teachers to make sure they’re helpful for learning. Parents should be able to check on what their kids are doing and guide them, making sure they use the programs responsibly. And most importantly, these programs should be for everyone, considering the different ways kids learn and where they come from so that every child can enjoy and learn from them.
My Arduino code simulates a mini DJ player by incorporating a potentiometer and a switch. The potentiometer, connected to analog input pin A1, emulates a DJ slider or knob, allowing you to control the brightness of an LED connected to PWM pin 11. This provides a visual representation of adjustments such as volume or fading effects.
Meanwhile, the switch, connected to digital input pin A2, mimics a button on the DJ player. When the button is pressed, a yellow light connected to pin 13 is activated briefly, creating a visual cue for a button press or an effect. The code establishes a loop that continuously reads the analog sensor value, and button state, and adjusts LED brightness accordingly, producing a dynamic and interactive simulation of a basic DJ player interface.
It does not look like DJ player in the bright light, and it was hard for me to take a video with one hand and simultaneously press the button with another hand.
int led = 11; //the PMW pin the LED is attached to
void setup(){
Serial.begin(9600);
//declare pin 11 to be output:
pinMode(led,OUTPUT);
pinMode(13, OUTPUT); //yellow light
pinMode(A2, INPUT); //button
}
// put your setup code here, to run once:
void loop() {
// put your main code here, to run repeatedly:
int sensorValue = analogRead(A1);
//Serial.println(sensorValue);
int buttonState = digitalRead(A2); //button
Serial.println(buttonState);
if (buttonState == 1) {
digitalWrite(13, HIGH);
delay(100);
} else {
digitalWrite(13, LOW);
//delay(300);
}
//set the brightness of pin 11 according to the sensor value/4)
analogWrite(led, sensorValue/4);
//wait for 30 milliseconds to see the diming effect
delay(30);
}
One particularly interesting aspect of the code is the use of the analog input from a potentiometer to control the brightness of an LED. The line int sensorValue = analogRead(A1); reads the analog input from pin A1, representing a DJ slider or knob. The subsequent analogWrite(led, sensorValue/4); adjusts the brightness of an LED on pin 11 based on this input, creating a dynamic and interactive simulation of volume or fade control. This part of the code adds a tangible and intuitive user interface element to the mini DJ player simulation.
In this article, the author talks about things that often show up in projects using physical computing. They say we should see these things as a kind of creative playground, not as limits. It’s like having a favorite game on the playground – it’s familiar, but the real fun starts when you add your special twist. The article mentions the Mattel/Nintendo Power Glove from 1989, adding a bit of nostalgia. Despite being old, it shows how simple ideas, like tapping, can become exciting. This glove, though basic, laid the foundation for the fun interactions we see in drum gloves today. The Power Glove reminds us that even simple ideas can turn into cool and unique things with time.
The article rightly says that gloves, especially drum gloves, are almost as popular as theremin instruments. Drum gloves are fun because they connect to something everyone understands – tapping to make a rhythm. Unlike the abstract theremin, drum gloves have a familiar way of making sounds. Tapping gives a structured way to create notes, making it easy for people to use. This fits well with the idea in the article that common themes in physical computing can be a starting point for creative expression, not a block.
The Power Glove from 1989 is a great example. It’s simple but directly connects with gestures, like tapping, which laid the groundwork for the engaging drum gloves we have today. The Power Glove and drum gloves show a balance between what’s familiar and what’s new, making physical computing a creative playground where each new version adds to the story of interactive art.
“Making Interactive Art: Set the Stage, Then Shut Up and Listen”
In “Making Interactive Art: Set the Stage, Then Shut Up and Listen,” the writer offers valuable insights into interactive art, likening it to a performance rather than a finished painting or sculpture. This perspective aligns seamlessly with the encouragement from the first reading to see physical computing as a creative playground, where established themes act as a starting point rather than a constraint.
The advice that the author suggests to the audience what their course of action could be resonates deeply. It encourages artists to think beyond creating a static piece and consider how they can guide the audience to uncover their own stories and emotional interpretations. This aligns with the idea that the stage is set not just by the artist but evolves with the contributions of the audience. It’s a beautiful way of framing interactive art as a collaborative journey where the artist provides the stage, and the audience brings the performance to life.
In my opinion, this approach to interactive art introduces a refreshing shift from the traditional view of art as a one-way communication. It empowers the audience to be co-creators, transforming the artistic experience into a shared exploration. The emphasis on suggesting rather than dictating allows for a more organic and diverse range of interpretations, enriching the overall impact of the artwork. It reinforces the notion that true interactivity lies not just in the technology but in the dialogue between the artist, the work, and the audience.
In Norman’s text, “Emotion & Design: Attractive Things Work Better,” the author explores the importance of aesthetics and first impressions in website design. He emphasizes that users tend to judge a website based on its initial look and feel, which significantly influences their perception of its quality and trustworthiness. The concept of the three cognitive stages (visceral, behavioral, and reflective) sheds light on the fact that aesthetics often take precedence over content. The reference to the connection between affect and cognition highlights that our emotions and cognitive processes are intertwined, and designers should consider both aspects to create truly effective and user-friendly designs. One excellent example of interactive media that highlights the importance of both usability and aesthetics is a mobile app. Mobile apps are prevalent in our daily lives and encompass various categories, from social media and productivity tools to games and entertainment. The visual design of the app, including color schemes, typography, and overall layout, significantly affects the aesthetics. A visually appealing app with a well-thought-out design can make users more likely to engage with it and spend more time on it.
Furthermore, Hamilton’s text provides the early days of the Apollo program and her pioneering contributions to computer science and software engineering. She defied societal expectations for women at the time and played a pivotal role in the coding of Apollo missions. Her meticulous attention to detail, evidenced by cautionary notes like ‘Do not touch P01,’ ensured the astronauts’ safety. Hamilton faced challenges and made mistakes during her journey, but her deep passion for her work never wavered. Her lasting commitment, combined with her remarkable contributions, portrays her as a pioneer who left a significant mark on the tech world. I greatly admire Margaret Hamilton and her influence on software engineering. Her story inspires everyone, demonstrating the endless potential that comes from dedicating yourself to your craft with innovation and genuine love.
When the diary is closed, it will complete an electrical circuit, allowing current to flow, and turning the switch “on.” The yellow LED light should be on when the diary is closed because usually, we should not read someone’s diary. So, in this project, I am using a diary as a privacy indicator. When the diary is closed, a tiny LED on its cover lights up, signaling that it’s off-limits and private. The light is a visual reminder to respect personal boundaries and not read someone’s personal thoughts. It’s a straightforward way to encourage privacy and uphold the tradition of keeping diaries safe from prying eyes.
During the project, there were some challenges. Attaching jumper wires to the diary’s pages was a bit tricky, and electric tape was used to help keep the copper wire in place, even though it may not look very clean. Another challenge was dealing with the copper wire – its insulation had to be removed to ensure the electrical circuit worked. Sometimes, the LED didn’t light up consistently when the diary was closed, likely due to difficulties in securing the copper wire in the notebook. Despite these challenges, the project successfully turned a diary into a privacy reminder.
“What A Waste” operates as an engaging educational game with a clear mission: to educate students about the crucial importance of proper waste segregation. It addresses a pressing issue in the United Arab Emirates (UAE) where recycling rates have fallen below 10%, primarily due to a lack of awareness and insufficient segregation infrastructure. The government’s sustainability goals for 2030 aim to divert 75% of waste from landfills, making proper waste segregation imperative. The game simulates real-life scenarios, such as students mistakenly placing non-recyclable items in recycling bins. Players must correctly sort recyclable items to prevent contamination in the recycling stream. By doing so, they learn the adverse consequences of unsorted waste, which not only hinder recycling but also increase the workload for recycling centers and waste management companies. “What A Waste” fosters a sense of responsibility and equips students with the knowledge and habits needed to contribute to recycling efforts, supporting the UAE’s sustainability goals and promoting a cleaner environment.
How the game works:
The game’s design incorporates a simple yet effective concept. Players click the start button, and trash items begin to fall from the screen. The challenge lies in catching and correctly placing plastic waste into the plastic recycling bin, earning 2 points for each correct placement. Catching the wrong trash, like dirty plastic plates or paper boxes, leads to a loss of life. This format tests players’ knowledge of proper recycling while making waste sorting and segregation engaging and interactive. The game’s mechanics align with its educational purpose, reinforcing the importance of correct waste management practices. It’s a game where entertainment meets education, allowing players to win by accumulating 15 points and, in turn, contributing to a more sustainable future.
Codes I am proud of:
class Basket {
constructor() {
this.x = width / 2; // Initialize the basket's x-position at the center of the canvas.
this.y = height - 100; // Initialize the basket's y-position near the bottom of the canvas.
this.width = 110; // Set the width of the basket.
this.height = 110; // Set the height of the basket.
}
// Renders the basket on the canvas.
display() {
// Use the image() function to display the basket image at the specified position and dimensions.
image(basketImage, this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);
}
//control the horizontal movement of the basket using arrow keys.
move() {
if (keyIsDown(LEFT_ARROW) && this.x > this.width / 2) {
this.x -= basketSpeed;
}
if (keyIsDown(RIGHT_ARROW) && this.x < width - this.width / 2) {
this.x += basketSpeed;
}
}
}
/// objects that fall from the top of the screen in the game.
class FallingObject {
constructor() {
this.x = random(width); // Initialize a random horizontal position for the falling object.
this.y = 0; // Set the initial vertical position at the top of the canvas.
this.radius = random(50, 70); // Set the size (radius) of the falling object.
this.speed = random(objectSpeedMin, objectSpeedMax); // Set the falling speed.
this.image = random(trashImages); // Randomly select an image for the falling object
// Check if the selected trash image is recyclable (true) or not (false).
this.isRecyclable = this.image === trashImages[0] || this.image === trashImages[1] || this.image === trashImages[2]; // Check if the trash is recyclable
}
display() {
// Use the image() function to display the object's image at its current position and size.
image(this.image, this.x - this.radius / 5, this.y - this.radius / 5, this.radius, this.radius);
}
// updates the vertical position, causing the object to fall down the screen.
fall() {
this.y += this.speed;
}
“FallingObject” is my favorite part of the code because it is the heart of the game’s dynamic and unpredictable nature. The FallingObject class is responsible for creating the diverse objects that rain down on the player. Its uncertainty lies in the use of randomization, ensuring that no two objects are alike in terms of position, size, and speed. This randomness adds an element of excitement and surprise to the game, making it more engaging for players.
What’s truly remarkable is how this part of my code logically manages the recyclability aspect. By checking and categorizing the objects as recyclable or not, it directly ties into the game’s core mechanics. Thus, this coding structure effectively integrates both fun and educational elements. Furthermore, the smooth movement of these falling objects enhances the gameplay’s fluidity, which is another reason I take pride in this code section. In essence, the FallingObject class is one of the standout features in my project.
Areas for Improvement:
During the development process, some challenges were encountered, such as refining the game’s difficulty curve and maintaining a balance between fun and education. I can implement adaptive difficulty levels that adjust based on the player’s performance for the next project. If a player consistently performs well, increase the challenge. If they struggle, offer easier levels or hints. Developing adaptive difficulty will make the game remain engaging for players of different skill levels. Moreover, the accessibility of the game, especially for younger players, was one of the considerations. Ensuring that the game is both fun and easy to understand for its target audience presented a significant design challenge. Despite these challenges, I believe my project successfully aligns entertainment with educational objectives, creating a promising tool for waste segregation awareness and fostering eco-conscious habits among students.
