## Lanna Lang – Project 07 – Curves

``````//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 07 - Curves

var nPoints = 100;
var angle = 0;

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

function draw() {
background('#ffc5a1'); //pastel orange

//call, translate, and rotate
//the epitrochoid curve
push();
translate(width/2, height/2);
drawEpitrochoid();
angle += 10;
pop();

//call and translate the hypotrochoid curve
push();
translate(width/2, height/2);
drawHypotrochoid();
pop();
}

//Epitrochoid curve (biggest curve)
function drawEpitrochoid() {
//http://mathworld.wolfram.com/Epitrochoid.html

var x1;
var y1;

//scale and rotation based on mouseY and mouseX
var a1 = map(mouseY, 0, 480, 10, 70);
var b1 = 20;
var h1 = mouseX;

strokeWeight(4);
stroke('lightyellow');
fill(mouseX, 150, mouseY); //fill based on the mouse
beginShape();
for (var i = 0; i < nPoints; i++) {
var t1 = map(i, 0, nPoints, 0, TWO_PI);
//epitrochoid equation
x1 = (a1 + b1) * cos(t1) - (h1 * cos((a1 + b1 / b1) * t1));
y1 = (a1 + b1) * sin(t1) - (h1 * sin((a1 + b1 / b1) * t1));
vertex(x1, y1);
}
endShape(CLOSE);
}

//Hypotrochoid curve
function drawHypotrochoid() {
//http://mathworld.wolfram.com/Hypotrochoid.html

//rainbow filled hypotrochoid
var x2;
var y2;

//scale and rotation based on the mouse
var a2 = map(mouseY, 0, 480, 80, 200);
var b2 = 20;
var h2 = mouseX / 10;

strokeWeight(4);
stroke('hotpink');
fill(mouseX, mouseY, 200);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t2 = map(i, 0, nPoints, 0, TWO_PI);
//hypotrochoid equation
x2 = (a2 - b2) * cos(t2) + h2 * cos((a2 - b2) / b2 * t2);
y2 = (a2 - b2) * sin (t2) - h2 * sin((a2 - b2) / b2 * t2);
vertex(x2, y2);
}
endShape(CLOSE);

//green hypotrochoid with lines
var x3;
var y3;

var a3 = 180;
var b3 = map(mouseY, 480, 0, 180, 20);
var h3 = -mouseX / 10;

//array for the lines inside the curve
var lineX = [];
var lineY = [];

strokeWeight(3);
stroke('lightgreen');
noFill();
beginShape();
for (var i = 0; i < nPoints; i++) {
var t3 = map(i, 0, nPoints, 0, TWO_PI);
//hypotrochoid equation
x3 = (a3 - b3) * cos(t3) + h3 * cos((a3 - b3) / b3 * t3);
y3 = (a3 - b3) * sin(t3) - h3 * sin((a3 - b3) / b3 * t3);
vertex(x3, y3);
lineX.push(x3);
lineY.push(y3);
}
endShape(CLOSE);

//draw the lines inside the curve with a for loop
for (var i = 0; i < lineX.length - 1; i++) {
strokeWeight(2);
stroke(mouseX + mouseY, mouseY, 120);
line(0, 0, lineX[i], lineY[i]);
}
}``````

I was intimidated at first looking at the instructions that said we had to create an image based on math curve functions, and I thought it would be very difficult to do, but it turned out to be pretty simple. I had a lot of fun researching the different roulette curves and seeing which ones did cool things with code. I played a lot with mouseX and mouseY, as well as scale, map(), and color. My favorite part of this project is that if you stop your mouse at a different point on the canvas, the epitrochoid curve changes into a completely different curve each time; it’s so interesting to see the crazy curves it can create by changing its a, b, and h values with the mouse’s coordinates.

## Lanna Lang – Looking Outwards – 07

This project is a dynamic visualization of the mass volume of SMS messages that were transmitted on the night of New Year’s Eve across Amsterdam, revealing the city’s buildings and structures. This interactive tool was built with Processing and OpenGL. What inspires me about this project is that it usually isn’t the type of art I would normally gravitate towards, but it’s unique concept of taking the data of all the SMS messages from one of the busiest nights ever and forming a city’s cityscape with its volume is very intriguing and out-of-the-box.

I appreciate how Koblin includes a timelapse of how the SMS messages varied across the month of December, so that the drastic jump on January 1st  is exaggerated even further, displaying how many people were looking at their phone screens at the time of change of the new year. What Koblin got right was the message that this sends across by freezing the frame as soon as the date turned January 1st, and I would love to see this project redone now, and how modern technology has affected society even further than it did in 2007.

In general with Koblin and his use of data visualization art, Koblin was inspired by his interest in computer gaming and being exposed to the rich data of society that we live in, as well as learning from the two professors from UCLA who created Processing.

## Lanna Lang – Looking Outwards – 06

John Pound’s “RAN DUM LOOP” // 1999

This project revolves around a program that writes and draws random comics and cartoon art onscreen endlessly. The program randomly combines words, colors, shapes, figures, objects, and scenes into random text stories, cartoon drawings, and comic books. What I find interesting about this project is how Pound used the program not as a passive tool, but as an active agent in making creative decisions, and the extent how Pound used randomness to create his comics – he didn’t just use it minimally on just a few panels with nonsense word balloons, he used it to create text, scribbles, figures, stories, and page layouts.

What I saw through the one screenshot Pound shared about this project is that it uses basic shapes that resemble figures and shapes, but I would like to see this recreated with modern technology that can now scan already published comics, cartoons, and comic books, and then the program can randomly generate new comics and cartoons from those. What Pound did right was his intent behind using randomness; the point of creating something random is the idea of total nonsense and something beyond our conscious that challenges both the artist and the viewers to think abstractly.

Pound was inspired by previous programs that could make random sentences by combining basic words and other programs that could draw random figures and scenes. He then had the thought of combining these two different types of programs to make nonsense Sunday comics.

## Lanna Lang – Project 06 – Abstract Clock

``````//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project-06-Abstract CLock

function setup() {
createCanvas(470, 430);
background(154, 233, 250);

ellipseMode(CENTER);
angleMode(DEGREES);
}

function draw() {

//hours
h = hour();
//the radius changes depending on the hour
var hRadius = map(h%12, 0, 12, 250, 350);
//the circle color changes
//as the hour changes
var hPink = map(h%12, 0, 12, 0, 230);
noStroke();
fill(255, 183, hPink);
//white reflection arc
strokeWeight(8);
stroke(255);
arc(240, 170, 60, 60, 300, 360);

//minutes
m = minute();
//the radius changes depending on the minute
var mRadius = map(m, 0, 60, 100, 170);
//the circle color changes
//as the minute changes
var mGreen = map(m, 0, 60, 0, 150);
noStroke();
fill(mGreen, 205, 180);

//seconds
s = second();
//the radius changes depending on the second
var sRadius = map(s, 0, 60, 0, 70);
//the circle color changes
//as the second changes
var sGreen = map(s, 0, 60, 0, 255);
fill(255);

//light grey circle
fill(220);
ellipse(400, 120, 70, 70);

//dark grey circle
fill(127);
ellipse(400, 120, 40, 40);

//record player tone arm
strokeWeight(30);
stroke(250, 235, 154); //yellow
line(430, 80, 410, 100);
strokeWeight(10);
line(410, 100, 310, 240);
line(310, 240, 290, 250);
strokeWeight(20);
line(290, 250, 250, 260);

//buttons on the bottom
strokeWeight(10);
stroke(247, 115, 125); //red
line(20, 410, 40, 410);
stroke(71, 171, 88); //green
line(60, 410, 80, 410);
stroke(47); //dark grey
line(100, 410, 120, 410);

//volume control
stroke(127); //dark grey
line(400, 270, 400, 390);
strokeWeight(2);
fill(220); //light grey
rect(380, 300, 40, 20);
}``````

My process behind making this clock/record player was simple, but I wanted to familiarize myself with the map() function so I based my whole clock off the map() function. Each ellipse represents the seconds, minutes, or hours, and as time goes on, the circles enlarge and the colors lighten for the minutes and hours. I had fun creating this image and playing with colors.

## Lanna Lang – Project 05 – Wallpaper

``````//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 05-Wallpaper

function setup() {
createCanvas(590, 480);
//navy blue for right quad
//that peeks out
background('#25363e');
}

function draw() {

//left triangle
//repeat every 100 pixels down the canvas
for (var y = 0; y < height; y += 100) {
//repeat every 60 pixels across the canvas
for (var x = 0; x < width; x += 60) {
//fill with lighter brown
fill('#af9477');
triangle(x, y, x + 30, y + 20, x, y + 40);
}
}

//right triangle
//repeat every 100 pixels down the canvas
//
for (var y = 0; y < height; y += 100) {
//repeat every 60 pixels across the canvas
//with additional 50 pixels off screen
for (var x = 60; x < width + 50; x += 60) {
//fill with darker brown
fill('#7e5535');
triangle(x, y, x - 30, y + 20, x, y + 40);
}
}

//repeat every 100 pixels down the canvas
for (var y = 20; y < height; y += 100) {
//repeat every 60 pixels across the canvas
for (var x = 30; x < width; x += 60) {
//fill with cream color
fill('#fbe8bd');
quad(x, y, x + 30, y + 20, x, y + 40, x - 30, y + 20);
}
}

//repeat every 100 pixels down the canvas
for (var y = -60; y < height; y += 100) {
//repeat every 60 pixels across the canvas
for (var x =0; x < width; x += 60) {
//fill with ochre color
fill('#dcae56');
quad(x, y, x + 30, y + 20, x + 30, y + 80, x, y + 60);
}
}
noLoop();
}
``````

I wanted my wallpaper to be more geometric and include a bold, aesthetic color palette, but I didn’t want it to be a simple geometric design. I came up with this design that combined triangles and quadrilaterals, and that combination of shapes was the repeated image. I love the combination of ochre and blue, so I decided to revolve my palette around those two. This code relies solely on math and how the coordinates of each shape correlate with one another.

## Lanna Lang – Looking Outwards – 05

Josh Pierce “Dailies”

I decided not to critique a single work of art that Pierce made simply because I love the whole collection that he calls “Dailies”. This collection is personal art pieces created using the programs Cinema 4D and Octane Render, which are software programs usually used by VFX artists and 3D computer graphic artists who want to create 3D objects through the computer that could interact with real space. What really inspires me and interests me is the sense of awe and tranquility his work gives me. The interaction between nature and technology is so mesmerizing to see as the two merge and collide and gives a sense of a fictional yet realistic environment.

These works of art are truly masterpieces that I cannot give any critiques that could make them better or more effective. This collection suggests some intriguing possibilities of what alternate universes, or the future world could look like, and it sends an aura of alien-like surroundings that are familiar yet different. What Pierce does fantastically with this collection is using Cinema 4D and Octane to create realistic images by matching the lighting of the sci-fi object with the created natural environment that makes it seem like it’s all in one space, instead of being computer-generated.

Pierce was inspired by the idea of colliding nature with technology and the juxtaposition that those two impose on each other and creating images that fall in fantasy and sci-fi.

## Lanna Lang – Project 04 – String Art

``````//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 04 String Art

var c1, c2; //variables for the sky gradient
var inches = 2; //variables for the person
var head = 6*inches; //variables for the person
var bodyH = 4*head; //variables for the person
var bodyW = bodyH*0.4; //variables for the person

function setup() {
createCanvas(400, 300);

c1 = color('#ab0068'); //sunset purple color
c2 = color('#ff6c02'); //sunset orange color

}

function draw() {
noStroke();
//draw the sea
fill('#1b5f5e');
rect(0, 200, width, height / 3);

//draw the top left star
//top left
var x1 = 60;
var y1 = 10;
var x2 = 45;
var y2 = 50;

for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1, y1, x2, y2);
x2 -= 7;
y1 += 6;
}

//draw the top left star
//top right
var x1 = 60;
var y1 = 10;
var x2 = 75;
var y2 = 50;

for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1, y1, x2, y2);
x2 += 7;
y1 += 6
}

//draw the top left star
//bottom left
var x1 = 34;
var y1 = 39;
var x2 = 70;
var y2 = 100;

for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1 + 10, y1 + 10, x2, y2 - 6);
x1 -= 7;
y2 -= 6;
}

//draw the top left star
//bottom right
var x1 = 77;
var y1 = 90;
var x2 = 74;
var y2 = 50;

for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1 - 7, y1, x2, y2);
x2 += 7;
y1 -= 5;
}

//draw the bottom right star
//top left
var x1 = 360;
var y1 = 90;
var x2 = 345;
var y2 = 130;

for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1, y1, x2, y2);
x2 -= 7;
y1 += 6;
}

//draw the bottom right star
//top right
var x1 = 360;
var y1 = 90;
var x2 = 375;
var y2 = 130;

for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1, y1, x2, y2);
x2 += 7;
y1 += 6
}

//draw the bottom right star
//bottom left
var x1 = 334;
var y1 = 119;
var x2 = 370;
var y2 = 180;

for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1 + 10, y1 + 10, x2, y2 - 6);
x1 -= 7;
y2 -= 6;
}

//draw the bottom right star
//bottom left
var x1 = 377;
var y1 = 170;
var x2 = 374;
var y2 = 130;

for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1 - 7, y1, x2, y2);
x2 += 7;
y1 -= 5;
}

//draw the right sail
var x1 = 200;
var y1 = 50;
var x2 = 230;
var y2 = 230;

for (var i = 0; i < 7; i++) {
stroke('#ded8c0');
line(x1, y1, x2, y2);
x2 += 30;
y1 += 5;
}

//draw the left sail
var x1 = 200;
var y1 = 50;
var x2 = 220;
var y2 = 230;

for (var i = 0; i < 15; i++) {
stroke( '#ded8c0');
line(x1, y1, x2, y2);
x2 -= 10;
y1 += 10;
}

//draw the person
stroke('#9ea9f0');
fill('#ccc1ff');
ellipse(130, 210 + head*0.5 + bodyH*0.5, bodyW, bodyH);

//draw the brown boat
noStroke();
fill('#a34a28');
beginShape();
vertex(80, 230);
vertex(420, 230);
vertex(370, 280);
vertex(130, 280);
endShape(CLOSE);

}

//drawing a linear gradient
//for the sunset
function setGradient(c1, c2) {
noFill();
for (var y = 0; y < height; y++) {
var inter = map(y, 0, height, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, y, width, y);
}
}``````

I tried experimenting using string art to create an actual image as people also do when they physically do string art, and I also played around with color and creating gradients, which I never attempted before. It was really difficult for me at first to envision how to create the stars, but once I started, I slowly understood what to do for each part.

## Lanna Lang – Looking Outwards – 04

“Sonic Playground” is an installation of six interactive sound sculptures that transmit and manipulate sound depending on where you’re standing, listening, or speaking. The software used in this project was Grasshopper as a plug-in for Rhinoceros 3D, and both programs aren’t acoustic software, but in certain situations with certain frequency ranges, it can be done using ray-tracing techniques. What inspires me about this project is the child-like fantasy with its playfulness and nod to the talk tubes on playgrounds from childhood, and how Suzuki plays it up with physics, engineering, and computer software, using the shape of the parabolic dishes that require time to find the exact spot where you can hear the reflection of sound at its optimum.

Suzuki makes this installation effective by using the raytracing tool to replicate the design of the internal surfaces of a concert hall to maximize the sound that reaches and envelops the audience. However, I wish that the artist made the appearance a little more interesting and different than the talking tubes that can be found on playgrounds, or somehow appeal more to the adults than the children in a way that brings the adults joy in reminiscing their childhood memories.

Suzuki was inspired by the public space in Japan and the UK and how strangers don’t tend to start conversations with strangers, and he wanted to create an experience between people who must communicate through audio. He was also inspired by the sound mirrors in Kent that were originally built by the UK’s national defense force in the early 19th century.

## Lanna Lang – Project 03 – Dynamic Drawing

``````//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 03 Dyanamic Drawing

var circW;
var angle1 = 0;
var angle2 = 0;

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

function draw() {
background(0);

//rotating white rectangle
push();
translate(200, 200);
noStroke();
fill(255);
rectMode(CENTER);
//the size will increase/decrease as the mouse moves
rect(0, 0, mouseX + 200, mouseY + 150);
pop();
//rotating counter clockwise
angle2 = angle2 - 5;

//rotating colorful rectangle
push();
translate(200, 200);
noStroke();
//as the mouse moves around, the color of the rect changes
fill(170, mouseX, mouseY);
rectMode(CENTER);
//the size of the rect will increase/decrease as the mouse moves
rect(0, 0, mouseX, mouseY + 50);
pop();
//rotating clockwise
angle1 = angle1 + 5;

//as the mouse goes right, the size of the circle increases
if (mouseX > width/2) {
circW = (width/2 + 50);
} else {
circW = (mouseX);
}

//as the mouse moves around, the color of the circles change
stroke(0);
fill(mouseX, 170, mouseY);
circle(mouseX, mouseY, circW);

}``````

I really wanted to play around with gradient colors and seeing the after-effects of each shape’s fast movements. At first, I wanted to experiment with having my background(…); line of code in my function setup() and how that would change my drawing, but it wouldn’t work with my rotating rectangles, so maybe I’ll experiment in a future project.

## Lanna Lang – Looking Outwards – 03

Digital Grotesque is made up of two full-size grottos that were 3D printed out of sandstone. It is a highly ornamented structure that was designed by algorithms, depicting how new technology is leading to radical changes in architectural design, and Digital Grotesque demonstrates this by taking this new technology to a scale never done before – truly life-sized. What I find admirable is the absolute intricacy of each crevice in this piece. The work is a 3.2-meter-high, 16 square meters long room, and is crammed full of minute details that stand between chaos and order.

Nothing can make this project any more perfect than it already is. It suggests an unimagined richness that at a glance can be overwhelming, and all the viewers can do is marvel, become curious and bewildered. One “flaw” that could be said about this piece is the seams between each 3D printed section, but I actually enjoy seeing the seams as a viewer because it’s a reminder of where this was initially conceived from; it’s not pretending to be built from stone or marble, it’s accepting its 3D printed quality. I applaud the creators who perfectly executed the concept full of juxtaposition: complexity yet reductionism, chaos and order, natural and artificial, foreign and familiar through its architectural design, composition, and geometric processes.

This project was reminiscent towards the Church of Sagrada Familia by Spanish architect Antonio Gaudi, and the artists are architects, programmers, and professors who are passionate about exploring the vast opportunities that computation applications can affect design and fabrication of architectural forms.