SectionA – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice https://courses.ideate.cmu.edu/15-104/f2021 Professor Tom Cortina • Fall 2021 • Introduction to Computing for Creative Practice Sun, 05 Dec 2021 05:36:56 +0000 en-US hourly 1 https://wordpress.org/?v=5.8.9 Final Project https://courses.ideate.cmu.edu/15-104/f2021/2021/12/05/final-project-17/ https://courses.ideate.cmu.edu/15-104/f2021/2021/12/05/final-project-17/#respond Sun, 05 Dec 2021 05:36:56 +0000 https://courses.ideate.cmu.edu/15-104/f2021/?p=69417 Continue reading "Final Project"]]>
sketch
var birds = []
var trees = []
var deadTrees = []
var timberJacks = []
var angle = 70
var angle2 = 50
var x = 30
var y = 50
function setup() {
    createCanvas(600, 500)
    frameRate(10)
}
function draw() {
    //draw backgrounds
    push()
    drawDesertAndSky()
    drawNightWorld()
    drawSun()
    pop()
    //rotating lines for the sun
    push()
    translate(150,0)
    for (y = 50; y <= 300; y += 2){
        rotate (radians(angle))
        stroke (255, 215, 0)
        line (30, y, x+2, y)
    }
    pop()
    push()
    for (x = 30; x <= 400; x += 5){
        rotate (radians(angle2))
        stroke (255, 255, 100)
        line (x-25, x-40, x-40, 0.8*40)
    }
    pop()
    //draw trees and deadtrees 
    push()
    for (var i = 0; i < trees.length; i++){
        trees[i].displays()
    }
    pop()
    push()
    for (var i = 0; i < deadTrees.length; i++){
        deadTrees[i].showss()
    }
    pop()
    //draw timberjacks
    push()
    updateAndDisplayTimberJacks()
    addNewTimberJackWithSomeRandomProbability()
    pop()
    //draw birds    
    push()
    updateAndDisplayBirds(); 
    removeBirdsThatHaveSlippedOutOfView();
    addNewBirdsWithSomeRandomProbability();
    pop()
    //texts
    push()
    fill(0,100,0)
    textSize(18);
    strokeWeight(3)
    stroke(0,100,0)
    text("CURRENT WORLD",100,70)
    textSize(16);
    text("WE DON'T WANT OUR WORLD DESTROYED!",10,100)
    strokeWeight(2)
    text("Click to Plant Trees Here! :)",40,150)
    fill(0)
    textSize(20)
    strokeWeight(3)
    stroke(0)
    text("FALLEN WORLD",430,50)
    textSize(16);
    strokeWeight(2)
    text("Klik to pLanT dEAd TrEEs:(",400,80)
    pop()
}

//functions that draw the background
function drawDesertAndSky(){
    noStroke()
    fill(237, 201, 155)//desert
    rect(0,170,400,330)
    fill(135,206,235)//sky
    rect(0,0,400,170)
}
function drawNightWorld(){
    noStroke()
    fill(48,25,52)
    rect(400,170,200,330)
    fill(216,191,216)
    rect(400,0,200,170)
}
function drawSun(){
    translate(150,0)
    fill(255,200,0)//sun
    ellipse(0,0,100,100)
    line(50,50,85,85)
    line(75,20, 125, 30)
    line(20,75, 25 ,125)
}

//interactive mousePressed function to draw trees
function mousePressed(){
    if (mouseX <= 400){
        var tree_instance = makeTree(mouseX, constrain(mouseY,150,550), 0)//plant live trees on the ground
        trees.push(tree_instance)
    }else{
        var deadTree_instance = makeDeadTree(mouseX, constrain(mouseY,180,550))
        deadTrees.push(deadTree_instance)
    }
}

//the tree & dead tree functions
function makeTree(tx, ty, th){
    var tree = {x: tx, y: ty, height: th, 
            displays: treeDraw}
    return tree
}
function treeDraw(){ 
    fill(0,255,0)
    triangle(this.x,this.y-this.height,this.x-7,this.y+15-this.height,this.x+7,this.y+15-this.height)
    fill(50,30,0)
    rect(this.x-2,this.y+15-this.height,4,10+this.height)
    //trees grow
    if(this.height <= 10){
        this.height+=0.1
    }
}
function makeDeadTree(tx, ty){
    var deadTree = {x: tx, y: ty,
            showss: deadTreeDraw}
    return deadTree
}
function deadTreeDraw(){
    push()
    fill(129)
    triangle(this.x+10,this.y-4,this.x+10,this.y+8,this.x+25,this.y)
    rect(this.x,this.y,10,4)
    pop()
}

//timberjacks
function makeTimberjack(jx, jy){
    var timberJack = {x: jx, y: jy, 
            display: timberJackDraw,
            speedX: random(3,6),
            speedY: random(-1,1),
            move: timberJackMove}
    return timberJack
}
function timberJackDraw(){
    push()
    strokeWeight(1)
    ellipse(this.x,this.y,9,12)
    //body
    line(this.x,this.y+6,this.x,this.y+20)//body
    line(this.x,this.y+15,this.x+5,this.y+15)//left hand
    line(this.x,this.y+15,this.x+5,this.y+12)//right hand
    line(this.x,this.y+20,this.x+5,this.y+27.5)//right leg
    line(this.x,this.y+20,this.x-5,this.y+27.5)//left leg
    //eyes
    ellipse(this.x-1.5,this.y-1,0.5,0.5)
    ellipse(this.x+1.5,this.y-1,0.5,0.5)
    arc(this.x, this.y+5, 6, 7.5, PI+1,-1)
    //hair
    line(this.x,this.y-6,this.x,this.y-11)
    line(this.x-1.5,this.y-5.5,this.x-5,this.y-9)
    line(this.x+1.5,this.y-6.5,this.x+5,this.y-9)
    pop() 
    //electric saw
    push()
    noStroke()
    fill(0)
    rect(this.x+5,this.y+10,5,8)
    rect(this.x+7,this.y+12,11,4)
    triangle(this.x+18,this.y+12,this.x+18,this.y+16,this.x+23,this.y+12)
    pop()
}
function timberJackMove() {
    this.x += this.speedX;
    this.y += this.speedY
}
function addNewTimberJackWithSomeRandomProbability() {
    // With a probability, add a new timberjack to the end.
    var newTimberJackLikelihood = 0.05; 
    if (random(0,1) < newTimberJackLikelihood) {
        timberJacks.push(makeTimberjack(0,random(200,470)));
    }
}
function updateAndDisplayTimberJacks(){
    // Update the timberjacks' positions, and display them.
    for (var i = 0; i < timberJacks.length; i++){
        timberJacks[i].move();
        timberJacks[i].display();
    }
}
function removeTimberJacksThatHaveSlippedOutOfView(){
    var timberJacksToKeep = [];
    for (var i = 0; i < timberJacks.length; i++){
        if (timberJacks[i].x > 0) {
            timberJacksToKeep.push(timberJacks[i]);
        }
    }
    timberJacks = timberJacksToKeep;
}

//birds
function removeBirdsThatHaveSlippedOutOfView(){
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x > 0) {
            birdsToKeep.push(birds[i]);
        }
    }
    birds = birdsToKeep; // remember the surviving birds
}
function updateAndDisplayBirds(){
    // Update the birds' positions, and display them.
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}
function addNewBirdsWithSomeRandomProbability() {
    // With a probability, add a new bird to the end.
    var newBirdLikelihood = 0.02; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(width,random(20,160),0));
    }
}
// method to update position of birds every frame
function birdMove() {
    this.x -= this.speedX;
    this.y += this.speedY
}
// draw the birds
function birdDisplay() {
    push()
    fill(this.c)
    triangle(this.x,this.y,this.x+6,this.y+1.5,this.x+6,this.y-1.5)//beak
    ellipse(this.x+9,this.y,7,7) //head
    ellipse(this.x+17,this.y+4,15,8)//body
    arc(this.x+18, this.y, 10, 10, -0.7, PI-0.7,CHORD)//wings
    ellipse(this.x+8,this.y-1,1,1)//eyes
    pop()
}
//make new bird with different location, color, speedXY
function makeBird(birthLocationX,birthLocationY,color) {
    var bird = {x: birthLocationX,
                y: birthLocationY,
                c: color,
                speedX: random(5,8),
                speedY: random(-1.5,1.5),
                move: birdMove,
                display: birdDisplay}
    return bird;
}


Since the theme for the project is climate change, I want to write an interactive program that presents scenery that compares a current world and a fallen world to warn people about the consequence of climate change.
The inspiration comes from the trees I was drawing in project 11. I thought of trees immediately when the topic was said to be climate change. Then I had the idea that comparison would be the best way to send out a message of warning. Therefore, the timber jacks in my program were born to play the role of antagonist; the night world is created to demonstrate the potential consequence if we don’t take climate change seriously.
For the interaction part, I want users to be able to plant trees themselves. In the current world, they can plant a tree by clicking on the canvas and the tree would grow gradually to a maximum height. But if the user tries to plant trees in the fallen world, the trees would turn out to be dead trees. This is to imply that once climate change gets to a point, there is no turning back (for a long long time).
Though I did a lot of decorations like the birds and the transformations and loops just for the rays of sunlight, I feel like I could make the scenery more real if I have more time. I might want to use sin wave to draw the desert; I might draw more detailed timber jacks; I might add clouds. But overall, I feel like the program is quite complete, as the message is delivered and I believe that I’ve done all 6 technical merits.

]]>
https://courses.ideate.cmu.edu/15-104/f2021/2021/12/05/final-project-17/feed/ 0
Final Project https://courses.ideate.cmu.edu/15-104/f2021/2021/12/04/final-project-9/ https://courses.ideate.cmu.edu/15-104/f2021/2021/12/04/final-project-9/#respond Sat, 04 Dec 2021 22:49:12 +0000 https://courses.ideate.cmu.edu/15-104/f2021/?p=69384 Continue reading "Final Project"]]>

I wanted to raise awareness about melting icebergs due to global warming so I created a game where a polar bear must jump on multiple floating icebergs to reach a safer large iceberg. I was inspired by games like frogger and crossy road and wanted to create an interactive easy game that would help users understand global warming better. To play the game user must press the space button to continue and press up to navigate. Land on the iceberg and you will be safe, if you land in the ocean, you will die. Make sure to move up before you drift off into the ocean. Also note that there are some weak icebergs that will break if you are unlucky. If I had more time I would work on creating levels with more iceberg rows and increasing speed of the icebergs, and maybe add more obstacles like a sea lion or natural predators of polar bears.

sketch

//code for screen changes
var currentScreen = "start";

//for the icebergs
var icebergs1 = [];
var icebergs2 = [];
var icebergs3 = [];
var icebergs4 = [];
var icebergs5 = [];
var x;

//for the movement of the game
var py = 0;
var count = 0;
var safe = true;

//for the melting icebergs
var beginIceberg = [];
var noiseParam = 0;
var noiseStep= 0.05;
var endingIceberg = [];
var noiseParam = 0;
var noiseStep= 0.05;

//for the baby polar bear location
var positionX = 250;
var positionY = 450;


function setup() {
    createCanvas(500, 500);
    text("p5.js vers 0.9.0 test.", 10, 15);
    start();
    //the initial icebergs
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = -50;
       icebergs1[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 50;
       icebergs2[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 150;
       icebergs3[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 250;
       icebergs4[i]=makeIceberg(x,y); 
      }
       
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 350;
       icebergs5[i]=makeIceberg(x,y); 
      }
    //for the starting iceberg
      for (var i=0; i < width/5; i++){
        n=noise(noiseParam);
        value = map(n,0,1,400,450);
        beginIceberg.push(value);
        noiseParam += noiseStep;
    }

    //for the ending iceberg
     for (var i=0; i < width/5; i++){
      n=noise(noiseParam);
      value = map(n,0,1,-150,-100);
      endingIceberg.push(value);
      noiseParam += noiseStep;
    }
    
    frameRate(10);
}

function draw() {
  translate(0,py);
  //the blue ocean
  background(0,0,200);

  //the start screen
  if (currentScreen == "start"){
    start();
    if (keyIsPressed){
      currentScreen = "game";
    }
  }
  
  //plays the game screen
  else if (currentScreen == "game"){
    gameScreen();
  }
  
  //plays the lose screen
  else if (currentScreen == "lose"){
    elimination();
  }
  
  //playes the win screen
  else if (currentScreen == "win"){
    win();
  }
  

}

//Game Scene 

function gameScreen(){
  //the starting scene of the melting large iceberg
  meltingIceberg();
  
  //the icebergs
  updateAndDisplayIceberg();
  addNewIcebergs(); 
  
  //the movement of the game - to continuosly check if its on an iceberg
  if (count == 1){
      for (var i = 0; i < icebergs1.length; i++){
        if (positionX >= icebergs1[i].x & positionX + 20 <= icebergs1[i].x + icebergs1[i].width){
          positionX += 3;
          safe = true;
          break;;
        }
      }
    }
  if (count == 2){
      for (var i = 0; i < icebergs2.length; i++){
        if (positionX >= icebergs2[i].x & positionX + 20 <= icebergs2[i].x + icebergs2[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 3){
      for (var i = 0; i < icebergs3.length; i++){
        if (positionX >= icebergs3[i].x & positionX + 20 <= icebergs3[i].x + icebergs3[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 4){
      for (var i = 0; i < icebergs4.length; i++){
        if (positionX >= icebergs4[i].x & positionX + 20 <= icebergs4[i].x + icebergs4[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 5){
      for (var i = 0; i < icebergs5.length; i++){
        if (positionX >= icebergs5[i].x & positionX + 20 <= icebergs5[i].x + icebergs5[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
    
  if (positionX+20 > width){
    safe = false;
  }
    
  
    //if safe = false - game over
    if (safe == false){
      currentScreen = "lose";
      //noLoop()
    }
   
  //endgame
  if (count == 6){
    //display winning scene
    currentScreen = "win";
  }
 meltingIceberg2();
 
  //the baby polar bear 
  babyPolarBear();
}

//The large icebergs

function meltingIceberg(){
  fill("white");
  stroke("white");
  beginShape();
  vertex(0,height);
  
  for(i=0; i<width/5;i++){
    vertex(i*5,beginIceberg[i]);
  }
  
  vertex(width+50,height);
  endShape(CLOSE); 
  n=noise(noiseParam);
  value = map(n,0,1,400,450);
  beginIceberg.shift();
  beginIceberg.push(value);
  noiseParam += noiseStep;
}

function meltingIceberg2(){
 //The ending scene is a melting iceberg with the mother polar bear
  fill("white");
  stroke("white");
  beginShape();
  vertex(0,-600);
  
  for(i=0; i<width/5;i++){
    vertex(i*5,endingIceberg[i]);
  }
  
  vertex(width+50,-600);
  endShape(CLOSE); 
  n=noise(noiseParam);
  value = map(n,0,1,-150,-100);
  endingIceberg.shift();
  endingIceberg.push(value);
  noiseParam += noiseStep;
}


//code to do the jumps

//to draw baby polar bear and its respective movements (initally just a square, will later create details) 

function babyPolarBear(){
  fill("red");
  rect(positionX, positionY, 20,20); //might need to fix size later 
}

function keyPressed(){
  if (keyCode == UP_ARROW & currentScreen == "game"){
      py+=100;
      positionY -= 100;
      count++;
      safe = false;
      gameScreen();
    }
}

//object creation of the icebergs

function makeIceberg(x,y){
  var ice = {
    x,
    y,
    height: 25,
    width: floor(random(40,60)),
    speed: 3, 
    display: displayIceberg,
    move:moveIceberg
  }
  return ice;  
  }
 
 function displayIceberg(x,y){
   fill("white");
   rect(this.x,this.y,this.width,this.height);
 }   
 
 function moveIceberg(x){
   this.x+=this.speed;
 } 
 
 function updateAndDisplayIceberg(){
   for(var i = 0; i < icebergs1.length; i++){
     icebergs1[i].move();
     icebergs1[i].display();
   }
   for(var i = 0; i < icebergs2.length; i++){
     icebergs2[i].move();
     icebergs2[i].display();
   }
   for(var i = 0; i < icebergs3.length; i++){
     icebergs3[i].move();
     icebergs3[i].display();
   }
   for(var i = 0; i < icebergs4.length; i++){
     icebergs4[i].move();
     icebergs4[i].display();
   }
   for(var i = 0; i < icebergs5.length; i++){
     icebergs5[i].move();
     icebergs5[i].display();
   }
 }
   
 function addNewIcebergs(){ //should I change this to different logic?
   var newIcebergLikelihood = 0.05;
   var x = -40;
   if (random(0,1) < newIcebergLikelihood){
     icebergs1.push(makeIceberg(x,350));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs2.push(makeIceberg(x,250));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs3.push(makeIceberg(x,150));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs4.push(makeIceberg(x,50));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs5.push(makeIceberg(x,-50));
   }
 }
 

//Code to implement width

function icebergWidth(){
  return this.x + this.width;
}



//starting scene - instructions stuff - press space to continue
function start(){
  fill("green");
  rect(0,0,width,height);
  textSize(15);
  fill("white");
  text("Welcome to Save the POLAR BEAR from Global Warming", 50 ,200);
  textSize(15);
  fill("white");
  text("Press Space to Continue", 50,260);
  textSize(15);
  fill("white");
  let word = 'Instructions: Press the up key to move the polar bear (the red square) forward. Land on the iceberg and you will be safe, if you land in the ocean, you will die. Make sure to move up before you drift off into the ocean. Also note that there are some icebergs that are hidden if you are lucky and some weak icebergs that will break if you are unlucky. Can you reach the safe iceberg?'
  text(word,50,280, 400,200);
}

//The winning scene
function win(){
  fill("yellow");
  rect(0,0 - 100* count,width,height);
  textSize(50);
  fill("black");
  text("You have Won", 50 ,250 - 100* count);
  textSize(20);
  fill("black");
  text("Reload page to play again", 250,290 - 100* count);
}

// elimination scene 

function elimination(){
  fill("black");
  rect(0 ,0 - 100* count,width,height);
  textSize(50);
  fill("white");
  text("You have LOST", 50 ,250 - 100* count);
  textSize(20);
  fill("white");
  text("Reload page to play again", 250,290 - 100* count);
  
}


]]>
https://courses.ideate.cmu.edu/15-104/f2021/2021/12/04/final-project-9/feed/ 0
Final Project – Brandon Yi https://courses.ideate.cmu.edu/15-104/f2021/2021/12/03/final-project-brandon-yi/ https://courses.ideate.cmu.edu/15-104/f2021/2021/12/03/final-project-brandon-yi/#respond Fri, 03 Dec 2021 20:10:16 +0000 https://courses.ideate.cmu.edu/15-104/f2021/?p=69268 Continue reading "Final Project – Brandon Yi"]]>
sketch
ptx = [];
pty = [];
ptx2 = []; 
pty2 = [];
numberx = [];
numbery = [];
var d;
var angle;
var pieceNum;
var trapAngle = 360/17;
var r1 = 280;
var r2 = 180;
var bool = false;
var table;
var numRows;
var pages = {   
                title1: [], 
                minititle1: [],
                goal1: [],
                goal2: [],
                goal3: [],
                goal4: [],
                goal5: [],
                r: [0,200,255,5,255,255,112,255,169,255,255,255,206,38,0,2,2,0],
                g: [72,0,206,172,85,51,200,206,0,128,51,153,168,151,171,200,116,72],
                b: [108,0,4,10,0,51,255,4,56,0,153,51,78,41,255,35,174,108],
            };
var logo;

function preload() {
    table = loadTable("17goalsdata.csv", "header");
    logo = loadImage("logo.png");
}

function setup() {
    createCanvas(1000,600);
    numRows = table.getRowCount();
    angleMode(DEGREES);
    imageMode(CENTER);

    for (var i = 0; i < 19; i++) {
        ptx[i] = r1*cos(7*trapAngle+((i+1)*trapAngle));
        pty[i] = r1*sin(7*trapAngle+((i+1)*trapAngle));
    }
    for (var i = 0; i < 19; i++) {
        ptx2[i] = r2*cos(7*trapAngle+((i+1)*trapAngle));
        pty2[i] = r2*sin(7*trapAngle+((i+1)*trapAngle));
    } 
    for (var i = 0; i < 19; i++) {
        numberx[i] = ((r1+r2)/2)*cos((7*trapAngle+((i+1)*trapAngle))+(trapAngle/2));
        numbery[i] = ((r1+r2)/2)*sin((7*trapAngle+((i+1)*trapAngle))+(trapAngle/2));
    }   

    for (var i = 0; i < numRows; i++) {
        pages.title1[i] = table.getString(i,"Title");
        pages.goal1[i] = table.getString(i,"Goal1")
        pages.goal2[i] = table.getString(i,"Goal2")
        pages.goal3[i] = table.getString(i,"Goal3")
        pages.goal4[i] = table.getString(i,"Goal4")
        pages.goal5[i] = table.getString(i,"Goal5")
        pages.minititle1[i] = table.getString(i,"MiniTitle");
    }
}

function draw() {
    push();
    translate(width/2,height/2);
    strokeWeight(10);
    noFill();
    background(220);
    image(logo,0,-20,1024*r1/879,r1);
    
    if (!bool) {
        for (var i = 0; i < 19; i++) {
            drawTrapezoid(i);
        }
        angle = atan2(mouseY - height/2,mouseX - width/2);
        pieceNum = 8+ceil(angle/(trapAngle));
        d = dist(width/2,height/2,mouseX,mouseY);
        menuSelector(d);
    }
    else {
        pop();

        if (d<r1 & d>r2) {
            if (pieceNum==0) {
                pieceNum=17;
            }
            let col = color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum]);
            drawTitle(pages.title1[pieceNum-1],col);
            drawGoals(pages,60);
        }
        drawExitButton();
    }
}

function drawExitButton() {
    stroke(0);
    fill(200,0,0);
    rect(width-105,height-105,100,100,20);
    fill(0);
    strokeWeight(1);
    text("Back",width-75,height-50)
    noStroke();
}

function drawTitle(title1,col) {
    background(col);
    strokeWeight(10);
    stroke(0);
    line(5,5,width-5,5);
    line(5,5,5,height-5);
    line(5,height-5,width-5,height-5);
    line(width-5,height-5,width-5,5)
    strokeWeight(2);
    fill(255);
    rect(5,5,100,100,20);
    fill(0);
    strokeWeight(2);
    textSize(50);
    textAlign(CENTER)
    rectMode(CORNER);
    text(pieceNum, 50,65);
    textSize(40)
    noStroke();
    text(title1,120,25,840,300);
}

function drawGoals(pages,spacing) {
    fill(0);
    textAlign(LEFT)
    strokeWeight(2);
    textSize(30);
    text("By 2030:", 100,200-spacing,800);
    textSize(20);
    for (var i = 0; i < 5; i++) {
        text("Goal " + (i+1) + ":", 50, (i*spacing)+215);
    }
    text(pages.goal1[pieceNum-1],120,200,800);
    text(pages.goal2[pieceNum-1],120,200+spacing,800);
    text(pages.goal3[pieceNum-1],120,200+(2*spacing),800);
    text(pages.goal4[pieceNum-1],120,200+(3*spacing),800);
    text(pages.goal5[pieceNum-1],120,200+(4*spacing),800);
}

function drawTrapezoid(i) {
    stroke(0);
    beginShape();    
    vertex(ptx2[i],pty2[i]);
    vertex(ptx2[i+1],pty2[i+1]);
    vertex(ptx[i+1],pty[i+1]);
    vertex(ptx[i],pty[i]);
    endShape(CLOSE);
    rectMode(CENTER);
    noStroke();
    if (i<18 & i>0) {
        fill(0);
        textSize(17);
        textAlign(CENTER);
        rectMode(CENTER);
        text(i,numberx[i],numbery[i])
        noFill();   
    }
    
    //rect(numberx[i],numbery[i],10,10);
    rectMode(CORNER);
}

function mousePressed() {
    if (d<r1 & d>r2) {
        bool = true;
    }
    if (mouseX>895 & mouseY>485) {
        bool = false;
    }
}

function menuSelector(d) {
    if (d<r1 & d>r2) {
        for (var i = 0; i <= 18; i++) {
            let col = color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum])
            fill(col);
            ellipse(0,0,(2*r2)-5);
            noStroke();
            fill(0);
            //rectMode(CENTER);
            textSize(30)
            text(pages.minititle1[pieceNum],-r2+10,-20,(2*r2)-5,(2*r2)-5);
            fill(col);
            drawTrapezoid(pieceNum); 
        }
    }
}

Steps to Run Project:

  1. Go into “Final Project” folder
    a. Location: handin-14-finalproject –> btyi-14-project –> Final Project
  2. Navigating to this location in your console/commandprompt/etc.
  3. Run local host by typing [php -S localhost:8000] (may be different for non-Windows users)
  4. Type in localhost:8000 into your Google Chrome URL bar

Description:
My program is a simplified display of the 17 Sustainable Development Goals of the United Nations. Essentially, I have created a summary of all 17 Goals, which 5 of the sub-targets of each of these goals and created a display of all that information.
Inside the Brainstorming folder, I put different drafts and other ideas I had made prior to completing my final draft. I also put all the information that I collected from the UN website into separate notes sheets before I converted to Excel, so those are located in the brainstorming folder as well.

Inspiration:
Up until a couple of years ago, I had never heard of the 17 Sustainable Development Goals. Then when I learned about them, it surprised me that these goals weren’t more readily available and advertised worldwide. But when I looked into these 17 goals, I realized that there was so much content that was put on the website, that I had no idea where to start. Therefore, for this project, I wanted to create a summarized/simpler version of the UN’s website, with the basic and important information consolidated into one place.
If I had more time, I would probably have wanted to add a little more information to the display, as well as make the transitions smoother and make the appearance look more professional. Functionality-wise, if I had more time I think I would have liked to add more user interaction, such as different operations using different keys on the keyboard, or maybe some sliders and other user-oriented devices.

]]>
https://courses.ideate.cmu.edu/15-104/f2021/2021/12/03/final-project-brandon-yi/feed/ 0
Final Project https://courses.ideate.cmu.edu/15-104/f2021/2021/12/03/final-project-2/ https://courses.ideate.cmu.edu/15-104/f2021/2021/12/03/final-project-2/#respond Fri, 03 Dec 2021 20:07:22 +0000 https://courses.ideate.cmu.edu/15-104/f2021/?p=69251 Continue reading "Final Project"]]>

In this game you try to keep the penguin alive. If the penguin touches the water you lose. the penguin has to jump between ice cubes floating across the screen. the ice cubes are objects stored in an array. the penguin can jump when it is touching the ice cube. two challenges appear while playing. one makes the ice cubes smaller, and one makes the ice cubes move faster. if you navigate through these challenges you can get to safety and win the game. I attached a video of me completing the game because it might not be a game you can complete first try.

I wanted to create a fun game that had a relation to climate change. since climate change is melting ice which might cause harm to wildlife, I made this game where the ice is melting. If I had more time I might add more challenges and make the movement of the ice cubes look more realistic, like they are actually in water.

sketch
var ice = []
var penguinY = 0; 
var penguinX = 300;    
var penguinDy = 0; 
var count = 0
var menu = 0

function setup() {
  createCanvas(600,600)

  //creating the 4 icecubes
  for (i = 0; i < 4; i++) {
    iceX = random(width)
    iceY = 440
    size = 70
    ice[i] = makeIce(iceX, iceY, size)
  }
}

function draw() {

  //menu page
  if (menu < 1) {
    fill("lightgreen")
    rect(0,0,800,600)
    textAlign(CENTER)
    textFont('Helvetica')
    textSize(18)
    fill("black")
    text("The ice is melting!", 400,220)
    text("get to safety!", 400,370)
    fill("red")
    text("use the arrow keys to move left and right", 400,280)
    text("spacebar to jump", 400,310)
    text("press spacebar to begin", 400, 450)
    
    }

    //win page
  else if (count >= 3200){
      fill(220)
      noStroke()
      background("lightblue")
      ellipse(400,650,1200,400)
      textSize(18)
      fill(0)
      text("you made it to safety!",400,300)
      translate(400,420)
      drawPenguin(0,0)
      noLoop()
    }
  
  else {
  
  //scenary
  background("lightblue")
  fill("blue")
  rect(0, height - 100, width, 100)
  //sun that rotates
  push()
  translate(100,100)
  rotate(radians(count))
  drawSun()
  pop()
  
  stroke(0)

  //checking if penguin is on any icecube or above the icecubes
  if (penguinY <= 440 &
    (penguinX >= ice[0].fx && penguinX <= ice[0].fx+75) ||
    (penguinX >= ice[1].fx && penguinX <= ice[1].fx+75) ||
    (penguinX >= ice[2].fx && penguinX <= ice[2].fx+75) ||
    (penguinX >= ice[3].fx && penguinX <= ice[3].fx+75)
    ) { 
    penguinY = min(395, penguinY + penguinDy);
     
    //checking if penguin is below the icecubes
  } else { 
    
    penguinY = min(height, penguinY + penguinDy);
  }
 
  //showing the penguin and ice
  drawPenguin(penguinX,penguinY)
  showIce()

  //penguin gravity
  penguinDy = penguinDy + .25;

  //penguin left/right movement
  if (keyIsDown(LEFT_ARROW)){
    penguinX-=5
  }
  if (keyIsDown(RIGHT_ARROW)){
    penguinX+=5
  }

  // if you touch the water "you lose"
  if (penguinY >= 550) {
    textSize(18)
    text("You Lose",400,300)
    fill(255)
    drawDeadPenguin(penguinX,penguinY)
    noLoop()
  }
  //use this count to initate challenges levels
  count+=1

  //challenge level 1
  countdown(900)

  if (count >= 1100 & count <= 1500){
    ice[0].icesize = 30
    ice[1].icesize = 30
    ice[2].icesize = 30
    ice[3].icesize = 30
  }

  if (count >= 1500 && count <= 2000){
    ice[0].icesize = 70
    ice[1].icesize = 70
    ice[2].icesize = 70
    ice[3].icesize = 70
  }

  //challenge level 2
  countdown(1800)

  if (count >= 2000 && count <= 2400){
    ice[0].icespeed = -4
    ice[1].icespeed = -5
    ice[2].icespeed = -6
    ice[3].icespeed = -7
  }

  if (count >= 2400 && count <= 2401){
    ice[0].icespeed = random(-1.5,-3)
    ice[1].icespeed = random(-1.5,-3)
    ice[2].icespeed = random(-1.5,-3)
    ice[3].icespeed = random(-1.5,-3)
  }
  
  //approaching the end text
  if (count >= 2600 && count <= 2800){
    textSize(22)
    text("you are approaching the end",400,300)
}
}
}



//penguin jump
function keyPressed() {
  
  if (keyCode === 32) {
    if (penguinY >= 360 && (
      (penguinX >= ice[0].fx && penguinX <= ice[0].fx+75) ||
      (penguinX >= ice[1].fx && penguinX <= ice[1].fx+75) ||
      (penguinX >= ice[2].fx && penguinX <= ice[2].fx+75) ||
      (penguinX >= ice[3].fx && penguinX <= ice[3].fx+75)
      )) { 
    penguinDy = -10;
      }   
      menu = 1
      
      
  }
  
}

//two functions for alive penguin and dead penguin
function drawPenguin(x,y){
  fill(0);
  noStroke();
  ellipse(x, y+2, 46, 81);
  fill(255);
  ellipse(x, y+10, 31, 56);
  ellipse(x-5, y-20, 21, 21);
  ellipse(x+5, y-20, 21, 21);
  fill(255,150,40);
  triangle(x-7, y-15, x+7, y-15, x,y-3);
  ellipse(x+8, y+42, 15, 8);
  ellipse(x-8, y+42, 15, 8);
  fill(0);
  ellipse(x-8, y-21, 8, 8);
  ellipse(x+8, y-21, 8, 8);
  ellipse(x-21, y+10, 12, 40);
  ellipse(x+21, y+10, 12, 40);
  
}

function drawDeadPenguin(x,y){
  fill(0);
  noStroke();
  ellipse(x, y+2, 46, 81);
  fill(255);
  ellipse(x, y+10, 31, 56);
  ellipse(x-5, y-20, 21, 21);
  ellipse(x+5, y-20, 21, 21);
  fill(255,150,40);
  triangle(x-7, y-15, x+7, y-15, x,y-3);
  ellipse(x+8, y+42, 15, 8);
  ellipse(x-8, y+42, 15, 8);
  fill(0);
  textSize(12)
  text("x",x-9, y-20);
  text("x",x+6, y-20);
  ellipse(x-21, y+10, 12, 40);
  ellipse(x+21, y+10, 12, 40);
  

}
// function creates the sun
function drawSun(){
  fill("gold")
  stroke("gold")
  line(0,0,60,60)
  line(0,0,-60,60)
  line(0,0,-60,-60)
  line(0,0,60,-60)
  line(0,0,35,80)
  line(0,0,-35,80)
  line(0,0,35,-80)
  line(0,0,-35,-80)
  line(0,0,80,0)
  line(0,0,-80,0)
  line(0,0,0,80)
  line(0,0,0,-80)
  line(0,0,75,35)
  line(0,0,-75,-35)
  line(0,0,75,-35)
  line(0,0,-75,35)
  circle(0,0,100)
}

//function for the countdown for a challenge
function countdown(x){
if (count >= x & count <= x+200 ){
  textSize(30)
  text("Challenge in",350,200)
}
if (count >= x+16 && count = x+70 && count <=x+140 ){
  textSize(50)
  text("2",350,300)
}
if (count >= x+140 && count <=x+200 ){
  textSize(50)
  text("1",350,300)
}
}

//functions for the creation/movement of the ice
function makeIce(iceX, iceY, size) {
  var ice = {
      fx: iceX,
      fy: iceY,
      icesize: size,
      icespeed: random(-1.5, -3),
      icemove: moveIce,
      icecolor: color(random(50, 100), random(100, 200), 255),
      icedraw: drawIce
  }
  return ice
}
function moveIce() {
  this.fx += this.icespeed
  if (this.fx <= -10) {
      this.fx += width
  }
}
function drawIce() {
  stroke(0)
  fill(this.icecolor);
  rect(this.fx, this.fy, this.icesize, 70)
}
function showIce() {
  for (i = 0; i < ice.length; i++) {
      ice[i].icemove()
      ice[i].icedraw()
  }
}

]]>
https://courses.ideate.cmu.edu/15-104/f2021/2021/12/03/final-project-2/feed/ 0
LO-11 https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/lo-11-3/ https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/lo-11-3/#respond Mon, 15 Nov 2021 02:31:31 +0000 https://courses.ideate.cmu.edu/15-104/f2021/?p=69091 Continue reading "LO-11"]]>

I chose to take a look at the article “Art Project Shows Racial Biases in Artificial Intelligence System” written by Meilan Solly. The article talks about an artificial intelligence classification tool called ImageNet created by artist Trevor Paglen and A.I. researcher Kate Crawford. However, the artificial intelligence may be racist. While the program identified white individuals largely in terms of occupation or other functional descriptors, it often classified those with darker skin solely by race. ImageNet is an object lesson, if you will, in what happens when people are categorized like objects. A man who uploaded multiple snapshots of himself in varying attire and settings was consistently labeled “black.” The tool will remain accessible as a physical art installation at Milan’s Fondazione Prada Osservatorio through February 2020.

]]>
https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/lo-11-3/feed/ 0
project-11 https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/project-11-2/ https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/project-11-2/#respond Mon, 15 Nov 2021 02:29:57 +0000 https://courses.ideate.cmu.edu/15-104/f2021/?p=69088

this project was pretty interesting. there are birds, clouds, and a landscape going across the screen.

sketch

var cloud = []
var bird = []

function setup() {
    createCanvas(480, 240)
    frameRate(10)

    for (i = 0; i < 30; i++) {
        birdX = random(width)
        birdY = random(height)
        bird[i] = makeBird(birdX, birdY)
    }
    for (i = 0; i < 15; i++) {
        cloudX = random(width)
        cloudY = random(height/1.5)
        cloud[i] = makeCloud(cloudX, cloudY)
    }
}

function draw() {
    background(140, 200, 255)
    strokeWeight(2)
    landscape()
    showCloud()
    showBird()

}

function landscape() {
    stroke(86, 125, 70)
    beginShape()
    for (var i = 0; i < width; i++) {
        var x = (i * .01) + (millis() * .0004)
        var s = map(noise(x), 0, 1, 150, 200)
        line(i, s, i, height)
        
    }
    endShape()
}


function makeBird(birdX, birdY) {
    var bird = {
        fx: birdX,
        fy: birdY,
        birdspeed: random(-3, -8),
        birdmove: moveBird,
        birdcolor: color(random(100, 200), random(100, 200), random(100, 200)),
        birddraw: drawBird
    }
    return bird
}

function moveBird() {
    this.fx += this.birdspeed
    if (this.fx <= -10) {
        this.fx += width
    }
}

function drawBird() {
    
    stroke(0)
    fill(this.birdcolor);
    ellipse(this.fx, this.fy, 10, 10)
    line(this.fx - 5, this.fy, this.fx - 10, this.fy - 2)
    line(this.fx + 5, this.fy, this.fx + 10, this.fy - 2)

}

function showBird() {
    for (i = 0; i < bird.length; i++) {
        bird[i].birdmove()
        bird[i].birddraw()
    }
}

function makeCloud(cloudX, cloudY) {
    var cloud = {
        fx: cloudX,
        fy: cloudY,
        cloudspeed: random(-1, -2),
        cloudmove: moveCloud,
        clouddraw: drawCloud
    }
    return cloud
}

function moveCloud() {
    this.fx += this.cloudspeed
    if (this.fx <= -10) {
        this.fx += width
    }
}

function drawCloud() {
    
    noStroke()
    fill(255);
    ellipse(this.fx, this.fy, 10, 10)
    ellipse(this.fx-4, this.fy-1, 10, 10)

    

}

function showCloud() {
    for (i = 0; i < cloud.length; i++) {
        cloud[i].cloudmove()
        cloud[i].clouddraw()
    }
}
]]>
https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/project-11-2/feed/ 0
Project 11 https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/project-11/ https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/project-11/#respond Sun, 14 Nov 2021 06:30:34 +0000 https://courses.ideate.cmu.edu/15-104/f2021/?p=69029
sketch
function setup() {
    createCanvas(400,400);
    // create an initial collection of buildings
    for (var i = 0; i < 4; i++){
        var cx = random(width);
        var cy = random(320,350)
        cars[i] = makeCar(cx,cy,color(random(255),random(255),random(255)),random(25,45));
    }
    for (var i = 0; i < 3; i++){
        var bx = random(width);
        var by = random(20,150)
        birds[i] = makeBird(bx,by,color(random(255),random(255),random(255)));
    }
    frameRate(10);
}
var cars = [];
var birds = [];
function draw() {
    push()
    fill(170,170,255)
    rect(0,0,400,270)
    fill(0,170,0)
    rect(0,270,400,130)
    drawRoad()
    drawSun()
    for (i=0; i<=50; i++){
        drawTree(i*50+20,260)  
    }
    updateAndDisplayCars();
    removeCarsThatHaveSlippedOutOfView();
    addNewCarsWithSomeRandomProbability();
    updateAndDisplayBirds(); 
    removeBirdsThatHaveSlippedOutOfView();
    addNewBirdsWithSomeRandomProbability();
}
function drawSun(){
    fill(255,200,0)
    ellipse(0,0,100,100)
}
function drawTree(x,y){
    fill(0,255,0)
    triangle(x,y,x-7,y+15,x+7,y+15)
    fill(50,30,0)
    rect(x-2,y+15,4,10)
}
function drawRoad(){
    fill(0)
    rect(0,300,400,60)
    fill(255,255,0)
    for (i = 0; i <= 10; i++){
        rect(50*i+15,325,20,5)
    }
}
function removeCarsThatHaveSlippedOutOfView(){
    var carsToKeep = [];
    for (var i = 0; i < cars.length; i++){
        if (cars[i].x > 0) {
            carsToKeep.push(cars[i]);
        }
        print(cars[i])
    }
    cars = carsToKeep; // remember the surviving cars

}
function updateAndDisplayCars(){
    // Update the cars's positions, and display them.
    for (var i = 0; i < cars.length; i++){
        cars[i].move();
        cars[i].display();
    }
}
function addNewCarsWithSomeRandomProbability() {
    // With a probability, add a new car to the end.
    var newCarLikelihood = 0.05; 
    if (random(0,1) < newCarLikelihood) {
        cars.push(makeCar(0,random(305,345),color(random(255),random(255),random(255)),random(25,45)));
    }
}

// method to update position of cars every frame
function carMove() {
    this.x += this.speed;
}
// draw the cars
function carDisplay() {
    push()
    fill(this.c)
    rect(this.x,this.y,this.l,10)
    rect(this.x+8,this.y-10,14,10)
    ellipse(this.x+11,this.y+8,10,10)
    ellipse(this.x+26,this.y+8,10,10)
    pop()
}
//make new car with different XY location, color, length, and speed
function makeCar(birthLocationX,birthLocationY,color,carLength) {
    var car = {x: birthLocationX,
                y: birthLocationY,
                c: color,
                l: carLength,
                speed: random(2,10),
                move: carMove,
                display: carDisplay}
    return car;
}
function removeBirdsThatHaveSlippedOutOfView(){
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x > 0) {
            birdsToKeep.push(birds[i]);
        }
        print(birds[i])
    }
    birds = birdsToKeep; // remember the surviving cars
}
function updateAndDisplayBirds(){
    // Update the cars's positions, and display them.
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}
function addNewBirdsWithSomeRandomProbability() {
    // With a probability, add a new bird to the end.
    var newBirdLikelihood = 0.05; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(width,random(20,160),color(random(255),random(255),random(255))));
    }
}

// method to update position of birds every frame
function birdMove() {
    this.x -= this.speedX;
    this.y += this.speedY
}
// draw the birds
function birdDisplay() {
    push()
    fill(this.c)
    triangle(this.x,this.y,this.x+6,this.y+1.5,this.x+6,this.y-1.5)//beak
    ellipse(this.x+9,this.y,7,7) //head
    ellipse(this.x+17,this.y+4,15,8)//body
    arc(this.x+18, this.y, 10, 10, -0.7, PI-0.7,CHORD)//wings
    ellipse(this.x+8,this.y-1,1,1)//eyes
    pop()
}
//make new bird with different location, color, speedXY
function makeBird(birthLocationX,birthLocationY,color) {
    var bird = {x: birthLocationX,
                y: birthLocationY,
                c: color,
                speedX: random(5,8),
                speedY: random(-1.5,1.5),
                move: birdMove,
                display: birdDisplay}
    return bird;
}

For this project, I created 2 arrays of objects: cars and birds. Cars have random color, length, speedX, and y position on the road; birds have random color, y position in the sky, speedX, and speedY.

]]>
https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/project-11/feed/ 0
LO 11 https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/lo-11-2/ https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/lo-11-2/#respond Sun, 14 Nov 2021 06:25:28 +0000 https://courses.ideate.cmu.edu/15-104/f2021/?p=69027 Continue reading "LO 11"]]>

Link of the article:https://ars.electronica.art/aeblog/en/2020/04/10/women-in-media-arts-ai/

The article I looked into is Women in Media Arts: Does AI think like a (white) man? The article addresses the issue that because an AI is designed by white men and tested by white men, when a woman goes in front of the AI, the AI cannot even recognize her. In response to this kind of issue and to increase the visibility of women working in media art, Women in Media Arts – a comprehensive database devoted specifically to women in media art – emerges. It intends to increase public consciousness and to focus on role models for girls and women.

]]>
https://courses.ideate.cmu.edu/15-104/f2021/2021/11/14/lo-11-2/feed/ 0
Project 10 https://courses.ideate.cmu.edu/15-104/f2021/2021/11/08/project-10-4/ https://courses.ideate.cmu.edu/15-104/f2021/2021/11/08/project-10-4/#respond Tue, 09 Nov 2021 03:43:50 +0000 https://courses.ideate.cmu.edu/15-104/f2021/?p=68926 Continue reading "Project 10"]]>

//This is a original ball game where two players play against each other
//by trying their best to get the ball to the other side
//Crowds are cheering whenever a player gets the ball to the other side
//as time past, players become tired.Play suffering sound instead of ‘haha’
//the game ends with a player not able to get the ball to the other side
//canvas turns black and the last sound is the man suffering.

sketch
//This is a original ball game where two players play against each other
//by trying their best to get the ball to the other side
//Crowds are cheering whenever a player gets the ball to the other side
//as time past, players become tired.Play suffering sound instead of 'haha'
//the game ends with a player not able to get the ball to the other side
//canvas turns black and the last sound is the man suffering.

var manSuffering;
var ballBouncing;
var crowdCheering;
var womanHaha;
var womanSuffering;
var manHaha;
var x = 50
var y = 170
var vx = 100
var vy = 1
//loading the sounds
function preload() {
    manSuffering = loadSound("http://localhost:8000/man suffering.wav");
    ballBouncing = loadSound("http://localhost:8000/ball bouncing.wav");
    crowdCheering = loadSound("http://localhost:8000/crowd cheering.wav");
    womanHaha = loadSound("http://localhost:8000/woman haha.wav");
    manHaha = loadSound("http://localhost:8000/man haha.wav");
    womanSuffering = loadSound("http://localhost:8000/woman suffering.wav");
}
function setup() {
    createCanvas(400, 400);
    createDiv("p5.dom.js library is loaded.");
    useSound();
    frameRate(10)
}
function soundSetup() { // setup for audio generation
    manSuffering.setVolume(0.5);
    ballBouncing.setVolume(0.5)
    crowdCheering.setVolume(0.5)
    womanHaha.setVolume(0.5)
    womanSuffering.setVolume(0.5)
    manHaha.setVolume(0.5)
}
function draw() {
    background(192,100,150)
    //draws the court
    court()
    //draws a moving male player
    playerMale(20,random(100,220))
    //draws a moving female player
    playerFemale(380,random(100,220))
    //draws a moving ball
    ball()
    //draws 7 spectators
    for (var i = 0; i < 4; i++){
        push()
        fill(random(170,255))
        spectator(50+100*i,300)
        pop()    
    }
    for (var i = 0; i < 3; i++){
        push()
        fill(random(170,255))
        spectator(100+100*i,320)   
        pop() 
    }
    //when the ball hits the edge and time is a 15 seconds, one player screams and game ends
    if (frameCount > 150 & x+25 >= width){
        manSuffering.play()
        background(0)
        noLoop();
    }
}
function playerMale(x,y){
    push()
    strokeWeight(3)
    ellipse(x,y,18,25)
    //body
    line(x,y+12,x,y+50)
    line(x,y+30,x-10,y+15)
    line(x,y+30,x+10,y+15)
    line(x,y+50,x+10,y+65)
    line(x,y+50,x-10,y+65)
    //eyes
    ellipse(x-3,y-2,1,1)
    ellipse(x+3,y-2,1,1)
    arc(x, y, 12, 15, 1, PI-1)
    //hair
    line(x,y-12,x,y-22)
    line(x-3,y-11,x-10,y-18)
    line(x+3,y-13,x+10,y-18)
    pop()  
}
function playerFemale(x,y){
    push()
    strokeWeight(3)
    ellipse(x,y,18,25)
    //body
    line(x,y+12,x,y+50)
    line(x,y+30,x-10,y+15)
    line(x,y+30,x-20,y+30)
    line(x,y+50,x+10,y+65)
    line(x,y+50,x-10,y+65)
    //eyes
    ellipse(x-3,y-2,1,1)
    ellipse(x+3,y-2,1,1)
    arc(x, y, 12, 15, 1, PI-1)
    //hair
    line(x,y-12,x-10,y)
    line(x-2,y-12,x-12,y+2)
    line(x+2,y-12,x+12,y+2)
    pop()
}
function court(){
    push()
    fill(0,130,0)
    beginShape();
    vertex(70, 50);
    vertex(330, 50);
    vertex(380, 320);
    vertex(20, 320);
    endShape(CLOSE);
    pop()
}
function spectator(x,y){
    push()
    noStroke()
    ellipse(x,y+120,100,200)
    ellipse(x,y,50,70)
    pop()

}
function ball(){
    push()
    ellipse(x,y,10,10) //draws the ball
    x = x + vx //x-coordinate of ball moves according to x-velocity
    y = y + vy //y-coordinate of ball moves according to y-velocity
    if (x+25 >= width){ //when ball touches right side, bounces back
        vx = random(-80,-30)
        vy = random(-5,5)
        //crowd cheers when a player gets the ball to the other side
        //as time past, players become tired.Play suffering sound instead of 'haha'
        ballBouncing.play()
        if (frameCount < 125){
            crowdCheering.play()
        }
        if (frameCount < 75){
            womanHaha.play() 
        }else{
            womanSuffering.play()
        }
    }
    if (x-25 <= 0){ //when ball touches left side, bounces back
        vx = random(30,80)
        vy = random(-5,5)
        ballBouncing.play()
        if (frameCount < 125){
            crowdCheering.play()
        }
        if (frameCount < 75){
            manHaha.play() 
        }else{
            manSuffering.play()
        }
    }
    //ball doesn't go off the court
    y = constrain(y,50,320)
    pop()
}

]]>
https://courses.ideate.cmu.edu/15-104/f2021/2021/11/08/project-10-4/feed/ 0
Project 10 https://courses.ideate.cmu.edu/15-104/f2021/2021/11/06/project-10-2/ https://courses.ideate.cmu.edu/15-104/f2021/2021/11/06/project-10-2/#respond Sun, 07 Nov 2021 03:51:14 +0000 https://courses.ideate.cmu.edu/15-104/f2021/?p=68692 Continue reading "Project 10"]]>
Beginning sketches
sketch
/* Nami Numoto
 * Section A
 * mnumoto@andrew.cmu.edu
 * Project 10
 */

//tried to depict Baymax from Big Hero 6
//interacting with a spider
//and going from being confused to happy :)

var baymax;
var spider;
var question;

function preload() {
    baymax = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/ding.wav");
    spider = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/fall.wav");
    question = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/questionmark.wav");
}

function soundSetup() {
    baymax.setVolume();
    spider.setVolume();
    question.setVolume();
}

function setup() {
    createCanvas(400, 400);
    background(225);
    frameRate(1);
    useSound();
}

function baymax() {
    stroke(0);
    strokeWeight(3);
    ellipseMode(CENTER);
    //drop shadow
    fill("grey");
    noStroke();
    ellipse(width / 2, 350, 218, 54);
    //legs
    stroke(0);
    fill("white");
    ellipse(170, 300, 54, 90);
    ellipse(230, 300, 54, 90);
    //arms
    ellipse(145, 212, 68, 162);
    ellipse(255, 212, 68, 162);
    //body
    ellipse(200, 200, 145, 218);
    //face
    ellipse(width / 2, 109, 145, 90);
    //mouth
    line(163, 112, 236, 112);
    //eyes
    fill(0);
    ellipse(163, 112, 9, 18);
    ellipse(236, 112, 9, 18);
}

function smile() {
    arc(width / 2, 112, 73, 20, 0, PI, OPEN);
}

function spider() {
    //spider
    push();
    line(width / 2, 0, width / 2, 180);
    fill(0);
    ellipse(width / 2, 182, 10, 14);
    ellipse(width / 2, 176, 8, 10);
    strokeWeight(1);
    for (i = 0; i <= 3; i++) {
        line(width / 2 + 4, 4 * i + 176, width / 2 + 8, 4 * i + 170);
        line(width / 2 + 8, 4 * i + 170, width / 2 + 12, 4 * i + 176);
        line(width / 2 - 4, 4 * i + 176, width / 2 - 8, 4 * i + 170);
        line(width / 2 - 8, 4 * i + 170, width / 2 - 12, 4 * i + 176);
        }
    pop();
}

function question() {
    text("?", 100, 100);
}

function draw() {
    if (frameCount > 0) {
    baymax();
    }
    if (frameCount >= 7) {
        spider();
        spider.play();
      }
    if (frameCount >= 10) {
        question();
        question.play();
      }
    if (frameCount >= 9) {
        smile();
        baymax.play();
      }
    if (frameCount > 18) {
      frameCount === 1;
      }
}

]]>
https://courses.ideate.cmu.edu/15-104/f2021/2021/11/06/project-10-2/feed/ 0