ICM Final Project

It’s working…almost. for the most part! Famous last words spoken from most likely every ITP student to endure the nuances of completing 3-5 large projects simultaneously. Largest lesson learned is to plan and structure out attainable goals in hitting completions in time. Seriously would have made this last stretch much less stressful. But we will see if that is even a thing come next semester. I have goals at least. An a marker of understanding that I wouldn’t have had if I didn’t put myself though the deep knowledge of discovering that the ‘Real World’ work structure should indeed be applied back to Grad School Work. So basic. Yet so far from grasp.. oh well, we are creatures of experiential conditioning. I digress.

I started off the semester with high hopes and big dreams of where I could go with code.. When ICM began, I remember having the flood of memories come in from a previous time in which I said the exact same thing. I got overwhelmed quickly and started to slow down my ambition and just try to embed the concepts so I could take this somewhere later, trying so so hard not to feel lesser than all of the super talented folks in our class. It’s a big one to admit, but I’m so happy I took things slow.

When it came time for choosing our final, I was in such a state of overwhelm that I couldn’t think of anything more than that of the SOLO Physical Computing Final I was working on (an Etch-A-Sketch <link tbd>). As I initially presented this idea, it seemed to not be in-line with the goals for this exercise, so I went back to the drawing board (in so many ways).

I had a trip to LA for a Wedding planned right after the class where we discussed the assignment and happened to go back to my childhood home and saw all of my childhood things. It was a deep experience, but I remember finding a TMNT slider puzzle (similar to this one that Walmart sells), and it hit me — I should do that. Make a slider puzzle. But do it with the camera (we just went over video/sound for Week Eight) and it would be so so so cool. I presented that idea as a direction and it seemed like the next big thing in my mind.

Okay, so reality hit as soon as I started to research what would be necessary in getting this off the ground from ideation to practical building. I got overwhelmed again ( ..feeling a theme brewing) and decided to switch gears and work on my Etch-A-Sketch planning. I needed (maybe wanted) to buy an Etch-A-Sketch — in that process of finding the one labeled with the ‘prime’ letters, I saw a mag-na-doodle and it all came in. Strong. I need to make this. This will be the direction. I choose YOU, Mag-na Doodle.

That was easy. Sort-of. I am resourceful and if I can find an example out there, I can implement that example into my code. So many coding challenges watched but I found a method to my madness and began to sketch out a basic idea of what I wanted to see. Sure this was no REAL Mag-na Doodle, it was beginning to be the MAD-NA Doodle.. Get it.. if you’re reading this you’re on my site, and the insert of ‘MAD’ as a preface before any of my ideas has been a setting of mine since I was in undergrad (Mad Shutter came from me, Madison (Mad for short) and Shutter as in Photography…I also have unpublished about 3 other projects with Mad as the beginning of the business name. I digress again. Anyhoo, the Mad-na Doodle was born and creation began.

During the first Play Test in class, I got so many great ideas of where to go with this idea. Changing the colors was the beginning, but really adding sounds and making the shapes were the next level. I felt that I could do it.. like if I put in the right amount of time and research I could figure it all out.. and I did in a way, but really so much learned in this process.

I did know from the beginning that I wanted it to feel alive. I just absolutely adored the P5 Skribble library and knew that if done correctly, I would see a bit more of the movement that I wanted to see. I had a sketch from an array exercise found online from earlier in the semester and adapted that to appear as an on/off drawing board. I added some DOM elements and the SLIDERS. They are the best things ever. Really loving the customization of them and making them do yet more customization. I think colors are so important in driving engagement — and to be able to set your tone is just as important.

I presented the below slide deck in class for the final and knew that I had a week to get as much done as possible. I learned a very valuable lesson in planning (mentioned again) and also about debugging. HOLY COW. The only time in which I can recall sitting and focused for a length of time greater than 2 hours without noticing the fact was when I did my photography art. I must really love this stuff or really bad.. but really do appreciate the art of code so much more now.

Create a new presentation and edit with others at the same time. Get stuff done with or without an internet connection. Use Slides to edit PowerPoint files. Free from Google.

I knew I really wanted to change the design to only have sliders to control the colors of both dots and background, but time hasn’t allowed in the process of turning this project in by the due data (one again planning.. its showing up so valuable right now). BUT ideation seems to be constantly baked into my process. As, I start out with an idea, then begin to build it out… THEN get inspired to go deeper and get lost in more function/features/etc. Okay, I admit I tried to add a few things last minute before posting this and somehow killed my draw function (it’s okay, fixed now) but there were so many good lessons here (today) and within my creation process for other projects to be more precise with planning and to not push extra features at the last moment. I REPEAT. No more pushing features last minute. Lesson LEARNED.

With the shapes, I managed to break my code in so many strange and inconsistent ways.. I want so bad to re-design this (AGAIN) so it looks perfect and is completed, but there’s something in having it not completed that makes me want to keep it undone so that I will go back and get er done.

I’m proud of myself for this one. I got so much completed and learned a great deal of practical lessons. Like more than I thought I would get.. I couldn’t get the slider to reset the drawing fully (it’s kinda not working but works occasionally). The sounds work on clicks (only) — like all clicking, but there’s a 2-3 second lag. The responsiveness is lacking. I will live with the imperfections for now. But I want to do so much more with this. I think I will. I know that this break is a good opportunity to focus on what I missed and go through the lessons as time allows (again).

See project AS-IS below. I’ll update with updates as they happen.

Code found here.

x.

Week 8 - Sounds!

This week we worked on incorporating video and audio into reactive code. I wasn’t too sure what I would do for this week’s assignment, but happened to take a workshop on math in p5 with Jiwon Shin on Monday evening this week. I immediately wanted to bring sound to it and have it adjust. So I made a different file and created a micLevel variable and linked the p5.js sound libray Audio In and FTT references in to create the responsive spectrum.

I’m really excited about taking this to the next level - not sure what that is yet, but had a good time putting this together.

x.

Week 7 [Updated] - IT WORKS!!

Some persistence, a new array, and a newly defined variable made it come together. The data for color name and color hexcode was found in a JSON file though corpora, listing out all Crayola crayon colors and their hexcode values.

I extracted the data from the JSON file (color name and hexcode) and listed out the names below the sketch and changed the text color to the associated hex value. In addition to the listed text, my goal was to also use the data in a different way. In the example in the code, the draw loop is placing different ellipses in the mouseX/mouseY location at a random chosen color from the array.

Very happy with the outcome, and may use this for part of my PCOMP final. More to come..

x.

Week 7 Assignment | Data

This week we learned how to work with data sets. Due to a chrome browser crash, I lost my file for the week, so this is a work in progress (for now). I found a JSON file through Corpora with all crayola color names and their corresponding hex codes and had the list shown on the page. Ideally, I map the hex code values to the corresponding text color for each crayola color name value.

code found here.

ICM Week Six Assignment

This week we paired our p5.js skills with HTML and built out a basic DOM with interactivity. I have a draw loop in a fixed canvas and a mouse interactive function to increase size with an x-axis motion. I also included some css on a button that changes gradient when hovered over.

Code found here.

x

ICM Week Five Assignment

This week for ICM the assignment was to design a sketch in an object-oriented fashion. I drew a happy face array and made this move (or shake) slightly and have additional objects appear when the mouse is clicked. I see this adjusting slightly with random faces (or emojis) generated when mouse clicked in a future project.

code found here.

x.

ICM Week Four Assignment

This week we focused on reorganizing the code and creating / calling additional functions through the draw function. The code has been cleaned up quite a bit (examples below) and the fire now is called when the mouse hovers over the nose.

I will be aiming to create a for loop that will have the fire animated out as well as have the wings move in the next version.

x.

var clouds = [];
var dragonBreath = false;
var dragonBreathPos = 0;
var dragonBreathLngth = 30;
var dragonWings = false;
var dragonWingsPos = 0

function setup() {
  createCanvas(400, 600);
  colorMode(RGB, 255, 255, 255, 1);
}

function draw() {

  background(random(255), 255, 255);

  for (i = 0; i < clouds.length; i++) {
    var currentObj = clouds[i];
    cloud(currentObj.xpos, currentObj.ypos, currentObj.size);
    currentObj.xpos += 0.5;
    currentObj.ypos += random(-0.5, 0.5);
    if (clouds[i].xpos > width + 20) {
      clouds.splice(i, 1);
    }

  }
  // tail();
  rightWing();
  leftWing();
  body();
  //edit this to be within draw loop
  if (dist(mouseX, mouseY, 170, 225) < 50) {
    print('mouseX');

    showDragonBreath();

  }
}

//Functions
function showDragonBreath() {
  dragonBreath = true;
  // print(pmouseX + ' -> ' + mouseX);
  fire1();
  fire2();
  fire3();
}

function rightWing() {
  noStroke()
  fill(125, 4, 235);
  var rw1 = {
      x: 220,
      y: 245
    },
    rw2 = {
      x: 380,
      y: 350
    },
    rw3 = {
      x: 330,
      y: 200
    },
    rw4 = {
      x: 220,
      y: 245
    };
  quad(rw1.x, rw1.y, rw2.x, rw2.y, rw3.x, rw3.y, rw4.x, rw4.y);
}

function leftWing() {
  noStroke()
  fill(125, 4, 235);
  var lw1 = {
      x: 180,
      y: 245
    },
    lw2 = {
      x: 20,
      y: 350
    },
    lw3 = {
      x: 70,
      y: 200
    },
    lw4 = {
      x: 180,
      y: 245
    };

  quad(lw1.x, lw1.y, lw2.x, lw2.y, lw3.x, lw3.y, lw4.x, lw4.y);
}

//body

function body() {
  fill(125, 75, 200);
  noStroke();
  strokeWeight(3);
  // fill(125, 4, 235);
  var t1 = {
      x: 220,
      y: 450
    },
    t2 = {
      x: 300,
      y: 400
    },
    t3 = {
      x: 280,
      y: 380
    },
    t4 = {
      x: 300,
      y: 370
    };
  quad(t1.x, t1.y, t2.x, t2.y, t3.x, t3.y, t4.x, t4.y);

  noStroke()
  fill(125, 75, 200);
  ellipse(200, 340, 120, 300);

  noFill();
  stroke(125, 4, 235);
  strokeWeight(3);

  var scl1 = {
      x: 175,
      y: 255,
      w: 50,
      h: 20,
      r: 10,
    },

    scl2 = {
      x: 170,
      y: 285,
      w: 60,
      h: 20,
      r: 10,
    },
    scl3 = {
      x: 165,
      y: 315,
      w: 70,
      h: 20,
      r: 10,
    },
    scl4 = {
      x: 160,
      y: 345,
      w: 80,
      h: 20,
      r: 10,
    },
    scl5 = {
      x: 165,
      y: 375,
      w: 70,
      h: 20,
      r: 10,
    },
    scl6 = {
      x: 170,
      y: 405,
      w: 60,
      h: 20,
      r: 10,
    },
    scl7 = {
      x: 175,
      y: 435,
      w: 50,
      h: 20,
      r: 10,
    };

  rect(scl1.x, scl1.y, scl1.w, scl1.h, scl1.r);
  rect(scl2.x, scl2.y, scl2.w, scl2.h, scl2.r);
  rect(scl3.x, scl3.y, scl3.w, scl3.h, scl3.r);
  rect(scl4.x, scl4.y, scl4.w, scl4.h, scl4.r);
  rect(scl5.x, scl5.y, scl5.w, scl5.h, scl5.r);
  rect(scl6.x, scl6.y, scl6.w, scl6.h, scl6.r);
  rect(scl7.x, scl7.y, scl7.w, scl7.h, scl7.r);

  //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
function fire1() {
  fill(255, 100, 40);
  strokeWeight(15);
  stroke(255, 100, 40, 0.5);
  var sml1 = {
      x: 185,
      y: 231,
      h: 15,
      w: 20
    },

    smr1 = {
      x: 215,
      y: 231,
      w: 20,
      h: 15
    };
  ellipse(sml1.x, sml1.y, sml1.w, sml1.h);
  ellipse(smr1.x, smr1.y, smr1.w, smr1.h);
}

function fire2() {
  fill(255, 100, 40);
  strokeWeight(15);
  stroke(255, 100, 40, 0.5);
  var sml1 = {
      x: 185,
      y: 231,
      h: 15,
      w: 20
    },
    sml2 = {
      x: 180,
      y: 248,
      w: 30,
      h: 20
    },
    smr1 = {
      x: 215,
      y: 231,
      w: 20,
      h: 15
    },
    smr2 = {
      x: 220,
      y: 248,
      w: 30,
      h: 20
    };

  ellipse(sml1.x, sml1.y, sml1.w, sml1.h);
  ellipse(sml2.x, sml2.y, sml2.w, sml2.h);
  ellipse(smr1.x, smr1.y, smr1.w, smr1.h);
  ellipse(smr2.x, smr2.y, smr2.w, smr2.h);
}

function fire3() {
  fill(255, 100, 40);
  strokeWeight(15);
  stroke(255, 100, 40, 0.5);
  var sml1 = {
      x: 185,
      y: 231,
      h: 15,
      w: 20
    },
    sml2 = {
      x: 180,
      y: 248,
      w: 30,
      h: 20
    },
    sml3 = {
      x: 170,
      y: 272,
      w: 40,
      h: 30
    },
    smr1 = {
      x: 215,
      y: 231,
      w: 20,
      h: 15
    },
    smr2 = {
      x: 220,
      y: 248,
      w: 30,
      h: 20
    },
    smr3 = {
      x: 230,
      y: 272,
      w: 40,
      h: 30
    };

  ellipse(sml1.x, sml1.y, sml1.w, sml1.h);
  ellipse(sml2.x, sml2.y, sml2.w, sml2.h);
  ellipse(sml3.x, sml3.y, sml3.w, sml3.h);
  ellipse(smr1.x, smr1.y, smr1.w, smr1.h);
  ellipse(smr2.x, smr2.y, smr2.w, smr2.h);
  ellipse(smr3.x, smr3.y, smr3.w, smr3.h);
}


function cloud(x, y, size) {
  fill(255, 255, 255);
  noStroke();
  arc(x, y, 25 * size, 20 * size, PI + TWO_PI, TWO_PI);
  arc(x + 10, y, 25 * size, 45 * size, PI + TWO_PI, TWO_PI);
  arc(x + 25, y, 25 * size, 35 * size, PI + TWO_PI, TWO_PI);
  arc(x + 40, y, 30 * size, 20 * size, PI + TWO_PI, TWO_PI);
}

function mousePressed() {
  var newCloud = {
    xpos: mouseX,
    ypos: mouseY,
    size: random(0.5, 5)
  };
  clouds.push(newCloud);
}

Old code below…

var clouds = [];

// var breath = [];

function setup() {

createCanvas(400, 600);

colorMode(RGB, 255, 255, 255, 1);

}

function draw() {

background(random(255), 255, 255);

// display

for (i = 0; i < clouds.length; i++) {

var currentObj = clouds[i];

cloud(currentObj.xpos, currentObj.ypos, currentObj.size);

currentObj.xpos += 0.5;

currentObj.ypos += random(-0.5, 0.5);

if (clouds[i].xpos > width + 20) {

clouds.splice(i, 1);

}

}

//tail

fill(125, 75, 200);

stroke(125, 4, 200);

strokeWeight(3);

quad(220, 450, 300, 400, 280, 380, 300, 370, 270, 370);

// Right_Wing

noStroke()

fill(125, 4, 235);

var pr1 = {

x: 220,

y: 245

},

pr2 = {

x: 380,

y: 350

};

var pr3 = {

x: 330,

y: 200

},

pr4 = {

x: 220,

y: 245

};

quad(pr1.x, pr1.y, pr2.x, pr2.y, pr3.x, pr3.y, pr4.x, pr4.y);

// Left_Wing

noStroke()

fill(125, 4, 235);

var pl1 = {

x: 180,

y: 245

},

pl2 = {

x: 20,

y: 350

};

var pl3 = {

x: 70,

y: 200

},

pl4 = {

x: 180,

y: 245

};

quad(pl1.x, pl1.y, pl2.x, pl2.y, pl3.x, pl3.y, pl4.x, pl4.y);

//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);

//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);

}

function cloud(x, y, size) {

fill(255, 255, 255);

noStroke();

arc(x, y, 25 * size, 20 * size, PI + TWO_PI, TWO_PI);

arc(x + 10, y, 25 * size, 45 * size, PI + TWO_PI, TWO_PI);

arc(x + 25, y, 25 * size, 35 * size, PI + TWO_PI, TWO_PI);

arc(x + 40, y, 30 * size, 20 * size, PI + TWO_PI, TWO_PI);

}

function mousePressed() {

var newCloud = {

xpos: mouseX,

ypos: mouseY,

size: random(0.5, 5)

};

clouds.push(newCloud);

var fireBreath = {

xpos: mouseX,

ypos: mouseY,

}

}

ICM Week Three Assignment

Learning Loops is by far the best thing about this week. I am still attempting, yet value the opportunity for For Loops as the code for Version 1.0 of the ‘Rollover With Fade’ project was over 450 lines of code and definitely NOT efficient; however, I did have the learning opportunity of how not to spend the majority of my time.. lesson learned with 2.0 (maybe).. For loops are not working either… onward to arrays —Thanks Arnab!.

10 Print Example

Above is an attempt at the 10Print Random design generator. Here is the code to this project.

Arnab and my collaboaration.

Arnab and I partnered with our ideas and came up with this, which is awesome!

Below are my answers to this week’s quiz:

Quiz 3, Question 1

Quiz 3, Question 2

Quiz 3, Question 3

Quiz 3, Question 4

Quiz 3, Question 5.1

Quiz 3, Question 5.2

Quiz3, Question 5.3

Quiz 3, Question 5.4

Quiz 3, Question 6

Quiz 3, Question 7

ICM_Week Two Assignment

For this Assignment the goals were to create an item controlled by the mouse, an item that changes over time, independent of the mouse, and a random item that is different every time the sketch is run.

In my search for clickable inspiration, I came across a string of code published by Jackie Zen that had a blue sky with clouds of random variance floating across the screen one the mouse was pressed. I pulled this code and changed the variance of size as well as used a random element to display different sized clouds that would move across the screen.

At the start of the sketch, once run, the background flashes a random background that displays a flash of random colors against white, which gives the appearance of movement in the sky and makes the appearance of the dragon moving across the screen.

background(random(255), 255, 255)

I decided to take the learned understanding of shapes and fill and re-create the dragon’s wings for a simple quad shape. I plan on making the wings move as well as having the fire move out in the near future.

Quiz Week 2, Answer 1

Quiz Week 2, Answer 2

Quiz Week 2, Answer 3

Quiz Week 2, Answer 4

x.

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

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

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);
}