## 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();
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;
}

{
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);
pop();
}

function makeBuilding(birthLocationX)
{
var bldg = {x: birthLocationX,
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,
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,
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();
}

{
fill(0);
rect (530, 550, 90, 40);
fill(255);
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
{
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,
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

``````//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();

//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
}

// 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);
stroke(200);
pop();
}

function makeCloud(birthLocationX) {
var bldg = {x: birthLocationX,
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

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.

``````//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

}

//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;
}
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;
}
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();

//goats
updateGoats();
removeGoats();

//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.

## 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();

}

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

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.

## Project 11: Generative Landscape

sketch
``````//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 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

``````// 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
// 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();
}
}

// this is the probability of being added everytime code loops

sushis.push(makeSushi(width));
}

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);

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.