Introduction:
This is a survive Covid game. The goal is to help a ninja who’s trapped in a covid world avoid viruses, obtain masks, and eat sushi! I want to make this educational game to show that to fight covid one needs to wear a mask, stay safe, and eat well. The game is easy to play and has a lighthearted atmosphere. People can play this browser game to kill time and have fun.

Guidelines:
There will be viruses coming from the right of the screen and the player needs to press the space to make the ninja jump over the virus barricades. The player loses if the ninja hits the viruses for more than three times. The player gets an extra life when the ninja gets a mask. The player gets 20 extra points when the ninja eats a sushi. The game gets harder as the player gets higher scores.

Applications:
If I have more time, I wish to implement a shop feature which allows the player to buy new characters and items such as sanitizers and napkins, making the game more interesting.

//Name: Heying Wang  Andrew id: heyingw
//Section B
var ninja;
var ninjaSize=50;
var sushiSize=50;
var virus;
var virusSize=40;
var viruses=[];
var virusImages=[];
var clouds=[];
var sushiArray=[];
//The player has an initial score of 0 and life of 3
var score=0;
var life=3;
var timer=0;

var circleColor = [];
var r=50; //radius
var theta=0; 
var startAngles=[];
var xvalues=[];
var yvalues=[];


function preload() {
    //ninja image
    ninjaImage=loadImage('https://i.imgur.com/kpI63Vj.png')
    //background image
    bgImage=loadImage("https://i.imgur.com/S5mfVFp.jpg");
    //three kinds of covid virus
    virusImage1=loadImage("https://i.imgur.com/SjGhpnK.png")
    virusImage2=loadImage("https://i.imgur.com/AKjfL9n.png")
    virusImage3=loadImage("https://i.imgur.com/nYvztEk.png")
    virusImages.push(virusImage1);
    virusImages.push(virusImage2);
    virusImages.push(virusImage3);

    cloudImg=loadImage("https://i.imgur.com/fLez1dg.png");
    sushiImg=loadImage("https://i.imgur.com/oz3ud5W.png");

    //load the sounds
    game=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/game.wav');
    sushiSound=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/sushi.wav');
    jump=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/jump.wav');
    mask=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/mask.wav');
}


function setup() {
    createCanvas(600, 250);
    useSound();
    //set up with constructors
    ninja=makeNinja(20,height-100,ninjaImage,ninjaSize);
    virus=makeVirus(width-100,height-50,virusSize,random(virusImages));
    viruses.push(virus);
    sushi=makeSushi(width*3,100,sushiImg,sushiSize);
    sushiArray.push(sushi); 

    for (var i = 0; i < 2; i++){
        var rx = random(width,width*2);
        clouds[i] = makeCloud(rx);
    }

    for (var i = 0; i < 12; i++) {
        circleColor[i] = color(random(0,256), random(0, 256), random(0, 256),120);
        startAngles[i] = i*30;
    }
    
}

//set up the sounds
function soundSetup() { 
    game.loop();
    game.setVolume(0.5);
    jump.setVolume(0.1);

    
 
}



function draw() {
    //set a timeCounter
    timer+=1;
    console.log(timer);
    image(bgImage,0,0,600,250);
    fill(255);
    textSize(20);
    text("score: "+score,470,30);
    text("life: "+life,30,30);
    push();
    drawCircles();
    pop();
    //draw ninja. Move ninja
    ninja.show();
    ninja.move();
    for(var i=0;i<sushiArray.length;i++){
        sushiArray[i].show();
        sushiArray[i].move();
    }

    //draw and move every virus in the viruses array
    if(timer>150){
        for(var i=0;i<viruses.length;i++){
            viruses[i].show();
            viruses[i].move();
        }
    }
    console.log(timer);

    //level up as the player gets higher scores
    if(score>50){
        virusSize=50;
    }
    else if(score>120){
        ninjaSize=60;
    }
    else if(score>200){
        virusSize=60;
    }

    /*append new viruses to the list if the virus array is about to 
    running out of virus*/
    if(viruses.length<10){
        makeFiveNewViruses()};
    if(sushiArray.length<2){
        makeNewSushi()};
    //console.log(viruses.length)

    //check collision for every virus in the array
    //check collision only when the timeCounter%10==0
    //we can't check collision at every frame otherwise life will be reducted mulpital times for one collision
    for(var i=0;i<viruses.length;i++){
        if(timer%10==0){
            checkCollision(ninja,viruses[i]);
        }

        //remove the virus that goes off the screen 
        if(viruses[i].x<=-20){
            viruses.splice(viruses[i],1);
            score+=1;
            
        } 



    }

    for(var i=0;i<clouds.length;i++){
        checkCloudCollision(ninja,clouds[i]);
    
    }
    for(var i=0;i<sushiArray.length;i++){
        checkSushiCollision(ninja,sushiArray[i]);
    
    }
    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();
    //constantly check if the game is over
    //gameover condition: life is used up

    checkGameOver(); 

    
  
    
}

//if gameover, clear the canvas, stop the loop
function checkGameOver(){
    if(life==0){
        background(220);
        fill('red');
        text("Game Over!",250,100);
        noLoop();
        game.stop();
    }
}

function drawCircles(){
    noStroke();
    translate(307,85);
    for(var i = 0; i < 12; i++){
        xvalues[i]=r*cos(radians(startAngles[i]+theta));
        yvalues[i]=r*sin(radians(startAngles[i]+theta));
        fill(circleColor[i]);
        circle(xvalues[i],yvalues[i],10);
        theta-=0.05;
    }
}

//ninja consructor
function makeNinja(sx,sy,ninjaImage,ninjaSize){
    var ninja={x: sx, y: sy, sz:ninjaSize,vy: 0, gravity: 1.9, img:ninjaImage, show: ninjaDraw, jump:ninjaJump,
        move:ninjaMove

    }
    return ninja
}


//virus constructor
function makeVirus(sx,sy,virusSize,virusImage){
    var virus={x: sx, y: sy, sz:virusSize, vx:-7, img:virusImage, show: virusDraw, 
        move:virusMove

    }
    return virus
}

//sushi constructor
function makeSushi(sx,sy,sushiImg,sushiSize){
    var ss={x: sx, y: sy, sz:sushiSize, vx:-1, img:sushiImg, show: sushiDraw, 
        move:sushiMove

    }
    return ss
}

//make new viruses when needed
function makeFiveNewViruses(){
    for(var i=0;i<5;i++){
        viruses.push(makeVirus(viruses[viruses.length-1].x+random(120,800),height-50,virusSize,random(virusImages)));
    }
}

function makeNewSushi(){
        sushiArray.push(makeSushi(sushiArray[sushiArray.length-1].x+random(width*2,width*4),random(20,190),sushiImg, sushiSize));
    
}

function ninjaDraw(){
    image(this.img,this.x,this.y,this.sz,this.sz);
}

function virusDraw(){
    image(this.img,this.x,this.y,this.sz,this.sz);
}

function sushiDraw(){
    image(this.img,this.x,this.y,this.sz,this.sz);
}

function ninjaJump(){
    //prevents the ninja from sticking at the top (if player keeps pressing space)
    if(this.y>=height-100){
        this.vy=-25;
    }

    

}


//implement gravity
//use constrain to prevent the ninja from going offscreen
function ninjaMove(){
    this.y+=this.vy;
    this.vy+=this.gravity;
    this.y=constrain(this.y,0,height-this.sz);
 
  

  
    
}


//collision detection
function checkCollisionAandB(A,B){
    if(A.x < B.x + B.sz &
        A.x + A.sz > B.x &&
        A.y < B.y + B.sz &&
        A.y + A.sz > B.y){
            return true
    }
    

}
function checkCollision(ninja,virus){
    if(checkCollisionAandB(ninja,virus)){
            life-=1
    }
    

}

//masks give players life
function checkCloudCollision(ninja,cloud){
    if(checkCollisionAandB(ninja,cloud)){
            mask.play();
            clouds.splice(cloud,1);
            life+=1
    }
    

}

//sushi give players scores
function checkSushiCollision(ninja,sushi){
    if(checkCollisionAandB(ninja,sushi)){
        sushiSound.play();
        sushiArray.splice(sushi,1);
        score+=20; 
    }
    

}




function virusMove(){
    this.x+=this.vx;
  

    
}

function sushiMove(){
    this.x+=this.vx;
  

    
}

//ninja jumps when player presses the space
function keyPressed(){
    if(key==' '){
        ninja.jump();
        jump.play();
    }
}

function updateAndDisplayClouds(){
    // Update the clouds(masks)' positions, and display them.
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}    

function removeCloudsThatHaveSlippedOutOfView(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].sz > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep; 
}

function addNewCloudsWithSomeRandomProbability() {
    var newCloudLikelihood = 0.01; 
    if (random(0,5) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}

function makeCloud(birthLocationX) {
    var cld = {x: birthLocationX,
                cloudImage:cloudImg,
                y:random(10,100),
                speed: -0.5,
                sz:random(25,60),
                move: cloudMove,
                display: cloudDisplay}
    return cld;
};

function cloudMove() {
    this.x += this.speed;
}
function cloudDisplay() {
    image(this.cloudImage,this.x,this.y,this.sz,this.sz*0.5);

}

I created this landscape story about skiing. There was mountain scrolling in the background and decoration banners saying that this is a skiing resort. The trees are scrolling to the left to create the effect that the skier is moving to the right. There are four types of trees and they all appear randomly. The size of the tree is also randomly decided. There are balloons floating in the sky and yellow stars shining in the background to make this scene more interesting. The balloons appear at random height from mid-air to the highest sky in the program.

//Heying Wang 
//Section B
var skier;
var birdImg;
var treeTypes=[]
var trees=[];
var birds=[];

//use noise to draw terrain
var noiseParam=0;
var noiseStep=0.05;
var values=[];


function preload(){
    //three types of Christmas tree
    var tree2 = loadImage("https://i.imgur.com/NJBdtua.png");
    treeTypes.push(tree2);
    var tree3=  loadImage("https://i.imgur.com/CU8yOAQ.png");
    treeTypes.push(tree3);
    var tree4=  loadImage("https://i.imgur.com/5Nyq5gE.png");
    treeTypes.push(tree4);
    var tree5=  loadImage("https://i.imgur.com/gCqcv9f.png");
    treeTypes.push(tree5);
    skier=loadImage("https://i.imgur.com/zbJ0fyD.png");
    birdImg=loadImage("https://i.imgur.com/H0cfnnj.png");
    

  }
function setup() {
    createCanvas(480, 300);
    for (var i = 0; i < 10; i++){
        var rx = random(width*3);
        trees[i] = makeTree(rx);
    }

    for(i=0;i<=width/12;i++){
        var n=noise(noiseParam);
        var value=map(n,0,1,0,height);
        values.push(value);
        noiseParam+=noiseStep;
    }
    for (var i = 0; i < 3; i++){
        var rx = random(width);
        birds[i] = makeBird(rx);
    }
    frameRate(13);
 
    
}

function draw() {
    background(220,220,250);
    imageMode(CENTER);

    
    fill(90,20,60);
    rect(0,0, width, height-150); 
    values.shift();
    var newRandom=map(noise(noiseParam),0,1,0,height);
    values.push(newRandom);
    noiseParam += noiseStep;
    drawTerrain();
    //draw the banner and pillers
    fill('grey');
    rect(0,50,30,height-50);
    rect(width-30,50,30,height-50);
    fill(140,40,40);
    rect(30,50,width-60,20);
    fill(255);
    text('2020 ski season',width/2-20,62);
    fill(20,30,70);
    rect(0,height-50, width, height-150); 


    updateAndDisplaytrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability(); 

    updateAndDisplaybirds();
    removeBirdsThatHaveSlippedOutOfView();
    addNewBirdsWithSomeRandomProbability(); 
    //draw skier
    var skierX=240+random(-0.5,0.5);
    image(skier,skierX,240,100,100);

    noStroke();
    fill('yellow');
    for(var i=0;i<10;i++){
        circle(random(width),random(height-100),2,2);
    }

}

function updateAndDisplaytrees(){
    // Update the trees' positions, and display them.
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}  
function updateAndDisplaybirds(){
    // Update the birds' positions, and display them.
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}      

function removeTreesThatHaveSlippedOutOfView(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; 
}
function removeBirdsThatHaveSlippedOutOfView(){
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x + birds[i].size > 0) {
            birdsToKeep.push(birds[i]);
        }
    }
    birds = birdsToKeep; 
}


function addNewTreesWithSomeRandomProbability() {
    var newTreeLikelihood = 0.007; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

function addNewBirdsWithSomeRandomProbability() {
    var newBirdLikelihood = 0.02; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(width));
    }
}

function makeTree(birthLocationX) {
    var tre = {x: birthLocationX,
                breadth: random(60,70),
                speed: -2,
                treeType: random(treeTypes),
                move: treeMove,
                display: treeDisplay}
    return tre;
};
function makeBird(birthLocationX) {
    var bir = {x: birthLocationX,
                birdImage:birdImg,
                y:random(30,200),
                speed: -2,
                size:random(15,60),
                move: birdMove,
                display: birdDisplay}
    return bir;
};

function treeMove() {
    this.x += this.speed;
}
function treeDisplay() {
   image(this.treeType,this.x,215,this.breadth,this.breadth*1.4);

}
function birdMove() {
    this.x += this.speed;
}
function birdDisplay() {
    image(this.birdImage,this.x,this.y,this.size,this.size*1.2);

}



function drawTerrain(){
    //draw the terrain using begin shape and end shape
    noStroke();
    fill('white');
    beginShape();
    vertex(0,height);
    vertex(0,height);
    for(i=0;i<=width;i+=12){
        curveVertex(i,values[i/12]);

    }
    vertex(width,height);
    vertex(width,height);
    endShape(CLOSE);}

Heying Wang Section B

Caroline Sinders, Feminist Data Set (2017)

Caroline Sinders is an artist interested in machine-learning and interdisciplinary areas. She holds a Masters from New York University’s Interactive Telecommunications Program. She is also the founder of Convocation Design + Research, an agency focusing on the intersections of machine learning, user research, designing for public good, and solving difficult communication problems. I chose to look at Sinders because many of her works express feminist views, political ideology, and social justice. Her works show an interesting combination of technology, fine arts, and service design. Sinders has been using machine learning a lot in her art creations.

The project that interests me is called Feminist Data Set (2017). It interrogates the AI process including data collection, data labeling, data training, etc. The project is a response to the problem of data harvesting. I think it’s a thought-provoking work that has great importance because these days people’s data are collected easily by large technological companies.The project is a social justice art practice that uses data creation as a protest. The artists’ intentions are uniquely presented. I think it’s creative to make a data-set about political ideology.

Andrew id: heyingw Name: Heying Wang

These are the characters in my sound story: fish, ship, bubbles, small rock, small rock pieces, and big rock.

The sounds in my story include the sound of the ocean waters, ship siren, ship alarm, explosion sound, and bubble popping sound.

This is what the story is about: The ship starts sailing on the sea and the fish is swimming happily in the waters. The ship stops and the siren goes off to warn nearby ships. Nothing dangerous detected. The siren stops and the ship sails again with a faster speed. The ship hits a rock however, and the alarm for collision is triggered. Luckily the rock isn’t too big. Our ship cracks the rock into pieces accompanied by an explosion sound. The ship doesn’t seem to be damaged and it continued its journey. Our fish is making bubbles happily with a poppoing sound. The ships accelerates. It’s now sailing at a very high speed, which can be dangerous for the ship. The ship hits a big tock and the alarm is triggered. The rock is too big to be crashed. The ship sinks to the bottom of the sea. Game over.

var bgImage;
var boat;
var pieces=[];
function preload() {
    // call loadImage() and loadSound() for all media files here
    bgImageBig=loadImage('https://i.imgur.com/hpw6fpR.jpeg');
    fishImage=loadImage('https://i.imgur.com/zOEWUQ7.png');
    boatImage=loadImage('https://i.imgur.com/MtadjYH.png');
    water=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/water-2.wav');
    siren=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/siren.wav');
    alarm=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/alarm.wav');
    pop=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/pop-1.wav')
    breaking=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/break.wav')
    
}


function setup() {
    createCanvas(400, 400);
    frameRate(10);
    useSound();

    //boat object
    boat=new Object();
    boat.img=boatImage;
    boat.x=280;
    boat.y=15;
    boat.dx=-0.8;
    boat.imgWidth=120;
    boat.imgHeight=120;
    boat.draw=imageDraw;

    //fish object
    fish=new Object();
    fish.img=fishImage;
    fish.x=200;
    fish.y=250;
    fish.dx=-4;
    fish.imgWidth=60;
    fish.imgHeight=60;
    fish.draw=imageDraw;

}


function soundSetup() { 
    water.loop();
    water.setVolume(0.02);
    siren.setVolume(0.05);
    alarm.setVolume(0.2);
    breaking.setVolume(0.2);
    pop.setVolume(0.3);
 
}


function draw() {
    //clip background
    var bgImage=bgImageBig.get(0,100,400,300);
    background(20,60,100);
    image(bgImage,0,100,400,400);

    boat.draw();
    fish.draw();
//The ship starts sailing on the sea and the fish is swimming happily in the waters
    print(frameCount);
    if (frameCount >= 25 & frameCount < 80) { 
        boat.x+=boat.dx;

     }

    fish.x+=fish.dx;
    fish.y+=random(1,-1);
    if(fish.x<=-20){
        fish.x=400;
        fish.y=random(150,350);
    }

//The ship stops and the siren goes off to warn nearby ships
    if(frameCount >=90 & frameCount < 125){
        siren.play();
    }

//Nothing dangerous detected. The siren stops and the ship sails again with a faster speed   
    if(frameCount >125 & frameCount < 219){
        siren.stop();
        boat.dx=-1.5;
        boat.x+=boat.dx;
        
    }

//The ship hits a rock however, and the alarm for collision is triggered 
    if(frameCount>219 & frameCount<240){
        if(frameCount==220){
            alarm.play();
        }
        var ball=new Object();
        ball.x=boat.x+20;
        ball.y=boat.y+90;
        ball.draw=drawBall;
        ball.draw();

    }
//Luckily the rock isn't too big. 
//Our ship cracks the rock into pieces accompanied by an explosion sound 
    if (frameCount>240 & frameCount<250){
        alarm.stop();
        for (i=0;i<50;i++){
            pieces[i]=random(105,130);

        }
        for(i=0;i<pieces.length;i++){
            circle(pieces[i],random(120,380),2,2);
        }
        if(frameCount==241){
            breaking.play();
       

    }}
//The ship doesn't seem to be damaged and it continued its journey
    if(frameCount>235 & frameCount<=399){
        boat.dx=-1.5;
        boat.x+=boat.dx;

    }
//Our fish is making bubbles happily with a poppoing sound
    if(frameCount>280){
        if(frameCount%30==0){
            fill(255)
            circle(fish.x,fish.y,15,15);
            pop.play()
        }
    }



    if(boat.x<=-30){
        boat.x=370;
        boat.y=15;
    }

//The ships accelerates. 
//It's now sailing at a very high speed, which can be dangerous for the ship
    if(frameCount>399 & frameCount<499){
        boat.dx=-5;
        boat.x+=boat.dx;
        if(frameCount%100==0){
            siren.play();
        }}

//The ship hits a big tock and the alarm is triggered
    if(frameCount>499 & frameCount<519){
        if(frameCount==500){
            alarm.play();
        }
            var bigBall=new Object();
            bigBall.x=boat.x;
            bigBall.y=boat.y+90;
            bigBall.draw=drawbigBall;
            bigBall.draw();


    }
//The rock is too big to be crashed. The ship sinks to the bottom of the sea. Game over.
    if(frameCount>519){
        boat.x+=boat.dx;
        boat.y+=20;
        if(boat.y>=390){
            background(0);
            noLoop();
        }
    }
        
        
    
    

    
    
}

function imageDraw(){
    image(this.img,this.x,this.y,this.imgWidth,this.imgHeight);
}

function drawBall(){
    noStroke()
    fill('red');
    circle(this.x,this.y,20,20);
}

function drawbigBall(){
    noStroke()
    fill(40);
    circle(this.x,this.y,40,40);
}

Andrew id: heyingw

The Reverse Sessions,Tarek Atoui (2014)

The artist built 10 unconventional instruments including horns and tea-cups and used them to give a performance. Atoui invited a group of instrument makers and composers to improvise with them. The performance was very energetic and inspiring.

I really like how the artist reversed the order in which instruments are usually made. He collected sounds of a series of ethnic musical instruments and collaborated with the instrument makers and composers to recreate the objects that they believed to be producing these sounds. I think this is an imaginative and unconventional approach to the creation of sound and music: With the audio already established, it was the artist’s job to figure out the source of the sound. It provided the artist with great possibilities and freedom to make something experimental.

The outcomes were completely out of the audience’s expectations. The piece followed genesis of sound making and employed some mechanism create Atoui’s makeshift instruments. The piece demonstrated another attempt of the artist to explore how people perceive and sense sounds.

I made this interactive work which allows the user to move their mouse around to fill out the image with the brush feature. The brush has the shape of leaves. The user can change the brush shape with key press. I want to create a painting like atmosphere. The elements at each pixel consists of text “she, 20, art” and patterns such as flowers, stars, hearts, etc.

//Heying Wang
//section B
let img;
//key words abut me
let words=['20','she','art','✿','*','♥︎','❀','♛']
var leafShape='serrate'

function preload() {
  img = loadImage('https://i.imgur.com/fgOhCaN.jpeg');
}

function setup() {
  createCanvas(480, 480);
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
  img.resize(480,480);
  background(map(mouseX,0,width,0,255),70,90);
  frameRate(10000);
  
}

//find the pixel color 
function draw() {
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  let pc = img.get(x, y);
  fill(pc);
  //smaller founts for important parts of the image
  //so that there will be more details
  if(x>150 & x<350 && y>0 && y<220){
      textSize(8);
  }
  else if(x>120 & x<400 && y>300 && y<400){
      textSize(12);

}else{
    textSize(15)
}
    /* brush Feature: the player can move 
    the mouse around to fill out the image faster
    the brush stroke has the shape of leaves */

    text(random(words),x,y);

    if(leafShape=='serrate'){
        fill(img.get(mouseX,mouseY));
        beginShape()
        curveVertex(mouseX,mouseY);
        curveVertex(mouseX,mouseY-8);
        curveVertex(mouseX-4,mouseY-15);
        curveVertex(mouseX,mouseY-20);
        curveVertex(mouseX+4,mouseY-15);
        curveVertex(mouseX,mouseY-8);
        endShape(CLOSE);
    }
    //change brushes
    else if (leafShape=='digitate'){
        fill(img.get(mouseX,mouseY));
        line(mouseX,mouseY,mouseX,mouseY-6);
        beginShape();
        vertex(mouseX,mouseY);
        vertex(mouseX,mouseY-5);
        vertex(mouseX+8,mouseY-8);
        vertex(mouseX,mouseY-11);
        vertex(mouseX-8,mouseY-8);
        endShape(CLOSE);
    }
    console.log(leafShape);



    

   


}

function keyTyped(){
    
    if(key==='d'){
        leafShape='digitate'
    }
    else if(key==='s'){
        leafShape='serrate'
    }
}

heyingw Section B

Project: Christina Phazero Curlee, “from Video Art to Video Game”, Breathe,2016

I think it’s amazing how the artist is able to turn her difficulty with depression to power and creativity that helps her build her unique, artistic, and meaningful games. Christina explained that before she started to make games, she was stuck in her own world and detached from the rest of the world. She has been struggling with depression for years. But in the process of making games, Christina began to connect with others as she needed to understand what the players are thinking at every stage to make good games. She became more social, and more curious about the world and other people. Her games spark a dialog between her and her players. Christina began to understand how they experienced the world, and make them understand her world through games. My peer admires the artist’s ability to use video game as a platform for communication and interaction. I think that’s definitely true. The video games served as bridges between Christina and the players, and also the world. Also, her games deal with meaningful topics such as child abuse, racial and sexual violence, marginalization, beauty standards, etc. She also incorporated illustration and photography. This makes her games different from regular shooting games that we see on the market. Her games become art that left deep impression on players and made people think.

My peer’s Looking Outwards post: https://courses.ideate.cmu.edu/15-104/f2020/2020/10/26/08_lo_creativepractice/

Sarah Groff Hennigh Palermo(Sarah.GHP),is an artist, a programmer, and a data designer. A link to her personal website is http://sarahghp.com.

Sarah graduated from Integrated Digital Media program in NYU’s Tandon School of Engineering. She is interested in constructing technology and information in different ways. She wants to create art works that move away from an information-instrumental view of data and into more artistic, humane, and sensitive approach.

In her presentation, she begins with telling the audience her disappointment in how info and data have become big concerns in life as authoritarian forces and big companies constantly extract information from citizens using high technology. She condemns this the lack of privacy and believes that information, data, computers, and high technology should not threaten people’s identity safety and negatively influence our life in general. Thus, she proposed the idea of undermining computing. She explains that this is not to oppose computers as “destroy computer and we will live in the woods”. Instead, she suggests that we should simply take a step back and explore different ways of handling technology. I think her idea is very interesting so I’m looking forward to see how Sarah manages to incorporate this concept in her works. Sarah brings up an alarming problem that we all face in the 21st century. It is constantly debated and argued that what should be the ideal relationship between humans and computers. Sarah moves on by introducing her projects. She has been performing live visuals with her algorithmic band, Codie. They have given performances which involves live coding, dance, and music at multiple locations. I think it’s amazing that by combining dance, music, and visuals, and have them modified alive, Sarah and her band create art pieces that use technology partially but not entirely rely on it. Instead, human is a crucial aspect of all these works and technology is more like a tool. It allows human creativity, participation, intervention, and individuality. Sarah presents some of their performance videos. They have been including pop geometry, adding different features, and accumulating random movements of bits and pieces with people dancing to the party music in the background.They are also accepting human failures and making failures interesting as sometimes the program gives them surprising results when there are errors.
Sarah explains that AI art is usually futuristic, magic, and novel. People spend too much effort expressing how fascinating a futuristic, high-tech world is yet ignore the fact that human behaviors can be equally valuable and interesting.

Heying Wang

heyingw@andrew.cmu.edu

sketch

var nPoints=100;
function setup() {
    createCanvas(480, 480);
    background(220);
    frameRate(5);
   
}

function draw() {
    var x;
    var y;
    
    //constrain mouseX and mouseY
    constrain(mouseX,0,width);
    constrain(mouseX,0,height);

    //limite the size of the astroid with map method
    //sets up a constantly chaging background
    var a = map(mouseX,0,width,20,100);
    var b=  map(mouseY,0,height,20,100);

    background(100+a,150-b,100+b-a);
    for(i=0;i<=200;i++){
        fill('yellow');
        circle(random(width),random(height),1,1)
    }


    //draw one large astroid at the center 
    fill(a,b,50);
    translate(width/2+random(-2,2),height/2+random(-2,2)); 
    astroid(a,b); 
     
    fill(random(250),random(250),random(250));
    heart(a);
   
    push();
    //the one on the bottom right
    translate(width/4+random(-2,2),height/4+random(-2,2)); 
    rotate(radians(mouseX));  
    fill(a,b,160);
    astroid(a,b);
    
    fill(random(250),random(250),random(250));
    heart(a);
    
    //the one on the top left
    pop();
    push();
    translate(-width/4+random(-2,2),-height/4)+random(-2,2); 
    rotate(radians(mouseX));
    fill(a,b,160);
    astroid(a,b);
 
    fill(random(250),random(250),random(250));
    heart(a);
    //the one on the top right 
    pop();
    pop();
    push();
    translate(width/4+random(-2,2),-height/4)+random(-2,2); 
    rotate(radians(mouseX));
    fill(a,b,160);
    astroid(a,b); 
    fill(random(250),random(250),random(250));
    heart(a);
 
    //the one on the bottom left
    pop();
    pop();
    translate(-width/4+random(-2,2),height/4)+random(-2,2); 
    rotate(radians(mouseX));
    fill(a,b,160);
    astroid(a,b); 
    fill(random(250),random(250),random(250));
    heart(a);
       

}

//draw astroid and the lines
function astroid(a,b){
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); 
        x = a*pow(cos(t),3);
        y = b*pow(sin(t),3);
        vertex(x, y);
    }
    endShape(CLOSE);
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); 
        x = a*pow(cos(t),3);
        y = b*pow(sin(t),3);
        strokeWeight(0.2);
        stroke('wight');
        line(x,y,0,0);
    }
   
}
//draw heart
function heart(a){
    k=map(a,0,100,0.5,1.2);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); 
        x =k*16*pow(sin(t),3);
        y = k*13/16*13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

I made this constantly changing pattern with hearts curve and astroid curve. The background color corresponds to the position of mouse x and mouse y.

The size of the astroid curve and the heart curve also depends on where the user places he mouse. They can become as narrow as a pointer or as wide as a square. They will also be rotating around the center as the mouse move clockwise or anti-clockwise.

Thus, the user can interact with the page by moving their mouse around to create their unique, desired pattern.

I was attracted to this work at the first sight. It is a monumental, beautiful sculpture work flowing in the sky, consisted of an intricate, color-changing net. The audience can interact with the piece by connecting to the project’s wifi and give instructions to the website promoted, such as changing colors, moving parts around, etc. I like how it gives the audience the chance to be the creators of this art work and fully participate in it by taking out the artist’s role as the maker. I also like the sense of vulnerability and mobility in this work. The piece is like a floating, colorful, and constantly changing nebula that has fragile, mysterious, mobile beauty.

The team collaborated with Janet Echelman, a sculpture artist who works with public space. What they used to build this sculpture is a kind of fiber that is fifteen times stronger than steel. And the sculpture was put up into the middle of an active city’s sky. The project team built the modal in Chrome with webGL. They then modified parameters to get the complex behaviors they were looking for. The mobile and interactive aspect of the piece was made possible by a language developed by the team. It sits in between Javascript and C language. People’s input would then directly influence what they see. The team commented on this, saying “they can draw and paint with light,…people are the Co-creators. Seeing the delight and wonder on people’s faces is the best reward for the team.”