Introduction:
When I was reading the book I noticed how my thoughts that I had internally were said outside. Maybe I didn’t know how to word it as well but the idea was just as clear. The way he describes the process and the way the designers think of it vs how we as the users think of the items is different and that kind of makes it uncomfortable to use. There are things specifically on campus that drive me crazy sometimes because of how it is made and not efficient.
Reading Response:
Based on the reading something that annoys me would be the doors on campus, specifically the doors at Dining Hall 2. They don’t have sensors to enter and require you to pull but then open themselves automatically. The harder you pull the more opposing force it uses to prevent you from opening it manually. I prefer doors that can just open from a push either way. But how do I use the frustration of these inefficient made doors in interactive media? Well, I would make it so that it’s user-friendly. Something that is so easy to use that intrinsic to use people, something that’s almost close to common sense for the everyday layperson. Not focusing on creating something that’s easy as a coder or an artist but something thats easy for my audience.
Data visualization:
Below is a data visualization that’s very simple and not advanced at all but just very basic to show data that’s all.
let users = [];
let colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffa500', '#800080', '#008080', '#ffd700'];
let timeAwakeInput, timeWorkingInput, submitButton, newUserButton, userSelect;
let currentUser = 0;
let barWidth = 20;
function setup() {
createCanvas(800, 500);
background(240);
drawAxes();
timeAwakeInput = createSelect();
for (let i = 2; i <= 24; i += 2) {
timeAwakeInput.option(i);
}
timeAwakeInput.position(10, 10);
timeWorkingInput = createSelect();
for (let i = 0.5; i <= 24; i += 0.5) {
timeWorkingInput.option(i);
}
timeWorkingInput.position(10, 40);
submitButton = createButton('Submit Entry');
submitButton.position(10, 70);
submitButton.mousePressed(addEntry);
newUserButton = createButton('New User');
newUserButton.position(110, 70);
newUserButton.mousePressed(createNewUser);
userSelect = createSelect();
userSelect.position(10, 100);
userSelect.changed(changeUser);
createNewUser();
textAlign(LEFT, CENTER);
text('Time Awake (hours):', 150, 25);
text('Time Working (hours):', 150, 55);
}
function createNewUser() {
let newUser = {
id: users.length,
color: colors[users.length % colors.length],
entries: []
};
users.push(newUser);
userSelect.option('User ' + (newUser.id + 1), newUser.id);
userSelect.selected(newUser.id);
currentUser = newUser.id;
}
function changeUser() {
currentUser = parseInt(userSelect.value());
}
function addEntry() {
let timeAwake = parseFloat(timeAwakeInput.value());
let timeWorking = parseFloat(timeWorkingInput.value());
if (timeWorking > timeAwake) {
alert("Time working cannot exceed time awake!");
return;
}
users[currentUser].entries.push({
timeAwake: timeAwake,
timeWorking: timeWorking
});
updateGraph();
}
function drawAxes() {
stroke(0);
line(50, height - 50, width - 50, height - 50); // X-axis
line(50, height - 50, 50, 50); // Y-axis
textAlign(CENTER);
text("Time Awake (hours)", width/2, height - 10);
push();
translate(15, height/2);
rotate(-HALF_PI);
text("Time Working (hours)", 0, 0);
pop();
for (let i = 0; i <= 24; i += 4) {
let x = map(i, 0, 24, 50, width - 50);
line(x, height - 50, x, height - 45);
textAlign(CENTER);
text(i, x, height - 35);
}
for (let i = 0; i <= 24; i += 4) {
let y = map(i, 0, 24, height - 50, 50);
line(45, y, 50, y);
textAlign(RIGHT);
text(i, 40, y);
}
}
function updateGraph() {
background(240);
drawAxes();
let groupWidth = barWidth * users.length;
for (let i = 0; i < users.length; i++) {
let user = users[i];
for (let entry of user.entries) {
let x = map(entry.timeAwake, 0, 24, 50, width - 50);
let barHeight = map(entry.timeWorking, 0, 24, 0, height - 100);
// Adjust x position based on user index
let adjustedX = x - groupWidth/2 + i * barWidth + barWidth/2;
fill(user.color);
rect(adjustedX - barWidth/2, height - 50 - barHeight, barWidth, barHeight);
push();
fill(0);
textAlign(CENTER);
textSize(10);
text(entry.timeWorking + "h", adjustedX, height - 55 - barHeight);
pop();
}
}
}
