haewanp – Project 04 – String Art

String Art

//Hae Wan Park

//radius of imaginary circle that its boundary contains X, Y coordinate of beginning or ending point of lines
//radius of some ellipses
var r1 = 110; 
var r2 = 90;
var r3 = 55;
var r4 = 40;

//X, Y coordinate of beginning or ending point of lines
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;

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

function draw() {
    translate(width/2, height/2);
    //circle yellow 1
    fill(255, 220, 100);
    ellipse(0, 0, 2*r1, 2*r1);
    //circle yellow 2
    fill(255, 240, 100);
    ellipse(0, 0, 210 + r4/3, 210 + r4/3);
    //circle green
    fill(211, 229, 212);
    ellipse(0, 0, 180, 180);
    //circle blue
    fill(0, 50, 130);
    ellipse(0, 0, r4*2, r4*2);
    //along the boundary of imaginary circle, lines are created in each 5 degree
    for (var a = 0; a < 360; a = a + 5) {
        x1 = cos(a) * r1;
        y1 = sin(a) * r1;
        x3 = cos(a) * r3;
        y3 = sin(a) * r3;
        stroke(242, 109, 98);
        line(x1, y1, -cos(a - 110) * r1, -sin(a - 110) * r1);
        line(x3, y3, -cos(a - 90) * r4, -sin(a - 90) * r4);
    //along the boundary of imaginary circle, lines are created in each 10 degree
    for (a = 0; a < 360; a = a + 10) {
        x2 = cos(a) * r2;
        y2 = sin(a) * r2;
        x3 = cos(a) * r3;
        y3 = sin(a) * r3;

        stroke(255, 240, 100);
        line(x2, y2, x3, y3);
        stroke(0, 50, 130);
        line(x3, y3, -cos(a - 80) * r4, -sin(a - 80) * r4); 
    //change size of radius based on position of mouse
    r4 = map(mouseY, 0, 300, 30, 80); 
    r1 = map(mouseX, 0, 400, 70, 170);

    //if press mouse radius increases then release radius decrease
    if (mouseIsPressed){
        r2 = r2 + 10;
    } else {
        if (r2 > 90) {
            r2 = r2 - 5;
    //blue lines around canvas
    stroke(0, 50, 130);
    for (var i = -30; i < 30; i++) {
        line(-150, i*17, i*17 - 120, 150);
        line(150, i*17, i*17 + 120, -150);
        line(-150, i*17, -i*17 - 120, -150);
        line(150, -i*17, i*17 + 120, 150);


The process was a bunch of geometry to calculate the X, Y coordinate of lines which are created along imaginary circles. I created the animation based on the mouse behaviors. Especially, I like that raylike lines are stretched out when the mouse is pressed.



//Shariwa Sharada

var gap = 1; //spacing between lines 
var x1 = 0; //starting point x
var x2 = 200; //mid-point x
var x3 = 400 //endpoint x
var y1 = 150; //midpoint y 
var y2 = 0; //starting point y
var y3 = 300; //end point y 

function setup(){
	strokeWeight(1); //predetermining the stroke weights of everything 	

function draw(){
	background(255, 247, 213);

	gap = map(mouseY, 0, 300, 3, 10);//mapping the gap size so that it is proportionate no matter the placement of the mouse
	var g = 150; //changing the green value
	var b = 100; //changing the blue value
	var r = 50; //changing the red value

	for (var i= 0; i< width; i++){ 
		//creating the first pair of dark green to yellow curves 
		line (x1, gap*i, gap*i, y1);//creating lines based of the start and mid points
		line (x2, gap*i, gap*i, y2);
		g += i/20; //creating a gradation in the colour range in terms of the increment
		r += i/10;

		//creating the second pair of yellow to dark green curves 
		line (gap*i, height-y1, width-x1, gap*i); //creating lines based of the end and mid points
		line (gap*i, height-y2, width-x2, gap*i);
		g += i/2;//creating a gradation in the colour range in terms of the increment
		r += i/4;

	//creating the third pair of green to blue curves 
	for (var j= 0; j< width; j++){
		line (x3, gap*j, gap*j, y1); //creating lines based of the end and mid points
		line (x1, gap*j, gap*j, y3);
		g += j/20; //creating a gradation in the colour range in terms of the increment
		b += j;



The main aim of my work was to examine the difference between larger increments and smaller increments while trying to vanish some lines into the background and keeping focus on a few of them. I wanted to explore this idea because I found it fascinating how the lines when they come together form this dense intrinsic pattern of curves that you could never imagine that they could come from straight lines – but as you drag the mouse away, you realise what actually creates the lines and it makes you wonder about the complexity of everyday simple objects like curves


Italian artist Loris Cecchini uses sound waves hitting water and creating ripples as the inspiration for his sculptural work – he focuses on creating something invisible, naked and visible in its true for to an unassuming viewer.

Each of Cecchini’s installation pieces freeze momentary natural forms on the wall, encased in polyester resin and white paint. The lack of motion and their monochromatic treatment leave each beautiful form open to interpretation and with an invitation to appreciate the patterns of the natural world.

And of course, none of this would have been possible without the correct use of technology, as Cecchini himself says:

“I’m very interested in the utopian dimension which bonds technology and nature. And I try to interpret a cultural landscape made of different “realities “, working on a diffused perception made of virtuality and consistent matter; in this sense I try to bridge. Naturally my work opens that to the wandering thoughts of the spectator.”

mjeong1-Looking Outwards-04-SectionA

Nature and Humans Harmonize in a Symphony of Architectural Sound

Wunderbugs by OFL Architecture in Rome, Italy

Wunderbug is a installation that explored connection between human and nature. The pavilion has 6 plastic spheres inside of circular wall. Each sphere contains small terrarium and insects. The pavilion is equipped with a series of Arduino sensors to detect motion of insects as well as weather data, which is programmed to record changes and produce a soundtrack of data. I think the way OFL Architecture approaches to nature is interesting because they focused on acoustic quality of nature and how the sound is not only interactive with humans but also with the insects, the nature. I admire how they closely looked into motion of each insect and how they produce tactile experience  for humans not only through visual installation but also through sound effect. It would be a valuable lesson that the nature is not just a beautiful picture frame that people just look at, but it has life and constantly produce small changes even though changes are too subtle to notice.

I think it could be more intersecting to see visual changes of the pavilion based on those data. Perhaps, the facade of the pavilion could be interactive according to the insect motion data. On the other side, the visual quality of the pavilion could be related to sound that is being generated.

Link to archdaily



//Fon Euchukanonchai
//15-105 SECTION A

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

function draw () {

	var w60 = width/60; //increment variable


	conMouseX = constrain(mouseX, 0, 310); //constrain mouse to desired point of stopping movement
	tlRatio = map(conMouseX, 0, width, 0, width/30); //remaps mouseX point for for loop

	for (var x = 0; x < 30; x ++){
		//pink lines

		stroke(255, 0 , 255);
		//left half pink lines
		line(x*w60, height/2, width/2, x*tlRatio)
		//right half pink lines
		line(x*w60+width/2+5, height/2, width/2, x*tlRatio)

		//blue lines

		stroke(0, 255, 255)

		//right half blue lines
		line((x*w60)+width/2, height/2, width/2, x*tlRatio)
		//left half blue lines
		line(x*w60, height/2, width/2, x*tlRatio+5)
		//most left blue lines
		line(x*width/60, 0, 0, height/2)

		//yellow lines
		stroke(255, 255, 0)

		//left half yellow lines
		line(x*w60+5, height/2, width/2, height-x*tlRatio)
		//most left yellow lines
		line(0, x*w60+height/2, width/2, height)
		//lighter pink lines
		stroke(255, 100, 255)

		//left half pink lines
		line(x*w60, height/2, width/2, height-x*tlRatio)


I wanted to experiment with how string art and particularly moving string art would affect color composition when they interact, as they come together and fall apart, mix and divide.


Nightingale and Canary from Andy Thomas on Vimeo.

Nightingale and Canary

Andy Thomas, an Australian artist, creates “audio life forms”. He creates 3D animations that respond to audio inputs. For this project, he used archival bird recordings in order to visualize digital sound sculptures that animate in reaction the songs of each bird. I found crossing the boundary between constructing visual thoughts and sound thoughts interesting and attractive in his work. There is a sensible and lifelike touch in translating bird sounds into bird like forms. Thomas is interested in literally casting technology’s impact on nature into a visualized form, and has recently been diving into audio software. Through this new path of artistic investigation Thomas once again finds a way to create works in which nature and technology combine.

hdw – Project 4 – String Art


//Helen Wu
//Section A
//Project 4

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

function draw() {

//curve one and two
for (var a = 0; a <= 41; a += 3) {
  line(a, 0, 3*a, height-a);
  line(3*a, height-a, 5*a,300);

  line(width-a, height, width-3*a, a-height);
  line(width-3*a, a-height, -5*a, 0);

//three and four
for (var a = 3; a <= 500; a+=5) {


//curve five and six
for (var a = 0; a <= 130; a += 3) {
  line (width-3*a, height-a, 5*a, 300);
  curve(width-a, width, width-3*a, height-a, width-3*a, height-a, 5*a, 300);

//curve seven + eight
for (var a = 0; a <= 130; a += 3) {
  line (3*a, a, width-5*a,height-300);
  curve(width-a, width, width-3*a, height-a, width-3*a, height-a, 5*a, 300);

//curve nine
for (var b = 3; b <=90; b += 5) {


I struggled a bit on this week’s project. It’s hard to predict where the curves and lines will end up, so I went with a more experimental approach with my project. I do like the way the colors interact with each other, and the interesting texture created by the criss cross. However, I wish I could have the lines behave more uniformly.


I read an article about the increasing capabilities of machines to make music, especially in the mimicry of iconic music made by people. It was interesting to see this topic made people react a number of ways. Some expressed disgust that people would consider that computer-generated music as “real” music or art, while others were more optimistic and speculated the commercial applications of computer-generated music. David Kope, a composer and computer scientist, also authored a book titled “Experiments in Musical Intelligence” in 1981- so this concept has been growing for some time.

I don’t know much about the algorithms involved in creating computer-generated melodies, but prior to reading this article, I did know about a different but related concept. In 2004, Japan produced a program called Vocaloid, which is a singing synthesizer- meaning samples are taken from voice actors’ or singers’ voices, and those samples are manipulated by program users to create songs. The users have to input the melody and lyrics. I think both of these projects probably have to confront the concepts of what is considered art, and where the source of originality and creation lay. It’s really interesting to me how they both allow for people to create new melodies in sync with machines, that couldn’t have been created by either being alone.

It could indeed be argued that machine-produced music determined by algorithms “doesn’t count” as art, but I don’t think that’s necessarily true- if humans created the algorithms necessary to create the melodies, even if they mimic existent styles, they still went through the creative process in a unique medium.

Link to the article I read-



//Min Young Jeong
//Section A 9:30am

function setup() {
function draw() {
    var r = mouseX; //controls r vallue of color based on mouseX
    var g = mouseY; //controls g vallue of color based on mouseY
    for (i = 0; i < 100; i++) {
        var x1 = 0;
        var x2 = i * mouseX/40;
        //x2 incrementally increases based on mouseX
        var y1 = i * mouseY/30;
        //y1 incrementally increases based on mouseY
        var y2 = height;
    line(x1,y1,x2,y2); //lower left 
    line(width-x1,height-y1,width-x2,height-y2);//upper right
    line(width-x1,height-y1,x2,y2); //lower right
    line(x1,0,x2,height);//left "right triangle" geometry
    line(width-x1,height,width-x2,0);//right "right triangle" geometry


For this assignment, I drew inspiration from wave. I created  five different geometry using strings and made them intersection at some point to give some characteristic of the wave. Also, I wanted to create an interactive string art. Position of mouse controls distance and color of the strings.




//Hannah Kim
//Section A

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

//make rows of lines stemming from the center
//change opacity of lines to give glowing effect
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(143, 204, 51, 85);
      line(150, 200, lineW, 50);
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(114, 163, 41, 90);
      line(150, 200, lineW, 100);
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(86, 122, 31, 95);
      line(150, 200, lineW, 150);
for (var lineW = 50; lineW < 250; lineW += 8) {
    //use map function to make middle row of lines
    //lines move up and down if mouse moves up and down
		var lineY = map(mouseY, 0, 200, 0, 400);
		stroke(59, 92, 10);
     	line(150, 200, lineW, lineY);
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(86, 122, 31);
      line(150, 200, lineW, 250);
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(114, 163, 41);
      line(150, 200, lineW, 300);
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(143, 204, 51);
      line(150, 200, lineW, 350);


My goal for this project was really just to get comfortable using the for loop function. I really wanted to create a laser-esque feeling effect by using layers of string groups and making one “scan” from the top of the canvas to the bottom.