November 2022 – Page 3 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

project 11: landscape

// isis berymon section D

var buildings = [];
var stars = [];
var streetlights = [];
var ground = 160;

function setup() {
    createCanvas(480, 200);
    frameRate(10);

    //initial scene
    for(var i =0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    for(var i=0; i< 30; i++){
        var rx = random(width);
        stars[i] = makeStar(rx);
    }
    for(var i = 0; i<3; i++){
        var rx = random(width);
        streetlights[i] = makeLight(rx);
    }
}

function draw() {
    background(81, 61, 128); //dark purple sky
    showScene();
    updateScene();
    //dark grey road
    fill(84);
    noStroke();
    rect(0, ground, width, height-ground);
}

function showScene(){ //draw and move all objects
    //show stars
    for(var i =0; i< stars.length; i++){
        stars[i].move();
        stars[i].draw();
    }
    //show buildings
    for(var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].draw();
    }
    //show streetlights
    for(var i= 0; i < streetlights.length; i++){
        streetlights[i].move();
        streetlights[i].draw();
    }
}

function updateScene(){ //remove and add to arrays
    //remove stars offscren
    var keepstar = [];
    for(var i = 0; i < stars.length; i++){
        if(stars[i].x + 3 > 0){
            keepstar.push(stars[i]);
        }
    }
    stars = keepstar;
    //add new stars randomly
    var nstr = .1;
    if(random(1) < nstr){
        stars.push(makeStar(width+3));
    }
    //remove buildings offscreen
    var keepbldg = [];
    for(var i = 0; i < buildings.length; i++){
        if(buildings[i].x + buildings[i].bw > 0){
            keepbldg.push(buildings[i]);
        }
    }
    buildings = keepbldg;
    //add new buildings randomly
    var nbldg = .03;
    if(random(1) < nbldg){
        buildings.push(makeBuilding(width));
    }
    //remove lights offscreen
    var keeplight = [];
    for(var i = 0; i < streetlights.length; i++){
        if(streetlights[i].x + 15 > 0){
            keeplight.push(streetlights[i]);
        }
    }
    streetlights = keeplight;
    //add new lights randomly
    var nlight = .005;
    if(random(1) < nlight){
        streetlights.push(makeLight(width));
    }
}

function makeStar(sx){ //star object constructor
    var star = {x: sx,
                y: random(ground),
                speed: -.7,
                move: moveLeft,
                draw: drawS}
    return star;
}

function drawS(){ //white star
    stroke(255);
    line(this.x, this.y-3, this.x, this.y+3);
    line(this.x-3, this.y, this.x+3, this.y);
}

function makeBuilding(bx){ //building object constructor
    var bldg = {x: bx,
                bw: round(random(50, 100)),
                bh: round(random(30, 120)),
                speed: -2,
                move: moveLeft,
                draw: drawB}
    return bldg;
}

function drawB(){
    fill(32, 27, 43); //dark purple grey building
    noStroke();
    rect(this.x, ground-this.bh, this.bw, this.bh);
    fill(95, 86, 115); //light purple grey shading
    rect(this.x, ground-this.bh, 6, this.bh);
    rect(this.x, ground-this.bh, this.bw, 3);
}

function makeLight(lx){
    var light = {x: lx,
                    speed: -2,
                    move: moveLeft,
                    draw: drawL}
    return light; //light object constructor
}

function drawL(){
    fill(112); //mid grey
    rect(this.x, 130, 5, 30);
    //flickering lights
    if(random(1) > .8){
        fill(237, 196, 114); //yellow
    } else {
        fill(122);
    }
    rect(this.x+5, 130, 10, 5); //grey streetlight with flickering light
}

function moveLeft(){ //move left every frame
    this.x += this.speed;
}

Project 11: Generative Landscape

SpongeBob SquarePants

sketch

//Xinyi Du 
//15104 Section B
//xinyidu@andrew.cmu.edu
//Project-11

//SpongBob walking gif source:
//https://www.deviantart.com/supermariospongebob/art/SB-Walkin-into-Monday-858782150
//SB Walkin' into Monday
//by supermariospongebob

//arrays for background flowers
var filenamesF = [];
var bgflowers = [];
var backgroundF = [];
//arrays for the character
var filenames = [];
var walkImage = [];
var character = [];

var buildings = [];
var leaves = [];
var flags = [];

function preload() {
    //load SpongeBob walk cycle images
    filenames[0] = "https://i.imgur.com/ulD5SOy.png";
    filenames[1] = "https://i.imgur.com/0cFmmhf.png";
    filenames[2] = "https://i.imgur.com/wmSWQHb.png";
    filenames[3] = "https://i.imgur.com/iYYLnPL.png";
    filenames[4] = "https://i.imgur.com/kFzcZXr.png";
    filenames[5] = "https://i.imgur.com/Ej0nUgn.png";
    filenames[6] = "https://i.imgur.com/wfR57hy.png";
    filenames[7] = "https://i.imgur.com/4TadbPD.png";
    filenames[8] = "https://i.imgur.com/BjVfWWi.png";
    filenames[9] = "https://i.imgur.com/vLUiotP.png";
    filenames[10] = "https://i.imgur.com/oA49LHr.png";
    filenames[11] = "https://i.imgur.com/A9TMzpP.png";
    filenames[12] = "https://i.imgur.com/NAPIs2c.png";
    for (var i = 0; i < filenames.length; i++) {
        walkImage[i] = loadImage(filenames[i]);
    }
    //load background flower images
    filenamesF[0] = "https://i.imgur.com/ZNmnfMU.png";
    filenamesF[1] = "https://i.imgur.com/o1z2jrZ.png";
    filenamesF[2] = "https://i.imgur.com/U4OwJMt.png";
    filenamesF[3] = "https://i.imgur.com/iACszh9.png";
    filenamesF[4] = "https://i.imgur.com/4eTqZLb.png";
    for (var i = 0; i < filenamesF.length; i++) {
        bgflowers[i] = loadImage(filenamesF[i]);
    }
    leaves.push(loadImage("https://i.imgur.com/8NFDDnM.png"));
    leaves.push(loadImage("https://i.imgur.com/CberjzQ.png"));
    flags.push(loadImage("https://i.imgur.com/2kTH6D6.png"));
}

//make SpongeBob
function makeSpongeBob(sx, sy) {
    var s = {x: sx, y: sy, 
             imageNum: 0,
             drawFunction: drawSpongeBob
         }
    return s;
}
function drawSpongeBob() {
    this.imageNum ++; //increase imageNum
    //if reaches the length (end) of the array (go over 10 images), start from 0 again
    if (this.imageNum == walkImage.length) { 
        this.imageNum = 0;
    }
    image(walkImage[this.imageNum], this.x, this.y, 130, 140); //draw the image
}

function setup() {
    createCanvas(480, 400); 
    frameRate(9);
    //store SpongBob andCoral images to the array character
    character.push(makeSpongeBob(180, 220));
    character.push(makeCoral(0));
    //store background flower images to the array makeBackground
    backgroundF.push(makeBackground(20, 50, 0));
    backgroundF.push(makeBackground(180, 30, 1));
    backgroundF.push(makeBackground(460, 30, 2));
    backgroundF.push(makeBackground(120, 180, 3));
    backgroundF.push(makeBackground(300, 180, 4));
    backgroundF.push(makeBackground(550, 100, 0));
    backgroundF.push(makeBackground(650, 30, 3));
    //store 4 types of buildings to the array buildings
    buildings.push(makeBuilding1(0));
    buildings.push(makeBuilding1(360));
    buildings.push(makeBuilding2(130));
    buildings.push(makeBuilding3(270));
    buildings.push(makeBuilding4(560));
}


function draw() {
    background(87,157,231); 
    //draw background flowers
    for (i = 0; i < backgroundF.length; i++) {
        backgroundF[i].update();
        backgroundF[i].display();  
    } 
    //draw the grounds and horizon lines
    fill(235,233,218);
    noStroke();
    rect(0, height*2/3, width, height/3);
    fill(80);
    rect(0, height*3/4, width, height/4);
    stroke(0);
    strokeWeight(0.7);
    line(0, height*3/4, width, height*3/4);
    line(0, height*2/3, width, height*2/3)
    //draw the buildings
    for (i = 0; i < 5; i ++) {
        buildings[i].update();
        buildings[i].drawFunction();
    }
    character[0].drawFunction(); //draw SpongBob
    character[1].drawFunction(); //draw corals
}

//make background flowers
function makeBackground(bgx, bgy, idx) {
    var bg = {x: bgx, y: bgy, index: idx, speed: -3,
                size: random(100, 180), //random starting size
                dsize: random(-6,6), //random decrease or increase size every update
                update: bgFlowerUpdate,
                display: bgFlowerDisplay
            }
    return bg;  
}
function bgFlowerUpdate() {
    this.x += this.speed; //move to the left with speed -3
    this.size += this.dsize; //increase or decrease size by dsize
    if (this.x < -width/2) { //if out of the canvas
        this.x = width; //start from the right side again
        this.size = random(80, 100); //start with random size
        this.size += this.dsize;
    }
    if (this.size >= 200 || this.size <= 30) { //if size reaches the limit 30 or 200
        this.dsize = -this.dsize; //inverse the size change direction
    }
}
function bgFlowerDisplay() {
    image(bgflowers[this.index], this.x, this.y, this.size, this.size); 
}

//Squidward Tentacles' house
function makeBuilding1(bx) { //startX is the starting X of the building
    var bg = {startX: bx, speed: -6,
              r: random(40, 150), g: random(70, 200), b: random(200, 255), //random color in cool tone
              update: updateBuilding1,
              drawFunction: drawBuilding1
            }
    return bg;
}
function drawBuilding1() {
    //structure
    var x1 = 100; var y1 = 140;
    var x2 = 150; 
    var x3 = 165; var y2 = 285;
    var x4 = 85; 
    fill(this.r+20, this.g+20, this.b+20);
    rect(this.startX+80, 180, 90, 45);
    fill(this.r, this.g, this.b);
    quad(this.startX+x1, y1, this.startX+x2, y1, this.startX+x3, y2, this.startX+x4, y2);
    fill(this.r-20, this.g-20, this.b-20);
    rect(this.startX+103, 169, 44, 11);
    quad(this.startX+120, 180, this.startX+130, 180, this.startX+138, 235, this.startX+112, 235);
    //windows
    fill(171,174,191);
    ellipse(this.startX+109, 190, 19, 20);
    ellipse(this.startX+141, 190, 19, 20);
    if (frameCount % 5 == 0) { //blink every 5 frames
        fill(21,144,177); 
    } else {
        fill(255, 250, 112);
    }
    ellipse(this.startX+109, 190, 0.6*19, 0.6*20);
    ellipse(this.startX+141, 190, 0.6*19, 0.6*20);
    //door
    fill(132, 114, 85);
    arc(this.startX+125, 255, 26, 26, PI, PI*2, OPEN);
    noStroke();
    rect(this.startX+125-13, 255, 26, 30);
    stroke(0);
    line(this.startX+125-13, 255, this.startX+125-13, 255+30);
    line(this.startX+125+13, 255, this.startX+125+13, 255+30);
    line(this.startX+125-13, 255+30, this.startX+125+13, 255+30);

}
function updateBuilding1() {
    this.startX += this.speed;
    if (this.startX < -width/3) { //if out of the canvas
        this.startX = width; //start from the right side again
    }

}
//SpongeBob's house
function makeBuilding2(bx) {
    var bg = {startX: bx, speed: -6,
              r: random(240,255), g: random(140,210), b: random(10,45), //random orange/yellow
              update: updateBuilding2,
              drawFunction: drawBuilding2
            }
    return bg;
}
function drawBuilding2() {
    fill(46, 144, 11);
    image(leaves[0], this.startX+16, 76, 200, 230); //draw leaves  
    //pineapple structure
    fill(this.r, this.g, this.b);
    arc(this.startX+125, 245.5, 100, 130, PI*3/4, PI*9/4, CHORD);
    //windows
    fill(171,174,191);
    ellipse(this.startX+109, 210, 19, 20);
    ellipse(this.startX+155, 265, 19, 20);
    if (frameCount % 8 == 0) { //blinks every 8 frames
        fill(255, 250, 112);
    } else {
        fill(21,144,177);
    }
    ellipse(this.startX+109, 210, 0.6*19, 0.6*20);
    ellipse(this.startX+155, 265, 0.6*19, 0.6*20);
    //door
    fill(171,174,191);
    strokeWeight(0.5);
    arc(this.startX+125, 260, 26, 26, PI, PI*2, OPEN);
    noStroke();
    rect(this.startX+125-13, 260, 26, 25);
    stroke(0);
    strokeWeight(0.5);
    line(this.startX+125-13, 260, this.startX+125-13, 260+25);
    line(this.startX+125+13, 260, this.startX+125+13, 260+25);
    line(this.startX+125-13, 260+25, this.startX+125+13, 260+25);
    fill(76,89,121);
    arc(this.startX+125, 260, 18, 18, PI, PI*2, OPEN);
    noStroke();
    rect(this.startX+125-9, 260, 18, 25);
    stroke(0);
    strokeWeight(0.5);
    line(this.startX+125-9, 260, this.startX+125-9, 260+25);
    line(this.startX+125+9, 260, this.startX+125+9, 260+25);
    line(this.startX+125-9, 260+25, this.startX+125+9, 260+25);
}
function updateBuilding2() {
    this.startX += this.speed;
    if (this.startX < -width/3) {
        this.startX = width;
    }

}
//Patrick Star's house
function makeBuilding3(bx) {
    var bg = {startX: bx, speed: -6,
              r: random(150,255), g: 80, b: 80, //random shades of red
              update: updateBuilding3,
              drawFunction: drawBuilding3
            }
    return bg;
}
function drawBuilding3() {
    //decoration
    strokeWeight(0.3)
    fill(248,228,156);
    rect(this.startX+125-1.5, 248, 3, 30);
    rect(this.startX+125-8, 245, 16, 3);
    //structure
    strokeWeight(0.6);
    fill(this.r, this.g, this.b);
    arc(this.startX+125, 285, 60, 60, PI, PI*2, CHORD);
}
function updateBuilding3() {
    this.startX += this.speed;
    if (this.startX < -width/2) {
        this.startX = width;
    }
}
//Krusty Krab Restaurant
function makeBuilding4(bx) {
    var bg = {startX: bx, speed: -6,
              update: updateBuilding4,
              drawFunction: drawBuilding4
            }
    return bg;
}
function drawBuilding4() {
    fill(115,95,42);
    rect(this.startX, 222, 105, 63);
    //glass windows and door
    fill(109,165,244);
    rect(this.startX, 252, 105, 33);
    //wooden structures
    fill(115,95,42);
    rect(this.startX, 215, 12, 70);
    rect(this.startX+105, 215, 12, 70);
    fill(94,74,29);
    line(this.startX-5+63, 252, this.startX-5+63, 285)
    rect(this.startX-5, 273, 40, 12);
    rect(this.startX+80, 273, 41, 12);
    rect(this.startX-5+40, 252, 40, 5);
    rect(this.startX-5+40, 252, 10, 33);
    rect(this.startX+71, 252, 11, 33);
    //load flags
    image(flags[0], this.startX+11.5, 232, 94, 20); 
}
function updateBuilding4() {
    this.startX += this.speed;
    if (this.startX < -width/3) {
        this.startX = width;
    }

}
//corals
function makeCoral(cx) {
    var s = {startX: cx, speed: -10,
             drawFunction: drawCoral
         }
    return s;
}
function drawCoral() {
    image(leaves[1], this.startX+100, 320, 60, 120); //smaller coral
    image(leaves[1], this.startX+200, 280, 100, 200); //bigger coral
    this.startX += this.speed;
    if (this.startX < -width) {
        this.startX = width*1.2;
    }
}

looking outwards 11

https://www.vice.com/en/article/4x4p43/6-art-projects-prying-the-lid-off-online-privacy

I chose the article showcasing 6 Art Projects Prying The Lid Off Online Privacy. I think vice did a good job of curating art pieces to showcase, and they referenced a good south park episode as well which I appreciated. The first piece was a browser extension that sets off an alarm everytime information gets sent to google called the google alarm. I think that’s pretty clever and is an interesting check in for when the system is keeping an eye on you, which is always. The other project that stood out to me was called My Little Privacy by Niklas Roy. He created a motorized curtain that covered a small portion of his street window display, and tracked people as they walked by. I thought it was an interesting metaphor, the idea of false privacy in the modern era. I mostly like the personality it has, it looks like it would be a lot of fun to pass by and it somewhat takes on a life of its own.

Project 11- Landscape

Graham Murtha

Section A

For this project I wanted to make a boat move through a fiery landscape, like the final world in Mario or Mustafar from Star Wars. I made moving embers, meteors, and randomly generated spires in the background to illustrate this volcanic landscape.

sketch

//Graham Murtha
//Section A
//gmurtha@andrew.cmu.edu
//Project 11- moving landscape

// A fire Nation boat sails through Mustafar AND world 8 of Mario - so many universes in one!

var embers = [];
var spire = [];
var meteors = [];

var ship; // fire nation ship from Avatar lol- it seemed to fit the color scheme, and is steam powered

function preload(){ // input boat image
    ship = loadImage("https://i.imgur.com/v5MzkRY.png");
}

function setup() {
    createCanvas(450, 300);
    frameRate(10);

    //initial embers in the sky
    for(var i = 0; i < 6; i++){
        var sx = random(width);
        embers[i] = makeEmber(sx);
    }//initial spires
    for(var i = 0; i < 10; i++){
        var sx = random(width);
        spire[i] = makeSpire(sx);
    }
    //random meteors
    for(var i = 0; i < 1; i++){
        var sx = random(width);
        meteors[i] = makeMeteors(sx);
    }

}

function draw() {
    //fiery sky
    background(200, 100, 0); //mid-tone neutral orange

    // generates sequence of random embers slowly panning left
    updateAndDisplayEmber();
    removeEmberOutOfView();
    addNewEmber();

    // generates sequence of random meteors quickly panning left
    updateAndDisplayMeteors();
    removeMeteorsOutOfView();
    addNewMeteors();

    // generates sequence of random spires quickly panning left
    updateAndDisplaySpire();
    removeSpireOutOfView();
    addNewSpire();

    //water
    fill(120,70,30); // darker orange- reflects sky a bit
    noStroke();
    rect(0, 230, 500, 75);

    //ship stays stagnant, but as its surroundings move left it seems to move right
    image(ship, width/2 - 200, 180, 200, 100);

}

//Ember object
function makeEmber(emberLocationX){
    var ember = {x : emberLocationX,
                y : random(0, 170),
                emberScale : random(0.5, 2.5),
                speed : -1,
                move : moveEmber,
                display : displayEmber}
        return ember;
}

function displayEmber(){
    push();
    translate(this.x, this.y);
    fill('gold');
    noStroke();
    scale(this.emberScale);
    ellipse(0,0,5,5);
    pop();
}

//recoordinates ember positions and display
function updateAndDisplayEmber(){
    for(var i = 0; i < embers.length; i++){
        embers[i].move();
        embers[i].display();
    }
}

function addNewEmber(){
    var newEmberProbability = 0.01;  // controls scarcity of embers in background 
    if (random(0, 1) < newEmberProbability){
        embers.push(makeEmber(width));
    }
}

function removeEmberOutOfView (){
    //if ember dissappears on the left, remove it from the array
    var embersToKeep = [];
    for (var i = 0; i < embers.length; i++){
        if (embers[i].x + 50 > 0) {
            embersToKeep.push(embers[i]);
        }
    }
    //embers left
    embers = embersToKeep;
}

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


//Spire object
function makeSpire(spireLocationX){
    var spire = {xt : spireLocationX,
                yt : 240,
                spireScale : random(0.1, 0.5),
                spireColor : color(random(20,80),0, 0),
                speedT : -6,
                moveT : moveSpire,
                displayT : displaySpire}
    return spire;
}

function displaySpire(){
    push();
    translate(this.xt + 60, this.yt); //add 60 so transitions onto screen
    noStroke();
    scale(this.spireScale);
    
    //Spire defining shape
    noStroke();
    fill(this.spireColor);
    beginShape();
    vertex(-80,-10);
    vertex(80,-10);
    vertex(10,-200);
    vertex(40,-250);
    vertex(0,-300);
    vertex(-40,-250);
    vertex(-10,-200);
    endShape();

    pop();
}

//update spire positions and display
function updateAndDisplaySpire(){
    for(var i = 0; i < spire.length; i++){
        spire[i].moveT();
        spire[i].displayT();
    }
}

function addNewSpire(){
    var newSpireProbability = 0.04; // controls scarcity of rock spires 
    if (random(0, 1) < newSpireProbability){
        spire.push(makeSpire(width));
    }
}

function removeSpireOutOfView (){
    //if ember dissappears on the left, remove it from the array
    var spireToKeep = [];
    for (var i = 0; i < spire.length; i++){
        if (spire[i].xt + 100 > 0) {
            spireToKeep.push(spire[i]);
        }
    }
    //spires left
    spire = spireToKeep;
}

function moveSpire(){
    this.xt += this.speedT;
}



//meteors object
function makeMeteors(locationX){
    var meteors = {xs : locationX,
                ys : random(75, 125),
                meteorsScale : random(0.5, 3),
                speedS : -13,
                moveS : moveMeteors,
                displayS : displayMeteors}
    return meteors;
}

function displayMeteors(){
    push();
    translate(this.xs + 80, this.ys); //adds 80 transitions on screen
    fill("gold");
    noStroke();
    scale(this.meteorScale);
    
    //meteor
    fill('orange');
    triangle(0,6,0,-6,50,0)
    fill(40,20,20)
    ellipse(0,0,20,20);
    fill('orange');
    ellipse(1,2,3,3);
    ellipse(3,6,3,3);
    ellipse(-4,-6,3,3);

    pop();
}

//update Spire positions and display
function updateAndDisplayMeteors(){
    for(var i = 0; i < meteors.length; i++){
        meteors[i].moveS();
        meteors[i].displayS();
    }
}

function addNewMeteors(){
    var newMeteorsProbability = 0.01; // controls scarcity of meteors
    if (random(0, 1) < newMeteorsProbability){
        meteors.push(makeMeteors(width));
    }
}

function removeMeteorsOutOfView (){
    //if ember dissappears on the left, remove it from the array
    var meteorsToKeep = [];
    for (var i = 0; i < meteors.length; i++){
        if (meteors[i].xs + 100 > 0) {
            meteorsToKeep.push(meteors[i]);
        }
    }
    //Spires left
    meteors = meteorsToKeep;
}

function moveMeteors(){
    this.xs += this.speedS;
}

blog 10

The sonic story was pretty fun to make. I took some inspiration from Midori’s frog. I really waited a bit long to make the server and I could not figure out how to get the audio in. I hope that’s not so terrible.

Looking Outwards 11

Societal Impacts of Digital Art

ImageRoulette, an Artificial Intelligence device for generating labels, has been controversial due to its racial bias. Image Roulette is a classification tool that generates tags or labels based on an image of a person. These tags usually focus on occupation or suggested family roles. However, when several black tried this device out, they found that out of all 2500 tags, they were only labeled as “black”. When photos were varied, the results were the same and there was no further effort made by the software to classify other aspects of a black person’s photo.

Kate Crawford and Trevor Paglen, developers of ImageRoulette, claim that this is exactly what they hope to represent. They believe that they have proved that Artificial Intelligence is also subject to human bias and racism and that these topics will continue to follow us into the future. This project acted more like an art piece than a usable program; as of September 27th, 2019, it has been taken off the internet.

https://www.smithsonianmag.com/smart-news/art-project-exposed-racial-biases-artificial-intelligence-system-180973207/

Project 11: Landscape

sketch-asu

// Your name: Ashley Su
// Your andrew ID: ashleysu
// Your section (C):  

var Man;
var grass = 0.4;
var grassSpeed = 0.07;
var mountainFront = 0.008;
var mountainFrontSpeed = 0.0005;
var mountainBack = 0.01;
var mountainBackSpeed = 0.0002;
var bubbles = [];


function setup() {
    createCanvas(480, 480);
    frameRate(20);

// setting up bubble array 

    for (var i = 0; i < 9; i++){                             
            var bubblesX = random(width);
            var bubblesY = random(0, 200);
            bubbles[i] = makebubbles(bubblesY, bubblesX);
        }
}

function draw(){
    background(221,191,218);
   
    Sun();
    MountainBack();
    MountainFront();
    Grass(); 
    image(Man,mouseX,300,80,80);
    updatebubbles();
    addbubbles();

}

// draw sun 

function Sun(){
    noStroke();
    fill(250,70,22,120);
    ellipse(350, 200, mouseX+500);
    fill(250,70,22,40);
    ellipse(350, 200,  mouseX+350);
    fill(250,70,22,100);
    ellipse(350, 200,  mouseX+200);

}

//pizza man loading
function preload(){
  Man = loadImage("https://i.imgur.com/9AUtJm7.png");
}


//draws first mountain
function MountainBack(){
    noStroke();
    fill(0,109,87);
    beginShape();
    for (var i = 0; i < width; i ++){
        var x = (i * mountainBack) + (millis() * mountainBackSpeed);
        var y = map(noise(x), 0, 1.5, 50, 300);
        vertex(i, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

// drawing second mountain in front of first mountain
function MountainFront(){
    noStroke();
    fill(208,240,192);
    beginShape();
    for (var i = 0; i < width; i ++){
        var x = (i * mountainFront) + (millis() * mountainFrontSpeed);
        var y = map(noise(x), 0, 1.2, 150, 250);
        vertex(i, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

// draws the grass 
function Grass(){
    noStroke();
    fill(156,176,113);
    beginShape();
    for (var i = 0; i < width; i ++){
        var x = (i * grass) + (millis() * grassSpeed);
        var y = map(noise(x), 0, 1.1, 350, 370);
        vertex(i, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

//constructing the bubbles as objects
function makebubbles(bubblesX, bubblesY){
    var bubbles = {
        x: bubblesX,
        y: bubblesY,
        velocity: random(3, 8),
        size: random(5, 15),
        move: movebubbles,
        show: showbubbles,
    }
    return bubbles;
}

// defining the speed of bubbles 
function movebubbles(){
    this.x -= this.velocity;
    this.y -= this.velocity / random(5, 20);
}

// defning bubbles characteristics
function showbubbles(){
    strokeWeight(1);
    stroke('LightBlue');
    fill(101,208,255,80);
    circle(this.x, this.y, this.size);
    curve(this.x + this.size, this.y, this.size, this.size/2);
}

//telling bubbbles to move on the screen
function updatebubbles(){
    for(i = 0; i < bubbles.length; i++){
        bubbles[i].move();
        bubbles[i].show();
    }
}

// making bubbles contiuesly move accross the screen
function addbubbles(){
    if (random(0,2) < 0.5){
        var bubblesX = width;
        var bubblesY = random(0, height/2);
        bubbles.push(makebubbles(bubblesX, bubblesY));
    }


}

Looking Outwards Blog 11 – Societal Impacts of Digital Art

The article I read this week discussed the copyrighting of NFTs. What I found interseting about this article’s conclusion was that it directed most of the issues towards the lack of secruity systems. The author states in the end of the article that the digital platforms where NFTs are passed around are not advanced enough to ensure that a peice of work is is properly insured. However, there was little to no discussion over the ethical and moral aspect of the impacts of copyrighting in the digtial world. I think that there is a sense of pushing around the responsiblity from the people who are taking artwork to the people creating systems to prevent the copyrighting of artwork. This issue not only applies in this situation, but many other societal issues as well. Instead of looking at solutions to stop copyrighting, the article discusses possible solutions for copyrighting to not make it past their system rather than stopping it from ever happening.

NFTs and Copyright

LookingOutwards-11 Societal Impacts of Digital Art

The article “Beeple’s digital ‘artwork’ sold for more than any painting by Titian or Raphael. But as art, it’s a great big zero.” by Sophie Davies address the society issue of digital divide, referring to the different between these who can reach the digital world of internet and these who cannot. Sophie argued that People who have no computer skills or a device to access the internet are more likely to receive social exclusion, as more and more people are online. The covid facilitate this process by transferring jobs and works online, and people who could access internet seem to be left behind by the times.

Sophie also discusses how women from certain countries and children from low social & economic status are more likely to not have a device for internet, which leads to an inequality problem. However, almost no solution is mentioned in the article. To me, the only solution in the article that “asking policy makers to help everyone get online for free” seems highly unlikely to happen in reality.

MLA Citation- Spanish art show spotlights ‘hidden’ digital divide in pandemic | Reuters :

Davies, Sophie. “Spanish Art Show Spotlights ‘Hidden’ Digital Divide in Pandemic.” Reuters, Thomson Reuters, 18 Dec. 2020, https://www.reuters.com/article/us-health-coronavirus-tech/spanish-art-show-spotlights-hidden-digital-divide-in-pandemic-idUSKBN28S0IC.

Project 11 – Airplane and parachute

sketch Download

/* Jiayi Chen
   jiayiche    Section A */
//arrays for display
var birds=[];
var clouds=[];
var flyObject =[];

//array for image storage
var birdsImg=[];
var cloudsImg=[];
var flyObjectImg =[];
//array for links
var cloudLinks = [
    "https://i.imgur.com/suIXMup.png",
    "https://i.imgur.com/7ZHCI63.png",
    "https://i.imgur.com/EFb0w3u.png",
    "https://i.imgur.com/PxLKy41.png"];

var birdLinks = [
    "https://i.imgur.com/Gr1VTU5.png",
    "https://i.imgur.com/EmRp42l.png",
    "https://i.imgur.com/vLWSU4h.png",
    "https://i.imgur.com/Y9BecjA.png"];

var flyObjectLink = [
    "https://i.imgur.com/IXz53Lj.png",
    'https://i.imgur.com/UsKzDwg.png'];

//load the images
function preload(){
    airplane = loadImage("https://i.imgur.com/bEPeF8a.png");
    for (var i = 0; i < cloudLinks.length; i++){
        cloudsImg[i] = loadImage(cloudLinks[i]);
    }
    for (var i = 0; i < birdLinks.length; i++){
        birdsImg[i] = loadImage(birdLinks[i]);
    }
    for (var i = 0; i < flyObjectLink.length; i++){
        flyObjectImg[i] = loadImage(flyObjectLink[i]);
    }
}

function setup() {
    createCanvas(480, 480);
    imageMode(CENTER);
    //initial clouds 
    for (var i = 0; i < 3; i++){
        var rc = floor(random(cloudsImg.length));
        clouds[i] = makeCloud(random(width),random(100,300),random(height),cloudsImg[rc]);
    }
    frameRate(10);
}

function draw() {
    background(135,206,235);
    sun()
    updateAndDisplayClouds();
    addNewobjectsWithSomeRandomProbability();
    removeObjectsThatHaveSlippedOutOfView();
    image(airplane,200,constrain(250+random(-5,5),240,260),200,200);
}

function sun(){
    push();
    fill('orange');
    circle(60,60,50);
    fill('red');
    circle(60,60,40);

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

//remove out of sight things
function removeObjectsThatHaveSlippedOutOfView(){
    //remove out of sight clouds
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].size/2 > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep; // remember the surviving clouds

    //remove out of sight birds
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x + birds[i].size/2 > 0){
            birdsToKeep.push(birds[i]);
        }
    }
    birds = birdsToKeep; // remember the surviving birds

    //remove out of sight fly things
    var FlyesToKeep = [];
    for (var i = 0; i < flyObject.length; i++){
        if (flyObject[i].x + flyObject[i].size/2 > 0) {
             FlyesToKeep.push(flyObject[i]);
        }
    }
    flyObject = FlyesToKeep; // remember the surviving fly things
}


function addNewobjectsWithSomeRandomProbability() {
    // With a low probability, add a new clouds to the end.
    var newCloudLikelihood = 0.02; 
    if (random(0,1) < newCloudLikelihood) {
        var rc = floor(random(cloudsImg.length));
        clouds.push(makeCloud(width+75,random(100,150),random(height),cloudsImg[rc]));
    }
    // With a low probability, add a new birds to the end.
    var newbirdLikelihood = 0.03; 
    if (random(0,1) < newbirdLikelihood) {
        var rc = floor(random(birdsImg.length));
        clouds.push(makeBirds(width+30,random(30,60),random(height),floor(random(birdsImg.length))));
    }
    // With a low probability, add a new flying things to the end.
    var newObejctLikelihood = 0.01; 
    if (random(0,1) < newObejctLikelihood) {
        var rc = floor(random(flyObjectImg.length));
        clouds.push(makeFly(width+50,random(50,100),random(0,240),flyObjectImg[rc]));
    }
}

//make clouds as objects
function makeCloud(birthLocationX,cs,ch,cloudCartoon) {
    var cldg = {x: birthLocationX,
                size: cs,
                y:ch,
                speed: -1.0,
                cartoon:cloudCartoon,
                move: cloudMove,
                display: cloudDisplay}
    return cldg;
}

function cloudMove() {//move clouds
    this.x += this.speed;
}

function cloudDisplay(){
    image(this.cartoon, this.x, this.y,this.size, this.size); 
}

//make birds as objects
function makeBirds(birthLocationX,cs,ch,birdCartoon) {
    var mb = {x: birthLocationX,
                size: cs,
                y:ch,
                speed: -3.0,
                cartoonNumber:birdCartoon,
                move: birdsMove,
                display: birdsDisplay}
    return mb;
}

function birdsMove() {
    if(this.cartoonNumber == 0 || this.cartoonNumber == 1){
        this.x += this.speed/2;    //birds facing to the left are flying slower
        this.y += random(-3,3);    //randomly fly
    }else{
        this.x += this.speed;
        this.y += random(-5,5);    //randomly fly
    }

}

function birdsDisplay(){
    image(birdsImg[this.cartoonNumber], this.x, this.y,this.size, this.size); 
}

//make other flying things as objects
function makeFly(birthLocationX,cs,ch,flyCartoon) {
    var mf = {x: birthLocationX,
                size: cs,
                y:ch,
                speed: -2.0,
                cartoon:flyCartoon,
                move: flyMove,
                display: flyDisplay}
    return mf;
}

function flyMove() {//move flying objects
    this.x += this.speed;
    //gravity for things without wings
    this.y -=this.speed/4;
}

function flyDisplay(){
    image(this.cartoon, this.x, this.y,this.size, this.size); 
}