Uncategorized – Page 10 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Sewonp – PO – 07

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project-07

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

function draw() {
	background(0,0,0);
	push();
	translate(width/2, height/2); //placing curve at center
	drawBicorn();
	pop();
}

function drawBicorn(){

	var x;
	var y;
	var w = map(mouseX,0,width,0,200); // changes length of the curve through mouse control
	var h = map(mouseY,0,height,0,200) // changes height of the curve through mouse control
	
	stroke(255,0,0);
	beginShape();
	for(var i = 0; i <200; i ++){
	var t = map (i, 0, 200, 0 ,200);
	x = (w*sin(t)); //x coordinate equation for Bicorn
	y = (h*sin(t)*cos(t)); //y coordinate equation for Bicorn
	vertex(x,y); // placing curve at center
	}
	endShape(CLOSE);

}

For this project, I was very conflicted about choosing the curve as I was not knowledge about the realm of mathematical graphs. Having only known parabolas and hyperbolas, I was surprised to see the myriad of curves on the reference website. Many of the curves seemed somewhat randomly drawn without specific symmetry or shape. As I appreciate symmetry, I decided to select the Bicorn curve. The curve represented a variety of objects such as a ribbon, the infinity sign, and a mask. I tried to develop an abstract visualization of Deadpool’s mask.

I also thought of Spiderman whilst making the project, prompting me to create a web like structure to assimilate spiderwebs when creating the mask.

The web-like structure of the curve outskirts.

Sammie Kim–Project 07–Curves

sketch

//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Project 07 - Curves
var nPoints = 360;

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

function draw() {
    background(0);
    drawHypotrochoid();
    drawAstroid();
}

function drawHypotrochoid() {
    //constraining mouse within the canvas size
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    //stroke color will also change based on the direction of mouse
    var rColor = map(mouseX, 0, width, 0, 230)
    var gColor = map(mouseY, 0, height, 0, 230)
    stroke(rColor, gColor, 200);
    strokeWeight(2);
    noFill();
    //Setting the parameters for the hypotrocoid
    push();
    translate(width/2, height/2); //starting the shape at the center of canvas
    var a = map(mouseX, 0, width, 0, 200); //the radius range of circle
    var b = map(mouseY, 0, height, 0, 50);
    var h = map(mouseX, 0, height, 0, 50);
    beginShape();
    //Hypotrochoid formula
    //http://mathworld.wolfram.com/Hypotrochoid.html
    for(var i = 0; i <= nPoints; i++) {
        var x = (a - b) * cos(i) + h * cos((a - b) / b * i);
        var y = (a - b) * sin(i) - h * sin((a - b) / b * i);
        vertex(x, y);
    }
    endShape();
    pop();
}

function drawAstroid(){
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    push();
    noFill();
    strokeWeight(4);
    stroke("pink");
    translate(width / 2, height / 2);
    var a = map(mouseX, 0, width, 20, width / 3);
    beginShape();
    //Astroid formula
    //http://mathworld.wolfram.com/Astroid.html
    for (var i = 0; i < nPoints; i+= 0.5){
        var x = a * pow(cos(i), 3);
        var y = a * pow(sin(i), 3);
        vertex(x, y);
    }
    endShape();
    pop();
}

This project was challenging as I had to incorporate an interactive element within the hypotrochoid shape. It initially took a while to understand how I could flexibly use the map function, substituting different numbers to play with the range of mouse X and Y, then seeing the effects on screen. I also added a change to color as another element, where the R and G values would change depending on the mouse’s location. Afterwards, I created an astroid in the center that playfully interacts with the surrounding hypotrochoid. What intrigued me the most was how unexpected the shape would vastly change by rotating my mouse around the canvas, creating diverse shapes through intersection of lines.

When the max range of *hypotrochoid* value a is at (0, 10)

*When the max range of hypotrochoid value a is at* (0, 300)

Sarah Kang-Looking Outwards-07

*“Madonna’s ‘Like a Virgin’*“, by Martin Wattenberg

In this project, “The Shape of Song”, artist Martin Wattenberg demonstrates his explorations of trying to “see” musical form. I was intrigued by this project because adding a dimension of visual sense allows one to experience and interpret music in a brand new way. To achieve this experiment, Wattenberg created a visualization program that highlights the repeated verses in music using translucent arcs, called an “arc diagram”. This software, written entirely in Java. analyzes “MIDI” files of the musical piece which are commonly found on the web. Using this information, an arc connects a pair of identical sections of a musical piece. The arcs seem to be proportionally sized in terms of the spacing of the repeated sections. This allows the piece to be viewed in terms of its structure, rather than sound. The visualizations created by Wattenberg allow the viewer to analyze the entire musical piece as one visual composition in a matter of seconds, as opposed to the minutes it would take to listen to the entire song.

“Moonlight Sonata, by Beethoven” by Martin Wattenberg

http://bewitched.com/song.html

Ammar Hassonjee – Project 07 – Curves

Interactive Curve Drawing

/* Ammar Hassonjee
    ahassonj@andrew.cmu.edu
    Section C
    Project 07
  */

  var nPoints = 100;
  var angle = 0;
  var angle2 = 0;
  var angle3 = 0;
  function setup() {
      createCanvas(480, 480);
  }


  function draw() {
      background(map(mouseY, 0, height, 0, 255), map(mouseY, 0, height, 0, 255), map(mouseY, 0, height, 80, 255));

      var a = map(mouseX, 0, width, 30, 300);
      var b = a * (3 / 8);
      var c = a / 8;
      // Drawing the deltoid curves
      fill(180, 0, 0);
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle));
      drawDeltoidCurve(a);
      angle += map(mouseX, 0, 480, 2, 10);
      pop();

      // Varying the rotation angle
      fill(0);
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle2 * -1));
      drawDeltoidCurve(b);
      angle2 += map(mouseX, 0, 480, 2, 10);
      pop();

      fill(180, 0, 0);
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle));
      drawDeltoidCurve(c);
      angle += map(mouseX, 0, 480, 2, 10);
      pop();

      // Drawing the Ranunculoid curve with multiple iterations
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle3));
      drawRanunculoidCurve(40);
      drawRanunculoidCurve(20);
      drawRanunculoidCurve(37);
      angle3 += map(mouseX, 0 , width, .1, 5);
      pop();


  }

  // Deltoid curve has parameter to alter size
  function drawDeltoidCurve(value) {
      // http://mathworld.wolfram.com/DeltoidRadialCurve.html
      var x;
      var y;

      noStroke();
      // Drawing the first deltoid
      beginShape();
      for (var i = 0; i < nPoints; i++) {
          var t = map(i, 0, nPoints, 0, TWO_PI);

          // curve equation
          x = (1 / 3) * value * (2 * cos(t) + cos(2 * t));
          y = (1 / 3) * value * (2 * sin(t) - sin(2 * t));
          vertex(x, y);
      }
      endShape(CLOSE);
  }

  // function has parameter to alter Ranunculoid curve size
  function drawRanunculoidCurve(size) {
      // http:mathworld.wolfram.com/Ranunculoid.html
      var x;
      var y;

      // Varying the strokeweight and color of the Ranunculoid curve
      stroke(map(mouseY, 0, height, 0, 255));
      strokeWeight(map(mouseX, 0, width, 10, 0.1));
      noFill();
      beginShape();
      for (var i = 0; i < nPoints; i++) {
          var j = map(i, 0, nPoints, 0, TWO_PI);

          // Curve equation
          x = size * (6 * cos(j) - cos(6 * j));
          y = size * (6 * sin(j) - sin(6 * j));
          vertex(x, y);
      }
      endShape(CLOSE);

    }

When I first started this assignment, I was a little overwhelmed by the requirements and confused about how to translate mathematical curves into a graphic. Once I found two curves however with simple mathematical formulas, the ranunculoid and deltoid, I was able to build functions and then vary their parameters using the mouseX and mouseY variables to make an interesting drawing!

Charmaine Qiu – Looking Outwards – 07

Facebook Flowers

Stamen design is a visualization design studio that provides for clients across different industries such as artists, architects, and museums. One of their projects that I find particularly interesting is the “Facebook Flowers”.The project took the activities on Facebook of the American actor George Takei and translated it into a digital art piece where a flower grows following the activity of the actor. The team looked at one facebook post specifically, and translated the shares to a flower as each follow-on shares becomes a strand on their own. The pattern created drew relationship to a living organism when the evolving movement is captured to create a video. I find the work of Stamen design very eye opening since it interpreted a technological flow and transformed it to resemble nature. It is fascinating how we as humans are constantly surrounded by the theme of nature even in this ever changing world.

Find out more on their website: https://stamen.com/work/facebook-flowers/

Sewon Park – LO – 08

The artist that I have selected from the EYEO presentations is Meejin Yoon. As I have several friends that are enrolled in the architecture program, I have developed significant interest in the field of architecture. Yoon’s Korean descent led me to select and view the project, which was both aesthetically mesmerizing and technologically inspiring

Meejin Yoon is currently the dean of architecture at Cornell University and heads the Howeler + Yoon studio, completing architecture projects ranging from from memorials to olympic infrastructures. Yoon studies architecture and likes to incorporate modern technology in her work.

http://www.howeleryoon.com/work/49/circus-conservatory (Link to her studio website)

During her lecture, she gives an effective presentation of her work through discussing why the use of technology was important in her work. She uses reusable energy for the environment and interactive technology to engage the viewers. I admire that she not only uses technology for aesthetics but also for practical purposes.

Meejin Yoon’s lecture at EYEO 2015

Xiaoyu Kang-Looking Outwards-07

Every IP, 1999

This project is called 1:1. It is a project that was created in 1999 as a collection of database. The database was created to eventually contain the addresses of every website in the world. The data was collected through sending out a crawler, which will determine if there is a website at a specific numeric address, which is called IP and range between 0.0.0.0 and 255.255.255.255. The crawler also determines whether the website is open to public or not. When this project first started in 1999, around two percent of the website, which is around 186100 sites were included in the database. However, the internet world in changing at a speed faster than anticipated in 2001 so the first version of this project is out of date.

1:1 (2) is then created as a continuous project based on the first version. This project consists of the database of the website addresses generated between 2001 and 2002. This second project also includes interfaces that compare the data between the first and the second database.

Every IP, 2001

Monica Chang – Looking Outwards – 07

LAUNCH IT by Shane Mielke

The beginning screen and visual options

Movement of the globe: Book locations

http://launchit.shanemielke.com/ (the website)

https://shop.shanemielke.com/ (the shop)

Shane Mielke is an award-winning creative director and designer who wrote this book called, LAUNCH IT- 300+ things I learned as a Designer, Developer and Creative Director. Along with publication, he created this website which illustrates all of the book locations that Mielke is aware of from sales data that was gathered from Amazon as well as his online shop(link provided above). Currently the website visualization shows book locations in 54 countries and 38 states in the USA.

Within this website, he provided different visual options for the viewers to interact with by incorporating different designs. For colors, he incorporated three different color options: base( dark blue and red), invert(red as the main color while a fluorescent blue indicates the location), and random(which utilizes different colors every time the user clicks the ‘random’ button). For visuals, he provided three options: bloom(constant lines), rocket(moving lines), and snake(moving lines with receding lines).

This website makes me feel like I traveled time into the future. There are very intricate details like the tiny, dust-like specs floating around the screen hidden within this beginning screen that just has me captivated with the whole concept although it is so simple: book locations. The idea could have easily ended up as a globe with marks on it, but Mielke was very clever with the idea of allowing the viewers to interact with the globe and even have a little fun with it by altering the visuals.

Shariq M. Shah – Looking Outwards 06 – Randomness

I am using one of my grace days for this late submission.

Mark Wilson is a computational artist and designer who focuses on the random aggregation of images into quilt-like mosaics and collages. His work includes processes that collect patterns and images at random and stitches them together in a variety of compositions. Through the logic of the program, color palettes and combinations are developed over a number of iterations, and there is emphasis on the overall mosaic effect of these works. Wilson’s work has been shown at a variety of exhibitions and corporate settings, where the processes and visual complexity of his work are able to be studied. This work is particularly intriguing as it relies on a program to develop an overall composition, thereby shifting the role of the artist in such a work.

http://mgwilson.com/

Minjae Jeong-project-06-abstract-clock

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//project-06



function setup() {
    createCanvas(480, 480);
    rectMode(CENTER);
}

function draw() {
    clear();
    var H = hour(); //Hours
    var M = minute(); //Minutes
    var S = second(); //Seconds
    background(0);

    push(); //orbits
    translate(width / 2, height / 2);
    stroke('white');
    strokeWeight(0.5);
    noFill();
    ellipse(0, 0, 100, 100); //inner orbit (seconds)
    ellipse(0, 0, 250, 250); //outer orbit (minutes)
    pop();

    push(); //Seconds
    translate(width / 2, height / 2);
    fill(255, 153, 255);
    rotate(TWO_PI * (S - 15) / 60); //starts at 0 seconds
    ellipse(50, 0, 30, 30);
    pop();

    push(); //Minutes
    translate(width / 2, height / 2);
    fill(102, 255, 102);
    rotate(TWO_PI * (M - 15) / 60); //starts at 0 minutes
    ellipse(125, 0, 45, 45);
    pop();

    translate(width / 2, height / 2);//Outer planets (Hours)
    var hours = H >= 12 ? H - 12 : H; //If H >= 12, subtract 12 from H to make 12hr clock
    for (i = 0; i < 12; i++) {
        push();
        rotate(TWO_PI * (i - 3) / 12);
        if (i == hours) {
        fill('yellow'); //fill yellow for current time
        }
        else {
        fill(51, 153, 255);
        }
        ellipse(195, 0, 50, 50);
        pop();
    }


}

I got my motivation while watching my friend playing a video game, and I designed my clock with space theme. With 12 circles (planets) that represent each hour, I made the planet change to yellow for current hour. Then I made two planets rotating around their orbits according to minutes and seconds.