Processing: Creative Coding
Interactive Design with Arduino
艺术 01
2023.6.3
Learning Outcome
Understand the Arduino workflow
1 and programming syntax.
2 Study the Photoresistor in
Arduino and how it work with
Processing code.
3 Appreciate how to design an
interactive project with Arduino.
How does Arduino work?
Flash
Sketch
Memory
Bootloader
Processor
Compilation Execution
Machine LED Blink
Language
Arduino Syntax
Five common data types in Arduino programming:
Boolean data: stores true or false values
Character data type: single alphanumeric character
Byte data: 8-bit unsigned number
Integer data: 16-bit signed number
Float data: 32-bit floating-point number
Four common types of operators in Arduino programming:
Assignment: assign a value to a variable
Arithmetic: perform mathematical operations on values in a
program
Comparison: compare the values of two variables or
expressions
Logical: create logical expressions with true or false
outcomes
Photoresistor
A photoresistor is a simple component that changes its
resistance based on ambient light that it detects. It can be
used to create interactive programs that respond to changes
in light levels.
The photoresistor can measure changes in the amount of
light in the room and send that data to the Arduino board,
which will convert the analog signal into a digital signal and
send it over a serial connection to a Processing program
running on a computer.
set the output to the PinMode with the current value of "pwm"
set the output to the PinMode with the current value of "pwm"
Sample Code – Photoresistor in Arduino
int pwm = 0; //Declare the variable pwm
PinMode = 9; //Declare the PinMode
void setup() {
Serial.begin(9600); // initialize the serial with the rate
}
void loop() {
analogWrite(PinMode, pwm); // set the output to the
PinMode with the current value of "pwm"
delay(100); //add a delay
pwm++; //add the 'pwm' variable to increase
in loop
Serial.print(pwm); //print the current value
if(pwm>200){pwm=0; // checks whether the current value has
exceeded 200
}
}
Sample Code – Photoresistor in Processing
void draw () {
if ( myPort.available() > 0) //check If it is available,
{
val = myPort.read(); //we read it with myPort.read();.
}
background(0);
translate(width/2, height/2); //translate the origin to the
center of the screen
rotateY(frameCount * 0.01); //add a rotation around the
y and x-axis based on the frame rate and "val" variable
rotateX(val*0.1);
shape(particles); //display particles on the screen
with shape
Attention! Design Principles
01. simplicity 02. modularity
The code should be kept simple and easy to The code should be divided into smaller, independent
understand, even for beginners. modules that can be easily understood and tested.
03. abstraction 04. efficiency
Hide the implementation details of the code, and Make the code run faster and use fewer resources.
expose only the essential functionalities to the user
Create you
own
interactive
project!