// Rouann Chen
// rouanc
// Section B
var angle;
var pos;
var side;
function setup() {
side = 60;
createCanvas(400, 400);
angle = 0;
pos = p5.Vector.fromAngle(0);
setRadius();
}
function setRadius() {
var m = min(width, height);
var radius = m/2-side*0.6;
pos.setMag(radius);
}
function drawRect(pos) {
push();
translate(pos.x, pos.y);
rotate(angle);
rect(-side/2, -side/2, side, side);
pop();
}
function draw() {
translate(width/2, height/2);
drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
angle += 0.029;
pos.rotate(sin(angle)/40);
}
I was inspired by snakes and wanted to draw something that moves infinitely. Instead of using lines, I tried to use endless rectangles connected together to represent a single line.
]]>This project is a visual demonstration of David Bowie’s Space Oddity by designer Valentina D’Efilippo and researcher Miriam Quick. In the animation they created, I’m drawn by their ability of deconstructing the melody, harmony, lyrics of the original sound and re-represent those elements in a visual system.
I’m guessing that they understood and studied the music very well before they started this project and created the animation so that they were able to make the combination of the visuals and the music so satisfying for the audience.
The animation is only in black and white. Delivering the animation in such a clean style helps the audience to notice more of the harmony of the visuals and the sound. The contrast between black and white made the transformations of those visual elements, such as resizing and translating) pop out more. In this way, the audience will focus more on the correspondence between movement of visual elements and the flow of the sound.
This project explores how humankind can combine kinetic manufacturing with the nature’s biological construction. I’m most amazed by the fact that the creators actually directed the movement of the silkworms to monitor the thickness and silk layer produced. I admire this aspect so much because silkworms are living creatures and there are is no way that we can communicate with them to discipline or guide them, which makes the process of developing the kinetic manipulation very difficult since one tiny miscalculated factor could lead to a totally unexpected result structure.
I assume the team combined chemical, biological, physics, architectural and programming knowledge to put this project together. They should’ve programmed the various environmental factors of the room to be within a certain range for the silkworms to move the way they are expected to as well as calculating the position and size of the holes in the structure that release tensile stress.
The team’s architectural background made this project a good combination of the natural curvy shape and scientific cleanness of the structure.
]]>function setup() {
createCanvas(600, 450);
text("p5.js vers 0.9.0 test.", 10, 15);
}
var s; //rect scale
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;
var x4;
var y4;
var x5;
var y5;
var w = 30; //rect
var r; //rotation
function draw() {
background(255);
//change background color based on four quadrants
if(mouseX < (width/2) & mouseY < (height/2)){
w = mouseX;
background(245, 209, 213);
} else if(mouseX > (width/2) & mouseY < (height/2)){
w = mouseX - (mouseX/2);
background(225, 164, 186);
} else if (mouseX < (width/2) & mouseY > (height/2)){
w = mouseX;
background(224, 186, 241);
} else if(mouseX > (width/2) & mouseY > (height/2)){
w = mouseX - (mouseX/2);
background(251, 186, 207);
}
//heart
if (200<=mouseX & mouseX<=400 && mouseY>100 && mouseY<300){
x1 = mouseX + 80;
x2 = mouseX + 130;
x3 = mouseX + 10;
x4 = mouseX + 110;
x5 = mouseX + 60;
y1 = mouseY + 130;
y2 = mouseY - 10;
y3 = mouseY + 10;
y4 = mouseY + 60;
y5 = mouseY + 90;
s = 0.77;
r = 0;
} else{
x1 = 90;
y1 = 90;
x2 = 130;
y2 = 300;
x3 = 333;
y3 = 120;
x4 = 500;
y4 = 260;
x5 = 400;
y5 = 390;
r += 0.5;
}
fill(251, 250, 186);
circle(x1, y1, 60); //light yellow
fill(205, 189, 173);
circle(x2, y2, 99); //gray
fill(179, 246, 195);
circle(x3, y3, 140); //green
fill(244, 247, 6);
circle(x4, y4, 90); //yellow
fill(161, 128, 196);
circle(x5, y5, 80); //purple
noStroke();
fill(164, 225, 209);
scale(s);
push();
rotate(radians(r));
rectMode(CENTER);
rect(mouseX, mouseY, w, 60);
pop();
}
I wanted to make something cute and warm so my circles are mimicking a heart within a certain range of the canvas and the rectangle is supposed to serve as a bandage for the heart. But I got really confused trying to do the rotation and spinning during the process, need to be more used to java.
]]>//Rouann Chen, Section B
var facewidth = 450;
var eyesize = 50;
var faceheight = 250;
var smile = 15
function setup() {
createCanvas(640, 480);
text("Variable Faces", 10, 15);
}
function draw() {
background(163, 216, 238);
fill(255);
noStroke();
triangle(width/2, height/2 - faceheight/2 - 80, width/2 - 40, height/2 - faceheight/2 + 40, width/2 + 40, height/2 - faceheight/2 + 40); //horn
fill(255, 211, 216);
ellipse(width/2, height/2, facewidth, faceheight); //face
noFill();
stroke(252, 127, 136);
arc(width/2, height/2 + faceheight/2*0.7, 80, 30, 0, PI); //DOUBLE CHIN
strokeWeight(7);
point(width/2 - 5, height/2 + 5);
point(width/2 + 5, height/2 + 5); //piggy nose
var eyeLX = width/2 - facewidth * 0.16;
var eyeRX = width/2 + facewidth * 0.16;
fill(175, 114, 201);
stroke(255);
strokeWeight(9);
ellipse(eyeLX, height/2 - faceheight*0.05, eyesize, eyesize); //left eye
ellipse(eyeRX, height/2 - faceheight*0.05, eyesize, eyesize); //right eye
var mouthLX = width/2 - facewidth * 0.13;
var mouthLY = height/2 + faceheight * 0.17;
var mouthMX = width/2;
var mouthMY = height/2 +faceheight * 0.17 + smile;
var mouthRX = width/2 + facewidth * 0.13;
var mouthRY = height/2 + faceheight * 0.17;
stroke(252, 127, 136);
strokeWeight(3);
noFill();
beginShape();
curveVertex(mouthLX, mouthLY);
curveVertex(mouthLX, mouthLY);
curveVertex(mouthMX, mouthMY);
curveVertex(mouthRX, mouthRY);
curveVertex(mouthRX, mouthRY);
endShape(); //mouth
}
function mousePressed() {
faceheight = random(200, 300);
facewidth = random(200, 500);
smile = random(-20, 15);
eyesize = random(9, 50);
}
Skin Rendering by Altered Qualia
In this project, the figure turns and the perspective changes as the viewer’s mouse moves. Yet, in the meantime, the figure’s eyes are always staring at you straight in your eyes. I admire how real the face is rendered, from the structure of the face, the color and texture of the skin and pupil, to the light and shadow casted on the face. The developer must have devoted a lot of effort in studying the composition of human face. This makes the stare more intimidating and reminds me of the uncanny valley.
Based on my current knowledge, I can only know that it used the mouseX, mouseY functions since the perspective is adjusted by the position of my mouse.
This project is interactive in a way as it makes the viewer uncomfortable to some extent since it falls into the uncanny valley. You would feel like you are watched or monitored by a seemingly real virtual character on the screen.
//Rouann Self-portrait
function setup() {
createCanvas(600, 600);
background(255, 211, 216);
text("I AM A LAZY PIGGY UNICORN", 10, 15);
}
function draw() {
fill(255);
noStroke();
quad(291, 398, 440, 333, 526, 600, 221, 600); //body1
ellipse(298, 300, 450, 319); //head2
fill(253, 245, 206);
triangle(230, 30, 250, 210, 360, 200); //horn3
stroke(0);
strokeWeight(3);
noFill();
arc(270, 280, 99, 30, 0, PI); //sleepyeye4
noStroke();
fill(255, 66, 133);
ellipse(350, 340, 89, 33); //blush5
stroke(255, 150, 157);
strokeWeight(6);
line(290, 330, 280, 350);
line(310, 325, 300, 345);
line(330, 320, 320, 340);
line(350, 315, 340, 335);
line(370, 310, 360, 330); //blush678910
noStroke();
fill(255, 169, 179);
circle(170, 405, 53); //mouth11
fill(187, 218, 236);
rect(323, 120, 110, 51, 53);
rect(380, 160, 110, 49, 33);
rect(420, 190, 110, 53, 33);
rect(460, 230, 110, 50, 33);
rect(470, 270, 110, 53, 33);
rect(460, 310, 110, 53, 33);
rect(440, 350, 110, 53, 33);
rect(420, 390, 110, 53, 33); //hair12
stroke(253, 245, 206);
strokeWeight(29);
point(366, 120);
point(443, 167);
point(433, 210);
point(500, 230);
point(543, 280);
point(480, 320);
point(500, 350);
point(550, 390);
point(447, 440); //dressing
}
3D Printing & Lasers was the class that first introduced me to creating digital artworks. Our professor Sidney created a virtual gallery to put our digital sculpture works in it. His design made our critique more interesting and interactive.
The sculpture works were created by students, but the gallery program was solely developed by him. The time period for him to create the gallery was short, only couple days between the deadline for our submission and our critique. The reason why I admire it so much is that he didn’t have to do all those work, but he had the passion to make our online class experience more fun and real (since it’s designed to be first-person view and u can move freely in the program) during the whole pandemic.
I’m not sure about the whole process as I’m not super knowledgeable about game design. I think he used unity to create the framework and it was released on itch.co platform.
I believe the setup for the gallery was inspired by the movie “The Shining”. It also has a hallway with rooms on both sides. When the viewer enter each room, he/she would see different artworks, some room have traps in it so you might fall into another world within the room.
This project showed how we can communicate art ideas as if we do not have those constraints.