Author: bibabobabi

Project – 04 – string art

project 04
// 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.

LO – 04 – Sound Art

Oddityviz Space Oddity

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.

animation for the project

LO-03-Computational Art

Silk Pavilion II

The final presentation of the project.

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.

During the construction of the structure.

The team’s architectural background made this project a good combination of the natural curvy shape and scientific cleanness of the structure.

Project – 03- Dynamic Drawing

dynamic drawing
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.

Variable Faces

variable faces
//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);

}

blog02-generative art

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.

Project 1 – Self Portrait

portrait
//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
	

}

LO – My Inspiration

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.