For the final project we created a code which draws four floor plans designed by Mies Van Der Rohe. Using keys, the program draws the farnsworth house (f), crown hall (c), brick country house (b), or barcelona pavilion (p). By pressing the mouse, the canvas is reset and the new selected building plan is drawn with white lines in a soothing animation. The program uses if statements and turtle graphics to animate the lines.
// ryu kondrup
//emmanuel nwandu
// rkondrup@andrew.cmu.edu
//enwandu@andrew.cmu.edu
// sectionD
// Final_Project
function turtleLeft(d) {
this.angle -= d;
}
function turtleRight(d) {
this.angle += d;
}
function turtleForward(p) {
var rad = radians(this.angle);
var newx = this.x + cos(rad) * p;
var newy = this.y + sin(rad) * p;
this.goto(newx, newy);
}
function turtleBack(p) {
this.forward(-p);
}
function turtlePenDown() {
this.penIsDown = true;
}
function turtlePenUp() {
this.penIsDown = false;
}
function turtleGoTo(x, y) {
if (this.penIsDown) {
stroke(this.color);
strokeWeight(this.weight);
line(this.x, this.y, x, y);
}
this.x = x;
this.y = y;
}
function turtleDistTo(x, y) {
return sqrt(sq(this.x - x) + sq(this.y - y));
}
function turtleAngleTo(x, y) {
var absAngle = degrees(atan2(y - this.y, x - this.x));
var angle = ((absAngle - this.angle) + 360) % 360.0;
return angle;
}
function turtleTurnToward(x, y, d) {
var angle = this.angleTo(x, y);
if (angle < 180) {
this.angle += d;
} else {
this.angle -= d;
}
}
function turtleSetColor(c) {
this.color = c;
}
function turtleSetWeight(w) {
this.weight = w;
}
function turtleFace(angle) {
this.angle = angle;
}
function makeTurtle(tx, ty) {
var turtle = {x: tx, y: ty,
angle: 0.0,
penIsDown: true,
color: color(128),
weight: 1,
left: turtleLeft, right: turtleRight,
forward: turtleForward, back: turtleBack,
penDown: turtlePenDown, penUp: turtlePenUp,
goto: turtleGoTo, angleto: turtleAngleTo,
turnToward: turtleTurnToward,
distanceTo: turtleDistTo, angleTo: turtleAngleTo,
setColor: turtleSetColor, setWeight: turtleSetWeight,
face: turtleFace};
return turtle;
}
var bdis = 1;
//distance line travels per frame, barcelona pavilion
var fdis = 1;
//distance line travels per frame, farnsworth house
var BrVd = 1;
var BrHd = 1;
var CVd = 1;
var CHd = 1;
function setup() {
createCanvas(480, 400);
background(77, 125, 135);
//vertical lines from left to right
bv = makeTurtle(28, 83);
//bv = barcelona pavilion vertical lines
bh = makeTurtle(28, 83);
//bh = barcelona pavilion horizontal lines
// bgv = makeTurtle(width/2, height/2);
// //bgv = barcelona pavilion grid vertical
// bgh = makeTurtle(0, 0);
// //bgh = barcelona pavilion grid horizontal
fv = makeTurtle(31, 197);
//fv = farnsworth house vertical lines
fh = makeTurtle(122, 75);
//fh = farnsworth house horizontal lines
//formatting color and weight for barcelona pavilion lines
bv.setColor(255);
bv.setWeight(3);
bh.setColor(255);
bh.setWeight(3);
fv.setColor(255);
fv.setWeight(2);
fh.setColor(255);
fh.setWeight(2);
// bgv.setColor(255);
// bgv.setWeight(1);
//
// bgh.setColor(255);
// bgh.setWeight(1);
CV = makeTurtle(185, 94);
CV.setWeight(3);
CV.setColor(255);
// Controls Building geometry oriented along the x-axis of the canvas
CH = makeTurtle(185, 110);
CH.setWeight(3);
CH.setColor(255);
// Building Geometry
// Controls Building Geometry oriented along the y-axis of the canvas for Brick Country House
BrV = makeTurtle(199, 148);
BrV.setColor(255);
BrV.setWeight(1);
BrH = makeTurtle(199, 210);
BrH.setColor(255);
BrH.setWeight(1);
}
// function draw() {
// // if (mouseIsPressed() & mouseX < width/2 && mouseY < height/2) {
// if (mouseX < width/2 && mouseY < height/2) {
// drawBarcelonaPavilion();
// }
// if (mouseX > width/2 & mouseY < height/2) {
// drawCrownHall();
// }
// if (mouseX < width/2 & mouseY > height/2) {
// drawBrickCountryHouse();
//
// }
// if (mouseX > width/2 & mouseY > height/2) {
// drawFarnsworthHouse();
// }
// if (mouseIsPressed) {
// background(77, 125, 135);
// }
//
// }
function draw() {
// if (mouseIsPressed() & mouseX < width/2 && mouseY < height/2) {
if (key == 'P') {
var bdis = 1;
//distance line travels per frame, barcelona pavilion
drawBarcelonaPavilion();
}
if (key == 'C') {
CVd = 1;
CHd = 1;
drawCrownHall();
}
if (key =='B') {
BrVd = 1;
BrHd = 1;
drawBrickCountryHouse();
}
if (key == 'F') {
fdis = 1;
drawFarnsworthHouse();
}
if (mouseIsPressed) {
bdis = 0;
//distance line travels per frame, barcelona pavilion
fdis = 0;
//distance line travels per frame, farnsworth house
BrVd = 0;
BrHd = 0;
CVd = 0;
CHd = 0;
background(77, 125, 135);
}
}
// function draw() {
// function keyPressed() {
// if (keyCode === 66) {
// drawBarcelonaPavilion();
// }
// if (keyCode === 13) {
// drawFarnsworthHouse();
// }
// if (key === 27) {
// drawCrownHall();
// }
// if (key === 42) {
// drawBrickCountryHouse()
// }
// }
// }
function drawBarcelonaPavilion() {
//TO DRAW ALL VERTICAL LINES LEFT TO RIGHT
//to turn right at starting point
if (bv.x == 28 & bv.y == 83) {
bv.right(90);
}
// FIRST LINE (left wall)
//move to line before first vertical door
if (bv.x == 28 & bv.y == 260) {
bv.penUp()
bv.goto(63, 83);
bv.penDown();
bv.setWeight(2);
}
//SECOND LINE
//move to after first door from left
if (bv.x == 63 & bv.y == 101) {
bv.penUp();
bv.goto(63, 108);
bv.penDown();
}
//THIRD LINE
//move to top of second vertical door)
if (bv.x == 63 & bv.y == 127) {
bv.penUp();
bv.goto(80, 83);
bv.penDown();
}
//FOURTH LINE
//move to bottom of vertical door
if (bv.x == 80 & bv.y == 85) {
bv.penUp();
bv.goto(80, 93);
bv.penDown();
}
//FIFTH LINE
//move to top of third vertical wall
if (bv.x == 80 & bv.y == 96) {
bv.penUp();
bv.goto(98, 83);
bv.penDown();
bv.setWeight(3);
}
//SIXTH LINE
//move to bottom segment of third vertical wall
if (bv.x == 98 & bv.y == 98) {
bv.penUp();
bv.goto(98, 113);
bv.penDown();
}
//SEVENTH LINE
//move to first of 2 parallel lines in middle
if (bv.x == 98 & bv.y == 129) {
bv.penUp();
bv.goto(282, 155);
bv.penDown();
bv.setWeight(2);
}
//EIGHT LINE
//move to second of 2 parallel lines in middle
if (bv.x == 282 & bv.y == 208) {
bv.penUp();
bv.goto(292, 155);
bv.penDown();
}
//NINTH LINE
//move to second to last line from right
if (bv.x == 292 & bv.y == 208) {
bv.penUp();
bv.goto(398, 150);
bv.penDown();
}
//TENTH LINE
//move to last line from right (RIGHT WALL)
if (bv.x == 398 & bv.y == 213) {
bv.penUp();
bv.goto(453, 135);
bv.penDown();
bv.setWeight(3);
}
//ELEVENTH LINES
//complete final right line
if (bv.x == 453 & bv.y == 229) {
bv.left(90);
bv.penUp();
bv.goto(28, 83);
bv.right(90);
bv.penDown();
}
//TO DRAW ALL HORIZONTAL LINES TOP TO BOTTOM
//FIRST LINE
//go to the first tiny line before the first horizontal door
if (bh.x == 63 & bh.y == 83) {
bh.penUp();
bh.goto(63, 96);
bh.penDown();
bh.setWeight(2);
}
//SECOND LINE
//go to the tiny line after the first horizontal door
if (bh.x == 71 & bh.y == 96) {
bh.penUp();
bh.goto(80, 96);
bh.penDown();
}
//THIRD LINE
//go to the tiny line after the first horizontal door
if (bh.x == 98 & bh.y == 96) {
bh.penUp();
bh.goto(28, 127);
bh.penDown();
}
//FOURTH LINE
//go to the double room width horizontal line before the door on the left
if (bh.x == 80 & bh.y == 127) {
bh.penUp();
bh.goto(88, 127);
bh.penDown();
}
//FIFTH LINE
//go to the far right exterior horizontal wall
if (bh.x == 98 & bh.y == 127) {
bh.penUp();
bh.goto(340, 135);
bh.penDown();
bh.setWeight(3);
}
//SIXTH LINE
//go to the loooong north wall line in the middle
if (bh.x == 453 & bh.y == 135) {
bh.penUp();
bh.goto(83, 143);
bh.penDown();
}
//SEVENTH LINE
//go to the line conntecting to two parallel lines
if (bh.x == 245 & bh.y == 143) {
bh.penUp();
bh.goto(275, 155);
bh.penDown();
}
//EIGHTH LINE
//go to the standalone horizontal wall on the right
if (bh.x == 359 & bh.y == 155) {
bh.penUp();
bh.goto(334, 175);
bh.penDown();
}
//NINTH LINE
//go to the bottom horizontal line connecting to parallel lines
if (bh.x == 380 & bh.y == 175) {
bh.penUp();
bh.goto(234, 208);
bh.penDown();
bh.setWeight(3);
}
//TENTH LINE
//go to the bottom horizontal wall on right
if (bh.x == 307 & bh.y == 208) {
bh.penUp();
bh.goto(274, 229);
bh.penDown();
bh.setWeight(3);
}
//TENTH LINE
//to change lineweight on bottom right horizontal wall
if (bh.x == 370 & bh.y == 208) {
bh.penUp();
bh.goto(370, 229);
bh.penDown();
}
//ELEVENTH LINE
//go to the bottom left exterior wall
if (bh.x == 453 & bh.y == 229) {
bh.penUp();
bh.goto(28, 261);
bh.penDown();
}
//TWELFTH LINE
//go to the bottom left exterior wall
if (bh.x == 88 & bh.y == 261) {
bh.penUp();
bh.goto(28, 83);
bh.penDown();
}
//TO MOVE THE TURTLES FORWARD
bv.forward(bdis);
bh.forward(bdis);
}
function drawFarnsworthHouse() {
//VERTICAL LINES
if (fv.x == 31 & fv.y == 197) {
fv.right(90);
}
//FIRST LINE on left
if (fv.x == 31 & fv.y == 291) {
fv.penUp();
fv.goto(122, 75);
fv.penDown();
}
//SECOND LINE FROM LEFT (left edge of building mass porch)
if (fv.x == 122 & fv.y == 193) {
fv.penUp();
fv.goto(166, 193);
fv.penDown();
}
//THIRD LINE (top set of stairs left edge)
if (fv.x == 166 & fv.y == 224) {
fv.penUp();
fv.goto(166, 291);
fv.penDown();
}
//FOURTH LINE (bottom set of stairs left edge)
if (fv.x == 166 & fv.y == 311) {
fv.setWeight(3);
fv.penUp();
fv.goto(214, 75);
fv.penDown();
}
//FIFTH LINE (top of double doors wall)
if (fv.x == 214 & fv.y == 121) {
fv.penUp();
fv.goto(214, 150);
fv.penDown();
}
//SIXTH LINE (bottom of double doors wall)
if (fv.x == 214 & fv.y == 193) {
fv.setWeight(2);
fv.penUp();
fv.goto(216, 193);
fv.penDown();
}
//SEVENTH LINE (right edge of top stair)
if (fv.x == 216 & fv.y == 224) {
fv.penUp();
fv.goto(216, 291);
fv.penDown();
}
//EIGHTH LINE (right edge of bottom stair)
if (fv.x == 216 & fv.y == 311) {
fv.penUp();
fv.goto(260, 197);
fv.penDown();
}
//NINTH LINE (rightmost edge of patio)
if (fv.x == 260 & fv.y == 291) {
fv.penUp();
fv.goto(289, 92);
fv.penDown();
}
//TENTH LINE (leftmost edge of wood core above first door)
if (fv.x == 289 & fv.y == 117) {
fv.penUp();
fv.goto(289, 128);
fv.penDown();
}
//ELEVENTH LINE (leftmost edge of wood core below first door)
if (fv.x == 289 & fv.y == 143) {
fv.penUp();
fv.goto(322, 103);
fv.penDown();
}
//TWELFTH LINE (left middle divider of wood core above door)
if (fv.x == 322 & fv.y == 117) {
fv.penUp();
fv.goto(322, 127);
fv.penDown();
}
//THIRTEENTH LINE (left middle divider of wood core below door)
if (fv.x == 322 & fv.y == 138) {
fv.penUp();
fv.goto(356, 103);
fv.penDown();
}
//FOURTEENTH LINE (right middle divider of wood core)
if (fv.x == 356 & fv.y == 138) {
fv.penUp();
fv.goto(390, 92);
fv.penDown();
}
//FIFTEENTH LINE (right divider of wood core above door)
if (fv.x == 390 & fv.y == 117) {
fv.penUp();
fv.goto(390, 128);
fv.penDown();
}
//SIXTEENTH LINE (right divider of wood core below door)
if (fv.x == 390 & fv.y == 143) {
fv.penUp();
fv.goto(404, 134);
fv.penDown();
}
//SEVENTEENTH LINE (left side of standalone right side wall)
if (fv.x == 404 & fv.y == 183) {
fv.penUp();
fv.goto(413, 134);
fv.penDown();
}
//EIGHTEENTH LINE (right side of standalone right side wall)
if (fv.x == 413 & fv.y == 183) {
fv.setWeight(3);
fv.penUp();
fv.goto(443, 75);
fv.penDown();
}
//NINTEENTH LINE (right wall of building)
if (fv.x == 443 & fv.y == 193) {
fv.penUp();
fv.setWeight(2);
fv.goto(31, 197);
fv.penDown();
}
//HORIZONTALS
//FIRST 0.5 LINE (top edge of building (Thin))
if (fh.x == 443 & fh.y == 75) {
fh.penUp();
fh.goto(289, 103);
fh.penDown();
}
//FIRST 0.5 LINE (top edge of building (Thin))
if (fh.x == 443 & fh.y == 75) {
fh.penUp();
fh.goto(289, 103);
fh.penDown();
}
//SECOND LINE (top edge of wood core)
if (fh.x == 443 & fh.y == 103) {
fh.penUp();
fh.goto(289, 103);
fh.penDown();
}
//THIRD LINE (top edge of standalone wall)
if (fh.x == 390 & fh.y == 103) {
fh.penUp();
fh.goto(404, 134);
fh.penDown();
}
//FOURTH LINE (bottom edge of wood core)
if (fh.x == 413 & fh.y == 134) {
fh.penUp();
fh.goto(289, 138);
fh.penDown();
}
//FIFTH LINE (bottom edge of standalone wall)
if (fh.x == 390 & fh.y == 138) {
fh.penUp();
fh.goto(404, 183);
fh.penDown();
}
//SIXTH LINE (bottom wall of building)
if (fh.x == 413 & fh.y == 183) {
fh.penUp();
fh.goto(122, 193);
fh.penDown();
}
//SEVENTH LINE (top edge of top patio left of stair)
if (fh.x == 443 & fh.y == 193) {
fh.penUp();
fh.goto(31, 197);
fh.penDown();
}
//EIGHTH LINE (top edge of top patio right of stair)
if (fh.x == 166 & fh.y == 197) {
fh.penUp();
fh.goto(216, 197);
fh.penDown();
}
//NINTH LINE (first step top stair)
if (fh.x == 259 & fh.y == 197) {
fh.penUp();
fh.goto(166, 204);
fh.penDown();
}
//TENTH LINE (second step top stair)
if (fh.x == 216 & fh.y == 204) {
fh.penUp();
fh.goto(166, 209);
fh.penDown();
}
//ELEVENTH LINE (third step top stair)
if (fh.x == 216 & fh.y == 209) {
fh.penUp();
fh.goto(166, 214);
fh.penDown();
}
//TWELFTH LINE (fourth step top stair)
if (fh.x == 216 & fh.y == 214) {
fh.penUp();
fh.goto(166, 219);
fh.penDown();
}
//THIRTEENTH LINE (fifth step top stair)
if (fh.x == 216 & fh.y == 219) {
fh.penUp();
fh.goto(166, 224);
fh.penDown();
}
//FOURTEENTH LINE (bottom edge of patio)
if (fh.x == 216 & fh.y == 224) {
fh.penUp();
fh.goto(31, 291);
fh.penDown();
}
//FIFTEENTH LINE (first step bottom stair)
if (fh.x == 259 & fh.y == 291) {
fh.penUp();
fh.goto(166, 296);
fh.penDown();
}
//SIXTEENTH LINE (second step bottom stair)
if (fh.x == 216 & fh.y == 296) {
fh.penUp();
fh.goto(166, 301);
fh.penDown();
}
//SEVENTEENTH LINE (third step bottom stair)
if (fh.x == 216 & fh.y == 301) {
fh.penUp();
fh.goto(166, 306);
fh.penDown();
}
//EIGHTEENTH LINE (fourth step bottom stair)
if (fh.x == 216 & fh.y == 306) {
fh.penUp();
fh.goto(166, 311);
fh.penDown();
}
//NINTEENTH LINE (to make it stop)
if (fh.x == 216 & fh.y == 311) {
fh.penUp();
fh.goto(122, 75);
fh.penDown();
}
fv.forward(fdis);
fh.forward(fdis);
// fh.forward(fdis);
}
function drawCrownHall() {
// Turns right at first point to draws first vertical line
if(CV.x == 185 & CV.y == 94){
CV.right(90);
}
// Moves to second point and draws vertical line
if(CV.x == 185 & CV.y == 160){
CV.penUp();
CV.goto(280, 94);
CV.penDown();
}
// Moves to third point and draws vertical line
if(CV.x == 280 & CV.y == 160){
CV.penUp();
CV.goto(230, 110);
CV.penDown();
}
// Moves to fourth point and draws vertical line
if(CV.x == 230 & CV.y == 136){
CV.setWeight(1.5);
CV.penUp();
CV.goto(197, 174);
CV.penDown();
}
// Moves to fifth point and draws vertical line
if(CV.x == 197 & CV.y == 250){
CV.penUp();
CV.goto(265, 174)
CV.penDown();
}
// Moves to sixth point an draws vertical line
if(CV.x == 265 & CV.y == 250){
CV.setWeight(1);
CV.penUp();
CV.goto(175, 185);
CV.penDown();
}
// Draws the seventh vertical line and moves to the eighth
if(CV.x == 175 & CV.y == 220){
CV.penUp();
CV.goto(185, 195);
CV.penDown();
}
// Draws the eight vertical line and moves to the ninth
if(CV.x == 185 & CV.y == 215){
CV.penUp();
CV.goto(195, 185);
CV.penDown();
}
// Draws the ninth vertical line and moves to the tenth
if(CV.x == 195 & CV.y == 220){
CV.penUp();
CV.goto(268, 185);
CV.penDown();
}
// Draws the tenth vertical line and moves eleventh
if(CV.x == 268 & CV.y == 220){
CV.penUp();
CV.goto(278, 195);
CV.penDown();
}
// Draws the eleventh vertical line and moves to the twelfth
if(CV.x == 278 & CV.y == 215){
CV.penUp();
CV.goto(288, 185);
CV.penDown();
}
// Draws the twelfth vertical and moves to the thirteenth
if(CV.x == 288 & CV.y == 220){
CV.penUp();
CV.goto(205, 295);
CV.penDown();
}
// Draws the thirteenth vertical line and moves to the fourteenth
if(CV.x == 205 & CV.y == 315){
CV.penUp();
CV.goto(255, 295);
CV.penDown();
}
// Draws fourteenth vertical line and moves to the fifteenth
if(CV.x == 255 & CV.y == 315){
CV.penUp();
CV.goto(185, 57);
CV.penDown();
}
// Draws fifteenth vertical line and moves to the sixteenth
if(CV.x == 185 & CV.y == 70){
CV.penUp();
CV.goto(190, 57);
CV.penDown();
}
// Draws sixteenth vertical line and moves to the seventeenth
if(CV.x == 190 & CV.y == 70){
CV.penUp();
CV.goto(195, 57);
CV.penDown();
}
// Draws seventeenth vertical line and moves to the eighteenth
if(CV.x == 195 & CV.y == 70){
CV.penUp();
CV.goto(265, 57);
CV.penDown();
}
// Draws the eighteenth vertical line and moves to the nineteenth
if(CV.x == 265 & CV.y == 70){
CV.penUp();
CV.goto(270, 57);
CV.penDown();
}
// Draws nineteenth vertical line and moves to the twentieth
if(CV.x == 270 & CV.y == 70){
CV.penUp();
CV.goto(275, 57);
CV.penDown();
}
// Draws twentieth vertical line and moves to the twenty-first
if(CV.x == 275 & CV.y == 70){
CV.setWeight(1.5);
CV.penUp();
CV.goto(160, 154);
CV.penDown();
}
// Draws twenty-first vertical line and moves to the twenty-second
if(CV.x == 160 & CV.y == 175){
CV.setWeight(1.5);
CV.penUp();
CV.goto(165, 154);
CV.penDown();
}
// Draws twenty-second vertical line and moves to the twenty-third
if(CV.x == 165 & CV.y == 175){
CV.penUp();
CV.goto(297, 154);
CV.penDown();
}
// Draws twenty-third vertical line and moves to the twenty-fourth
if(CV.x == 297 & CV.y == 175){
CV.penUp();
CV.goto(303, 154);
CV.penDown();
}
// Draws twenty-fourth vertical line and moves to twenty fifth
if(CV.x == 303 & CV.y == 175){
CV.setWeight(1);
CV.penUp();
CV.goto(212, 154);
CV.penDown();
}
// Draws twenty-fifth vertical line and moves to the twenty sixth
if(CV.x == 212 & CV.y == 157){
CV.penUp();
CV.goto(250, 154);
CV.penDown();
}
// Draws twenty-sixth vertical line and moves to the twenty-seventh (Entry Stairs)
if(CV.x == 250 & CV.y == 157){
CV.setWeight(3);
CV.penUp();
CV.goto(205, 345);
CV.penDown();
}
// Draws twenty-seventh vertical line and moves to the twenty-eighth (Entry Stairs)
if(CV.x == 205 & CV.y == 355){
CV.penUp();
CV.goto(255, 345);
CV.penDown();
}
// Draws twenty-eighth vertical line and moves to the twenty ninth (Platform)
if(CV.x == 255 & CV.y == 355){
CV.penUp();
CV.goto(180, 295);
CV.penDown();
}
// Draws twenty-ninth vertical line and moves to the thirtieth (Platform)
if(CV.x == 180 & CV.y == 345){
CV.penUp();
CV.goto(285, 295);
CV.penDown();
}
// Draws thirtieth vertical line and moves to the thirty-first(Exterior Building Wall)
if(CV.x == 285 & CV.y == 345){
CV.penUp();
CV.goto(30, 71);
CV.penDown();
}
// Draws thirty-first vertical line and moves to the thirty-second(Exterior Building Wall)
if(CV.x == 30 & CV.y == 295){
CV.penUp();
CV.goto(430, 71);
CV.penDown();
}
// Draws thirty-second vertical (Exterior Building Wall) line and stops
if(CV.x == 430 & CV.y == 295){
// CVd = 0;
CV.penUp();
CV.goto(185, 94);
CV.penDown();
}
// Draws first Horizontal line
if(CH.x == 185 & CH.y == 110){
}
// Draws second horizontal line and moves ot the third
if(CH.x == 280 && CH.y == 110){
CH.penUp();
CH.goto(203, 136);
CH.penDown();
}
// Draws third Horizontal line and moves to the fourth
if(CH.x == 203 & CH.y == 136){
CH.setWeight(1);
CH.penUp();
CH.goto(186, 153);
CH.penDown();
}
// Draws fourth horizontal line and moves to the fifth
if(CH.x == 212 & CH.y == 153){
CH.penUp();
CH.goto(186, 157)
CH.penDown();
}
// Draws fifth horizontal line and moves to the sixth
if(CH.x == 212 & CH.y == 157){
CH.penUp();
CH.goto(250, 153);
CH.penDown();
}
// Draws sixth horizontal line and moves to the seventh
if(CH.x == 280 & CH.y == 153){
CH.penUp();
CH.goto(250, 157);
CH.penDown();
}
// Draws seventh horizontal line and moves to the eighth
if(CH.x == 280 & CH.y == 157){
CH.setWeight(2);
CH.penUp();
CH.goto(160, 154);
CH.penDown();
}
// Draws eighth horizontal line and moves to the ninth
if(CH.x == 165 & CH.y == 154){
CH.penUp();
CH.goto(297, 154);
CH.penDown();
}
// Draws ninth horizontal line and moves to the tenth
if(CH.x == 303 & CH.y == 154){
CH.penUp();
CH.goto(160, 175);
CH.penDown();
}
// Draws tenth horizontal line an moves to the eleventh
if(CH.x == 165 & CH.y == 175){
CH.penUp();
CH.goto(297, 175);
CH.penDown();
}
// Draws eleventh horizontal line and moves to the twelfth
if(CH.x == 303 & CH.y == 175){
CH.setWeight(1);
CH.penUp();
CH.goto(175, 185);
CH.penDown();
}
// Draws twelfth horizontal line and moves to the thirteenth (Stairs)
if(CH.x == 195 & CH.y == 185){
CH.penUp();
CH.goto(268, 185);
CH.penDown();
}
// Draws thirteenth horizontal line and moves the fourteenth (Stairs)
if(CH.x == 288 & CH.y == 185){
CH.penUp();
CH.goto(175, 195);
CH.penDown();
}
// Draws fourteenth horizontal line and moves to the fifteenth (Stairs)
if(CH.x == 195 & CH.y ==195){
CH.penUp();
CH.goto(268, 195);
CH.penDown();
}
// Draws fifteenth horizontal line and moves to the sixteenth (Stairs)
if(CH.x == 288 & CH.y == 195){
CH.penUp();
CH.goto(175, 200);
CH.penDown();
}
// Draws sixteenth horizontal line and moves to the seventeenth (Stairs)
if(CH.x == 195 & CH.y == 200){
CH.penUp();
CH.goto(268, 200);
CH.penDown();
}
// Draws seventeenth horizontal line and moves to the eighteenth (Stairs)
if(CH.x == 288 & CH.y == 200){
CH.penUp();
CH.goto(175, 205);
CH.penDown();
}
// Draws eighteenth horizontal line and moves to the nineteenth (Stairs)
if(CH.x == 195 & CH.y == 205){
CH.penUp();
CH.goto(268, 205);
CH.penDown();
}
// Draws nineteenth horizontal line and moves to the twentieth (Stairs)
if(CH.x == 288 & CH.y == 205){
CH.penUp();
CH.goto(175, 210);
CH.penDown();
}
// Draws twentieth horizontal line and moves to the twenty-first (Stairs)
if(CH.x == 195 & CH.y == 210){
CH.penUp();
CH.goto(268, 210);
CH.penDown();
}
// Draws twenty-first horizontal line and moves to the twenty-second (Stairs)
if(CH.x == 288 & CH.y == 210){
CH.penUp();
CH.goto(175, 215);
CH.penDown();
}
// Draws twenty-second horizontal line and moves to the twenty-third (Stairs)
if(CH.x == 195 & CH.y == 215){
CH.penUp();
CH.goto(268, 215);
CH.penDown();
}
// Draws twenty-third horizontal line and moves to the twenty-fourth (Stairs)
if(CH.x == 288 & CH.y == 215){
CH.penUp();
CH.goto(175, 220);
CH.penDown();
}
// Draws twenty-fourth horizontal line and moves to the twenty-fifth (Stairs)
if(CH.x == 195 & CH.y == 220){
CH.penUp();
CH.goto(268, 220);
CH.penDown();
}
// Draws twenty-fifth horizontal line and moves to the twenty-sixth (Entry Stair)
if(CH.x == 288 & CH.y == 220){
CH.penUp();
CH.goto(205, 305);
CH.penDown();
}
// Draws twenty-sixth horizontal line and moves to the twenty-seventh (Entry Stairs)
if(CH.x == 255 & CH.y == 305){
CH.penUp();
CH.goto(205, 310);
CH.penDown();
}
// Draws twenty-seventh horizontal line and moves to the twenty-eighth (Entry Stairs)
if(CH.x == 255 & CH.y == 310){
CH.penUp();
CH.goto(205, 315);
CH.penDown();
}
// Draws twenty-eighth horizontal line and moves to the twenty-ninth (Entry Stairs)
if(CH.x == 255 & CH.y == 315){
CH.penUp();
CH.goto(185, 57);
CH.penDown();
}
// Draws twenty-ninth horizontal line and moves to the thirtieth (Back Stairs)
if(CH.x == 275 & CH.y == 57){
CH.penUp();
CH.goto(185, 70);
CH.penDown();
}
// Draws thirtieth horizontal line and moves to the thirty-first (Entry Stairs)
if(CH.x == 275 & CH.y == 70){
CH.penUp();
CH.goto(205, 350);
CH.penDown();
}
// Draws thirty-first horizontal line and moves to the thirty-second (Entry Stairs)
if(CH.x == 255 & CH.y == 350){
CH.penUp();
CH.goto(205, 355);
CH.penDown();
}
// Draws thirty-second horizontal line and moves to the thirty-third (Platform)
if(CH.x == 255 & CH.y == 355){
CH.setWeight(3);
CH.penUp();
CH.goto(180, 345);
CH.penDown();
}
// Draws thirty-third horizontal line and moves to the thirty-fourth (Exterior Building Wall)
if(CH.x == 285 & CH.y == 345){
CH.penUp();
CH.goto(30, 71);
CH.penDown();
}
// Draws thirty-fourth horizontal line and moves to the thirty-fifth (Exterior Building Wall)
if(CH.x == 430 & CH.y == 71){
CH.penUp();
CH.goto(30, 295);
CH.penDown();
}
// Draws thrity-fifth horizontal line (Exterior Wall) and stops
if(CH.x == 430 & CH.y == 295){
CH.penUp();
CH.goto(185, 110);
CH.penDown();
}
// Draws
// if(t1.x == 30 & t1.y == 70){
// }
// if(t1.x == 430 && t1.y == 70){
// t1.penUp();
// t1.goto(30, 80);
// t1.penDown();
// }
// if(t1.x == 430 & t1.y == 80){
// t1.penUp();
// t1.goto(30, 90);
// t1.penDown();
// }
// if(t1.x == 430 & t1.y == 90){
// t1.penUp();
// t1.goto(30, 100);
// t1.penDown();
// }
// if(t1.x == 430 & t1.y == 100){
// t1.penUp();
// t1.goto(30, 110);
// t1.penDown();
// }
// if(t1.x == 430 & t1.y == 110){
// t1.penUp();
// t1.goto(30, 120);
// t1.penDown();
// }
// if(t1.x == 430 & t1.y == 110){
// t1.penUp();
// t1.goto(30, 120);
// t1.penDown();
// }
// t1.forward(d);
CV.forward(CVd);
CH.forward(CHd);
}
function drawBrickCountryHouse() {
// Turns right at forst point to draw verticall lines, draws first vertical line
if(BrV.x == 199 & BrV.y == 148){
BrV.right(90);
}
// Moves to second point and draws vertical line
if(BrV.x == 199 & BrV.y == 210){
BrV.penUp();
BrV.goto(225, 148);
BrV.penDown();
}
// Moves to third point and draws vertical line
if(BrV.x == 225 & BrV.y == 210){
BrV.penUp();
BrV.goto(245, 220);
BrV.penDown();
}
// Moves to fourth point and draws vertical line
if(BrV.x == 245 & BrV.y == 280){
BrV.penUp();
BrV.goto(292, 100);
BrV.penDown();
}
// Moves to fifth point and draws vertical line
if(BrV.x == 292 & BrV.y == 118){
BrV.penUp();
BrV.goto(296, 98);
BrV.penDown();
}
// Moves to sixth point and draws vertical line
if(BrV.x == 296 & BrV.y == 115){
BrV.penUp();
BrV.goto(320, 120);
BrV.penDown();
}
// Moves to seventh point and draws vertical line
if(BrV.x == 320 & BrV.y == 132){
BrV.penUp();
BrV.goto(334, 115);
BrV.penDown();
}
// Moves to eight point and draws vertical lines
if(BrV.x == 334 & BrV.y == 167){
BrV.penUp();
BrV.goto(414, 153);
BrV.penDown();
}
// Moves to ninth point and draws vertical lines
if(BrV.x == 414 & BrV.y == 167){
BrV.penUp();
BrV.goto(416, 156);
BrV.penDown();
}
// Moves to tenth point and draws vertical lines
if(BrV.x == 416 & BrV.y == 170){
BrV.penUp();
BrV.goto(343, 207);
BrV.penDown();
}
// Moves to eleventh point and draws vertical lines
if(BrV.x == 343 & BrV.y == 240){
BrV.penUp();
BrV.goto(360, 212);
BrV.penDown();
}
// Moves to twelfth point and draws vertical lines
if(BrV.x == 360 & BrV.y == 280){
BrV.penUp();
BrV.goto(470, 180);
BrV.penDown();
}
// Moves to thirteenth point and draws vertical lines
if(BrV.x == 470 & BrV.y == 186){
BrV.setWeight(3);
BrV.penUp();
BrV.goto(249, 242);
BrV.penDown();
}
// Moves to fourteenth point and draws vertical lines
if(BrV.x == 249 & BrV.y == 275){
BrV.penUp();
BrV.goto(251, 0);
BrV.penDown();
}
// Moves to fifteenth point and draws vertical lines
if(BrV.x == 251 & BrV.y == 120){
BrV.penUp();
BrV.goto(270, 114);
BrV.penDown();
}
// Moves to sixteenth point and draws vertical lines
if(BrV.x == 270 & BrV.y == 150){
BrV.penUp();
BrV.goto(298, 175);
BrV.penDown();
}
// Moves to seventeenth point and draws vertical lines
if(BrV.x == 298 & BrV.y == 243){
BrV.penUp();
BrV.goto(320, 132);
BrV.penDown();
}
// Moves to eighteenth point and draws vertical lines
if(BrV.x == 320 & BrV.y == 177){
BrV.penUp();
BrV.goto(343, 240);
BrV.penDown();
}
// Moves to nineteenth point and draws vertical lines
if(BrV.x == 343 & BrV.y == 399){
BrV.penUp();
BrV.goto(447, 159);
BrV.penDown();
}
// Moves to twentieth point and draws vertical lines
if(BrV.x == 447 & BrV.y == 187){
BrV.penUp();
BrV.goto(461, 185);
BrV.penDown();
}
// Moves to twenty-first point and draws vertical lines
if(BrV.x == 461 & BrV.y == 213){
BrV.penUp();
BrV.goto(476, 187);
BrV.penDown();
}
// Moves to twenty-second point and draws vertical lines
if(BrV.x == 476 & BrV.y == 195){
BrV.setWeight(6)
BrV.penUp();
BrV.goto(389, 170);
BrV.penDown();
}
// Moves to twenty-third point and draws vertical lines
if(BrV.x == 389 & BrV.y == 198){
BrV.setWeight(2)
BrV.penUp();
BrV.goto(420, 192);
BrV.penDown();
}
// Moves to twenty-fourth point and draws vertical lines
if(BrV.x == 420 & BrV.y == 227){
BrV.penUp();
BrV.goto(422, 192);
BrV.penDown();
}
// Moves to twenty-fifth point and draws vertical lines
if(BrV.x == 422 & BrV.y == 227){
BrV.penUp();
BrV.goto(424, 192);
BrV.penDown();
}
// Moves to twenty-sixth point and draws vertical lines
if(BrV.x == 424 & BrV.y == 227){
BrV.penUp();
BrV.goto(426, 192);
BrV.penDown();
}
// Moves to twenty-seventh point and draws vertical lines
if(BrV.x == 426 & BrV.y == 227){
BrV.penUp();
BrV.goto(428, 192);
BrV.penDown();
}
// Moves to twenty-eighth point and draws vertical lines
if(BrV.x == 428 & BrV.y == 227){
BrV.penUp();
BrV.goto(430, 192);
BrV.penDown();
}
// Moves to twenty-ninth point and draws vertical lines
if(BrV.x == 430 & BrV.y == 227){
BrV.penUp();
BrV.goto(199, 148);
BrV.penDown();
// BrV.penUp();
// BrV.goto(430, 192);
// BrV.penDown();
}
// Draws first horizontal line for Brick country House
if(BrH.x == 199 & BrH.y == 210){
}
// Moves to second point and draws horizontal line
if(BrH.x == 217 && BrH.y == 210){
BrH.penUp();
BrH.goto(253, 98);
BrH.penDown();
}
// Moves to third point and draws horizontal line
if(BrH.x == 296 & BrH.y == 98){
BrH.penUp();
BrH.goto(253, 101);
BrH.penDown();
}
// Moves to third point and draws horizontal line
if(BrH.x == 263 & BrH.y == 101){
BrH.penUp();
BrH.goto(245, 280);
BrH.penDown();
}
// Moves to fourth point and draws horizontal line
if(BrH.x == 360 & BrH.y == 280){
BrH.penUp();
BrH.goto(296, 115);
BrH.penDown();
}
// Moves to fifth point and draws horizontal line
if(BrH.x == 334 & BrH.y == 115){
BrH.penUp();
BrH.goto(334, 167);
BrH.penDown();
}
// Moves to sixth point and draws horizontal line
if(BrH.x == 414 & BrH.y == 167){
BrH.penUp();
BrH.goto(332, 170);
BrH.penDown();
}
// Moves to seventh point and draws horizontal line
if(BrH.x == 365 & BrH.y == 170){
BrH.penUp();
BrH.goto(360, 212);
BrH.penDown();
}
// Moves to eighth point and draws horizontal line
if(BrH.x == 420 & BrH.y == 212){
BrH.penUp();
BrH.goto(407, 206)
BrH.penDown();
}
// Moves to ninth point and draws horizontal line
if(BrH.x == 420 & BrH.y == 206){
BrH.penUp();
BrH.goto(414, 153)
BrH.penDown();
}
// Moves to tenth point and draws horizontal line
if(BrH.x == 479 & BrH.y == 153){
BrH.penUp();
BrH.goto(416, 155)
BrH.penDown();
}
// Moves to eleventh point and draws horizontal line
if(BrH.x == 430 & BrH.y == 155){
BrH.penUp();
BrH.goto(430, 221)
BrH.penDown();
}
// Moves to twelfth point and draws horizontal line
if(BrH.x == 447 & BrH.y == 221){
BrH.penUp();
BrH.goto(430, 225)
BrH.penDown();
}
// Moves to thirteenth point and draws horizontal line
if(BrH.x == 479 & BrH.y == 225){
BrH.setWeight(3)
BrH.penUp();
BrH.goto(236, 159)
BrH.penDown();
}
// Moves to fourteenth point and draws horizontal line
if(BrH.x == 303 & BrH.y == 159){
BrH.penUp();
BrH.goto(264, 101)
BrH.penDown();
}
// Moves to fifteenth point and draws horizontal line
if(BrH.x == 290 & BrH.y == 101){
BrH.penUp();
BrH.goto(285, 120)
BrH.penDown();
}
// Moves to sixteenth point and draws horizontal line
if(BrH.x == 330 & BrH.y == 120){
BrH.penUp();
BrH.goto(300, 187)
BrH.penDown();
}
// Moves to seventeenth point and draws horizontal line
if(BrH.x == 330 & BrH.y == 187){
BrH.penUp();
BrH.goto(315, 206)
BrH.penDown();
}
// Moves to eighteenth point and draws horizontal line
if(BrH.x == 406 & BrH.y == 206){
BrH.penUp();
BrH.goto(366, 170)
BrH.penDown();
}
// Moves to nineteenth point and draws horizontal line
if(BrH.x == 416 & BrH.y == 170){
BrH.penUp();
BrH.goto(430, 158)
BrH.penDown();
}
// Moves to twentieth point and draws horizontal line
if(BrH.x == 454 & BrH.y == 158){
BrH.penUp();
BrH.goto(430, 197)
BrH.penDown();
}
// Moves to twenty-first point and draws horizontal line
if(BrH.x == 454 & BrH.y == 197){
BrH.penUp();
BrH.goto(448, 177)
BrH.penDown();
}
// Moves to twenty-second point and draws horizontal line
if(BrH.x == 464 & BrH.y == 177){
BrH.penUp();
BrH.goto(464, 205)
BrH.penDown();
}
// Moves to twenty-third point and draws horizontal line
if(BrH.x == 477 & BrH.y == 205){
BrH.penUp();
BrH.goto(447, 221)
BrH.penDown();
}
// Moves to twenty-fourth point and draws horizontal line
if(BrH.x == 479 & BrH.y == 221){
BrH.penUp();
BrH.goto(250, 275)
BrH.penDown();
}
// Moves to twenty-fifth point and draws horizontal line
if(BrH.x == 306 & BrH.y == 275){
BrH.setWeight(2);
BrH.penUp();
BrH.goto(266, 237)
BrH.penDown();
}
// Moves to twenty-sixth point and draws horizontal line
if(BrH.x == 280 & BrH.y == 237){
BrH.setWeight(2);
BrH.penUp();
BrH.goto(266, 239)
BrH.penDown();
}
// Moves to twenty-seventh point and draws horizontal line
if(BrH.x == 280 & BrH.y == 239){
BrH.penUp();
BrH.goto(266, 241)
BrH.penDown();
}
// Moves to twenty-eigth point and draws horizontal line
if(BrH.x == 280 & BrH.y == 241){
BrH.penUp();
BrH.goto(216, 207)
BrH.penDown();
}
// Moves to twenty-ninth point and draws horizontal line
if(BrH.x == 270 & BrH.y == 207){
BrH.penUp();
BrH.goto(216, 209)
BrH.penDown();
}
// Moves to thirtieth point and draws horizontal line
if(BrH.x == 270 & BrH.y == 209){
BrH.penUp();
BrH.goto(216, 211)
BrH.penDown();
}
// Moves to thirty-first point and draws horizontal line
if(BrH.x == 270 & BrH.y == 211){
BrH.penUp();
BrH.goto(216, 213)
BrH.penDown();
}
// Moves to thirty-second point and draws horizontal line
if(BrH.x == 270 & BrH.y == 213){
BrH.penUp();
BrH.goto(216, 215)
BrH.penDown();
}
// Moves to thirty-third point and draws horizontal line
if(BrH.x == 270 & BrH.y == 215){
BrH.penUp();
BrH.goto(216, 217)
BrH.penDown();
}
// Moves to thirty-fourth point and draws horizontal line
if(BrH.x == 270 & BrH.y == 217){
BrH.penUp();
BrH.goto(216, 219)
BrH.penDown();
}
// Moves to thirty-fifth point and draws horizontal line
if(BrH.x == 270 & BrH.y == 219){
BrH.setWeight(4)
BrH.penUp();
BrH.goto(0, 150)
BrH.penDown();
}
// Moves to thirty-fifth point and draws horizontal line
if(BrH.x == 270 & BrH.y == 150){
BrH.penUp();
BrH.goto(199, 210);
BrH.setWeight(1);
BrH.penDown();
// BrH.penUp();
// BrH.goto(0, 147)
// BrH.penDown();
}
BrV.forward(BrVd);
BrH.forward(BrHd);
}
For my project I would like to create an animation which draws iconic 20th century buildings by Mies Van Der Rohe such as the Barcelona Pavilion, the Brick Country House, and the IIT Crown Hall. The canvas would start blank and the user would click or push a button to initiate the drawing animation, which gradually draws the outlines of a chosen building and when the user interacts with the canvas after the drawing completes, possibly by dragging the mouse, an underlying perspective photograph of the building reveals and matches the linework of the building already on top. After the full colored image is revealed the user would be redirected to a rendering of another building in the Mies buildings list. The drawings may possibly be done using turtle graphics.
This project will be in collaboration with Emmanuel Nwandu.
I am very interested in generative artwork which produces different landscapes or forms. Two artists whose work inspires me are Glenn Marshall and Markos Kay, both of whom work heavily in generating complex images of 3d landscapes and forms. While I do not believe I am experienced enough in coding to generate believably 3d works, I nevertheless am very inspired by the possibilities of illusory distance and atmosphere produced in the following generated images. I also am interested in how lines, colors, and images can combine to form some greater image seen from a distance, as was done by Glenn Marshall here:
or how lines can be animated to gradually illustrate a final image, like here:
Above and beyond all else I wish to produce something which is dynamic and pleasing to watch, and which extends, in some way, beyond the 2d frame of the html window.
// ryu kondrup
// rkondrup@andrew.cmu.edu
// sectionD
// assignment10A
// makeTurtle(x, y) -- make a turtle at x, y, facing right, pen down
// left(d) -- turn left by d degrees
// right(d) -- turn right by d degrees
// forward(p) -- move forward by p pixels
// back(p) -- move back by p pixels
// penDown() -- pen down
// penUp() -- pen up
// goto(x, y) -- go straight to this location
// setColor(color) -- set the drawing color
// setWeight(w) -- set line width to w
// face(d) -- turn to this absolute direction in degrees
// angleTo(x, y) -- what is the angle from my heading to location x, y?
// turnToward(x, y, d) -- turn by d degrees toward location x, y
// distanceTo(x, y) -- how far is it to location x, y?
//global variables
var brighten = 25;
var x = [];
var y = [];
var starSize = [];
//TURTLE CODE
function turtleLeft(d) {
this.angle -= d;
}
function turtleRight(d) {
this.angle += d;
}
function turtleForward(p) {
var rad = radians(this.angle);
var newx = this.x + cos(rad) * p;
var newy = this.y + sin(rad) * p;
this.goto(newx, newy);
}
function turtleBack(p) {
this.forward(-p);
}
function turtlePenDown() {
this.penIsDown = true;
}
function turtlePenUp() {
this.penIsDown = false;
}
function turtleGoTo(x, y) {
if (this.penIsDown) {
stroke(this.color);
strokeWeight(this.weight);
line(this.x, this.y, x, y);
}
this.x = x;
this.y = y;
}
function turtleDistTo(x, y) {
return sqrt(sq(this.x - x) + sq(this.y - y));
}
function turtleAngleTo(x, y) {
var absAngle = degrees(atan2(y - this.y, x - this.x));
var angle = ((absAngle - this.angle) + 360) % 360.0;
return angle;
}
function turtleTurnToward(x, y, d) {
var angle = this.angleTo(x, y);
if (angle < 180) {
this.angle += d;
} else {
this.angle -= d;
}
}
function turtleSetColor(c) {
this.color = c;
}
function turtleSetWeight(w) {
this.weight = w;
}
function turtleFace(angle) {
this.angle = angle;
}
function makeTurtle(tx, ty) {
var turtle = {x: tx, y: ty,
angle: 0.0,
penIsDown: true,
color: color(128),
weight: 1,
left: turtleLeft, right: turtleRight,
forward: turtleForward, back: turtleBack,
penDown: turtlePenDown, penUp: turtlePenUp,
goto: turtleGoTo, angleTo: turtleAngleTo,
turnToward: turtleTurnToward, distanceTo: turtleDistTo,
setColor: turtleSetColor, setWeight: turtleSetWeight,
face: turtleFace};
return turtle;
}
//massive red world
function zoom1() {
//to chase the other worlds
t1.turnToward((t2.x + t3.x)/2,(t2.y + t3.y)/2, 1);
t1.forward(sq(0.005*(68 - t1.distanceTo(t2.x, t2.y)/10)));
t1.penUp();
//for a dotted line, alternate penDown then penUp
t1.turnToward((t2.x + t3.x)/2,(t2.y + t3.y)/2, 1);
t1.forward(sq(0.005*(68 - t1.distanceTo(t2.x, t2.y)/10)));
t1.penDown();
}
//medium orange world
function zoom2() {
//to chase the other worlds
t2.turnToward((t1.x + t3.x)/2,(t1.y + t3.y)/2, 1);
t2.forward(5*sq(0.01*(68 - t2.distanceTo(t1.x, t1.y)/10)));
t1.penUp();
//for a dotted line, alternate penDown then penUp
t2.turnToward((t1.x + t3.x)/2,(t1.y + t3.y)/2, 1);
t2.forward(5*sq(0.01*(68 - t2.distanceTo(t1.x, t1.y)/10)));
t1.penDown();
}
//tiny pink world
function zoom3() {
//to chase the other worlds
t3.turnToward((t1.x + t2.x)/2,(t1.y + t2.y)/2, 1);
t3.forward(5*sq(0.02*(68 - t2.distanceTo(t1.x, t1.y)/10)));
t1.penUp();
//for a dotted line, alternate penDown then penUp
t2.turnToward((t1.x + t3.x)/2,(t1.y + t3.y)/2, 1);
t2.forward(5*sq(0.02*(68 - t2.distanceTo(t1.x, t1.y)/10)));
t1.penDown();
}
function setup() {
frameRate(60);
createCanvas(480, 480);
//to put star positions and sizes into arrays
for (var i = 0; i < 300; i++) {
x.push(random(width));
y.push(random(height));
starSize.push(random(3));
}
//too many turtles ! define each turtle's start position
t1 = makeTurtle(random(width/3, 2*width/3), random(height/3, 2*height/3));
t2 = makeTurtle(random(width/3, 2*width/3), random(height/3, 2*height/3));
t3 = makeTurtle(random(width/3, 2*width/3), random(height/3, 2*height/3));
//to set the color and strokeweight of each turtle
t1.setColor(color(28 + brighten, 38 + brighten, 79 + brighten));
t1.setWeight(1);
t2.setColor(color(28 + brighten, 38 + brighten, 79 + brighten));
t2.setWeight(1);
t3.setColor(color(28 + brighten, 38 + brighten, 79 + brighten));
t3.setWeight(1);
}
function draw() {
// var darkBlue = color(28, 38, 79);
// var orange = color(237, 132, 45);
// var red = color(201, 34, 80);
// var purple = color(183, 62, 151);
background(color(28, 38, 79));
//to draw same stars each frame
for (var j = 0; j < x.length; j++) {
fill(255);
ellipse(x[j], y[j], starSize[j]);
}
//to make the turtles each frame
zoom1();
zoom2();
zoom3();
noStroke();
//massive red world
fill(201, 34, 80); //red
ellipse(t1.x, t1.y, 100); //massive
//for the shine
push();
translate(-20, -15);
fill(201 + brighten, 34 + brighten, 80 + brighten);
rectMode(CENTER);
rect(t1.x, t1.y, 12, 20, 5);
pop();
//medium orange world
fill(237, 132, 45); //orange
ellipse(t2.x, t2.y, 50); //medium
//for the shine
push();
translate(-10, -7);
fill(237 + brighten, 132 + brighten, 45 + brighten);
rectMode(CENTER);
rect(t2.x, t2.y, 4, 6, 2);
pop();
//tiny pink world
fill(183, 62, 151); //purple
ellipse(t3.x, t3.y, 20); //tiny
//for the shine
push();
translate(-4, -4);
fill(183 + brighten, 62 + brighten, 151 + brighten);
ellipse(t3.x, t3.y, 2);
pop();
}
In this project I wanted to challenge myself with the task of making turtles which interact with each other on the canvas. I eventually ended up with quasi-gravity, which i then expressed as shiny rubber planets zooming around the screen which speed up as they approach each other and slow down as they disperse. I am pretty happy with the result, and although it looks very simple in the end the process that took me to the end product was long and rife with console errors. In the future I would like to figure out how to prevent the edges of planets from intersecting, or maybe give them the ability to bounce off of each other.
]]>Atlås is an iOS application that generates music in a conversationally philosophical digital environment. The program generates tasks that are solved by machine intelligence with accompanying music which is choreographed to the solutions the machine develops. Minimalist visuals and audio are combined to form a virtual space inviting calm and introspective thoughts to the user’s mind. The iOS app was coded using p5js embedded into a regular Swift iOS application. In addition, randomly chosen philosophical questions are posed on the screen by the 20th century composer John Cage as a supplement to the program’s zen-like aesthetic.
This program very much interests me because it was coded using p5js, meaning I could begin to code iOS apps myself using what I have learned this year in 15-104. I am also very interested in machine intelligence and the artistic works that machines can algorithmically produce. These ideas inspire me to develop ideas for apps that could further my coding abilities.
]]>
// ryu kondrup
// rkondrup@andrew.cmu.edu
// sectionD
// project-10
var trains = [];
function setup() {
createCanvas(480, 480);
frameRate(30);
}
function draw() {
background(177, 214, 144); //light green
drawTracks();
updateAndDisplayTrains();
removeTrainsThatHaveSlippedOutOfView();
addNewTrainsWithSomeRandomProbability();
textMessage();
}
function updateAndDisplayTrains(){
// Update the train's positions, and display them.
for (var i = 0; i < trains.length; i++){
trains[i].move();
trains[i].display();
}
}
function removeTrainsThatHaveSlippedOutOfView(){
// If a train has dropped off the left edge,
// remove it from the array.
// Our solution is to just copy all the trains
// we want to keep into a new array.
var trainsToKeep = [];
for (var i = 0; i < trains.length; i++){
if (trains[i].x + trains[i].carWidth > 0) {
trainsToKeep.push(trains[i]);
}
}
trains = trainsToKeep; // remember the surviving trains
}
function addNewTrainsWithSomeRandomProbability() {
// With a very tiny probability, add a new train to the end.
var newtrainLikelihood = 0.005;
if (random(0,1) < newtrainLikelihood) {
trains.push(maketrain(width));
}
}
// method to update position of train every frame
function trainMove() {
this.x += this.speed;
}
// draw the train and some windows
function trainDisplay() {
var floorHeight = 100;
var bHeight = this.nFloors * floorHeight;
stroke(0);
push();
noStroke();
//to draw each of the 8 trains and assign different speeds
translate(this.x, 0);
push();
fill(214, 128, 131);//red
rect(0, 0 + 8, this.carWidth, 40, 5);//main traincar mass
fill(214+30, 128+30, 131+30);
rect(0, 0 + 13, this.carWidth, 30)//top lighter shade rect
pop();
translate(this.x*1.5, 0);
push();
fill(81, 176, 185);//turquoise
rect(0, 60 + 8, this.carWidth, 40, 5);//main traincar mass
fill(81+30, 176+30, 185+30);
rect(0, 60 + 13, this.carWidth, 30)//top lighter shade rect
pop();
translate(this.x, 0);
push();
fill(146, 95, 182);//purple
rect(0, 60*2 + 8, this.carWidth, 40, 5);//main traincar mass
fill(146+30, 95+30, 182+30);
rect(0, 60*2 + 13, this.carWidth, 30)//top lighter shade rect
pop();
translate(-this.x*1.5, 0);
push();
fill(145, 205, 129);//green
rect(0, 60*3 + 8, this.carWidth, 40, 5);//main traincar mass
fill(145+30, 205+30, 129+30);
rect(0, 60*3 + 13, this.carWidth, 30)//top lighter shade rect
pop();
translate(this.x*1.2, 0);
push();
fill(216, 174, 107);//yellow
rect(0, 60*4 + 8, this.carWidth, 40, 5);//main traincar mass
fill(216+30, 174+30, 107+30);
rect(0, 60*4 + 13, this.carWidth, 30)//top lighter shade rect
pop();
translate(-this.x, 0);
push();
fill(92, 129, 213);//blue
rect(0, 60*5 + 8, this.carWidth, 40, 5);//main traincar mass
fill(92+30, 129+30, 213+30);
rect(0, 60*5 + 13, this.carWidth, 30)//top lighter shade rect
pop();
translate(-this.x, 0);
push();
fill(222, 157, 104);//orange
rect(0, 60*6 + 8, this.carWidth, 40, 5);//main traincar mass
fill(222+30, 157+30, 104+30);
rect(0, 60*6 + 13, this.carWidth, 30)//top lighter shade rect
pop();
translate(this.x*2, 0);
push();
fill(222, 104, 179);
rect(0, 60*7 + 8, this.carWidth, 40, 5);//main traincar mass
fill(222+30, 104+30, 179+30);
rect(0, 60*7 + 13, this.carWidth, 30)//top lighter shade rect
pop();
stroke(200);
for (var i = 0; i < this.nFloors; i++) {
rect(5, -15 - (i * floorHeight*10), this.carWidth - 10, 10);
}
pop();
}
function maketrain(birthLocationX) {
var trn = {x: birthLocationX,
carWidth: 100,
speed: -1.0,
nFloors: round(random(2,8)),
move: trainMove,
display: trainDisplay}
return trn;
}
function drawTracks() {
fill(235, 230, 235);//long track color
noStroke();
for(i = 0; i < 20; i++) {
for (j = 0; j < 200; j++) { //railroad ties
push();
fill(194, 175, 166); //tie color
rect(5 + 15*j, + 5 + i*60, 5, 46);
pop();
}
rect(0, 30*i + 10, width, 6);
}
}
// to make text appear once each minute
function textMessage() {
var s = second();
textSize(14)
fill(255);
noStroke();
if (s == 0) {
text("ALL ABOARD !", width/2-30, height/2-28);
}
else if (s == 20) {
text("CHOOCHOO !", width/2-30, height/2-28);
}
else if (s == 40) {
text("ZOOM !", width/2-30, height/2-28);
}
}
With this project, i very much wanted to avoid the elevation view that seemed to be trending among early submissions. I also wanted to create something somewhat whimsical, and so i eventually decided that rainbow trains were a childish sort of drawing that could spice up my ideate experience. I aimed for a very simple, clean aesthetic for this drawing, trying to show as little as was necessary in order to identify the moving objects. Many trains are the same base length, while others are elongated to add some variation. The trains also seem to converge at the left end of the page, which confused me but I also saw it like a visual point of interest, as if the trains are racing to be the first one across the page.
]]>Jenny Sabin is principal of Jenny Sabin Studio LLC in Ithaca, New York who specializes in computational experimental form making and spatial organization. Her studio pushes the boundaries for parametric design to generate forms which, as a collective, produce a space which is complex and entirely unique. The studio likely utilizes Grasshopper for Rhino software to generate complex curvatures using modular base geometries that are repeated and varied according to the main organizational geometries of the flow surface, as in the following photo.
Considering the role of Cornell University as a leader in cutting-edge architectural design and research, Jenny Sabin’s strong connections to the Jenny Sabin Design Lab at Cornell’s School of Art, Architecture, and Planning are a strong propellant in the drive toward a more modern future in computational architectural design.
// ryu kondrup
// rkondrup@andrew.cmu.edu
// sectionD
// project-09
var underlyingImage;
var ellipseSizeX;
var ellipseSizeY;
function preload() {
var myImageURL = "https://i.imgur.com/p5EnT0V.jpg";
underlyingImage = loadImage(myImageURL);
}
function setup() {
createCanvas(480, 480);
background(0);
underlyingImage.loadPixels();
frameRate(60);
}
//MAKE THE DOTS LARGER FARTHER FROM THE CENTER
function draw() {
//to draw puzzle pieces spaced on a grid 12 pixels apart
var px = floor(random(width/12))*12;
var py = floor(random(height/12))*12;
//to constrain puzzle pieces to canvas
var ix = constrain(px, 0, width-1);
var iy = constrain(py, 0, height-1);
var theColorAtLocationXY = underlyingImage.get(ix, iy);
noStroke();
fill(theColorAtLocationXY);
//to draw the actual pieces at random locations
puzzle(px, py);
var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
// stroke(theColorAtTheMouse);
// line(pmouseX, pmouseY, mouseX, mouseY);
}
//to draw the puzzle piece
function puzzle(x, y) {
push();
translate(x, y);
//blocks of puzzle piece
rect(1, 4, 11, 3);
rect(9, 7, 3, 8);
rect(4, 7, 5, 5);
rect(1, 12, 3, 3);
//pegs of puzzle piece
rect(5, 1, 3, 1);
rect(6, 1, 1, 3);
rect(12, 9, 3, 1);
rect(14, 8, 1, 3);
//final fills of puzzle piece
rect(1, 7, 1, 1);
rect(3, 7, 1, 1);
rect(1, 11, 1, 1);
rect(3, 11, 1, 1);
rect(4, 12, 1, 1);
rect(4, 14, 1, 1);
rect(8, 12, 1, 1);
rect(8, 14, 1, 1);
pop();
}
My plan for this project was to create a puzzle that gradually completes itself. Using the marvelous Maggie as a subject wearing her signature origami hat, I made a single puzzle piece that could be repeated infinitely on a square grid. Although I initially had no idea how to draw a good-looking curved puzzle piece, i soon realized that the pieces were so small that I could draw them using only rectangles and end up with a recognizable piece at the end.
In the end I was relatively happy with the result, I only wish the final product could have a higher resolution, perhaps each piece could contain multiple colors.
Upon discovering the work of Beeple, as reviewed by danny noh in Looking Outwards, I was amazed at the idea of the projects which this man undertakes every SINGLE DAY, FROM SCRATCH. Honestly the things he draws would take me months, yet somehow the man produces amazing AMAZING graphic work at an incredible pace and without falling into stylistic ruts or creative dead-ends. I only wish danny noh had better stressed how unbelievably intricate and beautiful and amazing this work is, considering the production rate of one EVERY SINGLE DAY wowza. For 3308 consecutive days !
The idea of this project as a continuous daily task is one which I am a big fan of because building up a library of work which is a visual, tangible reminder of one’s progress in a task like graphic design is something which produces a concrete sense of accomplishment and meaning. Personally, I would like to pursue a similar sort of project initiative in order to further my own design skills and build a portfolio of completed work.
Alex Beim is a creative computer artist and founder of Tangible Interactions, a group which creates sensorially-oriented interactive installations that are geared toward our most basic human instincts regarding light, space, and color. Starting his own design studio at the age of 19, Alex Beim later went on to found Tangible Interaction in 2007, citing his experience designing posters for his father’s event planning business when he was 12 as his inspiration for joining the field of the visual arts. After doing creative work for advertisement companies, but wishing to have a more direct connection with the people that his artwork affected, Beim quit and designed his first major project. The zygote ball was a large inflatable ball that changed color in response to touch and auditory stimulus. After having the balls released at a concert at the Arrezo Wave festival in Florence, Italy, Beim’s commissions began to grow, and he took on Tangible Interactions full-time as Creative Director. Tangible Interactions’ work is deeply involved with responsive color and light variability, and draw inspiration from natural phenomena such as clouds and animal life, as well as from human social constructs such as graffiti art and public spaces. Beim is perpetually interested in bringing the subjects of his artwork to the present moment by invoking the power of human sensation.
Personally, I admire the ways in which Beim uses nature as inspiration for his installations. For example, his Jelly Swarm project was made up of dozens of paper jellyfish suspended from a parametrically generated triangular-paneled structure was so immersive because it was at such a scale that an occupant could be entirely enveloped by the installation, limiting the sensorial experience to only the installation itself, helping to filter extraneous stimuli and produce a more immersive experience of the artwork. The way in which Beim explains his installations is so effective because he allows the videos to tell the story of interaction and experience with his art installations, as they are intrinsically sensorial, meaning they are best described visually or audibly rather than textually.
INST-INT 2013 – Alex Beim from Eyeo Festival // INSTINT on Vimeo.
]]>