## rkondrup-project-07-Composition-with-Curves

``````// ryu kondrup
// rkondrup@andrew.cmu.edu
// section D
// project-07-Composition-with-Curves

// http://mathworld.wolfram.com/DevilsCurve.html
function setup() {
createCanvas(480, 480);
frameRate(20);
//dark grey bg
background(40);
stroke(255);
fill(40);
}

function draw() {
//to move object to center and rotate
push();
translate(width / 2, height / 2);
rotate(2*PI*mouseX/480)
drawDevilsCurve();
pop();
}

function drawDevilsCurve() {
var bigRange = 100;
var t = map(i, 0, bigRange, 0, 100);
var b = map(mouseY, 100, height-100, 0, 50);
var a = map(mouseX, 100, height-100, 0, 200);

//to draw actual devil's curve
fill(40);
beginShape();
for (var i = 0; i < bigRange; i++) {
var t = map(i, 0, bigRange, 0, 2*PI);
//x and y for parametric equation
var x = cos(t)*sqrt((sq(a)*sq(sin(t))) - sq(b)*sq(cos(t))/(sq(sin(t))-sq(cos(t))));
var y = sin(t)*sqrt((sq(a)*sq(sin(t))) - sq(b)*sq(cos(t))/(sq(sin(t))-sq(cos(t))));
// change value with mouseposition
fill(mouseX/2, mouseX/2, mouseX/2);
// make outline slightly lighter than fill
stroke(mouseX/2+20, mouseX/2+20, mouseX/2+20)
//to draw each frame
vertex(x, y);
}
endShape(CLOSE);

}

function mousePressed() {
//to reset background on click
background(40);
}
``````

Before starting this project I assumed it would be relatively easy. Upon starting, however, I had an unexpectedly difficult time getting my code to display. After I finally did get it to display, it turned out that the curve I had chosen was not of the highest aesthetic quality, i.e. it looks like a chunky spider. Nevertheless, I decided to work with it, and ended up choosing a monochromatic color scheme as an experiment with changing gradients.

## rkondrup-Looking-Outwards-07

Nicholas Felton is a graphic artist, designer, and creator of BikeCycle, a data visualization set which plots activity from a bike sharing program in New York City. The information was gathered over the duration of a year and updates in real time to correspond to the same date and time of 2014 when the information was gathered. This sort of delayed but real-time data visualization is effective not only in representing the locations of particular events or paths, but it also allows for a much deeper analysis of data because it is separates information into an accurate timeline, allowing viewers to perceive changes in activity over time. The advantage of utilizing such a means of visualization over more regular representational methods is that rental bike use can be related to time of day, time of year, and other factors, data which would otherwise be lost in the quagmire of conventionally compiled data sets.
I admire this project because it takes something which appears on the surface to be intrinsically two-dimensional and static and turns it into something more that is dynamic and even more informative than the standard model for data mapping. I expect that the points are placed over a static map of New York City and that the points of an array which correspond to certain times of day are called and plotted as the time and date changes.

## rkondrup-looking-outwards-06

Mark Wilson’s computational art is a combination of randomly generated images and geometric relationships. He has been a trailblazer in the field of computational art since the 80s, presenting his work at exhibitions all over the world. By layering complex geometrical patterns Wilson is able to produce an image with many layers of colors, shapes, sizes, textures, and visual effects. I was drawn to this project because it appeared to be a very intricate type of computational design which is endlessly interesting. I am curious to see how random image generation from basic geometrical shapes has developed since the early days of computational design, and whether this sort of drawing has entirely gone out of fashion as a result of the development of more sophisticated algorithms which can produce more visually appealing products. I am also curious to see how designers of computational design have responded to the psychological side of random image generation, maybe tweaking algorithms to still produce images that can be called random, but which contain certain constraints that result in more refined visual or emotional effects.

## rkondrup-06-project-abstract-clock

``````// ryu kondrup
// rkondrup@andrew.cmu.edu
// section D
// project-06-abstract-clock

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

function draw() {
background(255);

var centerPt = width/2;
var sWidth = 100;
var mWidth = 60;
var hWidth = 30;
var s = second();
var m = minute();
var h = hour();

//sin cos positioning of each circle

//big center circle
fill(120, 210, 200);
stroke(255, 245, 210);
strokeWeight(3);
ellipse(centerPt, centerPt, width);

//to make 60 lines
for (var i = 0; i < 60; i++) {

//seconds
var sPositionX = cos(sAngle)*150+centerPt;
var sPositionY = sin(sAngle)*150+centerPt;
//minutes
var mPositionX = cos(mAngle)*100+centerPt;
var mPositionY = sin(mAngle)*100+centerPt;
//hours
var hPositionX = cos(hAngle)*60+centerPt;
var hPositionY = sin(hAngle)*60+centerPt;
//main background circle
//new perimeter circle

//LINES!!!!!!!!!!!!!!!!!!!!
stroke(245, 255, 210);
strokeWeight(1);
noFill();
beginShape();
//center reference point
curveVertex(centerPt, centerPt);
//fixed perimeter
curveVertex(xPerimeter, yPerimeter);
//second hand
curveVertex(sPositionX, sPositionY);
//minute hand
curveVertex(mPositionX, mPositionY);
//hour hand
curveVertex(hPositionX, hPositionY);
//fixed perimeter
curveVertex(x2Perimeter, y2Perimeter);
//back to center reference point
curveVertex(centerPt, centerPt);
endShape();
}

// //CIRCLES!!!!!!!! HIDDEN
// fill(230, 230, 230);
// //seconds
// ellipse(sPositionX, sPositionY, sWidth)
// //minutes
// ellipse(mPositionX, mPositionY, mWidth)
// //hours
// ellipse(hPositionX, hPositionY, hWidth)

}
``````

In this assignment I originally wanted to make circles which rotate inside of other rotating circles in the way that the moon orbits the earth as the earth orbits the sun, but because of time constraints and because I was not able to come up with a way to do it by friday morning, I had to settle on a different design concept. Instead I chose to depict time as a collection of curving lines which share three common points representing the second, minute, and hour. I then attached the lines to the perimeter of the bounding circle. The way that the line density changes each second was an accident but because it made the image more dynamic I decided to leave it.

## rkondrup-Looking-Outwards-05

The Arabesque Wall is a highly complex computer-generated form created by Benjamin Dillenburger and Michael Hansmeyer for the 3DXL exhibition. At almost 10 feet tall, the form was modeled using complex algorithms and subsequently 3D printed as thousands of layers. The Arabesque Wall,a 50 gigabyte file, took months to design and four days to print the sheets, which were then assembled in a four-hour period.
The work is a highly complex form which folds and intersects with its own surface hundreds of thousands of times, producing a form with over 200 million individual surfaces. These complexities are of a level so intricate that humans could not fully conceive of them without the aid of computers. Hansmeyer and Dillenburger believe that this type of application of technology in architecture can augment our understanding and experience of architecture, saying “Architecture should surprise, excite, and irritate. . . it should address not only the mind, but all the senses – viscerally. It must be judged by the experiences it generates.”

## rkondrup-project-05-wallpaper

``````//ryu kondrup
//rkondrup@andrew.cmu.edu
//section d
//project-05-wallpaper

//rectangle width is 120 pixels
var rectHalf = 60;

function setup() {
createCanvas(480, 480);
background(155, 213, 198);
}
function draw() {

//horizontal odd-numbered rows
for (x = 0; x < 10; x ++ ) {
for (y = 0; y < 10; y ++) {
shrimp(x*2*rectHalf, y*4*rectHalf);
}

}
//horizontal even-numbered rows
for (x = 0; x < 10; x ++ ) {
for (y = 0; y < 10; y ++) {
shrimp(x*2*rectHalf-rectHalf, y*4*rectHalf+2*rectHalf);
}
}
noLoop();
}

function shrimp(x, y) {
push();
translate(x, y);
darkestRed = color(200, 64, 62);
darkRed = color(251, 104, 102);
medRed = color(251, 134, 132);
white = color(255, 252, 215);
lightBlue = color(213, 233, 198);
blue = color(155, 213, 198);

/*    //temporary box
fill(blue);
rect(0, 0, 2*rectHalf, 2*rectHalf);
*/

//background water blue
strokeWeight(4);
fill(blue);
noStroke();
//left arc
fill(medRed);
stroke(white);
arc(rectHalf, rectHalf,
2*rectHalf, 2*rectHalf,
PI/2, 3*PI/2);
fill(darkRed)
triangle(rectHalf, 0,
2*rectHalf, 0,
rectHalf, rectHalf);
//small arc inside
fill(blue);
arc(rectHalf, rectHalf+20,
40, 40,
PI/2, 3*PI/2);
//eye
stroke(white);
fill(darkestRed);
ellipse(23 + rectHalf, 15, 15);
//tail polygon
stroke(white)
fill(darkRed);
beginShape();
vertex(rectHalf, rectHalf + 40);
vertex(2*rectHalf, rectHalf);
vertex(2*rectHalf, 2*rectHalf);
vertex(rectHalf, 2*rectHalf);
endShape(CLOSE); //still broken
pop();
}
``````

For this design I wanted to create something simple with mellow colors. In making this, I created a single tile and repeated it in staggered rows. I considered overlapping the tiles but visually the overlaps did not seem comfortable so I left them in a snug edge-to-edge arrangement.

## rkondrup-Looking-Outwards-04

Artist Paul Prudence has created a new panoramic audiovisual performance work called The Mylar Typology which combines gelatinous oil-colored forms with slow pulsing auditory stimulus. The work utilizes what Prudence describes as “Slowly transforming abstractions of iridescent wavelets and hyperchromatic emulsions synchronised to binaural drones” to produce a calming effect, in part due to the effect of brainwave entrainment, in which neural wave frequencies synchronize with outside stimulus in order to reach an associated state of mental cognition, in this case, relaxation. Prudence aims to produce a sensorially immersive viewer/listener experience which leaves the subject matter largely ambiguous.

## rkondrup-project-04-string-art

``````//ryu kondrup
//rkondrup@andrew.cmu.edu
//Section D
//project-04-string-art

var downDown = 30;

function setup() {
createCanvas(400, 300);
strokeWeight(1);
noFill();

}

function draw() {
background(0);
for (var i = 20; i < 400; i += 20) {
//line(i*1.2+120, 0, i/4-50, height);
//line(i*1.2+120, 0, i/20+200, height+200);
//line(i/20+200, height+200, 0, 0);

//red
stroke(255, 0, 0);
//big swoop
bezier(-100, height+1000,
i*.6, i+10, i*2, i*1.2,
width-i+100, height-i+100);
//small swoop
bezier(0, i*.2+downDown,
i*.2, i*.3+downDown,
i*1.7, i*1.6+downDown,
-100, height+1000+downDown);

//blue
stroke(0, 0, 255);
//big swoop
//small swoop

//green
stroke(0, 255, 0)
//big swoop
i*.6 + shadow*.6, i + 10,
width-i + 100 + shadow, height - i + 100);
//small swoop

}

}
``````

In this project, I wanted to create something simple and abstract, but also explore different forms that can be made using curves inside of for loops. I also wanted to experiment with visual effects, so I offset each curve slightly and changed colors to RGB values to give the lines a sense of three-dimensionality and layering.

## rkondrup-project-03-Dynamic-Drawing

``````//Ryu Kondrup
//rkondrup@andrew.cmu.edu
//Section D
//project-03

var cloudShiftX = 200;
var cloudShiftY = 100;
var cloudShift0X = -150;
var cloudShift0Y = 70;
//greyWhite
var greyWhiteR = 245;
var greyWhiteG = 241;
var greyWhiteB = 230;
//windows colors
var windowsR = 160;
var windowsG = 160;
var windowsB = 150;

//lights colors
var lightsR = 255;
var lightsG = 197;
var lightsB = 107;

//grey sky colors
var greySkyR = 226;
var greySkyG = 226;
var greySkyB = 214;

//sky colors
var skyR = 182;
var skyG = 222;
var skyB = 228;

//water color
var waterR = 162;
var waterG = 222;
var waterB = 208;

//grey water
var greyWaterR = 160;
var greyWaterG = 160;
var greyWaterB = 150;

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

function draw() {
//colors!!!!!!!!!
background(greySkyR, greySkyG, greySkyB);
noStroke();

//to change background color
if ((mouseX >= 640) & (mouseX <= 640)){
mouseX = 640;
}
if ((mouseX > 0) & (mouseX < 640)){
greySkyR = mouseX*((182-226)/640) + 226;
greySkyG = mouseX*((222-226)/640) + 226;
greySkyB = mouseX*((228-214)/640) + 214;
}

//to change water color
if ((mouseX >= 640) & (mouseX <= 640)){
mouseX = 640;
}

/*  if ((mouseX >= 640) & (mouseX <= 640)){
mouseX = 640;
}
if ((mouseX > 0) & (mouseX , 640)){

}
*/

//to turn on the lights

if ((mouseIsPressed) && (windowsR = 160)) {
windowsR = lightsR;
windowsG = lightsG;
windowsB = lightsB;
}
else if ((mouseIsPressed) & (windowsR = 225)) {
windowsR = 160;
windowsG = 160;
windowsB = 150;
//NEEDS SOME WORK
}

//CLOUD
//cloud1
fill(greyWhiteR, greyWhiteG, greyWhiteB);
ellipse(mouseX + 0, 125, 20);
ellipse(mouseX + 20, 120, 35);
ellipse(mouseX + 40, 120, 55);
ellipse(mouseX + 65, 125, 40);
ellipse(mouseX + 90, 120, 45);
ellipse(mouseX + 115, 125, 20);
ellipse(mouseX + 125, 120, 30);
ellipse(mouseX + 145, 125, 20);

//cloud2
ellipse(mouseX + 0 + cloudShiftX + adjustShift, 105 + cloudShiftY, 20);
ellipse(mouseX + 20 + cloudShiftX + adjustShift, 100 + cloudShiftY, 35);
ellipse(mouseX + 40 + cloudShiftX + adjustShift, 100 + cloudShiftY, 55);
ellipse(mouseX + 65 + cloudShiftX + adjustShift, 105 + cloudShiftY, 40);
ellipse(mouseX + 90 + cloudShiftX + adjustShift, 100 + cloudShiftY, 45);
ellipse(mouseX + 115 + cloudShiftX + adjustShift, 105 + cloudShiftY, 20);
ellipse(mouseX + 125 + cloudShiftX + adjustShift, 100 + cloudShiftY, 30);
ellipse(mouseX + 145 + cloudShiftX + adjustShift, 105 + cloudShiftY, 20);

//cloud0
ellipse(mouseX + 0 + cloudShift0X, 105 + cloudShift0Y, 20);
ellipse(mouseX + 20 + cloudShift0X, 100 + cloudShift0Y, 35);
ellipse(mouseX + 40 + cloudShift0X, 100 + cloudShift0Y, 55);
ellipse(mouseX + 65 + cloudShift0X, 105 + cloudShift0Y, 40);
ellipse(mouseX + 90 + cloudShift0X, 100 + cloudShift0Y, 45);
ellipse(mouseX + 115 + cloudShift0X, 105 + cloudShift0Y, 20);
ellipse(mouseX + 125 + cloudShift0X, 100 + cloudShift0Y, 30);
ellipse(mouseX + 145 + cloudShift0X, 105 + cloudShift0Y, 20);

//cloud-1
ellipse(mouseX + 0 + 3*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 20 + 3*cloudShift0X, 100 + .5*cloudShiftY, 35);
ellipse(mouseX + 40 + 3*cloudShift0X, 100 + .5*cloudShiftY, 55);
ellipse(mouseX + 65 + 3*cloudShift0X, 105 + .5*cloudShiftY, 40);
ellipse(mouseX + 90 + 3*cloudShift0X, 100 + .5*cloudShiftY, 45);
ellipse(mouseX + 115 + 3*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 125 + 3*cloudShift0X, 100 + .5*cloudShiftY, 30);
ellipse(mouseX + 145 + 3*cloudShift0X, 105 + .5*cloudShiftY, 20);

//cloud3
ellipse(mouseX + 0 + 5*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 20 + 5*cloudShift0X, 100 + .5*cloudShiftY, 35);
ellipse(mouseX + 40 + 5*cloudShift0X, 100 + .5*cloudShiftY, 55);
ellipse(mouseX + 65 + 5*cloudShift0X, 105 + .5*cloudShiftY, 40);
ellipse(mouseX + 90 + 5*cloudShift0X, 100 + .5*cloudShiftY, 45);
ellipse(mouseX + 115 + 5*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 125 + 5*cloudShift0X, 100 + .5*cloudShiftY, 30);
ellipse(mouseX + 145 + 5*cloudShift0X, 105 + .5*cloudShiftY, 20);

/*
greyWhite = color(245, 241, 230);
greySky = color(200, 200, 185);
greyWater = color(160, 160, 150);
//windows = color(160, 160, 150);
windows = color(window1R, window1G, window1B);
sky = color(124, 35, 60);
//lights = color(225, 193, 96);
lights = color(lightsR, window2G, window2B);
water = color(81, 18, 35);
*/

fill(greyWhiteR, greyWhiteG, greyWhiteB);

//BASE PIECES
//base plate
rect(40, 322, 562, 10);
//2nd base plate
rect(104, 310, 433, 15);
//2nd base plate right triangle
triangle(537, 310, 537, 325, 572, 325);
//3rd base plate
rect(109, 299, 320, 15);
//3rd base plate right triangle
triangle(429, 299, 429, 310, 469, 310);
//4th base plate
rect(115, 283, 75, 18);
//4th base plate triangle
triangle(190, 283, 190, 301, 223, 301);

//opera house FILL HOLES
//left rectangle
rect(169, 234, 120, 80);
//middle rectangle
rect(290, 255, 100, 60);
//right rectangle
rect(390, 276, 130, 40);

//CURVES
//curve 1
bezier(104, 220, 123, 223, 173, 227, 200, 234);
triangle(95, 219, 200, 234, 190, 283);
//curve 1 small
triangle(95, 219, 121, 237, 121, 258);
//curve 2
triangle(147, 190, 255, 228, 223, 299);
bezier(147, 190, 185, 201, 227, 217, 255, 228);
triangle(147, 190, 162, 229, 185, 232);
//curve 3 the big one

//subcurve 3 big
triangle(335, 255, 229, 146, 287, 299);
bezier(229, 146, 277, 178, 315, 217, 335, 255);
//subcurve 3 small
triangle(237, 222, 229, 146, 287, 299);

//curve 4
triangle(335, 255, 460, 240, 407, 299);
bezier(335, 255, 375, 243, 425, 239, 460, 240);
//curve 5
triangle(395, 253, 472, 276, 429, 299);
bezier(395, 253, 424, 258, 451, 267, 472, 276);
//curve 6
triangle(472, 276, 550, 269, 512, 310);
bezier(472, 276, 498, 270, 525, 268, 550, 269);

//WINDOWS
fill(windowsR, windowsG, windowsB);
//window 1
triangle(121, 237, 190, 283, 121, 283);
//window 2
bezier(190, 283, 192, 270, 208, 270, 223, 299);
//window 3
bezier(223, 299, 246, 279, 269, 281, 287, 299);
//window 4
bezier(287, 299, 307, 281, 335, 281, 347, 299);
//winodw 5
bezier(347, 299, 362, 279, 384, 282, 407, 299);
//window 6
triangle(408, 271, 408, 299, 429, 299);
//window 7
bezier(429, 299, 447, 291, 461, 291, 469, 310);
//window 8
bezier(469, 310, 480, 294, 496, 294, 512, 310);
//winodw 9 (end)
triangle(512, 310, 537, 310, 537, 283);

fill(greyWaterR, greyWaterG, greyWaterB);
//WATER BELOW
rect(0, 332, 640, 480);

if ((mouseX > 0) & (mouseX < 640)){
greyWaterR = mouseX*((142-160)/640) + 160;
greyWaterG = mouseX*((222-160)/640) + 160;
greyWaterB = mouseX*((208-150)/640) + 150;
}

var offsetX1 = 100
var offsetY1 = 15
//waterlines
fill(greyWhiteR, greyWhiteG, greyWhiteB);
//row1
rect(640-mouseX, 345, 220, 3);
rect(640-mouseX + 280, 345, 160, 3);
rect(640-mouseX + 500, 345, 240, 3);
rect(640-mouseX - 300, 345, 200, 3);
rect(640-mouseX - 600, 345, 220, 3);
//row2
rect(640-mouseX + offsetX1, 345 + offsetY1, 220, 3);
rect(640-mouseX + 280 + offsetX1, 345 + offsetY1, 160, 3);
rect(640-mouseX + 500 + offsetX1, 345 + offsetY1, 240, 3);
rect(640-mouseX - 300 + offsetX1, 345 + offsetY1, 200, 3);
rect(640-mouseX - 600 + offsetX1, 345 + offsetY1, 220, 3);
//row3
rect(640-mouseX + 2*offsetX1, 345 + 2.5*offsetY1, 220, 3);
rect(640-mouseX + 280 + 2*offsetX1, 345 + 2.5*offsetY1, 160, 3);
rect(640-mouseX + 500 + 2*offsetX1, 345 + 2.5*offsetY1, 240, 3);
rect(640-mouseX - 300 + 2*offsetX1, 345 + 2.5*offsetY1, 200, 3);
rect(640-mouseX - 600 + 2*offsetX1, 345 + 2.5*offsetY1, 220, 3);
//row4
rect(640-mouseX + 3*offsetX1, 345 + 5*offsetY1, 220, 3);
rect(640-mouseX + 280 + 3*offsetX1, 345 + 5*offsetY1, 160, 3);
rect(640-mouseX + 500 + 3*offsetX1, 345 + 5*offsetY1, 240, 3);
rect(640-mouseX - 300 + 3*offsetX1, 345 + 5*offsetY1, 200, 3);
rect(640-mouseX - 600 + 3*offsetX1, 345 + 5*offsetY1, 220, 3);

/*var windows1R = 160;
var window1G = 160;
var window1B = 150;
var lightsR = 225;
var window2G = 193;
var window2B = 96; */
//colors!!!!!!!!!
/*  greyWhite = color(245, 241, 230);
greySky = color(200, 200, 185);
greyWater = color(160, 160, 150);
windows = color(160, 160, 150);
sky = color(124, 35, 60);
lights = color(225, 193, 96);
water = color(81, 18, 35);
*/
}

/*    //windows colors
var windowsR = 160;
var windowsG = 160;
var windowsB = 150;

//lights colors
var lightsR = 255;
var lightsG = 197;
var lightsB = 107;

function mouseIsPressed (){
if ((windowsR = 160)){
windowsR = 255;
windowsG = 197;
windowsB = 107;
}
else if (true) {
windowsR = 160;
windowsG = 160;
windowsB = 150;
}

}*/
``````

I was feeling very ambitious at the start of this project, but after two days of coding simple shapes without yet having added any interactivity, i realized i needed to simplify the design if i was to finish before the deadline. I wanted to originally make the drawing change from soft day-colored gradients to vivid night-colored gradients but time was running short and i settled on a grey-to-saturated fill instead, which i am relatively happy with. Unfortunately, WordPress was not kind to my aspect ratio which i so meticulously planned out in a 640 x 480 arrangement but which was unceremoniously snipped by the WordPress formatting gods. In the future i will try to orient my canvases vertically to avoid cropping.

## rkondrup-Looking-Outwards-03

Students at MIT have developed what they call “Interactive Robogami,” a project which allows users to 3D print motorized origami creations which can move, walk, or roll. The design consists of an easy-to-use user interface which allows participants to design a structure with features like legs and wheels, while the program calculates speed, direction, and timing of moving parts internally. Completed designs were then sent to the 3D printer for fabrication. Designs were printed as a flat bunch of pieces which are then assembled or “folded” into the desired shape to produce a functional object.

This project is very interesting to me because it combines many different technologies into a single experience. The Robogami consists of complex software, friendly user interface, digital fabrication, origami, and moving parts; this requires a large amount of thinking and collaboration. In addition, I am very interested in how this technology could be scaled up over time, possibly to the transportation or housing level in the far future. This project gives amazing design power to consumers which has never been available before – perhaps in the future users will be able to custom-design their own headphones, cars, or even homes, and have built-in interactive features automatically integrated into the design.