The reading discusses an app called Waze. Waze is a GPS app but with a twist, it does not only tell you how to get to your destination and what the shortest route is, but it also tells you which route has traffic and how long it’ll take you to get to your destination with traffic taken into account. This is not a new idea- to me at least because I have seen it applied in my google maps app. This application of the “social” in the “digital” to make applications even more useful to humans. In the old days, people would have to listen to the radio to know how the traffic conditions are, but now we have such apps to make our lives easier. The inventors of Waze did not create something completely new, they just relied on sensor technology to measure the traffic in the streets. They worked on something that existed previously and helped better it by adding what the reading calls “layers” to the original format – the map.
Category: Spring 2019
Response
The Digitization of Just About Everything
At first, I didn’t understand where the author was going with this text. However, his example of the Waze app really clarified the ‘digitization’ dialogue of the text, that due to it, we have new ways of acquiring knowledge and also, higher rates of innovation. These are two things that will form the next generation of the digital age. However, I think the most interesting part of the text for me was that as humans, our science will get better and better as digitization improves. This possibility seems so exciting for the future of research as it gives us more and more access to answering questions we never thought we would have the ability to answer. This made me wonder if/to what extent computers will ever reach the speed, depth and complexity of the human mind?
Design Meets Disability
This reading’s most interesting part to me is the talk of fashion and design for disability clashing. The focus was on glasses, which have now are now called “eyewear” in the industry. While needing glasses is a minimal disability to meet, the design to comfort the wearer and to remove the stigma around wearing them has been successful. Unlike most “designs” for other disabilities, the fashion industry did not try to hide them, but rather emphasize them. Glasses have become more of a fashion accessory rather than a medical necessity. The mention of embracing fashion when designing for disability seems very interesting because it might shed a more positive light on prosthetics and the overall confidence of the person who wears them.
In the reading, prosthetic hands were mentioned, and it said that most of them were either functional, but not good looking, or realistic with minimal function to them. I think we should try to snap out of the traditional thinking and try new “approaches” like the reading suggests in order to best progress and to provide options that are inclusive and will not leave the person to compromise between features.
This reading also reminded me of the alternative limb project. The project “explores the themes of body image, modification, evolution, and transhumanism, whilst promoting positive conversations around disability and celebrating body diversity” Their projects are really beautiful and artistic. Exploring exactly what the reading suggests.
Mona the Dancing Queen
This week’s assignment offered a lot of freedom in terms of what to do. Maybe, for my indecisive soul, a little too much of it. Coming up with an ‘art piece’ from scratch was above my end-of-the-semester exhausted creative capabilities – so I decided to take on a slightly different direction and make an already existing art piece interactive. I also wanted to learn to work with images, so this was a perfect opportunity to do so.
I took the most mainstream piece of artwork you can find – Mona Lisa- and gave her hands that move with the cursor. I started with slicing existing images in Photoshop, getting rid of the background and creating a png. The code is very similar to what we did in class- but writing it on my own and mending it to what I needed to achieve with this assignment actually helped to contextualize and understand Object Oriented Programming a lot more. I did not want to research much and attempted to write the code with as little outside help as possible.
The only issues I encountered was figuring out how to place and rotate the hand images. I knew how to do it with small objects that were drawn in Processing, and it took me a lot of trials and errors until I got a hang of it. What is more, I wanted to make the disco lights a little more interesting by adding some randomized blur to them, but using the filter(BLUR) function slowed down the image so much that the hands stopped moving smoothly- and I rather dropped the idea.
Another difficult part was getting used to thinking in terms of classes and not linear lines of codes. But, to be honest, it made the code incredibly neat and clean and made it very easy to change things up (especially pictures), whenever I wanted to trie or change something. Now I really can see why there is so much hype around it!
Here is the main code followed by the class code:
Hands handL;
Hands handR;
PImage Mona;
void setup() {
size(640, 460);
//loading the image of Mona from a folder
Mona = loadImage("hey mona final.png");
//locating where the cookies will be when cut out of the cookie cutter
handL = new Hands(150, 500);
handR = new Hands(400, 600);
}
void draw () {
background(0);
//Disco lights that follow the cursor - there is a little randomness in strokeweight, colors and lenght
for ( int i = 0; i < 5; i++) {
pushMatrix();
strokeWeight(random(1, 3));
stroke(random(255), random(255), random(255));
line((random(width)), random(height), mouseX, mouseY);
popMatrix();
}
//locating Mona to her spot on the screen
image(Mona, 0, 0);
//cutting the exact cookies out
handL.update();
handL.displayL();
handR.update();
handR.displayR();
}
class Hands {
float angle;
PVector origin;
PImage handL, handR;
Hands(float x, float y) {
origin = new PVector(x, y);
angle = 0;
}
void update() {
PVector destination = new PVector(mouseX, mouseY);
PVector direction = PVector.sub(destination, origin);
angle = direction.heading();
handR = loadImage("ruka dlha copy.png");
handL = loadImage("ruka dlha.png");
}
void displayL() {
pushMatrix();
translate(origin.x, origin.y);
rotate(angle);
//handL.resize(200, 100);
image(handL, 0, 0);
popMatrix();
}
void displayR() {
pushMatrix();
translate(origin.x, origin.y);
rotate(angle);
//handL.resize(200, 100);
image(handR, 0, 0);
popMatrix();
}
}
Reading Response: “Design Meets Disability”
“Design depends largely on constraints”, is among the most important arguments that is suggested by Graham Pullin in his book. Pullin quite strongly asserts that “good design” requires that the designer values simplicity over all other attributes of the design. This is an interesting point to me, because while I agree that it is important that the user is able to navigate using the design easily, there has to be a more holistic way to approach design. To an extent, the aesthetics of a design and its functionality can be interconnected, as we observed in a previous reading.
Pullin delves into the realm of designing for disability, and a crucial aspect of his argument regarding how “disability inspires design”, is that design in this framework aims to attract minimal attention and intends for the user to blend into their surroundings. This notion of presenting oneself as “normal” implies that there is something to be ashamed of in the first place. Pullin weaves in the example of glasses as a design that is successful in the sense that it eyewear is not associated with disability, due to certain fashion and media sensationalism that normalized this design. The fact that glasses are so successful as a design though, is not strictly due to their functionality, but rather to how people began perceiving them as products and items of fashion – when they are mainly designed for a certain disability.
After reading up on all the examples the text provides, Pullin’s argument regarding the importance of simplicity in designing a product became more vivid. When less emphasis is placed on the aesthetics of a product or design, perhaps more will go into “mak[ing] a design more accessible”.
SHAME GAME
//Box B[];
//startScreen S;
RotateBox Box;
EvilSquare evil, evil1;
boolean overButton = false;
boolean buttonPress = false;
int qwerty = 100;
void setup() {
size(820, 640);
// int lineLength = 30;
// int w = width/lineLength;
// int h = height/lineLength;
//B = new Box[w*h];
//float i = 0;
//S = new startScreen();
evil1 = new EvilSquare(qwerty);
evil = new EvilSquare(qwerty+100);
Box = new RotateBox();
}
void draw() {
background(175, 200, 250);
landscape();
Box.run();
startScrn();
if (buttonPress == true ){
//if (millis()% 10 == 0){
//translate(0,random(-300, 300));
evil.evilRun();
evil1.evilRun();
//for int i ==
textSize(25);
text("DEFEND!", width/2-50,height/2-10);
}}
void landscape() {
noStroke();
fill(20, 200, 125);
rect(0, height*.8, width, height);
noStroke();
fill(175, 180, 125);
triangle(width*.1-10, height*.75, width*.1+10, height*.75, width*.1, height*.75-100);
noStroke();
fill(20, 200, 125);
ellipse(width*.1, height*.8, 100, 100);
}
void checkButtons() {
if (mouseX > width*.4 && mouseX < width*.6 && mouseY > height*.4 && mouseY <height*.55) {
overButton = true;
}
}
void startScrn(){
if (buttonPress ==true){
noFill(); }
else {
stroke(random(255),random(255),random(255));
strokeWeight(5);
fill(230);
rect(width/20,height/20, width-width/10,height-height/10);
stroke(0);
strokeWeight(5);
fill(255);
rect(width*.4,height*.4, width*.2,height*.15);
fill(0);
text("start game", width*.46,height*.47);
}
}
//void reset(){
// noFill();
// stroke(0);
// strokeWeight(3);
// rect (width*.87,height*.9, 80, 30);
// text("reset", width*.92,height*.92);
//}
void mousePressed() {
if (overButton && mousePressed) {
buttonPress = true ;}
}
void mouseMoved() {
checkButtons();
}
Sorry.
class RotateBox {
PVector origin;
float angle;
int len;
RotateBox(){
origin = new PVector(width*.1, height*.75-100);
angle=0;
len =50;
}
void update() {
PVector mouse = new PVector(mouseX, mouseY);
PVector direction = PVector.sub(mouse, origin);//I want to subtract second from first one
angle = direction.heading();
}
void display() {
pushMatrix();
translate(width*.1, height*.75-100);
rotate(angle);
stroke(0);
strokeWeight(4);
fill(200,200,175);
rect(0, 0, len, 15);
popMatrix();
}
void run() {
update();
display();
}
}
class EvilSquare {
float x;
float y;
int qwe;
EvilSquare(int _qwe){
qwe = _qwe;
x = width +100+qwe;
y = height/2;
}
void scare(){
x --;
}
void display() {
pushMatrix();
stroke(0);
fill(255,10, 10);
strokeWeight(0);
rect(x,y, random(20, 50), random (20, 50));
popMatrix();
}
void evilRun(){
scare();
display();
}
}
Alien Snake Game
At first I wanted to go with the option of creating an artwork but I didn’t know what would count as an artwork, and satisfy the assignment requirements since a blank canvas could constitute as art. This project took me two whole days to figure out. I did a lot of research to figure out different parts of it, and I watched and followed several tutorials. I sort of created the art aspect of the project while focusing on creating a game. The purple photo is an ‘artwork’ I created while playing with placing random background color in different classes, in this case it cause what ever place that the snake passed through to remain the color of the snake (black). I wanted to do something more than the normal snake game so I experimented with colors and then decided that to make it more interesting I want to use a randomizer. I tried it with the background, which turned out horribly, then I tried it with the Snake and I really liked how it turned out. It gave me alien vibes so I named my game after it. I liked how at first because the snake is so small it just looks likes flashes but as the snake grows you can see all the colors. I really wanted the food to also be a different color each time so that it would be like the different color food is what is causing the shifting colors of the snake, but despite trying out different things, I couldn’t figure it out…
As for the code, I spent a while trying to figure out PVector and ArrayList. I also used Boolean and
int grid = 20;
int speed = 10;
boolean dead = true;
int highscore = 0;
Snake snake;
void setup() {
size(500, 500);
snake = new Snake();
food = new PVector();
newFood();
}
void draw() {
background(0,0,50);
fill(200,200,200);
if (!dead) {
if (frameCount % speed == 0) {
snake.update();
}
snake.show();
snake.eat();
fill(200,50,100);
rect(food.x, food.y, grid, grid);
textAlign(LEFT);
textSize(15);
fill(255);
text("Score: " + snake.len, 10, 20);
} else {
textSize(25);
textAlign(CENTER, CENTER);
text("Alien snake Game\nAre you up for the challenge?\nClick to start" + "\nHighscore: " + highscore, width/2, height/2);
}
}
void newFood() {
food.x = floor(random(width));
food.y = floor(random(height));
fill( random(255), random(255), random(255), random(255));
food.x = floor(food.x/grid) * grid;
food.y = floor(food.y/grid) * grid;
}
void mousePressed() {
if (dead) {
snake = new Snake();
newFood();
speed = 10;
dead = false;
}
}
//new class tab
class Snake {
PVector pos;
PVector vel;
ArrayList<PVector> hist;
int len;
int moveX = 0;
int moveY = 0;
Snake() {
pos = new PVector(0, 0);
vel = new PVector();
hist = new ArrayList<PVector>();
len = 0;
}
void update() {
hist.add(pos.copy());
pos.x += vel.x*grid;
pos.y += vel.y*grid;
moveX = int(vel.x);
moveY = int(vel.y);
pos.x = (pos.x + width) % width;
pos.y = (pos.y + height) % height;
if (hist.size() > len) {
hist.remove(0);
}
for (PVector p : hist) {
if (p.x == pos.x && p.y == pos.y) {
dead = true;
if (len > highscore) highscore = len;
}
}
}
void eat() {
if (pos.x == food.x && pos.y == food.y) {
len++;
if (speed > 5) speed--;
newFood();
}
}
void show() {
noStroke();
fill( random(255), random(255), random(255), random(255));
;
rect(pos.x, pos.y, grid, grid);
for (PVector p : hist) {
rect(p.x, p.y, grid, grid);
}
}
}
void keyPressed() {
if (keyCode == LEFT && snake.moveX != 1) {
snake.vel.x = -1;
snake.vel.y = 0;
} else if (keyCode == RIGHT && snake.moveX != -1) {
snake.vel.x = 1;
snake.vel.y = 0;
} else if (keyCode == UP && snake.moveY != 1) {
snake.vel.y = -1;
snake.vel.x = 0;
} else if (keyCode == DOWN && snake.moveY != -1) {
snake.vel.y = 1;
snake.vel.x = 0;
}
}
Sources:
file:///Users/Downloads/Processing.app/Contents/Java/modes/java/reference/PVector.html
file:///Users/Downloads/Processing.app/Contents/Java/modes/java/reference/ArrayList.html
https://forum.processing.org/topic/random-color-multiple-times
Bouncing Yoga Ball
It’s a Yoga Ball,,,,,, and it bounces.
/********* VARIABLES *********/
// We control which screen is active by settings / updating
// gameScreen variable. We display the correct screen according
// to the value of this variable.
//
// 0: Initial Screen
// 1: Game Screen
// 2: Game-over Screen
int gameScreen = 0;
int ballX, ballY;
int ballSize = 70;
int ballColor = color(0);
float gravity = 1;
float ballSpeedVert = 0;
float airfriction = 0.0001;
float friction = 0.1;
color racketColor = color(255,87,93);
float racketWidth = 100;
float racketHeight = 10;
int racketBounceRate = 20;
float ballSpeedHorizon = 10;
//int ballZ, ballM;
//int ballMSize = 60;
/********* SETUP BLOCK *********/
void setup() {
size(500, 500);
ballX=width/4;
ballY=height/5;
}
/********* DRAW BLOCK *********/
void draw() {
// Display the contents of the current screen
if (gameScreen == 0) {
initScreen();
} else if (gameScreen == 1) {
gameScreen();
} else if (gameScreen == 2) {
gameOverScreen();
}
}
/********* SCREEN CONTENTS *********/
void initScreen() {
// codes of initial screen
background(0);
textAlign(CENTER);
text("Click to start", height/2, width/2);
}
void gameScreen() {
background(244,56,70);
drawBall();
applyGravity();
keepInScreen();
drawRacket();
watchRacketBounce();
applyHorizontalSpeed();
}
void applyHorizontalSpeed(){
ballX += ballSpeedHorizon;
ballSpeedHorizon -= (ballSpeedHorizon * airfriction);
}
void makeBounceLeft(int surface){
ballX = surface+(ballSize/2);
ballSpeedHorizon*=-1;
ballSpeedHorizon -= (ballSpeedHorizon * friction);
}
void makeBounceRight(int surface){
ballX = surface-(ballSize/2);
ballSpeedHorizon*=-1;
ballSpeedHorizon -= (ballSpeedHorizon * friction);
}
// codes of game screen
void watchRacketBounce() {
float overhead = mouseY - pmouseY;
if ((ballX+(ballSize/2) > mouseX-(racketWidth/2)) && (ballX-(ballSize/2) < mouseX+(racketWidth/2))) {
if (dist(ballX, ballY, ballX, mouseY)<=(ballSize/2)+abs(overhead)) {
makeBounceBottom(mouseY);
// racket moving up
if (overhead<0) {
ballY+=overhead;
ballSpeedVert+=overhead;
}
}
}
}
void applyGravity() {
ballSpeedVert += gravity;
ballY += ballSpeedVert;
ballSpeedVert -= (ballSpeedVert * airfriction);
}
void makeBounceBottom(int surface) {
ballY = surface-(ballSize/2);
ballSpeedVert*=-1;
ballSpeedVert -= (ballSpeedVert * friction);
}
void makeBounceTop(int surface) {
ballY = surface+(ballSize/2);
ballSpeedVert*=-1;
ballSpeedVert -= (ballSpeedVert * friction);
}
void drawRacket(){
fill(racketColor);
rectMode(CENTER);
rect(mouseX, mouseY, racketWidth, racketHeight);
}
// keep ball in the screen
void keepInScreen() {
// ball hits floor
if (ballY+(ballSize/2) > height) {
makeBounceBottom(height);
}
// ball hits ceiling
if (ballY-(ballSize/2) < 0) {
makeBounceTop(0);
}
if (ballX-(ballSize/2) < 0){
makeBounceLeft(0);
}
if (ballX+(ballSize/2) > width){
makeBounceRight(width);
}
}
void drawBall() {
fill(ballColor);
ellipse(ballX, ballY, ballSize, ballSize);
//ellipse(ballZ, ballM, ballMSize, ballMSize);
}
void gameOverScreen() {
// codes for game over screen
}
/********* INPUTS *********/
public void mousePressed() {
// if we are on the initial screen when clicked, start the game
if (gameScreen==0) {
startGame();
}
}
/********* OTHER FUNCTIONS *********/
// This method sets the necessary variables to start the game
void startGame() {
gameScreen=1;
}
referenced from the tutorial in the following link:
https://www.toptal.com/game/ultimate-guide-to-processing-simple-game
Design meets Disability
This reading presents a dilemma in the design of the products that helped people with disabilities. The text presents a comparison between aid objects that have a different level of social acceptance. While in the design of hearing aids objects discretion is one of the most important characteristics, in the design of eyeglasses fashion is almost a must. My guess to explain this phenomenon is that the more common is the disability and the less impact that it has in the person’s life causes to find “normal” certain aid devices. Another main takeaway of this reading is the importance of considering disabilities in the design process of daily objects. Sometimes a bad design of the simplest can really affect people’s life and right now, due to my knee injury and that I am using clutches, I have been able to perceive the bad design of the simplest thing. I am impressed by how much a friendly disabilities design can make life easier.
Memory Card Game
For this project, I decided to make a memory card game where the user would be given a set of cards and would have to match two cards in order to get rid of them, until the game ends of course.
I originally got this idea from Meri Engel, so I will leave a link to her youtube channel below.
https://www.youtube.com/channel/UCjBGQA6hPD3SY4G5feqMDFw
So, now on to the procedure.
To do this I first created a class called Cards that would have values of its x-coords, y- coords, FaceValue, etc. Moreover with the certain attributes, the class would also have functions such as faceDown() or displayFront() which would flip the card back and forth.
In the main part of my code, interactions with the cards began. I would have an array that would store two flipped cards, and then check if they were the same. Before that, I had a shuffle function that would randomly shuffle the cards in different order, since without shuffling they would be placed in same order every time. Finally, the mouseClicked() function would serve as where I would click in terms of coordinates and if so what would happen, which of course would be to flip the cards. But even here, I didn’t want to flip more than two cards so I have a switch that flips back the cards.
Below is my code, and below that is the youtube video of me explaining how it works.
Cards[] myCard = new Cards[6];
int[] x = new int[6]; //x coordinate array
int[] y = new int[6]; //y coordinate array
int[] fv = new int[6]; //facevalue array
int[] checkFv = new int[2]; //check face value
int[] cardUp = new int[2]; //check card up
boolean[] clicked = new boolean[8];
PImage flip;
PFont myFont;
int flipped = 0;
int win = 0;
void setup(){
int myX = 15; // x coord
int myY = 15; // y coord
int myFv = 0;
int count = 1;
size(1000,1000);
myFont =createFont("Verdana",40,true);
flip = loadImage("flip.png"); // flip button
for(int i =0; i<6;i++){ //spacing out the cards
clicked[i] = false; //can't click card again
y[i] = myY;
x[i] = myX;
fv[i] = count;
count += 1;
if(count == 4){ // number of replicates
count = 1;
}
if(myX <345){
myX += 250;
} else if (myX >345){
myX = 15;
myY += 400;
}
}
shuffle();
for(int i=0;i<6;i++){
myCard[i] = new Cards(x[i],y[i],fv[i]); //each card is assigned coordinate value
}
}
void draw(){
textFont(myFont);
fill(0);
background(255);
for(int i=0;i<6;i++){
myCard[i].display();
}
image(flip,500,750);
if(mousePressed){
if(mouseX>500 && mouseX<600 && mouseY > 770 && mouseY<880){
for(int i = 0; i<6;i++){
myCard[i].faceDown();
clicked[i]=false;
flipped=0;
}
}
}
if(win == 3){
text("You Win!",500,500);
}
}
/*
void flipme(){//flipperino
for(int i=0;i<6;i++){
if(mouseX>x[i] && mouseX<(x[i]+305) && mouseY > y[i] && mouseY<(y[i]+350)){
myCard[i].displayFront();
}
}
}
*/
void mouseClicked(){
for(int i=0;i<6;i++){
if(mouseX>x[i] && mouseX<(x[i]+250) && mouseY > y[i] && mouseY<(y[i]+300) && (clicked[i]==false) ){
myCard[i].displayFront();
clicked[i] =true;
cardUp[flipped] = i;
flipped++;
println(flipped);
if(flipped == 2){
flipped = 0;
if(fv[cardUp[0]] == fv[cardUp[1]]){
myCard[cardUp[0]].matched();
myCard[cardUp[1]].matched();
win += 1;
}
/*else if(fv[cardUp[0]] != fv[cardUp[1]]){
myCard[cardUp[0]].display();
myCard[cardUp[1]].display();
myCard[cardUp[0]].faceDown();
myCard[cardUp[1]].faceDown();
clicked[i] = false;
clicked[i+1] = false;
}
*/
}
}
}
}
void shuffle(){//shufflerino
int temp = 0;
int rand = 0;
for(int i=0; i<6;i++){
rand = int(random(0,6));
temp = fv[i];
fv[i] = fv[rand];
fv[rand] = temp;
}
}
class Cards{
PImage cardImage;
int show = 0;
//int cWidth = 105;
//int cHeight = 130;
int cX = 0;
int cY = 0;
int faceValue = 0;
String[] cardName ={"0.png","creep.png","isabelle.png","kk.png","psycho.png","digby.png","tomnook.png"};
Cards(int x, int y, int fv){
cX = x;
cY = y;
faceValue = fv;
}
void display(){
cardImage = loadImage(cardName[show]);
image(cardImage,cX,cY);
}
void displayFront(){
show = faceValue;
}
void faceDown(){
show = 0;
}
void matched(){
cX = -300;
}
}