Tag Archives: ICM

ICM

ICM Week 1: How Computation Applies to My Interests

Leave a comment

I view the world through the lens of an optimistic realist with a fascination in the world of science fiction.  I dream about all the amazing items from books and  TV while delving headfirst into researching theories around making those things a reality.  With a background in sustainable materials as well as operations, I find myself drawn towards speculating around (1) the potential material innovation, (2) the social and political impact and (3) the user interface of these science fiction innovations.

Material Research and Development

I began my research journey into new and sustainable materials while in fashion school.  There, I was introduced to fabrics made out of everything from recycled ocean plastics to orange peels.  The materials that peeked my interest the most were those made using bio-technology.  The idea of being able to grow a garment using bacteria was fascinating.  (Check out Suzanne Lee’s TED Talk on Growing Your Own Clothes if this interests you as well!)  This fascination lead me down the path towards researching the current production of these innovative bio-materials.  Here are just a few of the products and companies I found inspiring: Hemp Bio Leather, Zoa by Modern Meadow, hemp-based ink by Hemp Black, a vegan spider silk called Microsilk by  Bolt Threads.  In addition to innovation in materials, we as a society must be innovative in our thinking around why we need a particular material as well as what is the impact of every step of that materials life. 

I hadn’t originally thought much about how computation applied to the development and implementation of new materials, however,  it is now clear that computation is a necessary component in that development and implementation.  Having already highlighted a few commercial ventures, I would like to share are few inspirational creatives using computation to explore new materials.

The Mediated Matter Group, part of the MIT Media Lab, “focuses on Nature-inspired Design and Design-inspired Nature.”  This incredible group of designers and scientists have explored areas including bio-designed death masks (Vespers I and Vespers II) and Silkworm inspired/created architectural pieces (Silk Pavilion and Silk Pavilion II).

Social innovation

Computation also has the ability to uncover areas where we need to redirect resources and attention towards so that we all have a better, healthier society.  Here are just a couple projects/artists using computation to track, visualize and innovate using code. 

  • NYC Street Trees uses data to create a map showing all the trees located through out NYC. 
  • Avena+ Test Bed uses agriculture, digital fabrication and mapping to challenge EU farming economies though generative farming and tech.

Organic User Interfaces

Even though electronics are so ubiquitous in our daily lives, I do consciously make an effort to  step away from them.  Having recently discovered the following projects, I see how computation can be used to bring the natural world into our experiences with hardware and software.

  • Mud Tub by Tom Gerhardt uses mud to control a computer.
  • Stone Mouse also by Tom Gerhardt which uses a stone as the computer’s mouse.
  • In Order to Control by NOTA BENE Visual which uses dance to interact with the display of text.

As I move forward in this adventure of ITP NYU, I am sure to find more fascinating and unbelievable inspirations to draw from. 

Thanks for reading!

ICM

ICM Week 1: p5.js Portrait

Leave a comment

The objective of this project was to create a self portrait, monster, alien, etc using the 2D primitive shapes (arc(), curve(), ellipse(), line(), point(), quad(), rect(), triangle()) and basic color functions of p5.js (background(), colorMode(), fill(), noFill(), noStroke(), stroke()).  Since I was familiar with how to use most of the shapes, I decided to focus on one that I was not: arc(). 

I began my exploration of  arc() at the reference page.   With the first 4 parameters (x, y, w, h) for the function being identical to those needed for the ellipse() function, I set out to comprehend the numbers required to start and stop the arc. 

As seen in the example below, the last two parameters are the number 0 and the words PI + QUARTER_PI.  Not comprehending that the angles required for these parameters needed to be in radians, I began by entering degrees into the code.  Unfortunately, I kept receiving an error message.  Having never worked with radians before, it was time to fall down the YouTube rabbit hole on radians. 

Arc( ) Example
https://p5js.org/reference/#/p5/arc

After some investigating and with only a simplistic understand of radians, I was able to convert degrees into radian using the following equation:  1 degree = π/180 radian. 

Even though I had the equation, I still wasn’t clear on how to implement it within the code.  Out of desperation, as well as a lot of mental exhaustion, I decided to continue creating my portrait using the example radian parameters provided in the  arc() reference page (PI, QUARTER_PI, HALF_PI and TWO_PI).**

Now that I had figured out how to use the arc() parameters available to me, I was hooked!  In total, my portrait has 13 iterations of the function arc().  I present to you my creature:

DRJ Final Portrait Image
Final portrait created using p5.js editor.

Overall, I found the p5.js editor to be fun and easy to use.  Having only ever take a few individual coding workshops before, I found myself to be calm and confident while interacting with the editor.  I am grateful to the creators for their interactive reference pages and for the clear and insightful error messaging.  While investigating the various functions used, it was extremely helpful to be able to manipulate their examples while having the explanations easily accessible on the same page. 

In addition to the challenges associated with learning arc(), I did, however, run into a couple others. 

  • After completing the creature’s portrait, I decided I wanted their hat to sit higher on their head.  In order to do this, I undated createCanvas() parameters from (400, 550) to (400, 700).  Next, I changed both the x and y parameters for the arc() functions that made up the hat.  As you can see below, the top of the hat was cut off.  At that point, I could have (a) edited the x and y parameters for all the functions in order to move the image down or (b) change it back and be happy with the creature I created.  I chose option (b) in order to save time.  Going forward, I will plan my images out more and/or allow more time to indulge my need to perfect my work. DRJ Altered portrait with additonal space below and part of the hat cut off on top.
  •  The only other functions out of the list provided that I was not familiar with colorMode()and curve().  I attempted to use those but wasn’t able to grasp the concepts at that moment.  In order to get something on the page using those functions I did understand, including arc(), I decided to come back to colorMode()and curve() on another project. 

Lastly, I was left with the following questions:

  • How do I embed an image from p5.js editor and have it presented in its entirety (without scroll bars?
  • Why doesn’t my creature have ears or, for that matter, a body?

**While writing this blog and after much sleep, I was finally able to figure out how to implement a variety of  degrees into the code using the conversion equation of 1 degree = π/180 radian.  In order to change a degree into a radian, one can multiply that degree by π/180.  In the example below, I set arc() to start at 0 radian and end at 80*PI/180. 

Code example created in p5.js editor
arc(200, 200, 250, 250, 0, 80*PI/180);