Reading Reflection
This is the first time I have came across literature on design, and it is refreshing to read about design principles which ground artistic choices in a project. I believe technology itself is both a mode and barrier to communication; a barrier because human connection is supposed to be real, felt, and not interrupted, and a mode because of its ability to reach so many across the world just through sophisticated internet systems. Norman discusses this as well with how machines are rule based and rigid, but humans are flexible and develop relationships over understanding. The principles of discoverability and understanding are great design principles to begin with. Especially with code, I believe a well-commented code can actually get across the developer’s thinking process, and also makes the codebase a place for others to collaborate. I believe a well-commented code adds up to the discoverability of the code, such as what feature attributes to what code line specifically. I think this is a major part where it co-relates to interactive media.
I also find it interesting how Human Centered Design is called a philosophy and not an area of focus. I think this argument isn’t developed enough in the reading, as the reading refers to this as a philosophy but the rest are referred to as areas of focus.
Something that drives me crazy is delivery riders trying to find buildings on campus. Almost every time I order food the rider calls me because they are lost somewhere on the Highline. All the residences look the same from outside and the names are not visible from the road. There are basically no signifiers for them, so they go in circles until someone comes down to get the food. A map at each entrance (a stair leading from the ground floor or every road connection to the high line) that is laid out the same way the buildings actually are so the map and the real space match. It is such a small thing but it wastes time for both the rider and the student, and by Norman’s logic it is not the rider’s fault at all, it is the design.
For interactive media, feedback is the principle I keep coming back to. If a user clicks on something in a sketch and nothing happens right away, they just keep clicking, same as people pressing the elevator button over and over. A color change or a small sound is enough to tell them the program got their input. The user should also know what to click or press without me explaining it; a button has to look like a button. Mapping is the easy one in a sketch since moving the mouse up can move something up on the screen and nobody has to think twice. The system image part stayed with me the most though. The user can never ask me what I meant while they are using my project. Whatever is on the screen is all they get.
Coding Assignment
I decided to make a room simulation by using the data of the CO2 and temperature from an office room. I used the Occupancy Detection dataset from Kaggle, where they taken in different motion readings from the day including the CO2, temperature, and timing of the day. I map a graph directly below the simulated “room” to give us an idea of the CO2 levels of the room as the time of the day changes. I have also made a window which changes color as the time of the day changes, and then the color of the room changes as CO2 levels get higher or lower (Red for high CO2 and blue for lower).
Code I am proud of
The part I’m most proud of is getting the room to change color with the CO2 level. Each frame I take the current minute’s reading and use map() to turn it into a number between 0 and 1, where 400 ppm (roughly outdoor air) is 0 and 1400 ppm is 1. I wrap it in constrain() so a reading above 1400 can’t push the value past 1 and break the color. That number then goes into lerpColor(), which blends between a calm blue and a warm red, so the room slowly shifts from blue to red as the air gets stuffier over the day.
What I like about this is that one line of math carries the whole idea of the project. You don’t need to read the numbers to know the air is getting worse, you can just see the room turning red. It also made the lag really visible. People arrive around 7:36 but the room doesn’t turn noticeably red until after 9, because CO2 takes time to build up.
let r = rows[idx]; // ROOM: floor color follows CO2 (blue = fresh, red = stuffy) let t = constrain(map(r.co2, 400, 1400, 0, 1), 0, 1); fill(lerpColor(color(120, 180, 230), color(230, 90, 80), t)); stroke(60); strokeWeight(4); rect(100, 40, 600, 260);
How this was made
I started with importing the datatest.txt and cleaning it. There were a few errors with empty lines which I got rid off. To be particular, there was one less column header compared to the number of columns in the file, and when I was parsing each line to get each column value into the array, I ran into an error. There was an empty row, so I had to look for such things in the dataset too. Then I looked at the names of the headers, and assigned variables to each one.
Since the headers were shifted by one, I couldn’t rely on the names, so I read each value by its column number instead. I only kept the rows from February 3 because it’s a full day, midnight to midnight, which gave me 1440 readings, one for every minute. When I printed the first line of data, I noticed the file starts at 14:19 on February 2, so that day was incomplete. The file also stops partway through February 4, which left February 3 as the only full day, so I kept just that one. I saved each minute as an object with its time, temperature, light, CO2 and occupancy so the rest of the code would be easier to read.
After that I built the visual in layers. First the room, with the floor color changing from blue to red as CO2 goes up. Then the window, which gets brighter with the light reading, and two people who show up at the desks when the room is occupied. Under the room I drew a line graph of CO2 for the whole day, with a dashed line at 800 ppm since that’s around where ventilation usually kicks in. Last, I added the timeline so the day plays on its own, and you can hover over the canvas to scrub to any minute.
Embedded Sketch
Reflection and Improvement
I would want to make this simulation for dataset2 too, which was in the kaggle dataset. Those readings were taken with a closed room and therefore CO2 builds faster compared to this where it is slower. I would also love a 3d model of the room with actual sunlight changing as the day changes and the sunlight coming in from the window. I would probably make a comparison between the both.
