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

Project Landscape

sketchDownload

//Yanina Shavialenka
//Section B

/*
The following project was written with an intention to represent world
peace, love, diversity, and care for the planet. I used world map to
represent the world, people in different national outfits to represent 
people from around the world, love symbold to represent love, rainbow 
peace sign to represent peace in the world and inclusion, recycling 
symbol to represent the fact that we need to recycle and save our planet. 
*/

//Initial arrays for images and objects
var people = [];
var world = [];
var symbol = [];
var loadPeople = [];
var loadSymbol = [];
var worldmap;
//Value of change of movement
var dx1 = 1.5;

//Preloads images
function preload() {
    var file = [];
    file[0] = "https://i.imgur.com/PAWmbXw.png";
    file[1] = "https://i.imgur.com/t0fgBq2.png";
    file[2] = "https://i.imgur.com/SkGPugf.png";
    file[3] = "https://i.imgur.com/dbMZm7H.png";
    file[4] = "https://i.imgur.com/L1ODD20.png";
    file[5] = "https://i.imgur.com/b5hpqxP.png";

    for(var i = 0 ; i < file.length; i++) {
        people[i] = loadImage(file[i]);
    }

    var file1 = [];
    file1[0] = "https://i.imgur.com/IRxGbDw.png";
    file1[1] = "https://i.imgur.com/Xkq7Q0x.png";
    file1[2] = "https://i.imgur.com/w9crIqx.png";

    for(var i = 0 ; i < file1.length; i++) {
        symbol[i] = loadImage(file1[i]);
    }

    worldmap = loadImage("https://i.imgur.com/LhjqpdM.png");
    world.push(makeBackground(0,0,dx1));
}

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

//Object functions that create object
//Below function has an object for background
function makeBackground(cx,cy,cdx) {
    var c = { x: cx, y: cy, dx: cdx,
            stepFunction: stepBackground,
            drawFunction: drawBackground
    }
    return c;
}

//Below function has an object for characters
function makeCharacter(cx, cdx, num) {
    var r = random(320);
    var c = { x: cx, y: r, dx: cdx,
            imageNum: num,
            stepFun: stepCharacter,
            drawFun: drawCharacter
    }
    return c;
}

//Below function has an object for symbols
function makeSymbol(cx, cdx, num) {
    var r = random(320);
    var c = { x: cx, y: r, dx: cdx,
    	    imageNum: num,
            step: stepSymbol,
            draw: drawSymbol
    }
    return c;
}

//Object functions that move objects
function stepBackground() {
    this.x -= this.dx; 
}
function stepCharacter() {     
    this.x -= this.dx; 
}
function stepSymbol() {     
    this.x -= this.dx; 
}

//Object functions that draw objects
function drawBackground() {
    image(worldmap,this.x,this.y);
}
function drawCharacter() {
    image(people[this.imageNum],this.x,this.y);
}
function drawSymbol() {
    image(symbol[this.imageNum],this.x,this.y);
}


function draw() {
    background(220);
    
    //random values
    var num = random(people.length - 2);
    num = int(num);
    var num1 = random(symbol.length);
    num1 = int(num1);
    var peopleCount = random(100,200);
    peopleCount = int(peopleCount);
    var symbolCount = random(300);
    symbolCount = int(symbolCount);

    //moves and draws map
    for(var i = 0 ; i < world.length ; i++) {
        world[i].stepFunction();
        world[i].drawFunction();
    }

    //when the latest world x postion is 0, a new map is drawn at x coordinate of the world map width
    if(world[world.length-1].x <= 0) {
        world.push(makeBackground(802,0,dx1));
    }

    //new position for people and symbols
    if(frameCount % peopleCount == 0) {
        loadPeople.push(makeCharacter(480,dx1,num));
    }
    
    if(frameCount % symbolCount == 0) {
        loadSymbol.push(makeSymbol(480,dx1,num1));
    }
    
    //moves and draws people and symbols
    for(var i = 0 ; i < loadPeople.length ; i++) {
        loadPeople[i].stepFun();
        loadPeople[i].drawFun();
    }

    for(var i = 0 ; i < loadSymbol.length ; i++){ 
        loadSymbol[i].step();
        loadSymbol[i].draw();
    }
}

For this week’s project, I decided to portray the idea of utopia where all people around the world live in peace, love, and inclusion. I used the background of a world map to represent the world; people in different national outfits to represent the people around the world; love symbol to represent love; rainbow peace sign to represent peace and inclusion; recycling symbol to represent the idea that we need to recycle to save the earth and have that ideal utopia.

In my project, I encountered a problem with a background since I used an image instead of drawing it out myself: when the image would end, it would not reappear so I came with an idea to use a double image “glued” together which eventually did the trick. Overall I really enjoyed this assignment and found it really fun to work on!

Original sketch of the design and idea

LO-11: Societal Impacts of Digital Art

Cryptopunks – a NFT series made by LarvaLabs

For this Week’s LO, I chose to read into NFTs and the issues that are connected to them. I read the articles from Time and PlagiarismToday. As for the topic, NFTs are also called Non-Fungible Tokens. They are blockchained based digital files. This means that they are not easily messed with (as blockchain makes them public ledgers on the net). This makes ownership very concrete and clear. Furthermore, because they are non-fungible, the price of said tokens/files vary and are decided by producer and consumer.

This has led to a market boom where NFTs (whether they are art, videos, music, etc.) are being sold for big bucks.

However, while it is intended for a way for online copyright for all, problems have arisen. These include bots taking all and any online files and making them NFTs to sell – very bad. Another problem is that NFTs have a considerable starting gap to overcome, thereby keeping many from participating, such as the Times article said, artists of color. A final problem is that the whole market is not that beneficial to the environment, as it requires massive amounts of energy to continue – energy that comes from fossil fuels.


Overall, NFTs are causing big issues, but issues that can be solved relatively fast as it is a growing market that everyone wants to get a slice of.


Articles I read from Time and PlagiarismToday.

Project 11: Generative Landscape

generative landscape
var wood; // wooden table
var belt = []; // conveyer belt
var sushi = [];
var plate = [];
var sushiTypes = [];
var terrain = [];
var noiseParam = 0;
var noiseStep = 0.01;
var sky;
var clouds = [];

var sushiLinks = [
    "https://i.imgur.com/fm2adto.png",
    "https://i.imgur.com/Q2z9Ki8.png",
    "https://i.imgur.com/tUeehNx.png",
    "https://i.imgur.com/H2lTaNf.png",
    "https://i.imgur.com/t7TbPiI.png",
    "https://i.imgur.com/dNH5jvD.png",
    "https://i.imgur.com/YJ7h1Hl.png",
    "https://i.imgur.com/Hu1TVEI.png",
    "https://i.imgur.com/ZyAzhTq.png",
    "https://i.imgur.com/X8sFOwk.png",
    "https://i.imgur.com/t3pzPkC.png",
    ]

function preload() {
    wood = loadImage("https://i.imgur.com/5cpfZzh.png");
    belt = loadImage("https://i.imgur.com/s1SR1ru.png");
    sky = loadImage("https://i.imgur.com/qvwpqNr.png");
    
    for (var i = 0; i < 11; i ++) {
        var sushiImage;
        sushiImage = loadImage(sushiLinks[i]);
        sushiTypes.push(sushiImage);
    }
}

function setup() {
    createCanvas(450, 400);
    imageMode(CENTER);
    wood.resize(450, 0);
    belt.resize(450, 0);
    sky.resize(450, 0);

    // make collection of sushi
    for (var i = 0; i < 5; i++) {
        var sx = random(width);
        sushi[i] = makeSushi(sx);
    }

    // make background terrain
    for (var i = 0; i <= width; i ++) {
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 0, height);
        terrain.push(value);
        noiseParam += noiseStep;
    }

    // make clouds
    for (var i = 0; i < 5; i ++) {
        var cloudx = random(width);
        var cloudy = random(height);
        clouds[i] = makeClouds(cloudx, cloudy);
    }

}


function draw() {
    image(sky, width/2, height/2);
    drawTerrain();
    image(wood, width/2, 250);
    image(belt, width/2, 250);

    updateAndDisplaySushi();
    removeSushiThatHaveSlippedOutOfView();
    addNewSushiWithSomeRandomProbability(); 

    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability(); 
}

// all cloud related functions

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

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

function addNewCloudsWithSomeRandomProbability() {
    var newCloudLikelihood = 0.01; 
    if (random(0,1) < newCloudLikelihood) {
        var newcloudX = random(width);
        var newcloudY = random(200);
        clouds.push(makeClouds(newcloudX, newcloudY));
    }
}

function makeClouds(CLOUDX, CLOUDY) {
    var c = {x: CLOUDX,
             y: CLOUDY,
             speed: -2,
             move: cloudMove,
             display: cloudDisplay}
    return c;
}

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

function cloudDisplay() {
    fill(255, 254, 246); // cream color
    noStroke();
    ellipse(this.x, this.y - 5, 60, 50);
    ellipse(this.x - 20, this.y + 10, 60, 50);
    ellipse(this.x + 15, this.y - 5, 70, 50);
    ellipse(this.x + 5, this.y + 20, 60, 50);
    ellipse(this.x + 30, this.y + 10, 80, 50);
}

// all terrain functions

function drawTerrain() {
    fill(73, 133, 115); 
    noStroke();
    beginShape();
    vertex(0, height);
    for (i = 0; i <= width/5 + 1; i += 1) {
        vertex(i*5, terrain[i]);
        vertex((i+1)*5, terrain[i+1]);
    }
    vertex(width, height);
    endShape();

    // make terrain continuous
    terrain.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    terrain.push(value);
    noiseParam += noiseStep;

}

// all sushi related functions

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

function removeSushiThatHaveSlippedOutOfView() {
    var sushiToKeep = [];
    for (var i = 0; i < sushi.length; i++){
        if (sushi[i].x + sushi[i].breadth > 0) {
            sushiToKeep.push(sushi[i]);
        }
    }
    sushi = sushiToKeep;
}

function addNewSushiWithSomeRandomProbability() {
    var newSushiLikelihood = 0.007; 
    if (random(0,1) < newSushiLikelihood) {
        sushi.push(makeSushi(450));
    }
}


function makeSushi(birthLocationX) {
    var s = {x: birthLocationX,
                breadth: 50,
                speed: -1,
                sushiType: random(sushiTypes),
                move: sushiMove,
                display: sushiDisplay}
    return s;
}


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

function sushiDisplay() {
    image(this.sushiType, this.x, 310, this.breadth+10, this.breadth);
}

For this project, I decided to create a sushi conveyer belt that’s located outdoors. I started off by drawing all the different types of sushi that’ll be randomized in the landscape. I also drew the conveyer belt and the wooden table. Then I implemented the background which is the sky with a randomized terrain/hill and clouds. I struggled a bit with creating an array of objects using images, so I couldn’t quite figure how to make the sushi not overlap each other. I also tried to create plates under the sushi, but I ended up removing them because they weren’t quite matching up with the sushi.

This is all the variations of the sushi:

Project 11: Generative Landscape

sketchDownload
// this program displays a landscape of a stone path along a stream in the woods.

// empty arrays for objects:
var bkgrndtrees = [];
var path = [];
var stream = [];
var trees = [];
var allArrays = [bkgrndtrees, path, stream, trees];

// speed of landscape shift, per frame
// adjusted for background+foreground so 'closer' objects move faster than 'far away' ones
var shift = -1;

function setup() {
    createCanvas(480, 300);
    background(80, 125, 60);
    frameRate(200);

    // create initial collections of objects:
    fillBkgrndtrees();
    fillPath();
    fillStream();
    fillTrees();

    // sort objects in arrays to be drawn properly:
    for (a=0; a<allArrays.length; a++) {
        if (allArrays[a]!=stream){          // stream should not be ordered
            orderObjects(allArrays[a]);
        }
    }
}

// fills backgroundTrees array with initial trees:
function fillBkgrndtrees() {
    for (var i = 0; i < 320; i++) {
        var rx = random(width+75);
        var ry = random(-height/25, 2*height/5);      // top of canvas = background
        bkgrndtrees[i] = makeTree(rx, ry);
    }
}

// fills foreground tree array with initial trees:
function fillTrees() {
    for (var i = 0; i < 5; i++) {
        var rx = random(width+75);
        var ry = random(4*height/5, 3*height/2);    // bottom of canvas = foreground
        trees[i] = makeTree(rx, ry);
    }
}

// fills path array with initial stones:
function fillPath() {
    for (var i = 0; i < 15; i++) {
        var size = random(width/25, width/10);
        var col = color(random(90, 120));
        var x = i*50;
        var ry = random(height/2, 3*height/5);
        path[i] = makeStone(x, ry, size, col);
    }
}

// fills stream array with objects based on stone path:
function fillStream() {
    for (var i = 0; i < path.length; i++) {
        var x = i*50;
        var y = path[i].y + path[i].size;
        stream[i] = makePoint(x, y);
    }
}

// creates a tree object
function makeTree(tx, ty) {
    // background trees:
    if (ty < height/2) {
        var tree = {x:tx,
                    y:ty,
                    age:random(2, 11),
                    trunkc: color(random(70, 90), random(55, 75), random(30, 55)),
                    leavesc: color(random(0, 75), random(65, 175), random(50)),
                    show: showTree,
                    move: moveObject,
                    speed: shift*.85 }
    }
    // foreground trees:
    else {
        var tree = {x:tx,
                    y:ty,
                    age:random(4, 7),
                    trunkc: color(random(50, 80), random(20, 50), random(10, 20)),
                    leavesc: color(random(0, 100), random(100, 200), random(30)),
                    show: showTree,
                    move: moveObject,
                    speed: shift*1.15 }
    }

    return tree;
}

// creates a stone object
function makeStone(sx, sy, ssize, scol) {
    var stone = {x:sx,
                 y:sy,
                 size:ssize,
                 c: scol,
                 show: showStone,
                 move: moveObject,
                 speed: shift}
    return stone;
}

// creates a point object (for stream curve);
function makePoint(px, py) {
    var pnt = {x:px,
               y:py,
               size:width/50,
               c: color(50, 125, 175),
               show: showStone,
               move: moveObject,
               speed: shift}
    return pnt;
}

function draw() {
    background(80, 125, 60);

    // draw all objects in all arrays:
    for (j=0; j<allArrays.length; j++) {
        thisArray = allArrays[j];
        drawObjects(thisArray);
        if (thisArray!=stream) {        // stream is updated with path
            // order and updates arrays:
            orderObjects(thisArray);
            updateArray(thisArray);
        }
    }
}

// draws and moves objects in an array
function drawObjects(array) {
    for (i=0; i<array.length; i++) {
        thisObj = array[i];
        thisObj.show();
        thisObj.move();
    }
    if (array==stream) {
        drawStream();
    }
}

// uses curve shape and array points ot draw stream
function drawStream() {
    push();
    noFill();
    stroke(50, 125, 175);
    strokeWeight(15);
    curveTightness(-.2);
    beginShape();
    curveVertex(stream[0].x, stream[0].y);
    curveVertex(stream[0].x, stream[0].y);
    for (var m=1; m<stream.length-1; m++){
        curveVertex(stream[m].x, stream[m].y);
    }
    curveVertex(stream[stream.length-1].x, stream[stream.length-1].y);
    endShape();
    pop();
}

// sorts objects in an array according to the y feild
// this ordering ensures accurate depth on canvas
function orderObjects(array) {
    for (var j=0; j<array.length-1; j++) {
        var counter = 0;
        for (var i=0; i<array.length-1; i++) {
            if (array[i].y > array[i+1].y) {
                var tmp = array[i];
                array[i] = array[i+1];
                array[i+1] = tmp;
                counter += 1;
            }
        }
        if (counter==0) {
            break;
        }
    }
}

// updates all allArrays
// adds new objects to end and deletes unused objects (off canvas)
function updateArray(array) {
    if (array==trees || array==bkgrndtrees) {
        // add new trees to array off-canvas:
        // background trees:
        var treeLikelihoodB = 320/555;
        if (random(1) < treeLikelihoodB) {
            var ry = random(-height/25, 2*height/5);    // top of canvas = background
            bkgrndtrees.push(makeTree(width+75, ry));
        }
        // foreground trees:
        var treeLikelihoodF = 5/555;
        if (random(1) < treeLikelihoodF) {
            var ry = random(3*height/4, 3*height/2);      // bottom of canvas = foreground
            trees.push(makeTree(width+75, ry));
        }
    }
    else {
        // path and stream use fixed x values:
        if (frameCount%50==0) {
            var size = random(width/25, width/10);
            var col = color(random(90, 120));
            var ry = random(height/2, 3*height/5);
            path.push(makeStone(700, ry, size, col));
            col = color(0, 50, 150);
                var y = ry + size;
            stream.push(makePoint(700, y));
        }
    }

    // remove any object no longer on canvas:
    var keep = [];
    for (var k=0; k<array.length; k++) {
        if (array[k].x > 0) {
            keep.push(array[k]);
        }
    }
    array = keep;
}

// draws tree based on age
function showTree() {
    if (this.y < height/2) {     // top of canvas = background
        var h = this.age*10;
        var w = this.age*2;
    }
    else {                      // bottom of canvas = foreground
        var h = this.age*12;
        var w = this.age*2.5;
    }
    var cx = this.x + w/2;
    var cy = this.y - h*1.5;

    if (this.age > 5) {             // older trees
        stroke(50, 40, 30);
        fill(this.trunkc);
        rect(this.x, this.y-h, w, h);
        fill(this.leavesc);
        for (var i=0; i<3; i++) {
            stroke(0, 75, 0);
            circle(cx - (this.age*4*i) + (this.age*4),
                   cy - (this.age*1.5) + (this.age*3*i),
                   this.age*5);
            circle(cx + (this.age*4*i) - (this.age*4),
                   cy - (this.age*1.5) + (this.age*3*i),
                   this.age*5);
            ellipse(cx - (this.age*6*i) + (this.age*6),
                    cy + this.age,
                    this.age*5,
                    this.age*6);
            ellipse(cx,
                    cy - (this.age*3) + (this.age*4*i),
                    this.age*7,
                    this.age*5);
        }
        noStroke();
        ellipse(cx, cy + this.age, this.age*12, this.age*9);
    }
    else {                          // younger trees
        stroke(50, 40, 30);
        fill(this.trunkc);   // tree trunk lighter brown
        rect(this.x, this.y-h, w/2, h);
        fill(this.leavesc);
        for (var i=0; i<3; i++) {
            stroke(0, 75, 0);
            circle(cx - (this.age*3*i) + (this.age*3),
                   cy - (this.age*1.5) + (this.age*2*i),
                   this.age*4);
            circle(cx + (this.age*3*i) - (this.age*3),
                   cy - (this.age*1.5) + (this.age*2*i),
                   this.age*4);
            ellipse(cx - (this.age*4*i) + (this.age*4),
                    cy + this.age,
                    this.age*4,
                    this.age*5);
            ellipse(cx,
                    cy - (this.age*4) + (this.age*4*i),
                    this.age*6,
                    this.age*4);
        }
        noStroke();
        ellipse(cx, cy + this.age/2, this.age*11, this.age*9);
    }
}

// draws stone for path
function showStone() {
    stroke(75);
    fill(this.c);
    ellipse(this.x, this.y, this.size, this.size/2);
}

// updates x values to move the landscape along
function moveObject() {
    this.x += this.speed;
}

For this project, I was inspired by a trail I used to walk a lot growing up. I struggled a bit to order the objects in a way that looks nice and is recognizable as a landscape, but I think the orderObjects() function that I created helped a lot with that. I also found it difficult to create the stream using a curve shape, but I am again really pleased with how well it came out. I wanted the path and stream to flow along together, and they do. To give more of a landscape effect, I adjusted the shift values for moving the objects so that things in the foreground move faster than things in the background.

My initial sketch of the stream in the woods.

Looking Outwards 11: Societal Impacts of Digital Art

The reading I chose for this blog post is ‘Women in Media Arts: Does AI think like a (white) man?’ The article focuses on female digital artists and feminism within the digital art realm. Through looking at a number of female-created art pieces and projects, the article discusses the ways in which AI and other creative practices shed light on the biases within creators and consumers. One project by Mary Flanagan entitled [“help me know the truth”] explores the way people reinforce their own biases based on others’ physical appearance. Other projects in this article were created with the purpose of combatting the obvious marginalization and discrimination that result from the lack of diversity among those creating digital tools. One example of this is facial recognition software which generally does not accurately recognize people of color. This is just one of the many ways human bias influences artificial intelligence, and there are very real and dangerous consequences that can arise if these types of creative habits are not broken (ex: medical equipment that is only accurate for white male patients).

article link

Project 11: Generative Landscape

wpf-landscape.js
//Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment -11-project
var trackLines = []; //array for converyer belt
var robots = []; //array for the robots

function setup() {
    createCanvas(480,300);
    background(219.219,211);
    for(var i = 0; i <= 9; i++){
        trackLines[i] = i*48; //fills the track array
    }

    for(var i = 0; i <= 5; i++){
        robots[i] = makeRobot(i); //fills the robot array
        robots[i].centerX = -50 + (i*-200);
    }
}

function draw(){
    push();
    stroke(0);
    strokeWeight(4);
    fill(54,54,66);
    rect(0,50,width,200);
    fill(28,150,195);
    rect(0,25,width,25);
    rect(0,250,width,25);
    stroke(0);
    strokeWeight(3); //draws the lines and moves them forward
    for(var i = 0; i <= 9; i++){
        line(trackLines[i],50,trackLines[i],250);
        trackLines[i] += 1;

        if(trackLines[i] >= width){ //sends a line back to the start when it gets to big
            trackLines[i] = 0;
        }
    }
    pop();

    for(var i = 0; i <= 5; i++){
        robots[i].draw(); //draws the robots
        

        robots[i].centerX ++; //sends the robots forward
        
        if(robots[i].centerX >= 800){ //deletes a robot from the array when it gets too far off screen and makes a new one
            robots.shift();
            robots.push(makeRobot(0));
            robots[5].centerX = -400
        }
    }
}

function makeRobot(i) {
    var rob = {centerX: 0, //funciton for making the robot
               head: floor(random(0,3)),
               eyes: floor(random(0,4)),
               glowColor: clrSelect(floor(random(0,6))), //sends a random number to the color select function to set the color variable
               mouth: floor(random(0,3)), //5
               chest: floor(random(0,2)),
               chestPiece: floor(random(0,3)), //8
               arms: floor(random(0,3)), //4
               legs: floor(random(0,3)), //3
               draw: drawRobot,
               drawHead: drawRobotHead,
               drawBody: drawRobotBody,
               drawEye: robotEyes,
               drawMouth: robotMouth,
               drawPiece: robotChestPiece,
               drawArms: robotArms,
               drawLegs: robotLegs,
           }
    return rob;

}

function drawRobot(){// draws the robot in fragments
    this.drawHead();
    this.drawBody();

}

function drawRobotHead(){
    fill(101,108,127);
    if(this.head == 0){
        circle(this.centerX,90,60);
    }
    if(this.head == 1){
        push();
        rectMode(CENTER);
        rect(this.centerX,90,60,60);
        pop();
    }
    if(this.head == 2){
        triangle(this.centerX,120,this.centerX-50,70,this.centerX+50,70);
    }

    this.drawEye();

    this.drawMouth();
    

}

function drawRobotBody(){
    fill(101,108,127);
    if(this.chest == 0){
        rect(this.centerX-25,120,50,75);
    }
    if(this.chest == 1){
        ellipse(this.centerX, 157.5,50,75);
    }
    
    this.drawPiece();

    this.drawArms();

    this.drawLegs();


}

function robotEyes() {
    push();
    fill(this.glowColor);
    if(this.eyes == 0){
        circle(this.centerX + 15,85,20);
        circle(this.centerX - 15,85,20);
    }

    if(this.eyes == 1){
        push();
        rectMode(CENTER);
        rect(this.centerX + 15, 85, 15, 15);
        rect(this.centerX - 15, 85, 15, 15);
        pop();

    }
    if(this.eyes == 2){
        push();
        stroke(this.glowColor);
        strokeWeight(3);
        line(this.centerX + 20, 80 , this.centerX + 5, 80);
        line(this.centerX - 20, 80 , this.centerX - 5, 80);
        pop()
    }

    if(this.eyes == 3){
        push();
        stroke(this.glowColor);
        strokeWeight(3);
        line(this.centerX + 15, 90 , this.centerX + 15, 75);
        line(this.centerX - 15, 90 , this.centerX - 15, 75);
        pop()
    }
    pop();
}

function robotMouth() {
    if(this.mouth == 0){
        push();
        stroke(this.glowColor);
        strokeWeight(4);
        noFill();
        arc(this.centerX, 100, 20, 20, 0, PI);
        pop();
    }

    if(this.mouth == 1){
        push();
        stroke(this.glowColor);
        strokeWeight(4);
        line(this.centerX + 10, 105, this.centerX -10, 105);
        pop();
    }
    if(this.mouth == 2){
        push();
        fill(this.glowColor);
        rect(this.centerX - 10, 101, 20, 8);
        line(this.centerX -10, 105, this.centerX + 10, 105);
        pop();

    }

}

function robotChestPiece() {
    if(this.chestPiece == 0){
        push();
        fill(this.glowColor);
        circle(this.centerX, 147,20);
        pop();
    }
    if(this.chestPiece == 1){
        push();
        fill(this.glowColor);
        rectMode(CENTER);
        rect(this.centerX, 147,20,20);
        pop();
    }
    if(this.chestPiece == 2){
        push();
        fill(this.glowColor);
        translate(this.centerX,147);
        rotate(radians(45));
        rectMode(CENTER);
        rect(0,0,20,20);
        pop();
    }

}

function robotArms(){
    if(this.arms == 0){
        push();
        stroke(0);
        strokeWeight(2);
        line(this.centerX + 25, 147, this.centerX + 50, 147);
        line(this.centerX - 25, 147, this.centerX - 50, 147);
        pop();
        circle(this.centerX - 55, 147, 10);
        circle(this.centerX + 55, 147, 10);

    }
    if(this.arms == 1){
        ellipse(this.centerX+37.5,147,25,10);
        ellipse(this.centerX-37.5,147,25,10);
    }
    if(this.arms == 2){
        push();
        rectMode(CENTER);
        square(this.centerX+35,147,20);
        square(this.centerX-35,147,20);
        pop();

    }
}

function robotLegs(){
    if(this.legs == 0){
        push()
        stroke(0);
        strokeWeight(2);
        line(this.centerX + 20, 195, this.centerX + 20, 225);
        line(this.centerX - 20, 195, this.centerX - 20, 225);
        pop();
        circle(this.centerX + 20, 230, 10);
        circle(this.centerX - 20, 230, 10);

    }
    if(this.legs == 1){
        ellipse(this.centerX - 15, 215, 10,40);
        ellipse(this.centerX + 15, 215, 10,40);
    }
    if(this.legs == 2){
        triangle(this.centerX-15, 197.5, this.centerX - 10, 235, this.centerX - 20, 235);
        triangle(this.centerX+15, 197.5, this.centerX +10, 235, this.centerX + 20, 235);
    }
}

function clrSelect(i){
    if(i == 0){
        var c = color(128,196,99); //green
    }
    if(i == 1){
        var c = color(182,20,29); //red
    }
    if(i == 2){
        var c = color(10,201,239); //blue
    }
    if(i == 3){
        var c = color(217,16,207); //purple
    }
    if(i == 4){
        var c = color(248,241,25); //yellow
    }
    if(i == 5){
        var c = color(244,239,221); //off white
    }

    return c;

}

For my project, I did a robot factory line, with all the different parts of the robots changing. I started with getting the conveyor belt to look correct. Then I worked on making one look for the robot and getting it to loop continuously. Afterward, I started to separate the body parts into distinct functions and then implements the if statements to draw different types of body parts. I am very happy with how it worked out, I think the robots look kind of cute and I am happy with how seamless the loop is. I also think I have a good amount of variety so the robots do not get immediately boing.

Looking Outwards-11

The article I read discusses the digital divide. The digital divide is the phenomenon of poorer people and areas having less access to functional computers, smart phones, or internet, all devices that are becoming more and more needed in the modern education and work worlds. This has been especially relevant during the Covid-19 pandemic, considering how many people were working or attending school from home, those without internet or an internet capable device were severely impacted. This article discusses an exhibition at a museum in Barcelona. The exhibition focuses not only on the digital divide, but also how it can disproportionately affect women and ethnic minorities. As the world continues to become more reliant on digital access, the worse the affects of the digital divide will become.

https://www.reuters.com/article/us-health-coronavirus-tech/spanish-art-show-spotlights-hidden-digital-divide-in-pandemic-idUSKBN28S0IC

Generative Landscape

sketchDownload
var cld = [];
var shl = [];

function setup() {
    createCanvas(480, 320);
    background(200);
    noStroke();
}

function draw() {
    //static background
    fill(57, 16, 115);
    rect(0, 0, 480, 40);
    fill(129, 21, 150);
    rect(0, 40, 480, 40);
    fill(189, 28, 119);
    rect(0, 80, 480, 40);
    fill(224, 47, 31);
    rect(0, 120, 480, 40);
    fill(230, 107, 50);
    rect(0, 160, 480, 40);
    fill(255, 185, 64);
    circle(240, 200, 60);
    fill(179, 161, 91);
    rect(0, 200, 480, 120);

    //cloud code
    if(random() > 0.95) cld.push(makeCloud((random()*120), color(random()*30+220, 220, random()*30+220))); //chance to draw new cloud
    for(let i = 0; i < cld.length; i++) { //draws and updates clouds
      cld[i].drawCloud();
      cld[i].moveCloud();
    }
    if(cld[0].x > 480) cld.shift(); //removes clouds that move too far

    //shell code
    if(random() > 0.85) shl.push(makeShell(random()*200+120, color(random()*255, random()*255, random()*255), random()*3)); //chacne to draw new drawShell
    for(let i = 0; i < shl.length; i++) { //draws and updates shells
      shl[i].drawShell();
      shl[i].moveShell();
    }
    if(shl[0].x > 480) shl.shift(); //removes shells that move too far
}

function makeCloud(ty, tc) {
    var cloud = {x: 0, y: ty, c: tc};
    return cloud;
}

function drawCloud() {
    fill(this.c);
    ellipse(this.x, this.y, 40, 20);
}

function moveCloud() {
    this.x += 10;
}

function makeShell(ty, tc, ts) {
    var shell = {x: 0, y: ty, c: tc, s: ts}
    return shell;
}

function drawShell() {
    fill(this.c);
    if(this.s < 1) circle(this.x, this.y, 20);
    else if(this.s < 2) square(this.x, this.y, 20);
    else triangle(this.x, this.y, this.x+10, this.y+20, this.x+20, this.y);
}

function moveShell() {
    this.x += 10;
}

This isn’t running correctly right now and I can’t figure out why ?-?

I made a sunset landscape because I thought I could incorporate some really cool colors into the background. First I coded the hard landscape. Since the sun is so far away, it will look like it isn’t moving. Next I created very simple clouds. To create randomness and variety in my landscape the clouds have a randomized color and height. I created a method that updated their x position so that they’d look like they were “moving” across the screen. After that I made shells. I followed a similar procedure, but I also added shape as a random variable. Having different shaped/colored shells in different locations helps make the landscape more exciting. I wish the code was displayed properly so you could see the final product 🙁