/*
Aaron Lee
Section C
sangwon2@andrew.cmu.edu
Project-11-Generative Landscape
*/
var stars = [];
function setup() {
createCanvas(400,600);
for (var i = 0; i < 15; i ++) { //initial placement of stars
var starsX = random(width);
var starsY = random(height);
stars[i] = makestars(starsX, starsY);
}
frameRate(10);
}
function draw() {
background("black");
showstars();
deletestars();
makeNewstars();
spaceship();
}
//----------------------------------------stars--------------------------------------------------
function showstars() { //this makes the stars move down
for(var i = 0; i < stars.length; i++) {
stars[i].move();
stars[i].display();
}
}
function deletestars() { //deletes stars that disappear from sight
var starsToKeep = [];
for (var i = 0; i < stars.length; i++) {
if(stars[i].y > 600) {
starsToKeep.push(stars[i]);
}
}
}
function makeNewstars() { //creates more stars coming down
var newstarsLiklihood =0.05
if (random(0,1) < newstarsLiklihood) {
stars.push(makestars(random(width), 0));
}
}
function starsMove() { //sets the move property of stars
this.y += this.speed;
}
function starsDisplay() { //what stars look like
var starsSize = this.starsSize;
fill("#FFFF00");
noStroke();
push();
translate(this.x, this.y);
rotate(frameCount / 200.0);
star(0, 0, 5, 10, 5);
pop();
}
function star(x, y, radius1, radius2, npoints) {
let angle = TWO_PI / npoints;
let halfAngle = angle / 2.0;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + cos(a) * radius2;
let sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a + halfAngle) * radius1;
sy = y + sin(a + halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}
function makestars(birthLocationX, birthLocationY) { //function that makes the stars
var stars = {x : birthLocationX, //stars are born in random places
y : birthLocationY,
speed : random(1, 5), //sets random speed of stars
starsSize : random(10, 25), //sets random size of stars
move : starsMove,
display : starsDisplay}
return stars;
}
//----------------------------------------spaceship--------------------------------------------------
function spaceship() { //function makes the spaceship window frame
fill("#C0C0C0");
strokeWeight(5);
stroke("black");
beginShape();
vertex(0, 600);
vertex(0, 520);
vertex(400, 520);
vertex(400, 600);
endShape(CLOSE);
beginShape();
vertex(0, 80);
vertex(0, 0);
vertex(400, 0);
vertex(400,80);
endShape(CLOSE);
beginShape();
vertex(0, 0);
vertex(80, 0);
vertex(80, 600);
vertex(0, 600);
endShape(CLOSE);
beginShape();
vertex(320, 0);
vertex(400, 0);
vertex(400, 600);
vertex(320, 600);
endShape(CLOSE);
fill("#808080");
ellipse(120, 40, 30, 30);
ellipse(200, 40, 30, 30);
ellipse(280, 40, 30, 30);
ellipse(120, 560, 30, 30);
ellipse(200, 560, 30, 30);
ellipse(280, 560, 30, 30);
}
When I first thought of the generative landscape, I associated with the infinite and the random arrangement of the stars in galaxy. Then I came up with a narrative that a spaceman is observing stars inside the spaceship. Overall I used monotone for the spaceship in order to give focus to the stars
This Much I Worth by Rachel Ara Link : https://www.2ra.co/tmiwfull.html
“This much I’m worth [The self-evaluating Artwork]” by female digital artist Rachel Are is a digital art piece that continually displays its sale value through a series of complex algorithms called “the endorsers”. It is constructed with materials that have a history loaded with association. Implicated in the history of neon is its use in the sex trade, its cultural significance today is more commonly a trope of contemporary art. It is both a functional object and spectacle seeking to question values, worth and algorithmic bias.
//Sean Meng
//hmeng@andrew.cmu.edu
//Section C
//Project-11-Generative Landscape
var sushi = [];
function setup() {
createCanvas(480, 480);
frameRate(50);
//set an initial group of sushi
for (var i = 0; i < 3; i++){
var rx = random(width);
sushi[i] = makeSushi(rx);
}
}
function draw() {
background(255, 200, 200);
//the lattern
fill(30);
rect(60, 20, 40, 160);
rect(78, 0, 5, 20)
fill(235, 70, 70);
stroke(235, 70, 70);
strokeWeight(50);
rect(60, 60, 40, 80)
noStroke();
//ribs on lattern
for(i = 0; i < 8; i++){
fill(120, 0, 0);
rect(35, 57 + i * 12, 90, 1.5);
}
//the belt
fill(50);
rect(0, 320, width, 80);
fill(180);
rect(0, 400, width, 10);
//the table
fill(255, 237, 199);
rect(0, 410, width, 190);
//the plate
fill(255);
ellipse(170, 440, 300, 40);
fill(220);
ellipse(180, 435, 200, 20);
fill(250);
ellipse(186, 438, 180, 20);
//thie chopsticks
fill(250);
rect(385, 435, 35, 10);
fill(128, 55, 0);
quad(400, 430, 405, 430, 455, 480, 443, 480);
fill(128, 55, 0);
quad(390, 430, 395, 430, 435, 480, 425, 480);
updateSushi();
removeSushiOutOfView();
addSushi();
}
function updateSushi() {
for (var i = 0; i < sushi.length; i++) {
sushi[i].move();
sushi[i].display();
}
}
function removeSushiOutOfView() {
//remove sushi from array if it's out of sight
var sushiToKeep = [];
for (var i = 0; i < sushi.length; i++) {
if (sushi[i].x + sushi[i].breadth > 0) {
sushiToKeep.push(sushi[i]);
}
}
sushi = sushiToKeep; //remember the surviving sushi
}
function addSushi() {
//with a very small probability, add a new sushi to the end
var newSushiProb = 0.005;
if (random(0,1) < newSushiProb) {
sushi.push(makeSushi(width));
}
}
function sushiDisplay(){
//rice
stroke(this.c3);
strokeWeight(10);
strokeJoin(ROUND);
fill(this.c3);
rect(this.x, 350, this.breadth, this.height);
//salmon on top of rice
var top = 350 + this.height;
var top2 = 350 + this.height - 5;
stroke(255, this.c1, this.c2);
fill(255, this.c1, this.c2);
rect(this.x - 10, top, this.breadth + 20, 20);
noStroke();
fill(255, this.c1 + 50, this.c2 + 80);
triangle(this.x, top2, this.x + 10, top2, this.x + 5, top + 15);
triangle(this.x + 30, top2, this.x + 40, top2, this.x + 35, top + 15);
triangle(this.x + 60, top2, this.x + 70, top2, this.x + 65, top + 15);
//the kelp
fill(0);
rect(this.x + this.breadth / 2, top2, 30, -this.height + 5);
}
function sushiMove(){
this.x += this.speed;
}
function makeSushi(startX){
var mySushi = {x: startX,
speed: -1.0,
breadth: random(80, 120),
height: -random(50, 70),
c1: random(100, 150),
c2: random(50, 90),
c3: random(240, 255),
move: sushiMove,
display: sushiDisplay}
return mySushi;
}
Concept sketch
In this project, I intend to create this “rotation sushi” scene. Using generative drawing methods, sushi with different shapes, sizes and toppings come out and move along the belt.
Liminoid Garden, by Filipa Valente and Heidi Duckler Dance Theatre, 2014
Filipa Valente is both a practicing architect and experiential designer with experience in major firms and studios. After completing her architectural studies at the Bartlett School of Architecture in London, she went on to obtain her Masters in Media Art and Architecture at SciArc in Los Angeles.
Valente’s project “Liminoid Garden”, in collaboration with the Heidi Duckler Dance Theatre, was an interactive machine assemblage between the city, its users, and the environment. I was particularly drawn to this project because of how the installation was able to respond to real-time environmental data from the city, engaging the audience by promoting awareness. Another cool factor is the interaction between the dancers and the installation and the resulting data visualizations.
// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project-11
// global variables declared to hold objects
// array for tree objects
var trees = []
function setup() {
//color preprared for the gradient effect
c1 = color(250, 100, 0);
c2 = color(204, 143, 0);
createCanvas(480, 480);
frameRate(100);
}
function draw() {
//draw the gradient background
for (var i = 0; i < height; i++) {
var inter = map(i, 70, 110, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, i, width, i);
}
//draw the sun in the background
noStroke();
fill(234, 120, 120, 200);
ellipse(100, 60, 90, 90);
fill(255, 146, 128, 200);
ellipse(100, 60, 76, 76);
mountainBackground(); //mountain
land()
updatetrees();
removetrees();
newtrees();
}
function updatetrees(){
// Update the x positions of the trees and display them
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}
function removetrees(){
//remove the building from the array once it dropped off the left edge
var treesToKeep = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].breadth > 0) {
treesToKeep.push(trees[i]);
}
}
// the exsiting trees will be kept
trees = treesToKeep;
}
function newtrees() {
// add a new tree to the end
var probability = 0.017;
if (random(0,1) < probability) {
trees.push(drawtrees(width));
}
}
//update position of tree every frame
function treesMove() {
this.x += this.speed;
}
//display the trees
function treesDisplay() {
noStroke();
//leaves
fill(50, 235, 173);
triangle(this.x - 15, 350, this.x + 15, 350, this.x, 320);
triangle(this.x - 20, 370, this.x + 20, 370, this.x, 330);
triangle(this.x - 30, 400, this.x + 30, 400, this.x, 350);
//trunk
stroke(194, 245, 228);
line(this.x, 350, this.x, 420);
}
function drawtrees(px) {
var dt = {x: px,
//trees obeject properties
breadth: 30,
speed: -1.0,
move: treesMove,
display: treesDisplay}
return dt;
}
function mountainBackground() {
//makes mountains in the back
terrain = 0.009;
terrain2 = 0.014;
terrainSpeed = 0.0003;
//use noise function to draw random background contour of the furthest mountains
stroke(30, 148, 143,200);
beginShape();
//make slowly rolling hills
for (var j = 0; j < width; j++) {
var t = (j * terrain) + (millis() * terrainSpeed);
var y2 = map(noise(t), 0, 1, 200, 10);
line(j, y2, j, height);
}
endShape();
//use noise function to draw random background contour of the closer mountains
stroke(65, 158, 155);
beginShape();
for (var j = 0; j < width; j++) {
var t = (j * terrain2) + (millis() * terrainSpeed);
var y2 = map(noise(t), 0, 1, 400, 10);
line(j, y2, j, height);
}
endShape();
}
function land() {
//makes the land in the foreground appear
fill(46, 84, 78);
rect(0, 420, 480, 130);
}
When I thought about the “generative landscape”, the first idea that prompted my mind is a landscape with mountains and trees. There are two layers of mountains to show the depth of this generative landscape. There are pine trees in the foreground. I have chosen the colors strategically so that the whole composition can be read clearly and aesthetically pleasing.
// Timothy Liu
// 15-104, Section C
// tcliu@andrew.cmu.edu
// OpenProject-11
var cowArray = []; // array for all cows
var birdArray = []; // array for all birds
// variables to control the shape and speed of the rows of trees
var backTreesStructure = 0.04;
var backTreesSpeed = 0.0009;
var frontTreesStructure = 0.04;
var frontTreesSpeed = 0.0009;
// hill in the front
var rollingPlain = 0.005;
var rollingPlainSpeed = 0.0001;
function setup() {
createCanvas(600, 240);
// start with 3 cows on the screen
for (var i = 0; i < 3; i++){
var cowPlacement = random(0, width);
cowArray[i] = cowObj(cowPlacement); // places the 3 cows in random locations
}
// draws in birds; start with 5 on the screen
for (var j = 0; j < 5; j++) {
birdArray.push(birdObj(j * 30 + random(40, width - 40),
random(20, 60), random(10, 25))); // gives the birds random x, y, and size
}
frameRate(40);
}
function draw() {
background(124, 196, 230); // sky color
drawTrees(); // draw the two rows of trees first (in the background)
updateAndShowCows(); // draw and have the cows move
updateCowsOffScreen(); // account for when cows move off screen
updateAndShowBirds(); // draw and have the birds move
updateBirdsOffScreen(); // account for when birds move off screen
newCows(); // draws in new cows (from edge of screen)
newBirds(); // draws in new birds (from edge of screen)
}
function drawTrees() {
// the back (darker) row of trees
beginShape();
fill(40, 120, 61);
noStroke();
vertex(0, height);
// use noise function to draw random tree line
for (var x = 0; x < width; x++) {
var t = (x * backTreesStructure) + (millis() * backTreesSpeed);
var y = map(noise(t), 0, 1, 40, 150);
vertex(x, y);
}
vertex(width, height);
endShape();
// the front (lighter) row of trees
beginShape();
fill(50, 168, 82);
noStroke();
vertex(0, height);
//use noise function to draw random, lower tree line to create depth
for (var x = 0; x < width; x++) {
var t = (x * frontTreesStructure) + (millis() * frontTreesSpeed);
var y = map(noise(t * 0.7), 0, 1, 80, 200);
vertex(x, y);
}
vertex(width, height);
endShape();
// the light-green hills in front
beginShape();
fill(154, 196, 118);
noStroke();
vertex(0, height);
// use a dampened version of the noise function to make slowly rolling hills
for (var x = 0; x < width; x++) {
var t = (x * rollingPlain) + (millis() * rollingPlainSpeed);
var y = map(noise(t * 0.5), 0, 1, 170, 200);
vertex(x, y);
}
vertex(width, height);
endShape();
}
// puts the cows on the canvas and makes them move
function updateAndShowCows(){
for (var i = 0; i < cowArray.length; i++){
cowArray[i].move(); // move property of the cow obj
cowArray[i].show(); // show property of the bird obj
}
}
// puts the birds on the canvas and makes them move
function updateAndShowBirds(){
for (var i = 0; i < birdArray.length; i++){
birdArray[i].moveB(); // move property of the bird obj
birdArray[i].showB(); // show property of the bird obj
}
}
// eliminates the cows that move off screen
function updateCowsOffScreen(){
var cowsToKeep = []; // to determine which cows are still on screen
for (var i = 0; i < cowArray.length; i++) {
if (cowArray[i].x + cowArray[i].cowWidth > 0) { // if the cow is still on the screen
cowsToKeep.push(cowArray[i]); // put it into the new array
}
}
// cowsToKeep[] becomes the new array of cows currently on screen
cowArray = cowsToKeep;
}
// eliminates the birds that move off screen
function updateBirdsOffScreen(){
var birdsToKeep = []; // to determine which birds are still on screen
for (var i = 0; i < birdArray.length; i++) {
if (birdArray[i].bx + birdArray[i].sizeOfBird > 0) { // if the bird is still on the screen
birdsToKeep.push(birdArray[i]); // put it into the new array
}
}
// birdsToKeep[] becomes the new array of birds currently on screen
birdArray = birdsToKeep;
}
// occasionally, add a new cow to the end of the screen
function newCows() {
var newCowOdds = 0.008;
if (random(0, 1) < newCowOdds) {
cowArray.push(cowObj(width)); // add a new cow to the array
}
}
// occasionally, add a new bird to the end of the screen
function newBirds() {
var newBirdOdds = 0.008;
if (random(0, 1) < newBirdOdds) {
birdArray.push(birdObj(width, random(20, 50), random(10, 25))); // add a new bird to the array
}
}
// makes the cows move
function movingCows() {
this.x += this.speed;
}
// makes the birds move
function movingBirds() {
this.bx += this.speedBird;
}
// this is what actually draws in, and displays, the cows using various cow object properties
function showCows() {
var cowPlacement = this.randomLoc;
var earOffset = 7;
var headOffset = 15;
var eyeOffset = 10;
var spot2Offset = 5;
var spot3Offset = 4;
var snoutOffset = 6;
push();
translate(this.x, height); // places the cows onto the canvas
// shadow
noStroke();
fill(7, 66, 25);
ellipse(0, -cowPlacement + 10, this.cowWidth, this.cowHeight / 4);
// cow body
fill(this.randomColor);
arc(0, -cowPlacement, this.cowWidth, this.cowHeight * 0.75, 2 * PI / 3, PI / 3, CHORD);
// cow ears
arc(-headOffset - earOffset, -cowPlacement - headOffset, this.earW, this.earW * 0.75, 4 * PI / 3, PI / 3, CHORD);
arc(-headOffset + earOffset, -cowPlacement - headOffset, this.earW, this.earW * 0.75, 2 * PI / 3, 5 * PI / 3, CHORD);
// cow head
ellipse(-headOffset, -(cowPlacement + eyeOffset), this.cowHead * 1.25, this.cowHead);
// three spots
fill(0);
ellipse(this.spot1, -cowPlacement, this.spotW, this.spotH);
ellipse(this.spot2, -cowPlacement + spot2Offset, this.spotW * 1.2, this.spotH);
ellipse(this.spot3, -cowPlacement - spot3Offset, this.spotW, this.spotH * 1.2);
// eyes
ellipse(-18, -cowPlacement - eyeOffset, this.eye, this.eye * 1.2);
ellipse(-12, -cowPlacement - eyeOffset, this.eye, this.eye * 1.2);
// snout
fill("#eba4dd");
ellipse(-15, -(cowPlacement + snoutOffset), this.snout * 1.6, this.snout);
pop();
}
// this is what actually draws in, and displays, the birds using various bird object properties
function showBirds() {
var birdBod = 5; // body size of bird
noFill();
stroke(0);
strokeWeight(2);
push();
// places and sizes the birds
translate(this.bx, this.by);
scale(this.sizeOfBird / 60);
ellipseMode(CENTER);
// uses arcs and ellipses to draw the wings and body
arc(35, 35, 100, 100, 5 * PI / 4, 3 * PI / 2);
arc(-35, 35, 100, 100, 3 * PI / 2, 7 * PI / 4);
fill(0);
ellipse(0, 0, birdBod, birdBod);
pop();
}
// here are all the properties of the cow object
function cowObj(x) {
let colors = ["#8f6846", "#ffffff", "#918880"] // different colors of cows
// cow obj properties
var cow = {x: x,
cowWidth: random(30, 40), // each cow has a diff size and shape
cowHeight: random(25, 40),
cowHead: random(10, 16),
snout: 7,
spot1: random(-12, -8),
spot2: random(1, 5),
spot3: random(5, 10),
eye: 3,
earW: 8,
spotW: 8,
spotH: 6,
speed: random(-3, -1), // each cow moves at a diff speed
move: movingCows,
show: showCows,
randomLoc: random(35, 60),
randomColor: random(colors), // each cow has a different color
}
return cow;
}
// here are all the properties of the bird object
function birdObj(x, y, size) {
// bird obj properties
var bird = {bx: x,
by: y,
sizeOfBird: size, // each bird has a random size
speedBird: random(-4, -1), // each bird has a random speed
showB: showBirds,
moveB: movingBirds
};
return bird;
}
When I thought about the “generative landscape” prompt for this week’s assignment, one of the first things that came to mind was the scenery during the long road trips my family takes every year from the Bay Area to Southern California. I distinctly remember staring out the window as a kid, watching cows idly graze in fields and the rolling trees and hills zoom by as we drove down I-5. Thus, I wanted to model my project after this landscape because it’s a very fond childhood memory of mine.
An example of a landscape similar to what I was trying to capture in my project.
In my generative landscape, I have cows of all sorts of shapes, colors, and sizes on grassy plains as the screen pans leftward. In the background, rows of trees and grassy hills roll by, and birds fly overhead at varying speeds. My piece is meant to represent an idyllic view of what a kid sees when they stare out the window on a road trip through California’s central valley. The blue sky, the flocking birds, and the vast greenery all convey warmth and happiness. Ultimately, I think it’s the motion and dynamism of my piece that really help capture the feeling of blissfulness.
I have always been interested in games so I was drawn to Chloe Varelidi’s repertoire when looking through the list provided. This particular project is interesting experiment in shared learning and game design. Games are an excellent way to get people interested in art, coding, and design principals. This collaborative method of making and sharing mini-games is an excellent way for people to begin their exploration of games, art, and code.
Collaboration is another well done element of this project. There is a focus on working and learning together so that a greater thing can be made. Each mini game may only be a couple minutes long, but in total, this project could create hours and hours of entertaining content for people to make and share.
Toni Doves is a media artist active in New
York who uses motion sensing for her film, installation and performance. For example,
in her exhibition, participants would see their avatars on screen that emulate
motions.
One of her prominent projects, ‘The dress
that eats soul’, already gives a powerful presence without further explanation
by its appearance. A huge mechanical female sculpture in front of movie screen
emits different lights and effects that follows to the narrative.
According to artist’s description, the sculpture’s
dress is triggered by the movement of the participant and starts to play video
and tell a story. The projection on the overheads follows the direction of the
participant’s head to enhance virtual reality. The video is dubbed with poem
scripted by novelist Rene Steinke. Each video is unique and responsive to the participant’s
movement.
The main reason I picked this artist is mainly due to my passion in cinema which Doves has a serious connection to. I was curious to find what aesthetic and technological impact one could bring to the art of cinema. It was also interesting how she was using responsive features of her work to address and develop personal connections to the participants.
Artist’s website: https://tonidove.com/
The dress that eats soul by Toni Doves, (watch from 22:00 and onward)
Amy Franceschini is an artist and designer who challenges the “certainties” of space and time in a way that brings into inquiry the supposed conflict between mankind and nature. Throughout her work, there are developments of an intertwined relationship between people, nature, and space, in ways that reconfigure understandings of traditional space making. One project by her practice, Future Farmers, is called Wind Theater and it transforms and translates the physical experience of wind into one that is visual and auditory, using its movements to generate color fields. Another project, For Want of a Nail, brings into inquiry the complex history of nuclear energy in New Mexico, as it seeks to develop a dialogue between the materials and those affected by the materials. Franceschini’s work spans a variety of disciplines and challenges the notions of art, architecture, and research in ways that positions the work in intriguing ways.