Due 9/22/2021
Reading Response:
In Chapter 1 of The Art of Interactive Art, the author Chris Crawford explains his understanding of interactivity and shares his argumentation for why he believes it is a cyclical process in which two actors alternatively listen, think, and speak.
I agree with many of Crawford’s arguments in this chapter, but I am still of the belief that reading a book is an interactive process. Despite the book not talking back and there not being an active conversation between the book and the reader, there is still a physical interaction involved in this process. A reader is holding it, turning pages, and potentially also creating something based on the text content of the book (cookbook, manuals, or instructions). Despite this, I certainly agree that there is a need for more degrees of interactivities, and defining them into low, moderate, and high interactive processes can identify how immersive an interaction is. An example of a highly interactive process could be a conversation between two humans, whereas a low interactive process could be watering your plant.
Animation Project:
For this week’s Animation Project I decided to make what I have named a “Breathing Clock”. The animation is centered around a normal clock that displays the time and when you press the start button, the ellipse will start expanding and moving in intervals that are timed in a 4–7–8 second cycle. I chose to create this animation as breathing can be used as a great stress-reducing and anxiety-management tool. The method was developed by Andrew Weil (M.D) (https://www.drweil.com/videos-features/videos/breathing-exercises-4-7-8-breath/).
In this animation, the ellipse expands for four seconds, holds for seven seconds, and contracts for eight seconds, which is the visual representation of this breathing exercise.
Press start, breathe in, hold, breathe out, and then let me know how you feel afterward :)
CODE:
https://editor.p5js.org/sigloh/sketches/Yx4WfIYps
let img;
let button;
let font;
var started;
var timer;
var size;
var counter;
function setup() {
createCanvas(500, 500);
angleMode(DEGREES);
img = loadImage(‘clock background.jpeg’);
font = loadFont(‘BebasNeue-Regular.ttf’);
textFont(font);
button = createButton(‘START’);
button.position(225, 400);
button.mousePressed(changeButtonState);
started = false
size = 210;
counter = 0;
}
//CLICKING THE BUTTON
function changeButtonState() {
if (started) {
started = false;
button.html(‘START’);
clearInterval(timer);
size = 210;
counter = 0;
}
else {
started = true;
button.html(‘STOP’);
timer = setInterval(timeIt, 1000);
}
}
//BREATHE TIMER
function timeIt() {
if (counter < 4) {
size += 10;
}
else if (counter > 3 && counter < 11) {
// do nothing
}
else if (counter > 10 && counter < 19) {
size -= 5;
}
else {
counter = -1;
}
counter += 1;
}
//CLOCK
function draw() {
background(255);
image(img, 0, 0);
translate(250, 250);
fill (115, 119, 123);
noStroke();
textSize(30);
text(‘4–7–8’, -38, -190);
fill (115, 119, 123);
noStroke();
textSize(30);
text(‘BREATHING EXERCISE’, -95, -150);
rotate(-90);
let hr = hour();
let mn = minute();
let sc = second();
fill(171, 171, 171);
noStroke();
ellipse(0, 0, size);
noStroke();
fill(115, 119, 123);
ellipse(0, 0, 210);
strokeWeight(4);
stroke(255);
noFill();
let secondAngle = map(sc, 0, 60, 0, 360);
//arc(-250, 250, 300, 300, 0, secondAngle);
stroke(255);
let minuteAngle = map(mn, 0, 60, 0, 360);
//arc(-250, 250, 280, 280, 0, minuteAngle);
stroke(255);
let hourAngle = map(hr % 12, 0, 12, 0, 360);
//arc(-250, 250, 260, 260, 0, hourAngle);
push();
rotate(secondAngle);
stroke(242, 223, 225);
line(0, 0, 100, 0);
pop();
push();
rotate(minuteAngle);
stroke(242, 223, 225);
line(0, 0, 75, 0);
pop();
push();
rotate(hourAngle);
stroke(242, 223, 225);
line(0, 0, 50, 0);
pop();
}
