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

Chelsea Fan-Project-03-Dynamic Drawing

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-03
*/

//Changes in size, position, shape, and distance
function setup() {
    createCanvas(640, 480);
    noStroke();
}

function draw() {
    background(173, 216, 230);
    fill(255,255,0);
    //MouseX can move from 50 to 450
    var mouse = max(min(mouseX, 450), 50);
    var size = mouse * 400.0 / 640.0;
//Rabbit 1
    //Body
    fill(250, 250 , 250);
    ellipse(10+mouse*350/640, 225, size, size+50);
    //Tummy
    fill(255, 228, 225);
    ellipse(10+mouse*350/640, 235, size/1.5, size+20);
    //Head
    fill(250, 250, 250);
    ellipse(10+mouse*350/640, 180, size, size);
    //Ear
    ellipse(3+mouse*350/640, 160, size/8, size);
    ellipse(15+mouse*350/640, 160, size/8, size);
    //Eyes
    fill(211, 211, 211);
    ellipse(mouse*350/640-3, 180, size/4, size/4);
    ellipse(15+mouse*350/640, 180, size/4, size/4);
    fill(0)
    ellipse(mouse*350/640-3, 180, size/8, size/8);
    ellipse(15+mouse*350/640, 180, size/8, size/8);

//Purple square
    fill(216, 191, 216);
    size = 300-size;
    rect(width-mouse*350/640-140, 230, size, size);
    rectMode(CENTER); // center rect around 0,0
}

I used my last Project’s bunny drawing as a template for this new and improved dynamic bunny. I enjoyed learning how to incorporate the mouse location into the dynamic drawing.

LookingOutwards-03 – Danny Cho – Wanderers

One of the things that I held against computational design was how artificial it looks when tries to describe the natural process. However, this project, “Wanderers”, executes the visualization of the organic movement and growth in a very high quality.

What I am now able to assume, because of what I have learned working on the dynamic drawing project, is that Neri Oxman might have used some kind of trigonometry. In my project, I used sine and cosine, and it resulted in motions that seem relatively organic compared to forcefully created movements. From this experience, I think the natural looking growth of these pieces would also include some trig functions.

I wonder if she used Cinema 4D or any other types of software, and what her inspirations were as she was sketching and ideating these initially.

This is the generation process for the “Wanderer” Project

Neri Oxman’s aesthetics of organic form and colors are displayed through the usage of colors as well as the slow, but steady pace of the video. Especially, the way she presents not just the final images, but the process of them being created also shows her interest as an artist.

Fanjie Jin– Looking Outwards – 03

elevation of the ZHA chair, from www.zhaarchitecture.com

Rhino Model of the chair for fabrication, from *www.zhaarchitecture.com*

This char is designed by Zaha Hadid, who is a world renowned Pulitzer Prizer English architect. This chair was fabricated using 3D printer as the geometry of the chair is rather complicated and therefore it is not really possible to be fabricated by hand. When she was designing this chair, she has used the grasshopper modeling tool which is a language that is on Rhino platform. The chair is designed completely by script and therefore if there is some parameter for example the density of the mesh on the back of the chair changed, she can choose to whether apply that change to the other places for the chair. This is a great example of how coding and design are integrated and formed a new sense of ideality.

Danny Cho – Project 3 _ Dynamic Drawing

DannyCho_DyDraw

var orbitX = 0;
var orbitY = 0;
var speed = 10;
var ellipseX = 0;
var ellipseY = 0;
var width = 640;
var height = 480;
var bgColor = 255;
var strkColor = 0;

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



function draw(){
	background(bgColor);
  stroke(strkColor);
  //the lines from top and bottom follow the mouse
  for (var i = 0; i * 10 <= width; i++) {
    line(10 * i, -100, mouseX + orbitX, mouseY + orbitY);
    line(10 * i, 580, mouseX + orbitY, mouseY + orbitX);
    i++;

  }
  //the ellipses follow the mouse
  push();
  translate(mouseX, mouseY);
  ellipse(0, 0, 3 * orbitX, 3 * orbitY);
  ellipse(0, 0, 3 * orbitY, 3 * orbitX);
  pop();

  orbitX = 20 * sin(-speed);
  orbitY = 20 * cos(speed);
  speed = speed + 0.0002 * mouseX;
  push();
  translate(mouseX, mouseY);
  //mouseX controls the number of the ellipses
  for (var i = 0; i + floor(mouseX/60) <= 10; i++) {
  
  rotate(radians(speed * 10));
  noFill();
  ellipseMode(CENTER);
  //mouseY controls the size of the ellipses
  ellipse(ellipseX + 5 * i, ellipseY + 5 * i, mouseY / 2, mouseY / 2);
  ellipseX = 100 * sin(speed) + mouseX / 10;
  }
  //depending on the mouse position, the color scheme changes
  if (mouseX - mouseY <= 0) {
    bgColor = 0;
    strkColor = 255;
  }
  else {
    bgColor = 255;
    strkColor = 0;
  }

}

I got interested in radians and trigonometry during this course and wanted to explore it with interactiveness that was a requirement for this project. The position of the mouse controls 4 variables: number of circles orbiting, scale of the circles, speed of their movement, and black and white color scheme.

Claire Lee – Looking Outwards – 03

Mushtari is a 3D-printed wearable piece that incorporates microorganisms into channels throughout the piece, creating microbial “factories” that use synthetic biology to create different effects (such as pigments, scents, or chemicals) using various microorganisms’ photosynthetic byproducts.

This piece is an fascinating example of computational digital fabrication, because it creates a synthetic piece by meshing organic elements and generative growth algorithms. Although the initial geometry and parameters were defined by a computational algorithm, the final product became much more complex: Mushtari grew from a single long 58-foot channel to a wearable piece that incorporated variations from relative strength of relaxation, attraction and repulsion between mesh vertices, and fluctuations in transparency to explore different degrees of photosynthesis.

Living Mushtari, directed by Neri Oxman and created by the Mediated Matter Group in collaboration with Stratasys, 2015.

Personally, I thought this piece was really interesting because it incorporated living elements into a computer-generated project, and then created a wearable piece that could be manipulated in various aspects.

Ammar Hassonjee – Looking Outwards 03

Computer Aided Knitting by MIT CSAIL

Pictures of various knit garments using computational techniques.

The CSAIL lab at MIT recently completed a new project that develops systems for streamlining the process of automating knit garments. One of the systems developed is called “InverseKnit” in which photographs of knitted patterns are analyzed using a program to create instructions for robots to fabricate clothing.

According to the CSAIL website, researchers first started by creating a dataset of knitting instructions/patterns and then programmed a network to interpret these images into rules that can be used to fabricate clothing items such as a sock.

Video showing how the machine operates.

What I admire about this project is its goal to revolutionize an age old process of knitting and apply algorithims in order to streamline this process we’ve been using for thouasands of years to make clothes. The real world application of this project is incredible as it can potentially reduce the manufacturing cost of clothes by so much. I think the algorithms used are image based processors that use the knitting image patterns as inputs and then analyze the geometry in the patterns. The original intent of the project was acheived as the creators sought to craft a simple and straightforward knitting machine that fabricates with accuracy, and they accomplished that.

Nadia Susanto – Looking Outwards – 03

Nervous System is a generative art studio and one of their most viral projects is their geode jigsaw puzzles. Each puzzle has a unique computer-generated shape and pattern, resulting in the many types of geode puzzles. While each geode turns out unique, the process of computer generation is similar as they code it so that the rock used will grow progressively inwards and fill the chamber. Colors, characteristics, and growth rates are random which results in the unique puzzles. Each of the computer generated images represents a portion of the algorithmic agate.

What I admire most about this project is that its beautiful in its art form, but since its a puzzle it requires logical problem-solving skills. Most puzzles have an outcome that is a rectangular picture, so it is easy to establish the corners and the outside borders. However in this case you would have to work from inside to out, not having any easy puzzle pieces to go off from.

This video from Nervous System gives a summary of their geode puzzles from how they made them to what ta unique puzzle looks like.

A wholistic picture of the puzzle. The final result of the puzzle is a beautiful piece of art, but so many intricate pieces are needed to make it.

A closer look into the laser-cutted individual pieces needed for the geode jigsaw puzzle.

Geode, Maze, and Custom Jigsaw Puzzles

For more information on this specific project, click the link above to go to their blog about their jigsaw puzzles.

Joseph Zhang –– Project –– 03

Throughout the process of making this piece of interactive art, I was really focused on the relationship between the mouse and the shapes and how to change the temporal speed of movement. Often times, I would divide mouseX or mouseY by a number to have a slower animation than the actual speed of the mouse.

sketch

// Joseph Zhang
// Section E
// haozhez@andrew.cmue.edu
// Project-03: Dynamic Drawing

function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    //Changes color depending on mouseX and mouseY position
    background(mouseY, mouseX, 200);
    noStroke();

    // resizing rectangle (left) - width increases by a factor of -mouseX / 2
    rect(480, 500, (-mouseX / 2), 60);

    // right resizing rectangle (right) - width increases by a factor of mouseX / 2
    rect(0, 100, (mouseX / 2), 60);

    // Rotating + Resizing Purple-to-Pink Rectangle
    push();
        rectMode(CENTER);
        // Trailing mouse parallax
        translate(180 + mouseX / 10, 430 + mouseY / 10);
        //Rotates rectangle depending on mouseX position
        rotate(radians(-mouseX / 3));
        //Changes color depending on mouseX position
        fill(170 + mouseX,180,210);
        //Drawing rectangle –　width increases by a factor of mouseX / 4
        rect(0, 0, 160 + mouseX / 4, 160);
    pop();

    // Rotating Purple Squares
    push();
        rectMode(CENTER);
        translate(200,450);
        fill(170,160,210);
        //Rotates Rectangle depending on – mouseX position divided by 10
        rotate(radians(mouseX/10));
        //Drawing rectangle
        rect(0, 0, 130, 130);
    pop();

    // Resizing Black-to-White Ellipse
    push();
        // Trailing mouse parallax – position moves at a speed of mouseX divided by 10
        translate(200 + mouseX / 10, 200 + mouseY / 10);
        //Changes color depending on mouseX position
        fill(255 - mouseX)
        //Drawing ellipse
        ellipse(0, 0, -40 + (mouseY + mouseX) / 3, -40 + (mouseY + mouseX) / 3);
    pop();
}

Emma N-M LO-03

Piplines by David Leod (2015)

This parametric 3D fabrication project explores generative abstract forms. A digital dynamic stimulation was created to help inform what shapes to sculpt and what material should be used. I found this project to be inspirational because you can get lost in the forms created by the fluid movements. I also enjoyed how the artist used the digital stimulation and created sculptures to represent certain frames of the digital stimulation. There are algorithms used in the digital stimulation and with small tweaks to it, the stimulation can become drastically different. The algorithms were suppose to emulate objects in a turbulent situation. The creator’s artistic sensibilities manifest through interpreting the digital forms created and translating them into something physical (a sculpture). By using the final shapes to inform him on the texture treatment for the sculptures, each one is very different from the others, yet they come from the same place.

Mihika Bansal – Looking Outwards – 03

One piece of digital fabrication work that I find to be particularly interesting is the Arabesque Wall. This piece is particularly interesting due to the large variety of shapes and textures the artist is able to integrate into the piece. The different patterns that are made would be impossible to make by hand so it really demonstrates the true capabilities of machine and what they can do in terms of creating new and unique items.

The actual software is based on the tilting of the surfaces. The software works on this point until a structure that is composed of multiple surfaces and points comes about. The mathematical precision of this piece is also very interesting and something that could use more exploration.

The artists of this piece are Benjamin Dillenburger and Michael Hansmeyer. The actual printing of the piece took 4 days.

Link to Project: http://benjamin-dillenburger.com/arabesque-wall/