Linyi Dai was an architecture student at RISD in 2015. Their piece, which was featured in Fast Company’s article “The Value of Randomness in Art and Design” uses architectural rendering and I admire how they manipulated the random function to create a 3-dimensional shape. I think the way artists can use computers to make shapes is really cool, especially 3-D ones. Dai restricted the random values to a certain parameter and used the value of each register over 50 steps to generate the rungs of a sphere. Dai is an architect and I think this piece demonstrates the ability to render 3-D shapes in a way that is necessary for their field.
Author: mel
Project 5-Wallpaper
I was inspired by the floral wallpapers that were in the archive and I decided to go with something similar to that. I went with a daisy theme and added vines, leaves, and dots in the background to add a consistent pattern.
var x=50;
var y=50;
var angle=0;
function setup() {
createCanvas(600, 600);
}
function draw() {
background(153, 205, 171);
noStroke();
//dot background
for (var i=0; i<=600; i+=25){
for (var n=0; n<=600; n+=25){
fill(192, 213, 199);
circle(i, n, 7);
}
}
//vines
for (var x=0; x<=600; x+=150){
push();
translate(x, 0);
vines();
pop();
}
//leaves
for (var x=0; x<=600; x+=300){
for (var y=0; y<=1500; y+=150){
push();
translate(x, y);
leaves();
angle+=180;
pop();
}
}
for (var x=150; x<=600; x+=300){
for (var y=-50; y<=1500; y+=150){
push();
translate(x, y);
leaves();
angle+=180;
pop();
}
}
//daisies
for (var x=50; x<=750; x+=300){
for (var y=50; y<=1500; y+=150){
push();
daisy(x, y);
pop();
}
}
for (var x=200; x<=600; x+=300){
for (var y=0; y<=1500; y+=150){
push();
daisy(x, y);
pop();
}
}
noLoop();
}
function daisy(x, y) {
push();
translate(x, y);
scale(0.9);
for (var angle=0; angle<360; angle+=15){ //petals
stroke(210);
strokeWeight(0.75);
fill(241, 248, 243,);
bezier(0, 0, 100, 10, 50, 90, 0, 0);
rotate(radians(angle));
}
fill(233, 232, 51);
circle(0, 0, 15); //center
}
function vines() {
stroke(25, 84, 46);
strokeWeight(12);
noFill();
for(var y=0; y<height; y=y+1){
point(60-25*sin(radians(1.5*y)), y);
}
}
function leaves() {
push();
scale(0.5);
translate(100, 125);
rotate(radians(angle+110));
stroke(25, 84, 46, 150);
strokeWeight(0.75);
fill(149, 214, 33);
bezier(1,0,-47,-80,-47,-120,0,-175);
bezier(0,-175,47,-120,47,-80,-1,0);
line(1, 0, 0, -175);
pop();
}
During this project I offset the daisies to add some interest. I also had to work with bezier curves, which was difficult because I haven’t done that before. I used bezier curves with the petals and leaves. I initially wanted to use ellipses, but I saw someone make a flower in p5.js online using bezier curves, but with pointed tips. I realized that you can have the two anchor points in the same place and make a better looking flower petal.
I used the pointed tips method with two bezier curves next to each other to make the leaves and then played with the sizes of everything using scale(); until I was happy.
Looking Outwards 05: 3D Computer Graphics
I decided to look at “Portrait of Hope” by Leticia Gillett. I admire it because the skin looks so realistic yet stylized at the same time. It can be hard to portray mature skin because there are more details to worry about but Gillett did a great job. I don’t know a lot about the algorithms that generated and/or rendered the work but she works at Walt Disney animation and mentions LookDev. Gillett’s piece resembles a lot of the animation styles you see in modern Disney movies, and it is meant to be a portrait of her personal hero Jane Goodall. You can tell that she really admires the person she’s portraying with the soft light and dignified appearance of the person.
Project 4-String Art
I wanted to make this look trippy
function setup() {
createCanvas(400, 300);
background(0);
}
function draw() {
stroke(255);
for (var i = 0; i <= 50; i += 1) { //border pattern
stroke(random(0, 256), random(0, 256), random(0, 256), 150); //rainbow colors
//line(0, 10*i, 10*i, 300);
//line(10*i, 0, 400, 10*i);
line(0, 150+(4*i), 10*i, 300); //bottom left
line(400, 150+(4*i), 400-(10*i), 300); //bottom right
line(400-(10*i), 0, 0, 4*i); //top right
line(10*i, 0, 400, 4*i);
}
stroke(0, 0, 255);
noFill();
square(150, 100, 100);
for (var n=0; n<=10; n+=1) {
var shade=200-12*n;
stroke(shade, 0, 0);
line(250-(10*n), 100, 150+(10*n), 200);
}
noLoop();
}
Looking Outwards 04: Sound Art
The project I picked to look at this week is Laetitia Sonami’s instrument, “The Lady’s Glove.” That Lady’s Glove is a mesh evening glove she wears during performances that allows her to trigger and manipulated sound during her live performances. I admire her innovation and technical skill she needed to create this glove and the idea that you can make an instrument out of anything. The glove is filled with sensors like micro-switches, transducers, pressure pads, resistive strips, ultrasonic receivers, light sensors, accelerometers, and a mini microphone. She uses these to send data to her computer which are routed through Sensorlab, hardware developed by STEIM. They’re then mapped onto MAX MSP software. Laetitia is trying to find the line between the musician and the instrument, and I think she is very successful with that by creating an instrument which is molded to her hand.
Project 3-Many Squares
var x;
var y;
var r=0;
var g=0;
var b=0;
var xtrans=300;
var ytrans=225;
function setup() {
createCanvas(600, 450);
background(0);
}
function draw() {
var dir=mouseX * 1.5;
x=mouseX;
y=mouseY;
translate(xtrans, ytrans);
r=mouseY; //makes color change with mouse movements
g=255-mouseY;
b=mouseX;
fill(r, g, b);
var m = max(min(mouseX, 400), 0);
var size = m * 350.0/400.0;
rotate(radians(dir));
rectMode(CENTER);
var n = max(mouseX, 400);
rect(x + m * 190.0/400.0, y + m * 190.0/400.0, m, m); //the two rectangles are opposites, one is big when the other is small
rect(-(x + n * 190.0/400.0), -(y + n * 190.0/400.0), n, n); //both sizes of rectangles depend on mouse
if (mouseIsPressed) { //moves the origin to mouseX and mouseY when mouse is pressed
xtrans = mouseX;
ytrans= mouseY;
}
}
I like squares.
Looking Outwards 03: Computational Fabrication
Iris Van Herpen is an innovative fashion designer who has dressed some of the biggest stars in Hollywood, including Lady Gaga, Solange, and Katy Perry. Her designs are unique because she is constantly creating new materials and pushing the boundary of what fashion is. The collection I’m looking at is “Shift Souls,” which she unveiled in January, 2019 during Paris Fashion Week. The specific piece I’ll be talking about is “Cellchemy” face jewelry that was created in collaboration with Delft University of Technology.
I admire this piece because Van Herpen is constantly trying to reinvent the definition of fashion, and the piece is not only beautiful, but extremely intriguing when you realize what’s behind it. They used Grasshopper 3D to develop a generative design process based off of a 3D face scan, which was then combined with color information. This mapped a structure which resembled the face and worn as a mask. Van Herpen’s vision for this collection was based around advancements in DNA engineering which created the first human/animal hybrid. She confronts the unclear implications of the reality that we now have to address. The idea is manifested in “Cellchemy,” because the mask represents hybridity by creating lace-like masks of the human face that look animalistic.
Project 2-Changing Faces
var eyeSize=40;
var faceWidth=250;
var faceHeight=300;
var browHeight=270
var smile=5
var pie=0
var pupil=18
var lidSize=5
function setup() {
createCanvas(480, 640);
}
function draw() {
background(165, 222, 214);
strokeWeight(1);
noFill()
ellipse(width/2, height/2, faceWidth, faceHeight);
strokeWeight(2);
fill(255);
var eyeL=width/2-faceWidth*0.25
var eyeR=width/2+faceWidth*0.25
ellipse(eyeL, height/2, eyeSize); //eyes
ellipse(eyeR, height/2, eyeSize);
fill(0);
ellipse(eyeL, height/2, pupil); //pupils
ellipse(eyeR, height/2, pupil);
fill(118, 186, 177);
arc(eyeL, height/2, eyeSize + lidSize, eyeSize, 9.4, 2*PI); //eyelids
arc(eyeR, height/2, eyeSize + lidSize, eyeSize, 9.5, 2*PI);
noFill();
strokeWeight(4);
eyeL=width/2-faceWidth*0.35
eyeR=width/2+faceWidth*0.35
line(eyeL, 270, 200, browHeight); //brows
line(eyeR, 270, 275, browHeight)
arc(width/2, 375, 100, smile, 0, pie*PI);//mouth
}
function mousePressed() {
browHeight=(random(240, 300) | 0);
console.log(browHeight);
smile=random(3, 75);
pupil=random(10, 30);
pie=random(0,1);
eyeSize=random(40, 60);
lidSize=(0, 6)
}
I decided to make the various expressions of someone who would get punched in the face at a bar.
LO-Generative Artwork
The project Zauberflöte is a massive architectural feat from generative artist Michael Hansmeyer. He created it as set design for Romoeo Castellucci’s production of Mozart’s Magic Flute for the La Monnaie theater in Brussels. The first thing I admire about it and that anyone notices, is the scope. The structure is massive and consumes the entire stage. The detail of the sculpture is intense, and I truly can’t comprehend how many tiny details that would never be seen from the audience were included in this piece. I also admire the way it fits with the show, the Magic Flute.
Hansmeyer uses CAD software and algorithmic architecture techniques. For the Zauberflöte grotto, the algorithm was used to create something that appeared both synthetic and organic using a generative subdivision algorithm. There is a simple input form that is divided into smaller surfaces over and over again. By altering division rations, Hansmeyer and his team can create very complex geometric surfaces.
Hansmeyer often asks himself “what is the origin of the forms that we design?” and “what kind of forms could we design if we could free ourselves from our experience?” He uses computational design to find these unseen forms to create something no human could think of. His artistic sensibilities are centered around exploration and a deviation from the tradition, and that’s why he uses the generative subdivision algorithm to create shapes that are seemingly irrational.
Project 1 – Self Portrait
Here’s my self portrait
function setup() {
createCanvas(700, 900);
background(151, 210, 165);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
fill(54, 36, 28); //hair
noStroke();
ellipse(350, 400, 600);
square(50, 400, 600);
fill(203, 175, 125); //neck+ears
rect(200, 450, 300, 700);
quad(75, 470, 70, 480, 110, 600, 350, 500);
quad(624, 470, 629, 480, 589, 600, 350, 500);
fill(219, 190, 140); //skin
ellipse(350, 450, 500);
quad(100, 450, 350, 450, 350, 850, 140, 750);
quad(600, 450, 350, 450, 350, 850, 560, 750);
fill(54, 36, 28); //eyebrows
quad(300, 400, 200, 385, 150, 410, 300, 425);
quad(399, 400, 499, 385, 549, 410, 399, 425);
stroke(54, 36, 28); //lashes
strokeWeight(3);
noFill();
arc(225, 475, 95, 60, PI, TWO_PI);
arc(474, 475, 95, 60, PI, TWO_PI);
noStroke();
fill(54, 36, 28); //pupils
ellipse(225, 462, 20, 35);
ellipse(474, 462, 20, 35);
fill(205, 156, 127); //nose
quad(350, 500, 300, 625, 350, 650, 400, 625);
noFill();
stroke(85, 4, 4); //lips
strokeWeight(5);
arc(350, 690, 150, 40, 0, PI);
}