ICM_Week One Assignment

At this time, I am very interested in augmenting the reality we live in today.  Computation applies to my interests in visualizing three dimensional renderings that will react to movements, sounds, gestures, and systematic controls.  I want to explore all opportunities around painting with light, and using different mediums to create an immersive experience.

In reviewing the ICM Inspiration Wiki Page, I really enjoyed looking though the projects of teamLab, LIGHTSCAPE, and nervous system's science art.

The projects at teamLab are just so stunning! I would love to create experiential spaces in a similar scale and manner in my future.  I just love the way they link vivd artistic scapes with interactive technologies and really bring an immersive experience to the people who visit.  I think I may have to add this as a place to visit and make a fourth trip to Japan just to see their latest project known as borderless, which is a permanent installation at the MORI Building DIGITAL ART MUSEUM in Odaiba, Tokyo.

In looking though LIGHTSCAPE's portfolio, I recognized some projection mapping videos that I had seen in past internet perusing experiences.  Field caught my eye immediately.  I really enjoy the mix of Projection Mapping, 2D Motion Graphics, and 3D Motion Graphics with an element of glow with LED lighting.  This project is incredibly dimensional and has so much depth.  Great use of movement, variant luminosity, and patterns to create a very beautiful experience.

Nervous System's mix of science, art, and technology blew my mind.  I love puzzles in general, but they took it to such a beautiful space in the intricacies that make their creations.  All products, including jewelry and other household items integrate a pattern found in nature which is something I had been dreaming around lighting.  Very cool concepts indeed!

Up until this point, my only experience with computation had been a Front End Web Design course taught by General Assembly in Santa Monica, CA in 3 months .  This was a crash-course in getting a site up and running and did familiarize me with js syntax a bit, which was very helpful in this first homework project using shapes and lines to create a 'monster' using 2D primitive shapes and basic color functions. 

When I started to work in the p5.js web editor it was not connected to the server and would not load.  I did not have the opportunity to report the bug though github, but will do so in the future.

I immediately knew I wanted to draw a dragon because they are awesome and it just had to be multiple shades of purple. Why purple? Well that's simple - purple is great and this is also for a class at NYU.. so that's how that happened.  I immediately looked up a dragon cartoon to get some inspiration and drew a quick sketch in my notebook to get an understanding of the elements involved (images below).

 journey of the purple dragon; from inspiration -> sketch -> drawing

journey of the purple dragon; from inspiration -> sketch -> drawing

The next piece was to build out the code in p5.js.  This was much easier than I thought after completing the optional quiz (answers to question 1, question 2, question 3, & question 4) and listening to the 1-7 Foundations of Programming in JavaScript - p5.js tutorial by The Coding Train on Youtube.  I had a bit of trouble with figuring out how to fill in the wings, which is a curve() function and was able to make the tail work as a quad() function.  All and all, I thoroughly enjoyed this exercise and am looking forward to building my skills in this environment. 

purple_dragon.gif
Screen Shot 2018-09-09 at 10.03.04 PM.png

drawn in p5.js

function setup() {
  createCanvas(400, 600);
  colorMode(RGB, 255, 255, 255, 1);
}
function draw() {
  background(150);
 
  //tail
  fill(125, 75, 200);
  stroke(125, 4, 200);
  strokeWeight(3);
  quad(220, 450, 300, 400, 280, 380, 300, 370, 270, 370);

  //body
  noStroke()
  fill(125, 75, 200);
  ellipse(200, 340, 120, 300);
  
  noFill();
  stroke(125, 4, 235);
  strokeWeight(3);
  rect(175, 255, 50, 20, 10);
  rect(170, 285, 60, 20, 10);
  rect(165, 315, 70, 20, 10);
  rect(160, 345, 80, 20, 10);
  rect(165, 375, 70, 20, 10);
  rect(170, 405, 60, 20, 10);
  rect(175, 435, 50, 20, 10);

  // Left_Wing
  var p1 = {
      x: 260,
      y: 325
    },
    p2 = {
      x: 380,
      y: 350
    };
  var p3 = {
      x: 330,
      y: 200
    },
    p4 = {
      x: 245,
      y: 240
    };
  stroke(125, 4, 235);
  curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
  curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
  curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);

  // Right_Wing
  var p1 = {
      x: 140,
      y: 325
    },
    p2 = {
      x: 20,
      y: 350
    };
  var p3 = {
      x: 70,
      y: 200
    },
    p4 = {
      x: 155,
      y: 240
    };
  stroke(125, 4, 235);
  curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
  curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
  curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);

  //legs
  noStroke()
  fill(125, 4, 200);
  ellipse(180, 490, 35, 60);
  ellipse(220, 490, 35, 60);

  //feet
  fill(125, 75, 200);
  ellipse(170, 510, 35, 35);
  ellipse(230, 510, 35, 35);

  //arms
  noStroke()
  fill(125, 4, 200);
  ellipse(140, 320, 25, 60);
  ellipse(260, 320, 25, 60);

  //hands
  fill(125, 75, 200);
  ellipse(140, 330, 20, 25);
  ellipse(260, 330, 20, 25);

  //head
  noStroke()
  fill(125, 4, 200);
  ellipse(200, 160, 150, 100);

  //ears
  fill(125, 4, 200);
  triangle(155, 130, 195, 130, 180, 75);
  triangle(210, 130, 250, 130, 225, 75);

  fill(100, 4, 200);
  triangle(170, 110, 185, 110, 180, 95);
  triangle(220, 110, 235, 110, 225, 95);

  //nose
  fill(125, 4, 200);
  //ellipse(200, 200, 70, 60);
  arc(200, 200, 80, 80, 0, PI, OPEN);

  fill(0);
  ellipse(185, 215, 10, 20);
  ellipse(215, 215, 10, 20);

  //eyes
  fill(150);
  ellipse(175, 155, 20, 30);
  ellipse(225, 155, 20, 30);

  fill(0, 255, 165);
  ellipse(175, 155, 10, 10);
  ellipse(225, 155, 10, 10);

  //smoke_left
  fill(255, 100, 40);
  
  strokeWeight(15);
  stroke(255, 100, 40, .5);

  ellipse(185, 231, 20, 15);
  ellipse(180, 248, 30, 20);
  ellipse(170, 272, 40, 30);

  //smoke_right
  ellipse(215, 231, 20, 15);
  ellipse(220, 248, 30, 20);
  ellipse(230, 272, 40, 30);
}