rhoh@andrew.cmu.edu – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice https://courses.ideate.cmu.edu/15-104/f2018 Professor Roger B. Dannenberg • Fall 2018 • Introduction to Computing for Creative Practice Sat, 12 Sep 2020 00:17:52 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.25 Robert Oh – Final Project- “QuadTask” https://courses.ideate.cmu.edu/15-104/f2018/2018/12/06/robert-oh-final-project-quadtask/ https://courses.ideate.cmu.edu/15-104/f2018/2018/12/06/robert-oh-final-project-quadtask/#respond Fri, 07 Dec 2018 04:00:18 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=38280 Continue reading "Robert Oh – Final Project- “QuadTask”"]]>

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Final Project

//assigning variables

highScore = 0;
score = 0;
scoreTimer = 0;
list1 = [0, 0, 1, 0, 0];
arrList = [0, 0, 0, 0, 0];
circleX = [-1, -1, -1];
circleY = [0, 0, 0];
circleTime = [9, 9, 9];
operations = ["times", "plus", "minus"];
currTime = -1;
currTime2 = -1;
highlightInd = 2;
wallX = 1000;
wallY = 1000;
squareY = 660;
squaredy = 0;
gameState = "Menu";
cause = "";
int1 = 0;
int2 = 0;
int3 = 0;
quizTimer = 7; 
dir = "up";
realDir = "up";
replace = 0;
real = 0;
fake = 0;


//setting up the game
function setup() {
    createCanvas(600, 600);
    frameRate(300);
    arrList[int(random(5))] = makeArrow(0);
    circleTime[0] = 10;
    circleX[0] = random(width / 2 + 25, width - 25);
    circleY[0] = random(25, height / 2 - 25); 
    wallX = width / 2 - 15;
    wallY = int(random(height / 2, height - 100));
    quizTimer = 7;
    int1 = int(random(1, 10));
    int2 = int(random(1, 10));
    if (random(0, 1) > .5){
        replace = 2;
        if (random(0, 1) > .5){
            int3 = int2 + 1;
        }
        else {
            int3 = int2 - 1;
        }
    }
    else{
        replace = 1;
        if (random(0, 1) > .5){
            int3 = int1 + 1;
        }
        else {
            int3 = int1 - 1;
        }
    }
    word = random(operations);
    if (random(0, 1) > .5){
        realDir = "up";
    }
    else {
        realDir = "down";
    }
}

function draw() {
    background(67, 239, 236);
    //playing the game
    if (gameState == "Play"){
        noStroke();
        fill(155, 216, 255);
        rect(0, 0, width / 2, height / 2);
        fill(255, 214, 112);
        rect(width / 2, 0, width, height / 2);
        fill(121, 255, 112);
        rect(0, height / 2, width / 2, height);
        fill(255, 114, 135);
        rect(width / 2, height / 2, width, height);
        strokeWeight(3);
        stroke(89, 89, 89);
        line(0, height / 2, width, height / 2);
        line(width / 2, 0, width / 2, height);
        noStroke();
        fill(0);
        textSize(20);
        textStyle(BOLD);
        text(("Score: " + score), 0, height / 2 )
        drawTopLeft();
        drawTopRight();
        drawBotLeft();
        drawBotRight();
        temp2 = second();
        if (temp2 != scoreTimer){
            scoreTimer = temp2;
            score ++;
        }
    }
    //losing the game
    else if (gameState == "Done"){
        if (score > highScore){
            highScore = score;
        }
        background(255, 91, 151);
        fill(193, 193, 193);
        rect(width / 4, height / 4, width / 2, height / 2, 2);
        textSize(25);
        fill(0);
        noStroke();
        text("Death By: ", width / 2 - 110, height / 2 - 30);
        text(cause, width / 2 + 5, height / 2 - 30);
        fill(7, 246, 255);
        text("High Score: " + highScore, width / 2 - 90, height / 2 + 30);
        fill(101, 255, 73);
        text("RESTART? Press R", width / 2 - 120, height / 2 + 100);
        textStyle(BOLD);
        textSize(40);
        fill(255, 0, 0);
        text("GAME OVER", width / 2 - 125, height / 2 - 70);   
    }
    //main menu
    else if (gameState == "Menu"){
        textStyle(BOLD);
        textSize(70);
        fill(0);
        if (mouseX >= 185 & mouseX <= 400 && mouseY >= 120 && mouseY <= 175){
            fill(0, 255, 0);
        }
        text("START", width / 2 - 120, height / 2 - 130);
        fill(0);
        if (mouseX >= 40 & mouseX <= 570 && mouseY >= 310 && mouseY <= 355){
            fill(255, 0, 0);
        }
        text("INSTRUCTIONS", width / 2 - 250, height / 2 + 60);
        textStyle(NORMAL);
        textSize(20);
        fill(0);
        text("A multi-tasking game made by Robby Oh", width - 375, height - 45);
    }
    //Looking at rules
    else if (gameState == "Info"){
        fill(0);
        textStyle(BOLD);
        textSize(30);
        text("Survive as long as you can!", 100, 40);
        textSize(23);
        textStyle(NORMAL);
        fill(0, 212, 255);
        text("Press 'A' and 'D' to avoid the arrows!", 100, 140);
        fill(255, 214, 112);
        text("Click the circles before time runs out!", 100, 240);
        fill(19, 234, 0);
        text("Press 'Space Bar' to dodge the wall!", 100, 340);
        fill(255, 114, 135);
        text("Press 'W' and 'S' to answer the quiz correctly!", 100, 440);
        fill(0);
        text("Press 'M' to return to the menu!", 100, 540);
    }
}

//drawing the top-left box
function drawTopLeft(){ 
    strokeWeight(0);
    fill(0);
    rect((width / 4) - 127.5, height / 4 + 1.5, 255, 17);
    for (i = 0; i < list1.length; i ++){
        if (list1[i] == 1){
            fill(0, 27, 206);
        }
        else {
            fill(155, 216, 255);
        }
        rect((width / 4 - 123.5) + (i * 50), (height / 4) + 5, 47, 10);
    }
    for (i = 0; i < 5; i ++){
        if (arrList[i] != 0){
            fill(0);
            obj = arrList[i];
            triangle(52 + (i * 50), obj.y, 32 + (i * 50), obj.y - 30, 67 + (i * 50), obj.y - 30);
        }
    }
    updateArr();
}

//drawing the top-right box
function drawTopRight(){
    for (i = 0; i < 3; i ++){
        if (circleX[i] != -1){
            fill(255, 181, 0);
            ellipse(circleX[i], circleY[i], 50);
            fill (0);
            textSize(15);
            textStyle(BOLD);
            text(("" + circleTime[i]), circleX[i] - 4, circleY[i] + 5);
        }
    }    
    updateCircle();
}

//drawing the bottom-left box
function drawBotLeft(){
    fill(6, 211, 50);
    rect(30, squareY, 40, 40);
    fill(0);
    rect(wallX, wallY, 15, 100);
    updateWall();
}

//drawing the bottom-right box
function drawBotRight(){
    if (quizTimer >= 0){
        fill(0);
        textStyle(BOLD);
        textSize(25);
        text("WHAT IS: ", width / 2 + 20, height / 2 + 40);
        disString = ("" + int1) + " " + word + (" " + int2) + " ?"; 
        text(disString, width / 2 + 150, height / 2 + 40);
        if (word == "plus"){
            real = int1 + int2;
            if (replace == 1){
                fake = int3 + int2;
            }
            else {
                fake = int1 + int3;
            }
        }
        if (word == "times"){
            real = int1 * int2;
            if (replace == 1){
                fake = int3 * int2;
            }
            else {
                fake = int1 * int3;
            }
        }
        if (word == "minus"){
            real = int1 - int2;
            if (replace == 1){
                fake = int3 - int2;
            }
            else {
                fake = int1 - int3;
            }
        }
        if (realDir == "up"){
            text(("" + real), width / 2 + 180, height / 2 + 90);
            text(("" + fake), width / 2 + 180, height / 2 + 280);

        }
        else {
            text(("" + fake), width / 2 + 180, height / 2 + 90);
            text(("" + real), width / 2 + 180, height / 2 + 280);
        }
        fill(0);
        textStyle(NORMAL);
        text(("TIMER: " + quizTimer), 320, 475);
        fill(224, 0, 33);
        stroke(0);
        if (dir == "up"){
            rect(width / 2 + 181, height / 2 + 125, 15, 60);
            triangle(width / 2 + 188, height / 2 + 105, width / 2 + 168, height / 2 + 125, width / 2 + 208, height / 2 + 125);
        }
        else if (dir == "down") {
            rect(width / 2 + 181, height / 2 + 185, 15, 50);
            triangle(width / 2 + 188, height / 2 + 250, width / 2 + 168, height / 2 + 230, width / 2 + 208, height / 2 + 230);
        }
        var temp = second();
        if (temp != currTime2){
            quizTimer --;
            currTime2 = temp;
        }
    }
    else{
        if (dir == realDir){
            var temp = second();
            if (temp != currTime2){
                quizTimer --;
                currTime2 = temp;
            }
            if (quizTimer > -3){
                textSize(40);
                text("CORRECT!", 3 * width / 4 - 100, 3 * height / 4 + 10);
            }
            else {
                quizTimer = 7;
                int1 = int(random(1, 10));
                int2 = int(random(1, 10));
                if (random(0, 1) > .5){
                    replace = 2;
                    if (random(0, 1) > .5){
                        int3 = int2 + 1;
                    }
                    else {
                        int3 = int2 - 1;
                    }
                }
                else{
                    replace = 1;
                    if (random(0, 1) > .5){
                        int3 = int1 + 1;
                    }
                    else {
                        int3 = int1 - 1;
                    }
                }
                word = random(operations);
                if (random(0, 1) > .5){
                    realDir = "up";
                }
                else {
                    realDir = "down";
                }
            }
        }
        else {
            cause = " Quiz!";
            gameState = "Done";
        }
    }
    
}

//updating the bottom-left box
function updateWall(){
    if ((wallX <= 70 & wallX >= 30) && ((squareY >= wallY && squareY <= wallY + 100) || (squareY + 40 >= wallY && squareY + 40 <= wallY + 100))){
        cause = " Walls!";
        gameState = "Done";
    }
        
    if (wallX + 15 < 0){
        wallX = width / 2 - 15;
        if (squareY < 3 * height / 4){
            wallY = int(random(squareY, squareY + 20));
        }
        else {
            wallY = int(random(squareY - 80, squareY - 60));
        }
    }
    wallX -= 2;
    squareY -= squaredy;
    if (keyIsDown(32)){
        squaredy = 3;
    }
    else{
        squaredy = -3;
    } 
    if (squareY + 40 >= height){
        squareY = height - 40;
    }
    if (squareY <= height / 2){
        squareY = height / 2;
    }
}

//updating the top-right box
function updateCircle(){
    var count = 0;
    for (i = 0; i < 3; i ++){
        if (circleX[i] != -1){
            count ++;
        }
        if (circleTime[i] <= 0 & circleX[i] != -1){
            cause = " Circles!";
            gameState = "Done";
        }
    }
    if (count == 0){
        circleTime[0] = 9;
        circleX[0] = random(width / 2 + 25, width - 25);
        circleY[0] = random(25, height / 2 - 25); 
        count += 1;
    }
    for (i = 0; i < 3; i ++){
        if (circleX[i] != -1){
            times = second();
            if (times != currTime){
                for (j = 0; j < 3; j ++){
                    if (circleX[i] != -1){
                        circleTime[j] -= 1;
                        currTime = second();
                    }
                }
            }
        }
        else {
            if (count < 3 & max(circleTime) < 7){
                circleTime[i] = 9;
                circleX[i] = random(width / 2 + 25, width - 25);
                circleY[i] = random(25, height / 2 - 25); 
                count += 1;
            }
        }

    }
}

//updating the top-left box
function updateArr(){
    var count = 0;
    for (i = 0; i < 5; i ++){
        if (arrList[i] != 0){
            count ++;
        }
    }
    for (i = 0; i < 5; i ++){
        if (arrList[i] != 0){
            obj = arrList[i];
            if (highlightInd == i & height / 4 > obj.y - 30 && height / 4 + 10 < obj.y ){
                gameState = "Done";
                cause = " Arrows!";
            }

            if (obj.y > height / 2){
                arrList[i] = 0;
            }
            obj.y += obj.dy;
        }
        else {
            if (random(1) > .995 & count < 3){
                arrList[i] = makeArrow(0);
                count ++
            }
        }
    }

}

//key presses
function keyPressed(){
    if (gameState == "Play"){
        if (keyIsDown(65)){
            if (highlightInd > 0){
                list1[highlightInd] = 0;
                highlightInd --;
                list1[highlightInd] = 1;
            }
        }
        if (keyIsDown(68)){
            if (highlightInd < 4){
                list1[highlightInd] = 0;
                highlightInd ++;
                list1[highlightInd] = 1;
            }
        }
        if (keyIsDown(87)){
            dir = "up";
        }
        if (keyIsDown(83)){
            dir = "down";
        }
    }
    if (gameState == "Info"){
        if (keyIsDown(77)){
            gameState = "Menu";
        }
    }
    if (gameState == "Done" & keyIsDown(82)){
        list1 = [0, 0, 1, 0, 0];
        arrList = [0, 0, 0, 0, 0];
        highlightInd = 2;
        gameState = "Menu";
        cause = "";
        arrList[int(random(5))] = makeArrow(0);
        circleX = [-1, -1, -1];
        circleY = [0, 0, 0];
        circleTime = [9, 9, 9];
        currTime = -1;
        circleX[0] = random(width / 2 + 25, width - 25);
        circleY[0] = random(25, height / 2 - 25); 
        wallX = width / 2 - 15;
        wallY = int(random(height / 2, height - 100));
        quizTimer = 7;
        int1 = int(random(1, 10));
        int2 = int(random(1, 10));
        if (random(0, 1) > .5){
            replace = 2;
            if (random(0, 1) > .5){
                int3 = int2 + 1;
            }
            else {
                int3 = int2 - 1;
            }
        }
        else{
            replace = 1;
            if (random(0, 1) > .5){
                int3 = int1 + 1;
            }
            else {
                int3 = int1 - 1;
            }
        }
        word = random(operations);
        if (random(0, 1) > .5){
            realDir = "up";
        }
        else {
            realDir = "down";
        }
        score = 0;
    }
} 

//mouse clicks
function mouseClicked(){
    if (gameState == "Play"){
        for (i = 0; i < 3; i ++){
            if (dist(mouseX, mouseY, circleX[i], circleY[i]) < 25){
                circleX[i] = -1;
                circleTime[i] = 5;
            }
        }
    }
    else if (gameState == "Menu"){
        if (mouseX >= 185 & mouseX <= 400 && mouseY >= 120 && mouseY <= 175){
            gameState = "Play"; 
        }
        
        if (mouseX >= 40 & mouseX <= 570 && mouseY >= 310 && mouseY <= 355){
            gameState = "Info";
        }
    }
}

//object for arrows (top-left box)
function makeArrow(yValue) {
    var arr = {y : yValue,
                dy : random(1, 1.5)};
    return arr;
}

I had a TON of fun creating this final project, which I have named “QuadTask”. Essentially, it is a multi-tasking game where you must look at 4 different boxes and complete each task in order to survive as long as you can. To start, you must click on “Start”, or click on “Instructions” to read up on my rules. It was fun creating a different task for each box and making them all unique but equally challenging! If I had more time to spend, I probably would have made the difficulty increase as the time increases. Personally, my high score was 81, so if you beat that score, kudos to you! All in all, I hope you have fun with my game! – Robert Oh

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/12/06/robert-oh-final-project-quadtask/feed/ 0
Robert Oh- Project 12- Proposal https://courses.ideate.cmu.edu/15-104/f2018/2018/11/17/robert-oh-project-12-proposal/ https://courses.ideate.cmu.edu/15-104/f2018/2018/11/17/robert-oh-project-12-proposal/#respond Sun, 18 Nov 2018 04:59:09 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=37864 Continue reading "Robert Oh- Project 12- Proposal"]]>

For my final project, I wanted to create a “multi-tasking” game. I remember back when I was a kid, there was a multi-tasking game that my friends and I would play in order to see who could score the most number of points (and so prove who was the best at multi-tasking).

And so, I wish to create a similar game where you must keep track of many different elements at the same time in order to survive. For example, I have 4 examples in my photo below that the player must keep track of. The top-left photo contains a ball on top of a platform in which you have to balance (the ball may move to the right or left of the platform). The top-right photo contains a clicking game where you must click inside the spawned circles before the time runs out. The bottom-left photo contains a turtle running hurdles, where you have to press the space bar for the turtle to jump. Finally, the bottom-right photo shows a hollow semi-circle that you must rotate to allow the arrows on the sides to hit the middle of the semi-circle.

 

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/11/17/robert-oh-project-12-proposal/feed/ 0
Robert Oh- Project 11- Composition https://courses.ideate.cmu.edu/15-104/f2018/2018/11/10/robert-oh-project-11-composition/ https://courses.ideate.cmu.edu/15-104/f2018/2018/11/10/robert-oh-project-11-composition/#respond Sun, 11 Nov 2018 04:56:14 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=37280 Continue reading "Robert Oh- Project 11- Composition"]]>

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-11-Composition

var turtle;
var fx = 240;
var fy = 240;
var diffX = 100;
var diffY = 100;

function setup() {
    createCanvas(480, 480);
    frameRate(30);
    noStroke();
}
 
function draw() {
    background(130, 255, 246);
    fishDisplay(fx, fy);

    diffX = mouseX - fx;
    diffY = mouseY - fy;

    if (diffX > 1 || diffX < -1){
        fx = fx + (diffX)/30;
    }
    
    if (diffY > 1 || diffY < -1){
        fy = fy + (diffY)/30
    }
}

// drawing each fish
function fishDisplay(x, y) {
    turtle = makeTurtle(x, y);
    turtle.penDown();
    turtle.face(270);
    turtle.setColor(100);
    turtle.setWeight(3);

    //body
    for (var i = 0; i < 360; i ++){
    turtle.forward(.7);
    turtle.right(1);
    }

    turtle.face(0);
    turtle.penUp();
    turtle.forward(80);

    //tail
    turtle.penDown();
    turtle.face(30);
    turtle.forward(40);
    turtle.face(270);
    turtle.forward(40);
    turtle.face(150);
    turtle.forward(40);

    turtle.penUp()
    turtle.face(180);
    turtle.forward(60);
    turtle.face(270);
    turtle.forward(25);

    //eye
    turtle.penDown();
    turtle.face(0);
    for (var i = 0; i < 180; i ++){
        turtle.forward(.2);
        turtle.right(2);
    }
}

function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

For this project, I went back to data exam 1 once again and borrowed the fish design we had drawn. I wanted to revisit the data exam and had the fish follow the mouse cursor. Overall, I had a lot of fun recreating the fish (but with turtle-style drawing).

 

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/11/10/robert-oh-project-11-composition/feed/ 0
Robert Oh- Looking Outwards- 11 https://courses.ideate.cmu.edu/15-104/f2018/2018/11/10/robert-oh-looking-outwards-11/ https://courses.ideate.cmu.edu/15-104/f2018/2018/11/10/robert-oh-looking-outwards-11/#respond Sun, 11 Nov 2018 01:54:31 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=37233 Continue reading "Robert Oh- Looking Outwards- 11"]]>

Caption: “Star Wars- Imperial March on Eight Floppy Drives”

For this week’s looking outwards post, I decided to talk about this interesting YouTube video made by user MrSolidSnake745 (whose YouTube channel contains other technology-based music). I really admire this project because the whole set-up is very unique. Using 8 different floppy drives to alternate between tones and pitches to create a universally famous theme is a cool idea!

I have no idea how the creator actually got to create this music, but if I had to guess, the creator probably set up each individual floppy drive to play a certain tone and timed each floppy drive perfectly to play the “Imperial March” theme perfectly. All in all, I thought this was a very cool project!

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/11/10/robert-oh-looking-outwards-11/feed/ 0
Robert Oh- Project 10- Landscape https://courses.ideate.cmu.edu/15-104/f2018/2018/11/03/robert-oh-project-10-landscape/ https://courses.ideate.cmu.edu/15-104/f2018/2018/11/03/robert-oh-project-10-landscape/#respond Sun, 04 Nov 2018 03:38:19 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=36412 Continue reading "Robert Oh- Project 10- Landscape"]]>

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-10-Landscape

var fish = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.0005;

function setup() {
    createCanvas(480, 480);
    frameRate(30);
    noStroke();
    fish.push(makeFish(width));
}
 
function draw() {
    background(130, 255, 246);

    //creating the river
    push();
    beginShape(); 
    fill(96, 149, 255);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, height / 6, height / 4);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();
    
    //updating the fish locations 
    updateFish();

    //adding new fish 
    if (fish.length > 0){
        lastFish = fish[fish.length - 1]
        if (lastFish.x + lastFish.length < width - 50){
            addFish();
        }
    }

    // removing fish out of view
    removeFish();
}

function updateFish(){
    for (var i = 0; i < fish.length; i++){
        fish[i].move();
        fish[i].display();
    }
}

function fishMove() {
    this.x += this.speed;
}

function removeFish() {
    var keep = [];
    for (var i = 0; i < fish.length; i++){
        if (fish[i].x + fish[i].length * 3/2 > 0) {
            keep.push(fish[i]);
        }
    }
    fish = keep;
}

// drawing each fish
function fishDisplay() {
    //tail
    fill(this.r, 0, 0);
    triangle(this.x + this.length * (4 / 5), this.y, this.x + this.length * (3 / 2), this.y + 20, 
        this.x + this.length * (3 / 2), this.y - 20);

    //body
    fill(this.r, this.g, this.b);
    ellipse(this.x + this.length / 2, this.y, this.length, this.h);

    //eye
    fill(0);
    ellipse(this.x + this.length / 5, this.y - this.h / 8, 7, 7);

}

//adding a new fish on the right side of screen
function addFish() {
        fish.push(makeFish(width));
}

//fish object
function makeFish(startX) {
    var fsh = {x: startX,
                y : random(width / 3, width - 30),
                h : random(50, 70),
                length: random(50, 80),
                speed: random(-4, -2),
                r : random(255),
                g : random(255),
                b : random(255),
                move: fishMove,
                display: fishDisplay}
    return fsh;
}

I had a lot of fun making this project! While looking around for inspiration, I was looking at our old assignments we had completed. Then I remembered how much fun I had making the fish design for our first lab exam, and I decided to make this project off of that! (You’ll notice that I used similar code to create the fish). I wanted to give off a river design, where the fish in my landscape are swimming with the current down the river. Overall, I had a lot of fun designing the landscape, and I enjoyed being able to create my own object type 🙂 .

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/11/03/robert-oh-project-10-landscape/feed/ 0
Robert Oh- Looking Outwards-10 https://courses.ideate.cmu.edu/15-104/f2018/2018/11/02/robert-oh-looking-outwards-10/ https://courses.ideate.cmu.edu/15-104/f2018/2018/11/02/robert-oh-looking-outwards-10/#respond Fri, 02 Nov 2018 22:24:28 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=36013 Continue reading "Robert Oh- Looking Outwards-10"]]>

Caption: Phoenix Perry’s Bot Party (2017)

For this week’s Looking Outwards Post, I decided to talk about “Bot Party”, created by Phoenix Perry in 2017. Bot Party is an educational tool that Perry created to teach children about how sounds get created. The boxes are able to detect when a person is holding them. Furthermore, if two people who are both holding these boxes hold hands, the bots are able to detect this and create sounds. I really admire the fact that Perry created this fun, interactive game to educate children.

Perry is the head of MA independent gaming, Goldsmiths, University of London (she is also a lecturer under the department of computing). Perry has created other educational games to teach younger children. I really appreciate the work she has put in to make education more fun.

 

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/11/02/robert-oh-looking-outwards-10/feed/ 0
Robert Oh- Project 09- Portraits https://courses.ideate.cmu.edu/15-104/f2018/2018/10/27/robert-oh-project-09-portraits/ https://courses.ideate.cmu.edu/15-104/f2018/2018/10/27/robert-oh-project-09-portraits/#respond Sat, 27 Oct 2018 23:17:30 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=35542 Continue reading "Robert Oh- Project 09- Portraits"]]>

chris

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-09-Portrait

var Chris;

function preload() {
    var myImageURL = "https://i.imgur.com/0FU7jf7.jpg?1";
    Chris = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 367);
    background(0);
    Chris.loadPixels();
    frameRate(1000);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width - 1);
    var iy = constrain(floor(py), 0, height - 1);
    var col = Chris.get(ix, iy);

    //randomly creating the X length and thickness
    var len = random(2, 7);
    var thick = random(1, 5);

    //creating the X's
    stroke(col);
    strokeWeight(thick);
    line(px - len, py - len, px + len, py + len);
    line(px - len, py + len, px + len, py - len);
}

For this project, I used a photo of my friend, Chris. I thought the X’s were a nice touch and I liked how I generated the X’s using randomness (in both the length and the thickness.

This is a photo of the early stage:

This is the final product:

(The original photo was of my friend sitting on a colorful staircase)

 

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/10/27/robert-oh-project-09-portraits/feed/ 0
Robert Oh- Looking Outwards-09 https://courses.ideate.cmu.edu/15-104/f2018/2018/10/27/robert-oh-looking-outwards-09/ https://courses.ideate.cmu.edu/15-104/f2018/2018/10/27/robert-oh-looking-outwards-09/#respond Sat, 27 Oct 2018 20:37:23 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=35521 Continue reading "Robert Oh- Looking Outwards-09"]]>

James White- Early Forge random output using Vormator shapes Version 4 (2007)

For this week’s Looking Outwards, I decided to use Joanne Lee’s Looking Outwards-06 Post.

I really appreciate randomness and how White was able to use it in order to create such beautiful art. His program, Forge, creates art pieces where many features and elements are all random and out of his control. I really do love how art can look so amazing complex and detailed despite the fact that everything was created randomly. Supporting Joanne’s opinion, I really do appreciate the fact that White created this program to allow other artists to use to also implement randomness in their art.

 

 

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/10/27/robert-oh-looking-outwards-09/feed/ 0
Robert Oh-Looking Outwards 07 https://courses.ideate.cmu.edu/15-104/f2018/2018/10/13/34143/ https://courses.ideate.cmu.edu/15-104/f2018/2018/10/13/34143/#respond Sun, 14 Oct 2018 03:32:33 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=34143 Continue reading "Robert Oh-Looking Outwards 07"]]>

Word Associations Visualization by Chris Harrison

For this Looking Outwards, I chose to study the word association art of Chris Harrison. I really admire this kind of art because I’ve taken multiple classes that show the importance of words and their similarities. This project shows which words are used more frequently with the two base words, “hot” and “cold”.  I really admire how simple and clear it is to look at this graph. You can see clearly which words are more frequently used with either of the base words.

In other to make this graph, Harrison went through many different processes. Words were bucketed into one of 25 different rays. Each of these represented a different tendency of use (ranging from 0 to 100% in 4% intervals). Words were sorted by decreasing frequency within each ray. Finally they rendered as many words as could fit onto the canvas.

You can see how methodological and clear the artist is through this piece. This art is really all about data and applying that data, and so I would claim that you can see Harrison’s logical artistic style in this art.

 

http://www.chrisharrison.net/index.php/Visualizations/WordAssociations

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/10/13/34143/feed/ 0
Robert Oh- Project 07 – Curves https://courses.ideate.cmu.edu/15-104/f2018/2018/10/12/robert-oh-project-07-curves/ https://courses.ideate.cmu.edu/15-104/f2018/2018/10/12/robert-oh-project-07-curves/#respond Sat, 13 Oct 2018 03:51:38 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=34028 Continue reading "Robert Oh- Project 07 – Curves"]]>

curves

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-07-Curves

//assigning variables
var nPoints = 100;
var angle1 = 0;
var adj1 = 10;
var angle2 = 0;
var adj2 = 0;
var angle3 = 0;
var adj3 = 0;

function setup() {
    createCanvas(400, 400);
    frameRate(60);
}

function draw() {
    background(0);
    
    //drawing the white circle
    ellipse(mouseX, mouseY, 170, 170);

    //drawing the red Quadrifolium 
    push();
    fill(255, 0, 0);
    translate(mouseX, mouseY + 45);
    rotate(radians(angle1));
    drawQuadrifolium();
    angle1 = (angle1 + adj1) % 360;
    pop();

    //drawing the green Quadrifolium
    push();
    fill(0, 255, 0);
    translate(mouseX + 39, mouseY - 20);
    rotate(radians(angle2));
    drawQuadrifolium();
    angle2 = (angle2 + adj2) % 360;
    pop();

    //drawing the blue Quadrifolium
    push();
    fill(0, 0, 255);
    translate(mouseX - 39, mouseY - 20);
    rotate(radians(angle3));
    drawQuadrifolium();
    angle3 = (angle3 + adj3) % 360;
    pop();

    //adjusting speed of rotation for only blue and green Quadrifoliums
    adj2 = (15 * (mouseX / width)) + (15 * (mouseY / height));
    adj3 = (15 * (width - mouseX) / width) + (15 * (width - mouseY) / height);
}

//formula taken from: http://mathworld.wolfram.com/Quadrifolium.html
function drawQuadrifolium() {
    var a = 40;
    
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        r = a * sin(2 * t);
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);
    
}

When I first started this assignment, I was looking around for inspiration. One morning, when I started shaving with my electric razor, I realized that my blades were in the shape similar to that of a quadrifolium. Thus, I created the three quadrifoliums in the same shape as my razor. I adjusted the speed of the top two “razors” to speed up/slow down if they are near the edges of the canvas.

my attempt to make a quadrifolium
]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/10/12/robert-oh-project-07-curves/feed/ 0