Brandonhyun- Project-07-Curves


//Brandon Hyun
// 15104 Section B
// Project 07

var k = 900/30;
var j = 60/80;

function setup() {
    createCanvas(440, 440);

function draw() {
  translate(width/2, height/2);

	stroke(30, 400, 21);

	for (var t = 0; t < TWO_PI * 8; t += 0.2){
		var r = map(mouseX, 0, (500 * cos(k * t)), mouseY, (200 * cos((k*j) * t)));
		var x = r * sin(t);
		var y = r * cos(t);

	for (var s = 0; s < TWO_PI * 4; s += 0.01){
		var r2 = map(mouseX, 0, (40 * cos(k * s)), mouseY, (20 * cos((k*j) * s)));
		var x2 = r2 * sin(s);
		var y2 = r2 * cos(s);


For this Project, I wanted to create a LaserBeam effect using different curvatures and effects. When I came up with this idea I knew that the color of the strokes that I am creating have to be light green and also very thin. So I decided to add these effects into my code and make sure that it represented that.

Since we had to create compositions with geometric shapes I wanted to see them inside the laser beams that I created. So as you move the mouse to mouseX and mouse Y, you can see that there are geometric shapes that exist in those light beams which are very dynamic.

It was difficult in the beginning, but did some research in the internet and also referred to some of Schiffman’s videos in Youtube and that helped me a lot with this assignment. It has been a while since I did mathematics and getting refreshers on sin, cos, and tan was somewhat exciting and new. I hope I can create different compositions with this method of using trigonometry and lines.


“Musical Buoy in Search Towards a New Shore” (2009), All images courtesy of Nathalie Miebach
The musical score for “Hurricane Noel.”All images courtesy of Nathalie Miebach

Nathalie Miebach is an artist who turns Weather Data into physical artwork just like this “Musical Buoy in Search Towards a New Shore” sculpture and the “Hurricane Noel” musical scores.

Ordinary people would never interpret weather data such as Nathalie Miebach and I find this quite fascinating because this is bringing Art, Music, Science, and Math together as one entity. This artifact could exist in an art gallery, in a science lab, and in a concert hall because these artifacts that she creates fit into these areas of study. Her work is very detailed and accurate that scientists can interpret the data just with the sculpture. The relationship between all the realms of the academic field of art and visuals is so interesting to me and I hope I can tie different academics together with my practice. When she is creating these artworks, she analyzes the weather data and assigns certain patterns of weather with color and objects in the case of her sculptures.

Nathalie Miebach’s Website



Brandonhyun- Project-06-Clock


//Brandon Hyun
//15104 SectionB

var fryingPan;
var innerFryingpan;
var value;
var c;
var yolk;
var limit;
var changeeggwhiteColor;
var rpos1;
var rpos2;
var changePositionegg;
var prevSec;
var millisRolloverTime;

function setup() {
  createCanvas(400, 400);
	fryingPan = 0;
	limit = 120;
	innerFryingpan = 40;
	yolk = color(255, 204, 0);
  millisRolloverTime = 0;


function draw() {
  var H = hour();
  var M = minute();
  var S = second();
  var areaCircle = ellipse(width/2,height/2,280,280);
  var rcircle = random(areaCircle);

	changeeggwhiteColor = map(S, 0, 60, 40, 255, true);
  changePositionegg = map(S, 0, 60, 100, 400, true);

	c = color(200, 200, 200, changeeggwhiteColor);

  value = alpha(c);

  if (prevSec != S) {
       millisRolloverTime = millis();
   prevSec = S;
   var mils = floor(millis() - millisRolloverTime);

   text("Hour: "   + H, 10, 22);
   text("Minute: " + M, 10, 42);
   text("Second: " + S, 10, 62);
   text("Millis: " + mils, 10, 82);

   var hourBarWidth   = map(H, 0, 23, 0, width);
   var minuteBarWidth = map(M, 0, 59, 0, width);
   var secondBarWidth = map(S, 0, 59, 0, width);

	ellipse (width/2,height/2,300,300);
	ellipse (width/2,height/2,280,280);

  var i = map(S, 0, 60, 200, 400, true);
  if (i > 300) i = 600 - i;
  var j = width - sqrt(90000 - i*i);

	ellipse (i,j-100,100,100);
	ellipse (i-40,j-100,50,50);
	ellipse (i-30,j-70,40,50);
	ellipse (i+30,j-80,60,60);
	ellipse (i-10,j-130,60,60);
	ellipse (i+20,j-120,60,60);
  // ellipse (i,j,100,100);
	// ellipse (i-40,j,50,50);
	// ellipse (i-30,j+30,40,50);
	// ellipse (i+30,j+20,60,60);
	// ellipse (i-10,j-30,60,60);
	// ellipse (i+20,j-20,60,60);
	ellipse (i+10,j-110,50,50);


For this Assignment, I tried to emulate egg cooking on a frying pan. As minute passes, the egg gets fried and the egg yolk becomes whiter.

I had some difficulty getting the entire egg in a random position every time a minute passes. However, it was really nice working with the time variable and pitch my interest of cooking into this project.



Holger Lippmann is an artist who uses Processing, which is a drawing software, to create these visuals that are randomly generated and modified in a way where he decides the composition of the work. He also developed the Processing program so it would have certain aesthetic feel in his work. With them, he composes delicate structures and abstract geometrical patterns where he can layer and vary. The LUMAS pieces are based on a special program, in which the artist set a range of parameters to regulate the scattering of the geometrical elements. Lippmann then unites different compositions made in this way into cohesive pieces. “My internal process is the same as it was when I was working with paint and canvas,” Lippmann explains. “That’s why I call my current work digital or computer-aided painting.” Lippmann is also a painter, who knows what color he should use and has a knowledge about what the right composition is. So he is aware of what type of visual choices he makes.

Holger Lipmann’s Website


Brandonhyun- Project-05-WallPaper


//Brandon Hyun
//15-104 Section B
//Project 05

function setup() {
    createCanvas(460, 460);
    background(100,200,300); // blue background

function draw() {

//Red Circle
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      ellipse (row,col,50,50);
//white Circle#1
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      ellipse (row+11,col+11,21,21);
  //Blue Circle #1
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      ellipse (row+10,col-10,21,21);
//white circle #2
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      ellipse (row-10,col+10,21,21);
//blue circle#2
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      ellipse (row-11,col-11,21,21);

For this project, I wanted to create something that is simple but interesting. I necessarily did not have a set design that I wanted to pursue but I wanted to play around with the shapes in p5 js. and create an interesting composition.  I used only circles in my patterns but interestingly, the combinations of circles created a star shape.

I also wanted to color code my shapes so I used color combinations that would match well with the blue background. My reference came from this image from google.


Liars — Brats from ian cheng on Vimeo

Ian cheng is a contemporary artist who uses 3d animation and Artificial Intelligence to create “live simulations” that are infinite in duration and composed of both man-made and algorithmically generated content that together produce emergent behavior and sound.

The visual aesthetics that Ian produces is very interesting because it is rigid and fine with details. Even though the visuals are very interesting the behaviors that each character produces in his “live simulations” is what is so interesting. The algorithms that Ian produces is based from the game called the “Sims” and that became the reference for his algorithms.

Ian is not the visual creator for his artwork but it is the algorithms and the program that create these visuals and sounds. The manifesto that the program creates in this artwork is significant since we are heading into a era where Artificial Intelligence is becoming dominant.

Ian Cheng’s Website

Work that “Live Simulations” produced

Emissary Forks At Perfection, live simulation and story, 2015


Brandonhyun- Project-04-String-Art

I was trying to emulate wave shapes and the movement of waves in this project. When the mouse is moved through the x axis, the strings are elongating towards the right of the canvas and when the mouse is moved through the y axis then the strings elongating downwards.

When the mouse is clicked the background color changes.


// Brandon Hyun
// 15-104 Section B
// Project 04

var increase = 15;
var xInt = 15;

var x1 = 0;
var y1 = 550;
var x2 = 550;
var y2 = 0;
var red;
var green;
var blue;

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

function draw() {
  background (red,green,blue);
  var m = 400/25;
	for(var i = 0; i < m; i += 1) {

        for(var j =0; j<10; j+=1){
          line(mouseX+40*j, increase * i, increase * i +40*j, y1);

		    for(var z =0; z<10; z+=1){
          line(mouseY+ x2 - increase * i, y2+40*z, x1, increase * i+ 40*z);


function mousePressed() {
  red = random(0,255);
  green = random (0,255);
  blue = random (0,255);


For this week’s Looking Outwards, that is focused on Sound Art, I choose Samson Young, an artist who is from Hong Kong. The project called Nocturne (2015) is a live performance project where Samson collected found footage of night bombing  (Gaza strip, ISIS, gulf war etc.) from the internet and recreate the sounds of the bombing, explosions, and gunshots using household items live.

The recreation of the sounds of bombing and explosions by just using household items seems to be very interesting in this performance because it is essentially saying that daily objects withhold some sort of power and energy. I am fascinated how he was able to convey such emotions using the medium of sound.

Documentation of Samson Young’s Project called Nocturne (2015)

Live Performance Video of Nocturne (2015) – On-site radio broadcast, video, performance

Samson Young’s Web Page




//Brandon Hyun
//15104 Section B

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

function draw() {
//darkens the background as mouse gets closer (0,0) and lighten when the mouse gets closer to (640,0)

//left upper corner chaos circle
  //setting cordinates of where the circles are going to be drawn.
  randomXlocation = random (width/2 +1);
  randomYlocation = random (height/2 +1);
  //drawing the circles with the cordinates and the size of the circle.
  ellipse (randomXlocation, randomYlocation, 50,50);

//right lower corner chaos circle
  //setting cordinates of where the circles are going to be drawn.
  randomXlocation = width/2+ random (width/2 +1);
  randomYlocation = height/2+ random (height/2 +1);
  //drawing the circles with the cordinates and the size of the circle.
  ellipse (randomXlocation, randomYlocation, 50,50);


For this project, I wanted to create something that had a simple concept but complicated visuals. While I was working, I wanted to express the emotion of hecticness that could only be hidden by shadows.

When I was working on this, I had a hard time in the beginning because I wasn’t really sure what variables I needed this code to work.

I think I figured it out.




The Wanderers designed a computational growth process which is capable of producing a wide variety of growing structures. Inspired by natural growth behaviour, the computational process creates shapes that adapt to their environment. Starting with a seed, the process simulates growth by continuously expanding and refining its shape.
A lot of reference comes from organic matters and Prof. Neri Oxman try to reinvent that computationally.

The project by the Wanderers intrigued me to look more in to their work because the 3d shapes that they created look very complex. I am interested how they were able to reproduce organic shapes computationally and how these shapes grow out continuously. It is also interesting to see how these forms are translated to apparels. It is also interesting how gross looking they are because it has a glossy texture to them.

For this project, I wished there was a video or gif that would continuously draw these forms that I can stare in to.