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

Final Project

//Alana Wu
//ID: alanawu
//Final Project

var buildings = [];
var buildings2 = [];
var buildings3 = [];
var counts = 0;
var fireCount = 0;
var myParticles = [];
var nParticles = 800; 
var group = true;

function setup()
{
    createCanvas(600, 600);
    rectMode(CENTER);
    ellipseMode(CENTER);
    frameRate(10);
    for (var i = 0; i < 10; i++) //makes original buildings in 1st layer
    {
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    for (var j = 0; j < 8; j++) //makes original buildings in 2nd layer
    {
        var ax = random(width);
        buildings2[j] = makeBuilding2(ax);
    }
    for (var k = 0; k < 8; k++)//makes original buildings in 3rd layer
    {
        var bx = random(width);
        buildings3[k] = makeBuilding3(bx);
    }

    for (var i = 0; i < nParticles; i++) //makes original particles
    {
        var rx = random(width);
        var ry = random(230, 280);
        var p = makeParticle(rx, ry, 0, 0);
        p.bHardBoundaries = true;
        p.damping = 0.99;
        myParticles[i] = p;
    }
}

var desiredSeparation = 50;
var separationFactor = 0.01;
function separate(p) //applies force that separates particles
{ 
    // rule applies if separation is < desired separation, 
    // apply an opposing force to achieve greater separation
    // opposing force grows as the separation becomes less
    for (var i = 0; i < myParticles.length; i++)
    {
        var boid = myParticles[i]; // get each other particle
        var d = dist(p.px, p.py, boid.px, boid.py);
        if (d > 1 & d < desiredSeparation)
        {
            // divide by distance so that the total force is 1
            var fx = (p.px - boid.px) / d;
            var fy = (p.py - boid.py) / d;
            // scale force by (desiredSeparation - d), which
            // is 0 at desiredSeparation and grows as distance
            // becomes less
            var factor = (desiredSeparation - d) * separationFactor;
            p.addForce(fx * factor, fy * factor);
        }
    }
}

function draw()
{
    background(0, 0, counts*5);
    fill (150, 0, 0, 200);
    rect (300, 240, width, 80); //red rect behind 1st layer of buildings
    fill (75, 0, 0, 200);
    rect(300, 175, width, 50); //red rect behind 2nd layer of buildings
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    fill (100, 0, 0);
    rect (300, 450, width, 400);
    for (var i = 0; i < myParticles.length; i++) //applies separate to the particles
    {
        var ithParticle = myParticles[i];
        ithParticle.fx = 0;
        ithParticle.fy = 0;
        separate(ithParticle);
    }
 
    for (var i = 0; i < myParticles.length; i++)
    {
        var p = myParticles[i]
        p.update(); // update all locations
        p.draw(); // draw all particles
    }

    oilRig(200, 400); //draws oil rig in foreground
    smokeClouds(110, 90, 30, 25, 240); //draws smoke clouds coming out of oil rig chimneys
    smokeClouds(170, 90, 30, 25, 230);
    smokeClouds(230, 90, 30, 25, 220);
    smokeClouds(140, 90, 30, 25, 200);
    smokeClouds(200, 90, 30, 25, 140);
    if (fireCount > 1) //draws fires in different spots on oil rig as you click the mouse
    {
        push();
        translate (180, 200);
        fire (100, 100, 1);
        pop();
    }
    if (fireCount > 2)
    {
        push();
        translate (0, 320);
        fire(100, 100, 1);
        pop();
    }
    if (fireCount > 3)
    {
        push();
        translate (20, 230);
        fire(100, 100, 1);
        pop();
    }
    if (fireCount > 4)
    {
        push();
        translate (250, 260);
        fire(100, 100, 1);
        pop();
    }
    if (fireCount > 5)
    {
        push();
        translate (110, 240);
        fire(100, 100, 1);
        pop();
    }
    if (fireCount > 6)
    {
        push();
        translate (150, 290);
        fire(100, 100, 1);
        pop();
    }
    if (fireCount > 7)
    {
        push();
        translate (-70, 290);
        fire(100, 100, 1);
        pop();
    }
    if (fireCount > 8)
    {
        push();
        translate (235, 330);
        fire(100, 100, 1);
        pop();
    }
    if (fireCount > 9)
    {
        push();
        translate (-400, 100);
        fire(100, 100, 5);
        pop();
    }
    if (fireCount > 10)
    {
        push();
        translate (-200, 100);
        fire(100, 100, 5);
        pop();
    }
    if (fireCount > 11)
    {
        push();
        translate (0, 100);
        fire(100, 100, 5);
        pop();
    }
    drawButton();
    if (fireCount > 12) //world goes boom once you click enough times. Draws final screen
    {
        fill(255, 0, 0);
        rect(300, 300, width, height);
        textSize(140);
        stroke(255);
        fill(0);
        strokeWeight(8);
        text("BOOM", 85, 300);
        textSize(12);
        noStroke();
        text("RIP humanity.", 15, 580);
    }
}

function fire(x, y, size)
{
    fill (255, 0, 0); //red flame
    beginShape();
    vertex((x + 10)*size, y*size);
    vertex((x + 20)*size, (y - 20)*size);
    vertex((x + 23)*size, (y - 50)*size);
    vertex(x*size, (y - 100)*size);
    vertex((x - 4)*size, (y - 60)*size);
    vertex((x - 12)*size, (y - 80)*size);
    vertex((x - 24)*size, (y - 50)*size);
    vertex((x - 16)*size, (y - 20)*size);
    endShape();

    push(); //orange flame
    fill (255, 130, 0);
    translate(size*32, size*28);
    beginShape();
    vertex((x + 10)*size*.7, y*size*.7);
    vertex((x + 20)*size*.7, (y - 20)*size*.7);
    vertex((x + 23)*size*.7, (y - 50)*size*.7);
    vertex(x*size*.7, (y - 100)*size*.7);
    vertex((x - 4)*size*.7, (y - 60)*size*.7);
    vertex((x - 12)*size*.7, (y - 80)*size)*.7;
    vertex((x - 24)*size*.7, (y - 50)*size*.7);
    vertex((x - 16)*size*.7, (y - 20)*size*.7);
    endShape();
    pop();

    push(); //yellow flame
    fill (255, 255, 0);
    translate(size*65, size*55);
    beginShape();
    vertex((x + 10)*size*.4, y*size*.4);
    vertex((x + 20)*size*.4, (y - 20)*size*.4);
    vertex((x + 23)*size*.4, (y - 50)*size*.4);
    vertex(x*size*.4, (y - 100)*size*.4);
    vertex((x - 4)*size*.4, (y - 60)*size*.4);
    vertex((x - 12)*size*.4, (y - 80)*size)*.4;
    vertex((x - 24)*size*.4, (y - 50)*size*.4);
    vertex((x - 16)*size*.4, (y - 20)*size*.4);
    endShape();
    pop();

}

function smokeClouds(x, y, w, h, col)
{
    fill (col);
    ellipse (x + 35, y - 40, w*1.5, h*1.5);
    ellipse (x + 20, y - 45, w*1.5, h*1.5);
    ellipse (x + 50, y - 55, w*1.5, h*1.5);
    ellipse (x + 25, y - 60, w*1.5, h*1.5);

    ellipse (x, y, w, h);
    ellipse (x + 10, y, w, h);
    ellipse (x, y + 10, w, h);
    ellipse (x - 12, y, w, h);
    ellipse (x - 5, y - 12, w - 10, h - 10);

    ellipse (x - 20, y + 40, w/2, h/2);
    ellipse (x - 23, y + 35, w/2, h/2);
    ellipse (x - 15, y + 35, w/2, h/2);

}

function updateAndDisplayBuildings()//moves the buildings and redraws them
{
    
    for (var i = 0; i < buildings3.length; i++)
    {
        buildings3[i].move();
        buildings3[i].display();
    }
    for (var i = 0; i < buildings2.length; i++)
    {
    buildings2[i].move();
    buildings2[i].display();
    }
    for (var i = 0; i < buildings.length; i++)
    {
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView() //gets rid of building objects we no longer can see
{
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++)
    {
        if (buildings[i].x + buildings[i].breadth > 0)
        {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep;

    var buildings2ToKeep = [];
    for (var i = 0; i < buildings2.length; i++)
    {
        if (buildings2[i].x + buildings2[i].breadth > 0)
        {
            buildings2ToKeep.push(buildings2[i]);
        }
    }
    buildings2 = buildings2ToKeep;

    var buildings3ToKeep = [];
    for (var i = 0; i < buildings3.length; i++)
    {
        if (buildings3[i].x + buildings3[i].breadth > 0)
        {
            buildings3ToKeep.push(buildings3[i]);
        }
    }
    buildings3 = buildings3ToKeep;
}


function addNewBuildingsWithSomeRandomProbability()
{
    var newBuildingLikelihood = 0.02; 
    if (random(0,1) < newBuildingLikelihood)
    {
        buildings.push(makeBuilding(width));
        buildings2.push(makeBuilding2(0));
        buildings3.push(makeBuilding3(width));
    }
}

function buildingMove()
{
    this.x += this.speed;
}
    
function buildingDisplay()
{
    if (this.color == 0)
    {
        fill (255, 0, 255, this.opacity); //light green
    }
    else if (this.color == 1)
    {
        fill(255, 255, 0, this.opacity); //yellow
    }
    else if (this.color == 2)
    {
        fill(255, 0, 0, this.opacity); //red
    }
    else if (this.color == 3)
    {
        fill(0, 0, 255, this.opacity); //blue
    }
    else if (this.color == 4)
    {
        fill (255, 0, 120, this.opacity); //orange
    }
    else if (this.color == 5)
    {
        fill (0, 255, 0, this.opacity); //green
    }
    push();
    translate(this.x, this.layer);
    rect(0, -this.bHeight/2, this.breadth, this.bHeight);
    pop();
}


function makeBuilding(birthLocationX)
{
    var bldg = {x: birthLocationX,
                breadth: random(30, 80),
                speed: -1.0,
                color: int(random(6)),
                opacity: 250,
                bHeight: random(30, 150),
                layer: 250,
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

function makeBuilding2(birthLocationX)
{
    var bldg2 = {x: birthLocationX,
                breadth: random(30, 80),
                speed: 1.0,
                color: int(random(5)),
                opacity: 155,
                bHeight: random(50, 150),
                layer: 200,
                move: buildingMove,
                display: buildingDisplay}
    return bldg2;
}


function makeBuilding3(birthLocationX)
{
    var bldg3 = {x: birthLocationX,
                breadth: random(30, 80),
                speed: -1.0,
                color: int(random(5)),
                opacity: 100,
                bHeight: random(50, 150),
                layer: 150,
                move: buildingMove,
                display: buildingDisplay}
    return bldg3;
}


function oilRig (x, y) //all dirty colors
{
    var bounce = 0;
    var dy = -1;
    fill (200);
    noStroke();
    rect (x - 120, y + 100, 50, 80); //base columns
    rect (x + 120, y + 100, 50, 80);

    push();
    translate (0, bounce);
    bounce += dy;
    if (bounce > 5 || bounce < -5)
    {
        dy*= -1;
    }
    fill (130);
    for (var j = 0; j < 5; j++)
    {
        rect (x + 100 - j*30, y - 75 - j*20, 100, 40);
    }
    fill (200);
    var diff = -110;
    for (var i = 0; i < 5; i++)
    {
        rect (x + diff, y - 160, 15, 200);
        diff += 30;
    }
    fill (60);
    rect (x - 90, y - 110, 100, 120);
    fill (80);
    rect (x + 30, y - 90, 100, 70);
    fill (150);
    rect (x - 120, y + 50, 30, 20);
    rect (x + 120, y + 50, 30, 20);   
    fill (100);
    rect (x, y, 350, 100); //big rectangle
    rect (x - 60, y - 80, 100, 60);
    fill (50);
    rect (x - 100, y + 15, 280, 50);
    rect (x + 100, y - 40, 250, 40);
    rect (x + 100, y - 100, 20, 80);
    rect (x + 60, y - 100, 20, 80);
    rect (x + 20, y - 100, 20, 80);
    fill (80);
    rect(x, y - 20, 400, 25);
    fill (150);
    rect (x, y, 400, 10);
    pop();
}

function drawButton() //click here button in bottom right corner
{
    fill(0);
    rect (530, 550, 90, 40);
    fill(255);
    text("CLICK HERE", 493, 553);
    noStroke();
}

function mousePressed() //counts for background color and fires drawn
{
    counts ++;

    if (mouseX > 485 & mouseX < 575 && mouseY > 530 && mouseY < 570)
    {
        fireCount ++;
    }
}

// Update the position based on force and velocity
function particleUpdate()
{
    if (this.bFixed == false) {
        this.vx *= this.damping;
        this.vy *= this.damping;
  
        this.limitVelocities();
        this.handleBoundaries();
        this.px += this.vx;
        this.py += this.vy;
    }
}


// Prevent particle velocity from exceeding maxSpeed
function particleLimitVelocities()
{
    if (this.bLimitVelocities) {
        var speed = sqrt(this.vx * this.vx + this.vy * this.vy);
        var maxSpeed = 14;
        if (speed > maxSpeed) {
            this.vx *= maxSpeed / speed;
            this.vy *= maxSpeed / speed;
        }
    }
}


// do boundary processing if enabled
function particleHandleBoundaries()
{
    if (this.bPeriodicBoundaries)
    {
        if (this.px > width) this.px -= width;
        if (this.px < 0) this.px += width;
        if (this.py > 280) this.py -= height;
        if (this.py < 230) this.py += height;
    } else if (this.bHardBoundaries)
    {
        if (this.px >= width)
        {
            this.vx = -abs(this.vx);
        }
        if (this.px <= 0)
        {
            this.vx = abs(this.vx);
        }
        if (this.py >= 280)
        {
            this.vy = -abs(this.vy);
        }
        if (this.py <= 230)
        {
            this.vy = abs(this.vy);
        }
    }
}


// draws particles as circles
function particleDraw()
{
    fill(200, 200, 200, 100);
    noStroke();
    ellipse(this.px, this.py, 18, 18);
}


// add a force to the particle using F = mA
function particleAddForce(fx, fy)
{
    var ax = fx / this.mass;
    var ay = fy / this.mass;
    this.vx += ax;
    this.vy += ay;
}


// make a new particle
function makeParticle(x, y, dx, dy)
{
    var p = {px: x, py: y, vx: dx, vy: dy,
             mass: 1.0, damping: 0.9,
             bFixed: false,
             bLimitVelocities: true,
             bPeriodicBoundaries: false,
             bHardBoundaries: true,
             addForce: particleAddForce,
             update: particleUpdate,
             limitVelocities: particleLimitVelocities,
             handleBoundaries: particleHandleBoundaries,
             draw: particleDraw
            }
    return p;
}

For this program, I started with the idea of the ruins of human cities. Originally, I wanted to do something with skylines, but in the final project, I instead have three layers of simple buildings moving across the landscape background.
In the midground, I modified the particles program that we went through during class to create an effect that looks like roiling fog.
In the foreground, I drew a large oil rig in various shades of gray to contrast with the bright and colorful background.
As the user clicks the “click me” button, small fires appear on the oil rig. After enough clicks, huge fires appear on the screen, ending with a screen that says BOOM after the oil rig explodes.

I wanted to refrain from using images, so the program has more of a game-like appearance, making a climate apocalypse seem like a “game over”.

Project11

sketch

//Michelle Dang
//mtdang
//Section D
var cloud = [];

var water = [];
var offset = 0;

mountain = [];
var inc = 0.01;
var xoff = 0;

function newWater(px, py, pw) {
    var p = {x: px, y: py, w: pw,
             right: watRight};
    return p;
}

// compute the location of the right end of a platform
function watRight() {
    return this.x + this.w;
}


function setup() {
    createCanvas(480, 300); 
    
    // create an initial collection of cloud
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        cloud[i] = makeCloud(rx);
    }

    for (var i=0; i<10; i++) {
        var rx = random(width);
    }

    var pl = newWater(0, 210, 60);  // first platform
    water.push(pl);

     for (var i=0; i<width/5+1; i++) {
        var n = noise(xoff)
        var value = map(n, 0, 1, 0, height);
        xoff+=inc;
        mountain.push(value);
    }

    frameRate(10);

}


function draw() {
    background(220)
    //background
    noStroke()

    displayHorizon();
    updateAndDisplaycloud();
    removecloudThatHaveSlippedOutOfView();
    addNewcloudWithSomeRandomProbability(); 

//mountainss
    beginShape()
    fill("blue")
    vertex(0, height); //bottom left corner of mountain
    for (var i=0; i<width/5; i++) {
        vertex(i*6, mountain[i])  //mountain surface
    }
    vertex(width, height) //bottom right corner of mountain
    endShape();

    mountain.shift();
    mountain.push(map(noise(xoff), 0, 1, 0, 300));
    xoff+= inc;


//water and sand
    fill(235, 226, 160)
    rect(0, 250, width, 200); 
    fill(98, 147, 204)
    rect(0, 200, width, 50); 


    fill("blue");
    noStroke(0);
    for (var i = 0; i < water.length; i++) {
        var p = water[i];
        rect(p.x - offset, p.y, p.w, 10, 10);
    }

    // if first platform is offscreen to left, remove it
    if (water.length > 0 & water[0].right() < offset) {
        water.shift();
    }

    // if last platform is totally within canvas, make a new one
    var lastPlat = water[water.length-1];
    if (lastPlat.right() - offset < width) {
        var p = newWater(10+lastPlat.right(), // start location
              random(210, 235), // height of new platform
              60); // all water have width 200 for now
        water.push(p); // add to our array of water
    }

      offset += 1;
  

 }

function updateAndDisplaycloud(){
    // Update the building's positions, and display them.
    for (var i = 0; i < cloud.length; i++){
        cloud[i].move();
        cloud[i].display();
    }
}



function removecloudThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find cloud
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the cloud
    // we want to keep into a new array.
    var cloudToKeep = [];
    for (var i = 0; i < cloud.length; i++){
        if (cloud[i].x + cloud[i].breadth > 0) {
            cloudToKeep.push(cloud[i]);
        }
    }
    cloud = cloudToKeep; // remember the surviving cloud
}





function addNewcloudWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCloudLikelihood = 0.007; 
    if (random(0,1) < newCloudLikelihood) {
        cloud.push(makeCloud(width));
    }
}


// method to update position of building every frame
function cloudMove() {
    this.x += this.speed;
}


// draw the building and some windows
function cloudDisplay() {
    var floorHeight = 5;
    var bHeight = 30; 
    var cHeight = 40; 
    fill(255);
    noStroke()
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight-100, this.breadth, bHeight, 20);
    rect(20, -bHeight-100, this.breadth, bHeight+10, 20);
    rect(20, -bHeight-200, this.breadth, cHeight, 20);
    stroke(200); 
    pop();
}


function makeCloud(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 60,
                speed: -1.0,
                nFloors: round(random(2, 7)),
                move: cloudMove,
                display: cloudDisplay}
    return bldg;
}



function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
}

LO 11

https://www.plagiarismtoday.com/2021/03/16/nfts-and-copyright/
NFTs, non-fungible tokens, are digital art pieces bought with crypto. Although these digital tokens can be copied, the ownership of the token is marked in the Ethereum blockchain,so the owner has a record that they own that token. The issue with copyright is that those who don’t own the NFT can still view it and the owner can provide and sell it: “Other than purchasing the token, buying an NFT doesn’t confer copyright ownership. Owning an NFT, by itself, doesn’t grant the right to print or distribute the work without the copyright holder’s permission.” Although artists can used NFTs as proof of copyright ownership, the concern is that that’s not how its being currently handled. NFTs are currently being used to create and sell copies of work, and the original artists aren’t benefiting.

Project 11: Generative Landscape

I’ve been missing my grandparents recently, so I knew I wanted to do something that reminds me of them. That means mountains. My grandfather is Austrian and he and my grandmother live in Colorado currently, so I wanted to make the scene feel like I was riding in the car in some mountainous area, complete with rolling hills, pine trees, a nice wooden fence, and a couple goats. I used a noise function for the mountains and hills at different amplitudes. The hill noise function gave me a little trouble when I started implementing my trees, but by lowering the amplitude more and limiting the range for the random tree generation, I was able to mitigate most of the floating trees. Originally, I was thinking about making the goat change color as well, but I couldn’t successfully implement it, so I left it out. Overall, I’m happy with how my landscape came out. I think that if I had more time, there are certainly more tweaks I would make, but with the time that was available to me this week I’m happy with what I made.

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

var goats = [];
var hill = [];
var mountain = [];
var fence = [];
var trees = [];
var noiseParam = 1; //for the mountains
var noiseStep = 0.05; //for the mountains
var noiseParam2 = 5; //for the hills
var noiseStep2 = 0.005; //for the hills

function preload() {
    treeImg = loadImage("https://i.imgur.com/eI7dRxU.png");
    fenceImg = loadImage("https://i.imgur.com/8f0PfZu.png");
    goatImg = loadImage("https://i.imgur.com/TX6vImS.png");
}

//the mountains
function mountains() {
    //sets up the mountains
    strokeWeight(3);
    stroke(100); //dark gray
    fill(100); //dark gray

    //creates the mountains
    translate(0,0.5);
    beginShape();
    vertex(0,height);
    for (var i=0; i<(width/5)+1; i+=1) {
        vertex(i*5,mountain[i]);
    }
    vertex(width,height);
    endShape();
    mountain.shift();
    var n=noise(noiseParam);
    var value=map(n,0,1,0,height);
    mountain.push(value);
    noiseParam+=noiseStep;
}

//the hills
function hills() {
    //sets up the hills
    strokeWeight(3);
    stroke(27,81,45); //dark green
    fill(27,81,45); //dark green

    //creates the hills
    translate(0,10);
    beginShape();
    vertex(0,height);
    for (var i=0; i<(width/5)+1; i+=1) {
        vertex(i*5,hill[i]);
    }
    vertex(width,height);
    endShape();
    hill.shift();
    var n=noise(noiseParam2);
    var value=map(n,0,1,0,height);
    hill.push(value);
    noiseParam2+=noiseStep2;
}

//the goats
function makeGoat(gx) {
    var g = {x: gx,
        goatSpeed: -3.0,
        goatSizeMod: random(0,51),
        move: goatMove,
        display: goatDisplay}
    return g;
}
function goatDisplay() {
    image(goatImg, this.x+200,90-this.goatSizeMod, 100+this.goatSizeMod,100+this.goatSizeMod);
}
function goatMove() {
    this.x += this.goatSpeed;
}
function updateGoats() {
    //update the goat positions and display them
    for (var i=0; i<goats.length; i+=1) {
        goats[i].move();
        goats[i].display();
    }
}
function removeGoats() {
    //remove goat when no longer on screen
    var goatOnScreen = [];
    for (var i=0; i<goats.length; i+=1) {
        if (goats[i].x + 400 > 0) {
            goatOnScreen.push(goats[i]);
        }
    }
    goats = goatOnScreen;
}
function addNewGoats() {
    var newGoatChance = 0.004;
    if (random(0,1) < newGoatChance) {
        goats.push(makeGoat(width));
    }
}

//the trees
function makeTree(tx) {
    var t = {x: tx,
        y: 90-random(0,50),
        treeSpeed: -5.0,
        treeSizeMod: random(0,51),
        move: treeMove,
        display: treeDisplay}
    return t;
}
function treeDisplay() {
    image(treeImg, this.x+200, this.y, 50+this.treeSizeMod,75+this.treeSizeMod);
}
function treeMove() {
    this.x += this.treeSpeed;
}
function updateTrees() {
    //update the tree positions and display them
    for (var i=0; i<trees.length; i+=1) {
        trees[i].move();
        trees[i].display();
    }
}
function removeTrees() {
    //remove tree when no longer on screen
    var treesOnScreen = [];
    for (var i=0; i<trees.length; i+=1) {
        if (trees[i].x + 400 > 0) {
            treesOnScreen.push(trees[i]);
        }
    }
    trees = treesOnScreen;
}
function addNewTrees() {
    var newTreeChance = 0.1;
    if (random(0,1) < newTreeChance) {
        trees.push(makeTree(width));
    }
}

function setup() {
    createCanvas(480,200);
    frameRate(25);
    
    //for the mountains
    for (var i=0; i<(width/5)+1; i+=1) {
        var n=noise(noiseParam);
        var value=map(n,0,1,0,height);
        mountain[i]=value;
        noiseParam+=noiseStep;
    }
    //for the mountains
    for (var i=0; i<(width/5)+1; i+=1) {
        var n=noise(noiseParam2);
        var value=map(n,0,1,0,height);
        hill[i]=value;
        noiseParam2+=noiseStep2;
    }
    //inital collection of trees
    for (var i=0; i<10; i+=1) {
        var rx = random(width);
        trees[i]=makeTree(rx);
    }
}

function draw() {
    background(123, 196, 227); //sky blue

    //sun
    noStroke();
    fill(255, 255, 227); //very light yellow
    ellipse(40,30,25);

    mountains();
    hills();

    //trees
    updateTrees();
    removeTrees();
    addNewTrees();

    //goats
    updateGoats();
    removeGoats();
    addNewGoats();

    //fence
    var fenceX=0;
    for (var i=0; i<5; i+=1) {
        image(fenceImg, fenceX+(i*200),115, 200,100);
    }
}

LO-11

For this week’s looking outwards, I decided to talk a bit about why NFTs suck. NFTs, or non-fungible tokens, have been gaining a lot of steam recently with the boom of equally stupid cryptocurrencies. The entire idea of an NFT breaks a lot of artistic integrity, as it exists purely to be able to be sold. Owning an NFT doesn’t give you anything other than the ability to resell it. What is it you may ask? A piece of digital art, that one could just as easily right-click and download. Because of this NFT has devolved away from decent-looking art and into photos of toilet paper and tungsten cubes. They exist entirely as a tool for rich tech bros to make money. On top of that, the processing power necessary to load the blockchain NFTs run on has a massive environmental toll, amounting to over 30 million tonnes of CO2 a year. The idiocy of this all came crashing down two weeks ago when the blockchain was hacked, forcing NFT owners to overwrite their own blockchain, which defeats the whole “non-fungible” thing they seem to love and reverts you back to the system NFTs owners claim to hate. All in all, it’s time to end NFTs (and crypto for that matter) and move on to make art that’s more meaningful than its monetary value as a clipart.

https://mashable.com/article/nft-cryptocurrency-bad-environment-art
https://www.insidehook.com/daily_brief/art/nft-most-ridiculous-items
https://earth.org/nfts-environmental-impact/

Project 11 – Moving Landscape

sketch

Trees and birds and trees and birds

var trees = [];
var birds = [];
var dx = -1;

function setup() {
    createCanvas(400, 200);

    for (var i = 0; i < 10; i++){ //populate trees
        var rx = random(width);
        trees[i] = makeTree(rx);
    }for (var i = 0; i < 3; i++){ //populate birds
        var bx = random(width);
        birds[i] = makeTree(bx);
    }
    frameRate(10);
}


function draw() {
    background('lightblue');

    //dirt
    noStroke();
    fill('darkgreen');
    rect(-10, 100, width+20, height);

    updateAndDisplayTrees();
    removeTree();
    newTree();

    updateAndDisplayBird();
    removeBird();
    newBird();

    drawRoad();
}

function drawRoad() {
    fill('grey');
    rect(-10, 130, width+20, 30);

    stroke('black');
    var dividerLines = [];
    for (var i = 0; i < 30; i++) { //make vals
        var a = i*width/30;
        dividerLines.push(a);
    } for (var i = 0; i < 30; i++) { //draw lines
        line(dividerLines[i], 145, dividerLines[i]+width/60, 145);
    } for (var i = 0; i < 30; i++) { //move lines
        dividerLines[i] += dx;
        if (dividerLines[i] <= -width/60) {
            dividerLines[i] = width;
        }
    }
}

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

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

function removeTree(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x > -50) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}

function removeBird(){
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x > -50) {
            birdsToKeep.push(birds[i]);
        }
    }
    birds = birdsToKeep;
}

function newTree() {
    var newTreeLikelihood = 0.02;
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width+50));
    }
}

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


// method to update position of Tree every frame
function treeMove() {
    this.x += this.speed * this.scal/3;
}

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


function treeDisplay() {
    push();
    translate(this.x, 100);
    scale(this.scal)
    stroke('brown');
    strokeWeight(5);
    line(0, 0, 0, 20);

    stroke('green');
    fill('green');

    for (var i = 0; i < 5; i++) {
        triangle(-20+2*i, -7*i, -2, -7*i, -2, -20-7*i);
    } for (var i = 0; i < 5; i++) {
        triangle(20-2*i, -7*i, 2, -7*i, 2, -20-7*i);
    }
    pop();
}

function birdDisplay() {
    push();
    translate(this.x, this.y);
    stroke('black');
    noFill();
    strokeWeight(2);
    arc(0, 0, 20, 20, PI+PI/3, 2*PI-PI/3);
    arc(10, 0, 20, 20, PI+PI/3, 2*PI-PI/3);
    pop();
}


function makeTree(birthLocationX) {
    var tree = {x: birthLocationX,
                scal: random(0.5, 2),
                speed: dx,
                move: treeMove,
                display: treeDisplay}
    return tree;
}

function makeBird(birthLocationX) {
    var bird = {x: birthLocationX,
                y: random(0, 70),
                speed: random(-5,-2),
                move: birdMove,
                display: birdDisplay}
    return bird;
}

LO: Societal Impacts of Digital Art

From https://www.coindesk.com/markets/2021/08/02/nft-markets-post-record-breaking-week/

NFTs have always felt like an infringement on artists’ work in general, but “NFTs and Copyright” has given me a better understanding of why I feel that way. A good quote from the article to understand the initial hope for NFTs is “NFTs are an attempt for digital creators to try and capture some of the uniqueness and scarcity that producers of physical works have naturally”, although where an NFT fails is returning value to its original creator: the artist. I assumed that NFTs had to be created by the original seller, but that isn’t even the case: they can be sold by a buyer of the original artwork. This means that an artist can put their hardest work into a piece of artwork, just to have it resold by another person at minimal effort for potentially very high reward. Photographs can be made into NFTs, making even the likeness of another person something to capitalize off of. Although the artist is still noted with the original copyright, copyright is a tricky thing for artists in the NFT space. Maybe someone would buy an original work after having seen the NFT, but a copyright doesn’t pay for groceries.

“NFTs and Copyright”, https://www.plagiarismtoday.com/2021/03/16/nfts-and-copyright/, 2021

Project 11: Generative Landscape

sketch Download

//global variables
var cloudsX = [];
var cloudsY = [];
var brickX = [];
var brickY = [];
var mushroomX = [];
var mushroomY = [];
var cloudImg;
var brickImg;
var floorImg;
var noiseParam = 0;
var noiseStep = 0.01;
var numClouds = 5;
var numBricks = 3;
var numMushrooms = 3;
var mh = []; //height of the mountains

function preload() { 
  //preload images
  cloudImg = loadImage("https://i.imgur.com/i3pLDv0.png");
  brickImg = loadImage("https://i.imgur.com/yNNs74U.png");
  floorImg = loadImage("https://i.imgur.com/LZwSMdA.png");
  mushroomImg = loadImage("https://i.imgur.com/tflvlXK.png");
}

function setup() {
  createCanvas(480, 400);

  //mountain
  for (var i = 0; i < width/2 + 1; i ++) {
    var n = noise(noiseParam);
    var v = map(n, 0, 1, height/2, height);
    mh.push(v);
    noiseParam += noiseStep;
  }

  //cloud
  for (var i = 0; i < numClouds; i ++) {
    var cx = random(width/numClouds*i, width/numClouds*(i+1));
    var cy = random(height/4);
    cloudsX.push(cx);
    cloudsY.push(cy);
  }

  //brick
  for (var i = 0; i < numBricks; i ++) {
    var bx = random(width/numBricks*i, width/numBricks*(i+1));
    var by = random(height/3, height/2);
    brickX.push(bx);
    brickY.push(by);
  }

  //mushroom
  for (var i = 0; i < numMushrooms; i ++) {
    var mx = random(width/numMushrooms*i, width/numMushrooms*(i+1));
    var my = height-90;
    mushroomX.push(mx);
    mushroomY.push(my);
  }
  frameRate(10);
}

function draw() {
  background(102, 154, 255); //blue
  drawMountain();
  drawCloud();
  drawBrick();
  drawMushroom();

//floor
  image(floorImg, 0, 340, 130, 30);
  image(floorImg, 129, 340, 130, 30);
  image(floorImg, 258, 340, 130, 30);
  image(floorImg, 387, 340, 130, 30);
  image(floorImg, 0, 370, 130, 30);
  image(floorImg, 129, 370, 130, 30);
  image(floorImg, 258, 370, 130, 30);
  image(floorImg, 387, 370, 130, 30);
}

//mountains
function drawMountain() {
  fill(52, 151, 9); //green
  beginShape();
  vertex(0, height);
  for (var i = 0; i < mh.length; i ++) {
    x = 2*i;
    y = mh[i];
    vertex(x,y);
  }
  vertex(width, height);
  endShape();
  mh.shift();
  n = noise(noiseParam);
  v = map(n, 0, 1, height/2, height);
  mh.push(v);
  noiseParam += noiseStep;
}

//cloud
function drawCloud() {
  for (var i = 0; i < numClouds; i ++) {
    image(cloudImg, cloudsX[i], cloudsY[i], 100, 33);
  }
  for (var i = 0; i < numClouds; i ++) {
    cloudsX[i] -= 3; //update cloud position
    if (cloudsX[i] < -100) { //remove cloud
      cloudsX[i] = width;
      cloudsY[i] = random(height/4);
    }
  }
}

//brick
function drawBrick() {
  for (var i = 0; i < numBricks; i ++) {
    image(brickImg, brickX[i], brickY[i], 100, 30);
  }
  for (var i = 0; i < numBricks; i ++) {
    brickX[i] -= 3; //update brick position
    if (brickX[i] < -100) { //remove cloud
      brickX[i] = width;
      brickY[i] = random(height/3, height/2);
    }
  }
}


//mushroom
function drawMushroom() {
  for (var i = 0; i < numMushrooms; i ++) {
    image(mushroomImg, mushroomX[i], mushroomY[i], 40, 30);
  }
  for (var i = 0; i < numMushrooms; i ++) {
    mushroomX[i] -= 7; //update brick position
    if (mushroomX[i] < -100) { //remove cloud
      mushroomX[i] = width;
      mushroomY[i] = height-90;
    }
  }
}

For this project, I decided to replicate one of my favorite childhood game, Super Mario Bros Game we used to play with Nintendo. For moving variables, I added clouds, bricks, mushrooms and the mountain the background, and included floor tiles using png files. It was challenging at first to make them move and disappear, but it was really fun to create this game-like scenery. If I had more time, I would like to add a jumping Mario so the character interacts with the game scene.

Project 11

sketch

// gnmarino
// gia marino
// section D

// sushi conveyor belt animation

var sushis = [];
var nigiris = [];

function setup() {
    createCanvas(480, 320);

}

function draw() {
    background(220);

    // moves sushis and nigiris 
    moveDisplayOfSushiAndNigiri(); 
    // removes them if they go off the screen
    removeOldSushiAndNigiri();
    // adds new sushis and nigiris based off a low probability
    addSushi_or_Nigiri();
    // makes conveyour belt for sushi and nigiri to move on
    conveyorBelt();
}

function removeOldSushiAndNigiri() {
    var freshSushi = [];
    var freshNigiri = [];

    // if sushis are on the screen then put them in fresh sushi array
    // if they are not on the screen then they will disappear because 
    // they won't be added to the new array
    for (var i = 0; i < sushis.length; i++){
        if (sushis[i].x + sushis[i].sushiWidth > 0) {
            freshSushi.push(sushis[i]);
        }
    }

    // same with nigiris
    for (var i = 0; i < nigiris.length; i++){
        if (nigiris[i].x + nigiris[i].nigiriWidth > 0) {
            freshNigiri.push(nigiris[i]);
        }
    }

    sushis = freshSushi;
    nigiris = freshNigiri;
}

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

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

function addSushi_or_Nigiri() {

    // this is the probability of being added everytime code loops
    var addSushiLikelihood = .005;
    var addNigiriLikelihood = .004;

    if(random(0, 1) < addSushiLikelihood) {
        sushis.push(makeSushi(width));
    }

    if(random(0, 1) < addNigiriLikelihood) {
        nigiris.push(makeNigiri(width +10));
    }

}

function displayNigiri() {

    push();
    strokeWeight(2);
    // these variables are used to make it easier to put the shapes together
    var nigiriTop = 180-this.nigiriHeight   // conveyor belt is at 180
    var nigiriMiddle = this.nigiriWidth/2 + this.x

    fill(247, 246, 241);    //off-white
    rect(this.x, nigiriTop, this.nigiriWidth, this.nigiriHeight);
    fill(this.sashimiColor);
    ellipse(nigiriMiddle, nigiriTop, this.nigiriWidth + 15, 40);

    // this is to cover last ellipse so it looks more like shashimi
    fill(247, 246, 241);    //off-white
    ellipse(nigiriMiddle, nigiriTop + 10, this.nigiriWidth, 25);
    noStroke();
    rect(this.x + 1, nigiriTop + 10, this.nigiriWidth-2, 15);
    pop();

}

function displaySushi() {

    // these variables are used to make it easier to put the shapes together
    var sushiMiddle = this.sushiWidth/2 + this.x
    var sushiTop = 180-this.sushiHeight     // conveyor belt is at 180
    push();
    strokeWeight(2);
    fill(this.wrapColor);
    rect(this.x, sushiTop, this.sushiWidth, this.sushiHeight);
    fill(247, 246, 241);    //off-white
    ellipse(sushiMiddle, sushiTop, this.sushiWidth, 25);
    fill(this.fishColor);
    ellipse(sushiMiddle, sushiTop, this.sushiWidth-20, 15);
    pop();
}

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

// sushi object
function makeSushi(originX) {
    var sushi = {x: originX, 
                 sushiWidth: random(55, 100),
                 sushiHeight: random(35, 70),
                 wrapColor: color(0, random(100) , 0),
                 fishColor: 
                 color(random(230, 260), random(145, 225), random(70, 160)),
                 speed: -3,
                 move: move_sushi_nigiri,
                 display: displaySushi}
    return sushi;
}

// nigiri object
function makeNigiri(originX) {
    var nigiri = {x: originX,           // don't know if i need to change that
                 nigiriWidth: random( 70, 110),
                 nigiriHeight: random( 15, 40),
                 sashimiColor: 
                 color(random(230, 260), random(145, 225), random(70, 160)),
                 speed: -3,
                 move: move_sushi_nigiri,
                 display: displayNigiri}
    return nigiri;
}

function conveyorBelt() {

    push();
    fill(70);
    rect(40, 185, 440, 150)
    fill(180);
    strokeWeight(5);
    ellipse(30, 260, 150);
    ellipse(450, 260, 150);

    strokeWeight(12);
    line(30, 335, 450, 335);
    line(30, 185, 450, 185);
    arc(30, 260, 150, 150, radians(90), radians(270), OPEN);
    arc(450, 260, 150, 150, radians(-90), radians(90), OPEN);

    pop();
}

Looking Outwards 11

This week I decided to look into the article “NFTs and Copyright”.

What I found most interesting is that basically NFTs don’t give the “owner” copywriter ownership so they cannot print or distribute the work without permission. It is basically making digital work collectors items.

What’s even more interesting is that you can make an NFT for anything. So spammers are grabbing URLs and releasing NFTS upon them. However, this is also a big copyright infringement, and that’s where the problem is created.

Overall, it could help creators prove their copyright, and it does give digital creators a way to give out unique copies of their work, the problem is there is no system or governing for NFTs to prevent bots.

I think NFTs shows how a virtually useless thing can be abused, which really shows how our society works and how easily the internet makes it to abuse things. Overall, I think it’s very scary that loads of money can be passed around and rules can be broken so easily if there isn’t laws in place to stop them.