Month: November 2020

Project 11 – Generative Landscape

One of my hobbies is collecting adorable dolls, especially teddy bears. I like to decorate my boring room with dolls like teddy bears to lighten up the mood. I have always imagined a shop specifically for teddy bears, so I decided to create a visual of my dream shop in this project. The unique part of this shop is that it has a teddy bear conveyor belt. This conveyor belt has different types of teddy bears with different colors and characteristics. I have made the shop colored in shades of beige to really focus on the bright colors of the teddy bears.

sketch
//Stefanie Suk
//15104 Section D

var brownTeddy;
var blueTeddy;
var pinkTeddy;
var purpleTeddy;
var redTeddy;

var base = []; //array for base under teddy bears
var x; //position of base
var speed;

var cloudX = 60;
var cloudY = 100;

var teddyBears = 
["https://i.imgur.com/VdXQHac.png",
"https://i.imgur.com/l87wQNo.png",
 "https://i.imgur.com/1xcChWa.png",
 "https://i.imgur.com/olZHcs2.png",
 "https://i.imgur.com/pW0wt4W.png"]

function preload(){ //preloading teddy bear images 
    brownTeddy = loadImage(teddyBears[0]);
    blueTeddy = loadImage(teddyBears[1]);
    pinkTeddy = loadImage(teddyBears[2]);
    purpleTeddy = loadImage(teddyBears[3]);
    redTeddy = loadImage(teddyBears[4]);

    clock = loadImage('https://i.imgur.com/QBWxgao.png');
    tablePattern = loadImage('https://i.imgur.com/jZoPb4m.png');
}

function setup() {
    createCanvas(450, 450);
    frameRate(17);

    var dist = 0;
    for (var i = 0; i < 500; i++){ //creating 500 variations of teddy bears
        base[i] = varBase(dist);
        dist += 200; //dist of base and teddy bears
    }
}

function draw(){
    //drawing shop
    drawShop(); 
    //drawing clock
    image(clock, 355, 50);
    //drawing pattern on conveyor table
    image(tablePattern, -150, 325, 310, 13);
    image(tablePattern, 157, 325, 310, 13);
    //drawing cloud
    drawCloud();
    translate(200, -20);
    drawCloud();
    translate(-100, 30);
    drawCloud();
    //drawing base and belt
    showBase();
    conveyorBelt(); 
}

//drawing teddy bear shop
function drawShop(){
    noStroke();

    //back wall
    fill(234, 224, 212);
    rect(0, 0, width, 235)

    //window
    fill(113, 207, 230);
    rect(20, 20, 300, 250);

    //four borders of window
    fill(80, 46, 46);
    rect(20, 20, 300, 10);
    rect(20, 260, 300, 10);
    rect(20, 20, 10, 250);
    rect(320, 20, 10, 250);
    //division of window
    rect(220, 20, 5, 250);
    rect(20, 140, 300, 5);

    //conveyer belt
    fill(88, 87, 86);
    rect(0, 235, width, 90);

    //bottom conveyor belt table
    fill(214, 196, 173);
    rect(0, 325, width, 180);

    //text on conveyor belt table
    textSize(25);
    textStyle(ITALIC);
    fill(89, 80, 68);
    text('S.S Teddy Bear Shop', 110, 395)
  
}

//drawing cloud in window
function drawCloud(cloudx, cloudy) {
    noStroke();
    fill(255);
    ellipse(cloudX,cloudY,30);
    ellipse(cloudX+10,cloudY+10,30);
    ellipse(cloudX+20,cloudY-10,50,40);
    ellipse(cloudX+30,cloudY+5,30);
}

//variables for base
function varBase(basex){
    var base = {x: basex,
                basey: 275,
                basew: 120,
                baseh: 70,
                display: createBase,
                move: moveBase,
                speed: -8.0,
                teddyBears: random([brownTeddy, blueTeddy, pinkTeddy, purpleTeddy, redTeddy]) //random teddy bears appear on conveyor belt
    }
    return base; 
}

function createBase(){

    fill(209, 165, 109);
    ellipse(this.x, this.basey, this.basew, this.baseh); //drawing circular base under teddy bears


    //creating different varieties of teddy bears
    if(this.teddyBears == brownTeddy){
        image(brownTeddy,this.x-42, 180, brownTeddy.width*1.5, brownTeddy.height*1.5);  
    }
    if(this.teddyBears == blueTeddy){
        image(blueTeddy,this.x-42, 170, blueTeddy.width*1.5, blueTeddy.height*1.5);  
    }
    if(this.teddyBears == pinkTeddy){
        image(pinkTeddy,this.x-42, 175, pinkTeddy.width*1.5, pinkTeddy.height*1.5);  
    }
    if(this.teddyBears == purpleTeddy){
        image(purpleTeddy,this.x-42, 165, purpleTeddy.width*1.5, purpleTeddy.height*1.5);  
    }
    if(this.teddyBears == redTeddy){
        image(redTeddy,this.x-42, 180, redTeddy.width*1.5, redTeddy.height*1.5);  
    }

}

//calling move and show function of base
function showBase(){
    for(var i = 0; i < base.length; i++){
        base[i].display();
        base[i].move();
    }
}

//speed of base on conveyor best
function moveBase(){
    this.x += this.speed; 
}

function conveyorBelt(){
    for(var i = 0; i < 400; i++) { 
        var moveBelt = i * 25;
        line(x + moveBelt, height, x * moveBelt, height);
    }
    x += speed;
}
Rough sketch of project visual

Looking Outwards 11 – A Focus on Women Practitioners

Image of Camille Utterback’s Entangled

Camille Utterback is an artist who creates digital and interactive art. She is currently an Assistant Professor of Art Practice in the Department of Art & Art History, as well as Computer Science in the Department of Engineering at Stanford University. She holds a bachelor’s degree in Art from Williams College, and a Masters degree from The Interactive Telecommunications Program at New York University’s Tisch School of the Arts. Utterback’s works explore the different possibilities of relation between computational systems and human movement. She focuses and studies the beauty of body and physicality into her works. In this Looking Outwards, I want to talk about Utterback’s interactive installation called Entangled. This artwork encourages audiences to interact with slightly translucent screens that project images on both sides. Body movements of the audiences cause images of computer cables, earbuds, ropes, and other different types of cords to form and disappear on the corresponding side’s projection. What I really admire about this installation is that it not only allows an interaction between the installation and audience, but also allows interaction between the audience and audience. The fact people can see other people’s body movements through the translucent screens amazes me that a single installation can show many different explorations like embodied relationships, depth, and volumetric complexity.

Website: http://camilleutterback.com/projects/entangled/

Video of Camille Utterback’s Entangled

LO: Stephanie Dinkins

I first found Stephanie Dinkins while doing research for one of our previous Looking Outwards assignments and found that her work was very inspirational. As a Black woman transmedia (computational) artist, Dinkins explores the intersection between storytelling, treasured history, and the amplification of voices through her art. Her work often circles around topics of gender (in both culture-specific and broader societal contexts), being a Black person in America, and equity for communities of color.

One of her most recent works, #SayItAloud, is a WebXR experience driven by motivations of fighting injustices in the world but at the same time, creating things to solidify those impacts. The user is led through this experience by a central persona, Professor Commander Justice and the interaction is enhanced by the ability for viewers to add their own thoughts and experiences through the form of video submissions.

Project 11: Generative Landscape

For this project, I went with a simple scrolling sunset city & mountain view. The sun has a second ring around it just because I felt that it gave it more of a setting sun feeling. Then the buildings have flashing lights because I thought about how dorm/student living buildings when you look at them from the outside. Everyone seems to have different color LED lights lighting up their rooms in all different colors.

//Helen Cheng
//helenc1@andrew.cmu.edu
//Project 11
//Section C

var buildings = [];
var hill = [];
var noiseParam = 0;
var noiseStep = 0.01;
var n;
var hillPoint;


function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }

    //creates initial set of mountains
    for (i=0; i<=width/5; i++) {
        n = noise(noiseParam);
        hillPoint = map(n, 0, 1, 0, height);
        hill.push(hillPoint);
        noiseParam += noiseStep;
    }

    frameRate(10);
}


function draw() {
    background(93, 150, 168); 

    //setting sun
    fill(245, 188, 159);
    circle(width/2, height/2, 100);
    fill(250, 211, 125);
    circle(width/2, height/2, 50);

    drawHills();

    displayHorizon();

    updateAndDisplayBuildings();
    removeBuildings();
    addNewBuildings(); 
}

function drawHills() {
    var x = 0;
    beginShape();
    vertex(0, height);
    stroke(0);
    fill(126, 168, 151);


    //draws hill shape
    for (i=0; i<width/5; i++) {
        vertex(5*i, hill[i]);
    }

    //appends new hill point and removes first
    hill.shift();
    vertex(width, height);
    n = noise(noiseParam);
    hillPoint = map(n, 0, 1, 0, height);
    hill.push(hillPoint);
    noiseParam += noiseStep;
    
    endShape(CLOSE);
}

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


function removeBuildings(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep;
}


function addNewBuildings() {
    var newBuildingLikelihood = 0.005; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    stroke(0);
    fill(245, 229, 201);
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
        fill(color(random(255), random(255), random(255))); 
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -2.0,
                nFloors: round(random(2,9)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}


function displayHorizon(){
    stroke(0);
    fill(202, 245, 201);
    rect(0,height-50, width, height);
}

LO: A Focus on Women Practitioners

Flourish (2013) by Camille Utterback
Flourish (2013) by Camille Utterback

As a fellow female, I love how this week’s LO is focused on women. While I was looking through the list, Camille Utterback caught my eye because she creates interactive artworks and installations. Utterback has a master’s degree from the Interactive Telecommunications Program at NYU’s Tisch School of the Arts. She is currently an Assistant Professor of the Art and Art History Department at Stanford University. This one project by Utterback, Flourish, particularly got my attention. It is a 70-foot long site-specific artwork commissioned by the Liberty Mutual Group. Flourish combines interactive installation through the projection onto multiple layers of glass. It consists of seven, double-layered five by eight-foot glass panels. It has three interactive panels in which it reacts to a viewer’s position in front of the glass. Flourish represents how fluidity can flow through a linear composition and its references to life, creativity, and growth. Working with different glass techniques, the glass reflects and interacts with one another to create a special experience that can only be experienced in-person. The colors are so bright and playful and the shapes have such fluidity.

Camille Utterback: http://camilleutterback.com/

Flourish (2013): http://camilleutterback.com/projects/flourish/

Project 11: A worm dreaming

I wanted to do a little animation/landscape of a worm’s dream 🙂 Flashy colors and big flowers!

sketch
var backgroundX = 600;
var trip = [];
var noiseParam = 0;
var noiseStep = 0.02;

var x1 = 250;
function preload() {
    colorBackground = loadImage("https://i.imgur.com/XE9vWWB.png")
    worm = loadImage("https://i.imgur.com/CYR27Ru.png");
    redFlower = loadImage("https://i.imgur.com/R5vVLaL.png");
    yellowFlower = loadImage("https://i.imgur.com/ogHwP78.png");
    blueFlower = loadImage("https://i.imgur.com/faPKcYb.png");
    backgroundHouse = loadImage("https://i.imgur.com/DgMNstF.png");
    backgroundTower = loadImage("https://i.imgur.com/AuMqECF.png");
}

 function setup() {
    createCanvas(450, 300);
   
   for (var i = 0; i<width/5 +1; i++) {
        var n = noise(noiseParam);
        var value = map(n,0,1,0,height+50);
        trip.push(value);
        noiseParam+=noiseStep;
    }
 }

 function draw() {
// backdrop
    image(colorBackground,width/2,height/2);
    dream();
    imageMode(CENTER);
    image(blueFlower, x1, 105, 250, 250);
    image(redFlower, x1 - 170, 137, 67, 126);
    image(yellowFlower, x1 + 130, 105.5, 210, 210);
    image(worm, 94, 190.5, 188, 163);
    backgroundX -= 2; 
    x1 -= 2;
// resetting foreground and background elements
    if (backgroundX <= -125) {
        backgroundX = 900;
    }

    if (x1 <= -160) {
        x1 = 825
    }
}

function dream() {
    trip.shift();
    var n = noise(noiseParam);
    var value = map(n,0,1,0,height+50);
    trip.push(value);
    noiseParam += noiseStep;
  
  beginShape();
    vertex(0,height);
    for(var i =0; i <= width/5; i++) {
        fill(random(150,200),103,random(100,200));
        strokeWeight(4);
        vertex((i*5),trip[i]);
    
    }
    vertex(width,height);
    endShape();
}

Project 11

Continuing my inspiration from the artwork associated with Vaporwave, I decided to pursue my generative landscape project using the aesthetics, color palette, and symbols associated with the genre. Furthermore, to add to the surrealist atmosphere of the piece, I stylistically juxtaposed the Vaporwave landscape with a minimalist depiction of a train and dog. The interior of the train serves as the non-moving element of the drawing and has a window by which the Vaporwave setting can be seen. The two javascript objects that I used were telephone poles, a common symbol in Vaporwave art, that vary in thickness, height, and number of cross beams, and imported images of a marble bust, the Windows 95 logo, and an error message that vary in position and speed. Additionally, I used a noise function to generate a mountain in the background to complete the scene.

sketch – CopyDownload

var telephonePoles = [];
var images = [];
var showImage = [];
var mountainValue = [];
var noiseParam = 0;
var noiseStep = .1;

function preload() {
    // call loadImage() and loadSound() for all media files here
    images[0] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error-1.png");
    images[1] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/floralshoppe-1.png");
    images[2] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/windows-1.png")
}


function setup() {
	frameRate(100);
    // you can change the next 2 lines:
    createCanvas(480, 480);
    //frameRate(20);
    //create telephonePoles
    for (var i = 0; i < 5; i++){
    	var tx = random(width);
    	var tt = random(1,5);
    	var th = random(50, height/2 - 70);
    	var tb = floor(random(1,4));
    	var pole = makePoles(tx,tt,th,tb);
    	telephonePoles.push(pole);
    	var image = makeImages(random(width/2,width),random(130,310));
    	showImage.push(image);
    }
    for(var i = 0; i <= width/5; i++){
    	var n = noise(noiseParam);
    	var value = map(n,0,1,0,height/2);
    	mountainValue.push(value);
    	noiseParam += noiseStep;
    }
}

var chooseColor;
function draw() {
    // you can replace any of this with your own code:
    //var chooseColor = random(floor(0,5));
    if (chooseColor == 0){
    	background(255,113,206);
    } else if (chooseColor == 1){
    	background(1,205,254);
    } else if (chooseColor == 2){
    	background(5,255,161);
    } else if (chooseColor == 3){
    	background(185,103,255);
    } else {
    	background(255,251,150)
    }
    drawGrid();
    drawMountain();
    for (var i = 0; i < 5; i++){
    	var t = telephonePoles[i];
    	t.move();
 		t.drawPole();
    }
    for (var i = 0; i < showImage.length; i++){
    	var m = showImage[i];
    	m.moveImg();
    	m.drawImage();
    }
    //image(images[0],random(0,width),height/2);
    drawTrain();
    drawChair();
    drawLegs();
    push();
    translate(width,0);
    scale(-1,1);
    drawChair();
    pop();
    drawDog();
    newPole();
    newImage();
    removeImage();
    removePole();
    moveMountain();
    if (frameCount % 100 == 0){
		chooseColor = floor(random(0,5));
    }
}

function drawTrain() {
	noStroke();
	fill(193,143,171);
	rect(0,0,width,120);
	rect(0,320,width,height);
	fill(221,194,59);
	//window
	beginShape();
		vertex(0,110);
		vertex(width,110);
		vertex(width,330);
		vertex(0,330);
	beginContour();
		vertex(10,320);
		vertex(width-10,320);
		vertex(width-10,120);
		vertex(10,120);
	endContour();
	endShape(CLOSE);
}

function drawChair() {
	noStroke();
	fill(84,68,70);
	beginShape();
		vertex(20,height);
		vertex(20,280);
		curveVertex(40,300);
		curveVertex(50,height);
	endShape(CLOSE);
	rect(30,height - 50, 100, height, 5);
}

function drawDog() {
	fill("white");
	noStroke();
	//head
	circle(400,340,50);
	//body
	fill("white")
	ellipse(400,400,60,100);
	//tail
	fill("black");
	beginShape();
		vertex(395,445);
		curveVertex(405,460);
		vertex(375,470);
		curveVertex(415,460);
		vertex(405,450);
	endShape(CLOSE);
	//ears
	push();
	translate(32,-20);
	quad(350,340,355,370,335,350,347,345);
	pop();
	push();
	translate(287,-20);
	translate(width,0);
	scale(-1,1);
	quad(350,340,355,370,335,350,347,345);
	pop();
}

function drawLegs() {
	//legs
	fill("black");
	rect(370,400,20,50,40);
	push();
	translate(40,0);
	rect(370,400,20,50,40);
	pop();
}

function drawGrid() {
	stroke("white");
	strokeWeight(.5);
	for (var yShift = 0; yShift < height/2; yShift += 10){
		line(0,height/2 + yShift,width,height/2 + yShift);
	}
	for (var xShift = -width*40; xShift < width*40; xShift += 60){
		line(width/2,height/2,xShift,height);
	}
}

function poleDraw() {
	noStroke();
	fill("black");
	//trunk
	push();
	translate(0,-this.tall);
	rect(this.x,height/2,this.thickness, this.tall);
	//beams
	for (var i = 0;i < this.beamNumber; i++){
		rect(this.x - 20,height/2, 40, this.thickness/2);
		translate(0, this.thickness);
	}
	pop();
}

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

function newPole() {
	var newPoleProb = .7;
	if (random(0,1) < newPoleProb){
		telephonePoles.push(makePoles(width,random(1,5),random(50, height/2 - 70),
			floor(random(1,4))));
	}
}

function removePole() {
	var polesToKeep = [];
	for (var i = 0; i < telephonePoles.length; i++){
		if(telephonePoles[i].x > 0){
			polesToKeep.push((telephonePoles[i]));
		}
	}
	telephonePoles = polesToKeep;
}

function removeImage() {
	var imageKeep = [];
	for (var i = 0; i < showImage.length; i++){
		if(showImage[i].x > 0) {
			imageKeep.push(showImage[i]);
		}
	}
	showImage = imageKeep;
}

function newImage() {
	var newImageProb = .009;
	if (random(0,1) < newImageProb){
		showImage.push(makeImages(width,random(130,310)));
	}
}
function makePoles(poleX, poleThick, poleHeight,poleBeam) {
	var telephonePole = {x: poleX, thickness: poleThick,
				speed: -1.0, drawPole: poleDraw,
				tall: poleHeight, beamNumber: poleBeam,
				move: poleMove}
	return telephonePole;
}

function imageDisplay(){
	image(images[this.chooseImage],this.x,this.y);
}

function imageMove(){
	this.x += this.speed;
}
function makeImages(imageX,imageY) {
	var m = {x: imageX, y: imageY,
			speed: random(-6.0,-1.0),
			chooseImage: floor(random(0,images.length)),
			drawImage: imageDisplay, moveImg: imageMove};
	return m;
}

function drawMountain() {
	noStroke();
	fill(0,100);
	for( var i = 0; i < width/5; i++){
	beginShape();
		vertex(0,height/2);
		for( var i = 0; i <= width/5; i++){
			vertex(5*i,mountainValue[i]);
			vertex(5*(i+1),mountainValue[i+1]);
		}
		vertex(width,height/2);
	endShape(CLOSE);
	}
}

function moveMountain() {
	mountainValue.shift();
	var n = noise(noiseParam);
	var value = map(n,0,1,0,height/2);
	mountainValue.push(value);
	noiseParam += noiseStep;
}

Looking Outwards 11

A project that I find inspiring is the Ideogenetic Machine (2011) by Nova Jiang. The project is an installation that uses a custom software to combine the artist’s drawings with portraits of people interacting with the installation. The installation features a camera that captures images of the people and draws them into panels of the comic. I admire this installation because it elevates any person into the hero of a unique story. With this installation, anybody can be the protagonist of an epic tale.

Nova Jiang is an artist that creates sculptures and installations, many of which are interactive. She studied at UCLA to get her Master of Fine Arts in Media Art. She currently works in Los Angeles, but has exhibited her work throughout the world.

Image created by Nova Jiang’s Ideogenetic Machine

Project 11: Generative Landscape (Among Us)

For this project, I wanted to make my landscape like you are scrolling through the cafeteria in the Among Us game with different crewmates (dead or alive) moving past you.

amongus
var diams = [];
var lastOdd = false;
var crewMate = makeCharacter(160, 250);
var buddies = [];


function setup() {
    createCanvas(400, 600);
    background(165,167,154);
    //set up the grid for the cafeteria floor tiles
    for (var row=0; row < 7; row++){
    	d_row = []
    	if (row % 2 == 0) {
    		for (var col=0; col < 4; col++){
    			if (col % 2 == 0) {
    				d_row.push(smallDiamond(col*105, row*105+35))
    			}
    			else {
    				d_row.push(bigDiamond(col*105+35, row*105+35)) 
    			}
    		}
    		diams.push(d_row)
    	}
    	else {
    		for (var col=0; col < 5; col++){
    			if (col % 2 == 0){
    				d_row.push(bigDiamond(col*105+35, row*105+35))
    			}
    			else{
    				d_row.push(smallDiamond(col*105, row*105+35))
    			}
    		}
    		diams.push(d_row)
    	}
    }
    //set up the array for the crew members that appear
    for (var i=0; i < 3; i++) {
    	buddies[i] = (makeCrew());
    }
    frameRate(8);
}

function draw() {
	background(165,167,154);
	displayDiamond();
	updateFloor();
	elimRow();
	updateRow();
	crewMate.draw();
	crewMate.update();
	drawbuddies();
	removebuddies();
	addMate();
	updatebuddies();
}
//update the among us character function drawn so the guy looks like he is walking
function updateCharacter(){
	if (this.pos == 5){
		this.pos = 1;
	}
	else {
		this.pos += 1;
	}
}
//display character with x, y positions and color associated to them
function drawCharacter() {
	if (this.pos == 1) {
		push();
		translate(this.charx, this.chary);
		AmongUs1(color(this.col));
		pop();
	}
	else if (this.pos == 2) {
		push();
		translate(this.charx, this.chary);
		AmongUs2(color(this.col));
		pop();
	}
	else if (this.pos == 3) {
		push();
		translate(this.charx, this.chary);
		AmongUs3(color(this.col));
		pop();
	}
	else if (this.pos == 4) {
		push();
		translate(this.charx, this.chary);
		AmongUs4(color(this.col));
		pop();
	}
	else {
		push();
		translate(this.charx, this.chary);
		AmongUs5(color(this.col));
		pop();
	}
}

//make the guy an object
function makeCharacter(x, y) {
	var c = getColor();
	var guy = {charx: x, chary: y, pos: 1, update: updateCharacter, draw: drawCharacter, col: c}
	return guy;
}

//display crew with x, y positions and color associated to them
function drawCrew() {
	if (this.fig == 0) {
		if (this.pos == 1) {
			push();
			translate(this.charx, this.chary)
			AmongUs1(color(this.col));
			pop();
		}
		else if (this.pos == 2) {
			push();
			translate(this.charx, this.chary)
			AmongUs2(color(this.col));
			pop();
		}
		else if (this.pos == 3) {
			push();
			translate(this.charx, this.chary)
			AmongUs3(color(this.col));
			pop();
		}
		else if (this.pos == 4) {
			push();
			translate(this.charx, this.chary)
			AmongUs4(color(this.col));
			pop();
		}
		else {
			push();
			translate(this.charx, this.chary)
			AmongUs5(color(this.col));
			pop();
		}
	}
	else {
		push();
		translate(this.charx, this.chary)
		Dead1(color(this.col));
		pop();
	}
}
//updates crewmate positions with different speeds (to go down canvas if walking and up if dead)
function updateCrew() {
	if (this.fig == 0) {
		this.chary += this.speed;
		if (this.pos == 5) {
			this.pos = 1;
		}
		else {
			this.pos += 1
		}
	}
	else {
		this.chary -= this.speed;
	}
}
//choose a random x position for newly generated crewmates
function getX() {
	var x = random(20, 330)
	if (x >= 160) {
		x += 70;
	}
	else {
		x -= 20;
	}
	return x;
}
//choose starting position at top of canvas for walking crewmates and bottom for dead crewmates so it looks like they are all moving with the screen
function start(f) {
	if (f == 0) {
		return 0
	}
	else {
		return 600
	}
}
//return a random speed from the array, to be assigned to individual crewmate
function getVelocity(status) {
	if (status == 0){
		return Math.floor(random(1,6));
	}
	else {
		return 5;
	}
}
//return a random color from the array, to be assigned to individual crewmate
function getColor() {
	var cols = ['red', 'orange', 'yellow', 'limegreen', 'green', 'blue', 'cyan', 'hotpink', 'brown', 'gray', 'white'];
	var index = Math.floor(Math.random() * cols.length)
	return cols[index];
}

//assign object properties to the crew (crewmates onscreen)
function makeCrew() {
	var x = getX();
	var f = Math.floor(random(0,2));
	var y = start(f);
	var v = getVelocity(f);
	var c = getColor();
	var crew = {charx: x, chary: y, speed: v, update: updateCrew, pos: 1, fig: f, draw: drawCrew, col: c}
	return crew
}
//draw new crewmates
function drawbuddies() {
	for (var i=0; i < buddies.length; i++){
		buddies[i].draw();
	}
}

function updatebuddies() {
	for (var i=0; i < buddies.length; i++){
		buddies[i].update();
	}
}
//remove crewmates as they pass offscreen
function removebuddies() {
	keep = []
	for (var i=0; i < buddies.length; i++){
		if (buddies[i].chary +600 > 0) {
			keep.push(buddies[i])
		}
	}
	buddies = keep;
}
//add new crewmates with a probability of 2%
function addMate() {
	var threshold = 0.02
	if (random(0,1) < threshold) {
		buddies.push(makeCrew())
	}
}
//draw all the stages of walking for one crewmate
function AmongUs1(c) {
	stroke(0);
	strokeWeight(5);
	fill(c)
	//backpack
	beginShape();
	curveVertex(16,23);
	curveVertex(4,28);
	curveVertex(4,57);
	curveVertex(18,62);
	endShape(CLOSE);
	//body
	beginShape();
	curveVertex(20,9);
	curveVertex(15,29);
	curveVertex(15,64);
	curveVertex(21,77);
	curveVertex(32,75);
	curveVertex(33,63);
	curveVertex(39,63);
	curveVertex(42,75);
	curveVertex(52,72);	//front of foot
	curveVertex(57,60);
	curveVertex(56,42);
	curveVertex(59,24);
	curveVertex(50,10);
	curveVertex(35,3);
	endShape(CLOSE);
	//goggles
	fill(204,227,238);
	beginShape();
	curveVertex(31,16);
	curveVertex(56,18);
	curveVertex(59,29);
	curveVertex(55,33);
	curveVertex(32,33);
	curveVertex(24,24);
	endShape(CLOSE);
}

function AmongUs2(c) {
	stroke(0);
	strokeWeight(5);
	fill(c)
	//backpack
	beginShape();
	curveVertex(16,23);
	curveVertex(4,28);
	curveVertex(4,57);
	curveVertex(18,62);
	endShape(CLOSE);
	//back leg
	beginShape();
	curveVertex(15,57);
	curveVertex(5,68);
	curveVertex(19,78);
	curveVertex(34,63);
	endShape(CLOSE);
	//body
	beginShape();
	curveVertex(22,6);
	curveVertex(15,30);
	curveVertex(15,56);
	curveVertex(24,65);
	curveVertex(34,65);
	curveVertex(42,66);
	curveVertex(55,79);
	curveVertex(68,70);
	curveVertex(52,59);	//front of foot
	curveVertex(55,47);
	curveVertex(55,34);
	curveVertex(58,21);
	curveVertex(47,7);
	curveVertex(33,2);
	endShape(CLOSE);
	//goggles
	fill(204,227,238);
	beginShape();
	curveVertex(31,16);
	curveVertex(56,18);
	curveVertex(59,29);
	curveVertex(55,33);
	curveVertex(32,33);
	curveVertex(24,24);
	endShape(CLOSE);
}
function AmongUs3(c) {
	stroke(0);
	strokeWeight(5);
	fill(c)
	//backpack
	beginShape();
	curveVertex(16,23);
	curveVertex(4,28);
	curveVertex(4,57);
	curveVertex(18,62);
	endShape(CLOSE);
	//back leg
	beginShape();
	curveVertex(46,56);
	curveVertex(48,73);
	curveVertex(19,72);
	curveVertex(19,62);
	endShape(CLOSE);
	//body
	beginShape();
	curveVertex(19,10);
	curveVertex(15,35);
	curveVertex(17,61);
	curveVertex(25,68);
	curveVertex(28,75);
	curveVertex(24,83);
	curveVertex(36,82);
	curveVertex(41,71);
	curveVertex(39,60);	//front of foot
	curveVertex(49,58);
	curveVertex(57,50);
	curveVertex(56,35);
	curveVertex(58,25);
	curveVertex(54,14);
	curveVertex(45,8);
	curveVertex(32,4);
	endShape(CLOSE);
	//goggles
	fill(204,227,238);
	beginShape();
	curveVertex(31,16);
	curveVertex(56,18);
	curveVertex(59,29);
	curveVertex(55,33);
	curveVertex(32,33);
	curveVertex(24,24);
	endShape(CLOSE);
}
function AmongUs4(c) {
	stroke(0);
	strokeWeight(5);
	fill(c)
	//backpack
	beginShape();
	curveVertex(16,23);
	curveVertex(4,28);
	curveVertex(4,57);
	curveVertex(18,62);
	endShape(CLOSE);
	//back leg
	beginShape();
	curveVertex(40,60);
	curveVertex(56,79);
	curveVertex(66,65);
	curveVertex(54,52);
	endShape(CLOSE);
	//body
	beginShape();
	curveVertex(25,4);
	curveVertex(16,24);
	curveVertex(15,54);
	curveVertex(19,61);
	curveVertex(8,61);
	curveVertex(5,74);
	curveVertex(19,76);
	curveVertex(28,69);
	curveVertex(32,63);	//front of foot
	curveVertex(45,63);
	curveVertex(56,56);
	curveVertex(58,38);
	curveVertex(58,26);
	curveVertex(54,12);
	curveVertex(43,3);
	endShape(CLOSE);
	//goggles
	fill(204,227,238);
	beginShape();
	curveVertex(31,16);
	curveVertex(56,18);
	curveVertex(59,29);
	curveVertex(55,33);
	curveVertex(32,33);
	curveVertex(24,24);
	endShape(CLOSE);
}
function AmongUs5(c) {
	stroke(0);
	strokeWeight(5);
	fill(c)
	//backpack
	beginShape();
	curveVertex(16,23);
	curveVertex(4,28);
	curveVertex(4,57);
	curveVertex(18,62);
	endShape(CLOSE);
	//back leg
	beginShape();
	curveVertex(32,61);
	curveVertex(34,76);
	curveVertex(49,76);
	curveVertex(50,56);
	endShape(CLOSE);
	//body
	beginShape();
	curveVertex(24,3);
	curveVertex(17,24);
	curveVertex(16,51);
	curveVertex(15,59);
	curveVertex(23,59);
	curveVertex(10,64);
	curveVertex(12,72);
	curveVertex(32,70);
	curveVertex(37,62);	//front of foot
	curveVertex(49,62);
	curveVertex(56,54);
	curveVertex(58,34);
	curveVertex(58,23);
	curveVertex(54,13);
	curveVertex(47,5);
	curveVertex(35,1);
	endShape(CLOSE);
	//goggles
	fill(204,227,238);
	beginShape();
	curveVertex(31,16);
	curveVertex(56,18);
	curveVertex(59,29);
	curveVertex(55,33);
	curveVertex(32,33);
	curveVertex(24,24);
	endShape(CLOSE);
}
//draw a dead crewmate
function Dead1(c) {
	stroke(0);
	strokeWeight(5);
	fill(255);
	//bone sticking out
	beginShape();
	curveVertex(33,39);
	curveVertex(32,29);
	curveVertex(27,22);
	curveVertex(32,18);
	curveVertex(35,23);
	curveVertex(37,17);
	curveVertex(41,21);
	curveVertex(38,32);
	curveVertex(38,42);
	endShape(CLOSE);
	fill(c);
	//arm
	beginShape();
	curveVertex(2,39);
	curveVertex(12,34);
	curveVertex(20,38);
	curveVertex(18,60);
	curveVertex(6,59);
	endShape(CLOSE);
	//half body
	beginShape();
	curveVertex(15,37);
	curveVertex(28,40);
	curveVertex(34,37);
	curveVertex(44,40);
	curveVertex(58,38);
	curveVertex(57,66);
	curveVertex(45,74);
	curveVertex(41,62);
	curveVertex(35,62);
	curveVertex(32,74);
	curveVertex(17,73);
	curveVertex(14,49);
	endShape(CLOSE);

}
//draw the cafeteria floor
//make small diamond tile object
function smallDiamond(x, y) {
	var diamond = {diamondx: x, diamondy: y, diamondw: 70, diamondh: 35, speed: -5.0, draw: drawDiamond, update: updateDiamond}
	return diamond;
}
//draw small diamond
function drawDiamond() {
	noStroke();
	fill(133,135,124);
	beginShape();
	vertex(this.diamondx,this.diamondy);
	vertex(this.diamondx+this.diamondw/2,this.diamondy-this.diamondh);
	vertex(this.diamondw+this.diamondx, this.diamondy);
	vertex(this.diamondx+this.diamondw/2,this.diamondy+this.diamondh);
	endShape(CLOSE);
}
//update position of the tile with speed
function updateDiamond() {
	this.diamondy += this.speed;
}
//make big diamond tile object
function bigDiamond(cx, cy) {
	var bigdiam = {leftD: smallDiamond(cx-70, cy), topD: smallDiamond(cx-35, cy-35), rightD: smallDiamond(cx, cy), bottomD: smallDiamond(cx-35, cy+35), draw: drawBigDiamond, update: updateBigDiamond}
	return bigdiam;
}
//make big diamond tile from smaller diamond tiles
function drawBigDiamond() {
	this.leftD.draw()
	this.topD.draw()
	this.rightD.draw()
	this.bottomD.draw()
}
//update position of big diamond tiles
function updateBigDiamond() {
	this.leftD.update();
	this.topD.update();
	this.rightD.update();
	this.bottomD.update();
}
//draw the diamonds
function displayDiamond() {
	for (var i=0; i < diams.length; i++){
		for (var j=0; j < diams[i].length; j++){
			diams[i][j].draw();
		}
	}
}
//update the positons of the diamonds as the screen scrolls
function updateFloor() {
	for (var i=0; i < diams.length; i++) {
		for (var j=0; j < diams[i].length; j++) {
			diams[i][j].update();
		}
	}
}
//get rid of rows that have slipped offscreen
function elimRow(){
	keepRow = false;
	for (var i=0; i < diams[0].length; i++) {
		if (lastOdd == false){
			if (i % 2 == 0) {
				if (diams[0][i].diamondy + diams[0][i].diamondh > 0) {
					keepRow = true
				}
			}
			else {
				if (diams[0][i].bottomD.diamondy + diams[0][i].bottomD.diamondh > 0){
					keepRow = true
				}
			}
		}
		else {
			if (i % 2 == 0) {
				if (diams[0][i].bottomD.diamondy + diams[0][i].bottomD.diamondh > 0){
					keepRow = true
				}
			}
			else {
				if (diams[0][i].diamondy + diams[0][i].diamondh > 0){
					keepRow = true
				}
			}
		}
	}
	if (keepRow == false){
		diams.shift();
	}
}
//update the new rows added such that they match the original cafeteria tile pattern
function updateRow() {
	if (diams.length < 7){
		n_row = []
		if (lastOdd == true){
			for (var col=0; col < 4; col++){
				if (col % 2 == 0) {
	    			n_row.push(smallDiamond(col*105, 665))
	    		}
	    		else {
	    			n_row.push(bigDiamond(col*105+35, 665)) 
	    		}
			}
			diams.push(n_row);
			lastOdd = false;
		}
		else {
			for (var col=0; col < 5; col++){
	    		if (col % 2 == 0){
	    			n_row.push(bigDiamond(col*105+35, 665))
	    		}
	    		else {
	    			n_row.push(smallDiamond(col*105, 665))
	    		}
	    	}
	    	diams.push(n_row);
	    	lastOdd = true;
		} 
	}
}

Project 11- Generative Landscape

sketchDownload
//Jessie Chen
//D
//Project 11
//Generative Landscape

var kiki = [];
var stars = [];
var clouds = [];
var animation = 0;

function preload() {
    //loads kiki animation frames
    var kikiFrames = [];
    kikiFrames[0] = "https://i.imgur.com/LxKITCM.png";
    kikiFrames[1] = "https://i.imgur.com/535FqDb.png";

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


function setup() {
    createCanvas(400, 300);
    imageMode(CENTER);
    frameRate(5);
    noStroke();

    //create an initial collection of stars
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        var ry = random(height)
        stars[i] = makeStars(rx, ry);
    }

    //creates an initial collection of clouds
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        var ry = random(height);
        clouds[i] = makeClouds(rx, ry);
    }
}

function draw() {
    background(39, 36, 55);

    //draws the moon
    fill(233, 220, 152);
    ellipse(200, 150, 200, 200);


    updateStars();
    removeStars();
    addNewStars();

    updateClouds();
    removeClouds();
    addNewClouds();

    //plays kiki animation
    image(kiki[animation%kiki.length], 200, 150, 270, 200);
    animation ++;
}

//update positions
function updateStars() {
    for (var i = 0; i < stars.length; i++) {
        stars[i].move();
        stars[i].display();
    }
}

//remove stars that have gone off canvas
function removeStars() {
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++) {
        if (stars[i].x < width) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep;
}
//add new stars from the left
function addNewStars() {
    var newStarLikelihood = 0.05; 
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStars(-10, random(0, height)));
    }
}

//stars move to the right
function starsMove() {
    this.x += this.speed;
}

//draws stars
function starsDisplay() {
    fill(233, 220, 152, 100);
    ellipse(this.x, this.y, this.size + 10);
    fill(233, 220, 152)
    ellipse(this.x, this.y, this.size);
}

//stars object
function makeStars(startX, startY) {
    var star = {x: startX,
                y: startY,
                speed: 0.5,
                size: random(2, 5),
                move: starsMove,
                display: starsDisplay}
    return star;
}

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

//remove clouds that have gone off canvas
function removeClouds() {
    var cloudToKeep = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x < width + 100) {
            cloudToKeep.push(clouds[i]);
        }
    }
    clouds = cloudToKeep;
}

//add new clouds from the left
function addNewClouds() {
    var newCloudLikelihood = 0.05; 
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeClouds(-100, random(0, height)));
    }
}

//clouds move to the right
function cloudsMove() {
    this.x += this.speed;
}

//draws clouds
function cloudsDisplay() {
    fill(102, 94, 110, 60);
    noStroke();
    arc(this.x, this.y, 25 * this.size, 20 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 10, this.y, 25 * this.size, 45 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 25, this.y, 25 * this.size, 35 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 40, this.y, 30 * this.size, 20 * this.size, PI + TWO_PI, TWO_PI);
}

//clouds object
function makeClouds(startX, startY) {
    var cloud = {x: startX,
                y: startY,
                speed: 2,
                size: random(0, 8),
                move: cloudsMove,
                display: cloudsDisplay}
    return cloud;
}

This was inspired by Kiki’s Delivery Service by Studio Ghibli. I used Procreate to draw out the animation frames of Kiki and imported them to my code to create a little animation. I was reminded of this scene where she flew on her broom at night, so I decided to base the project on that. As she flies through the sky, accompanied by her cat, Jiji, she moves through clouds and passes stars.

This is my sketch on Procreate.