For this project we had to use an image of ourselves and turn it into a doll, placing it in a foreign environment. We used photoshop which was really cool because playing with the features on an image of myself was entertaining. I took about 5 hours to complete this, after having to retake the image three times I finally got one that properly suits the backdrop. Using liquify is really convenient because it allows you to zone in on the specific areas, so I found that to be really helpful while doing the eye and face details.  I think I've grown quite fond of photoshop and all of the different things you can do with it, I personally found this to be one of the more enjoyable projects.

For this project we had to create a poster using an image of ourselves and the mesh tool. This project was very fun to do but as usual, took forever. I liked working with an image of myself it helped me picture what I wanted my end result to be. Using the gradient mesh tool can be very frustrating and touch sensitive however I’m glad that it is now another skill I have under my belt.

Gradient Mesh Project

For this project we had to use the gradient mesh tool to create an image of a fruit. I chose an apple because they are my favorite fruits and I was always fond of the shiny red color. I feel like I'm getting the hang of using the mesh tool however I still find it very time consuming. To begin, I uploaded the original photo of the apple and loved it in its own layer to trace it, then I used the mesh tool and color drop to get the color variation effects.

   

For this project we had to create a logo for ourselves. I wanted to do my initials,"J,X" I decided to go with a design with lines crossing cause I think it represents how ours paths in life cross with other peoples and that really shapes us.
My colors were inspired by the bougainvillea plant and island sea colors of Trinidad. The bougainvillea plant is very common through out the island and infant does better in dry sunny conditions. most plants usually die in those conditions however this one thrives, I was always very fascinated by that and it is my favorite.



  This is the black and white version of my logo.

I was inspired by the pacman ghost for this project, that, and us coming closer to halloween. Using illustrator requires extreme amounts of patience, this project was very challenging and took me about 9 hours. Even now, I still think I could use more practice with the pen tool. It is a very interesting application to play around with and I do look forward to expanding my skillset.

While trying to understand illustrator, I found these videos to be most useful. Hopefully they can guide you also, good luck, I know I needed it.

https://helpx.adobe.com/illustrator/tutorials.html

https://design.tutsplus.com/articles/10-essential-tips-tools-all-adobe-illustrator-beginners-should-learn--cms-23163
(for the above link, there are tabs you can click on for further explanation)

https://www.pgsd.org/cms/lib07/PA01916597/Centricity/Domain/202/illustrator_for_beginners_tastytuts.pdf
(the above link is a bit extensive, I still haven't watched them all but thus far they explain the software well )

This project was an extremely challenging task that truly helped me deeper my understanding of html5 canvas. was inspired for this project by my feelings of being homesick. Trinidad has many beautiful beaches surrounding its coast and I really wanted to illustrate the beauty and simplicity that can be appreciated there. I always loved spending time at the beach weather it was a quick trip after class or a full day spent with my family on the weekends. I wanted to capture the effect of the sunset in my gradient background and the lighting effect it can have on the ocean. 

This project was extremely tedious anId took me approximately 20 hours. HTML5 canvas is very difficult and after many, many failed attempts I was finally able to successfully finish. I used the quad curves to depict the sea and the lines of current and bezier curves for my cloud. I used a rectangle for my flag and plotted line coordinates for the pole and stripes. 

See code below:

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//SUNSETBACKGROUND

  var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);


      // create radial gradient

      var grd = context.createRadialGradient(738, 50, 10, 238, 50, 700);
 
      grd.addColorStop(0, 'rgb(255, 160, 123)');
      grd.addColorStop(.25, 'rgb(255, 255, 128)')
      grd.addColorStop(1, 'rgb(153, 204, 255)');


      context.fillStyle = grd;
      context.fill();

//sea

 var quad = context.createLinearGradient(200,500,400,400);
         
 quad.addColorStop(0, "rgb(133, 193, 235)");
 quad.addColorStop(1, "rgb(115,198,182)");

      context.beginPath();
      context.moveTo(0, 375);
      context.quadraticCurveTo(208, 350, 220, 375);
   context.quadraticCurveTo(280, 400, 400, 375);
   context.quadraticCurveTo(568, 350, 700, 375);
   context.quadraticCurveTo(808, 400, 820, 375);
   context.lineTo(850,680);
   context.lineTo(0,600);
   context.lineTo(0,575);
   context.closePath();
   context.fillStyle = quad;
   context.fill();

//lines of current

context.beginPath();
 context.moveTo(700,390);
 context.quadraticCurveTo(450,360,390,400);  //middle right
 context.lineWidth = 1.5;
 context.strokeStyle = "rgb(179, 257, 255)";
 context.stroke();

 context.beginPath();
 context.moveTo(890,490);
 context.quadraticCurveTo(650,410,550,420);  //right
 context.lineWidth = 1.5;
 context.strokeStyle = "rgb(179, 257, 255)";
 context.stroke();

context.beginPath();
 context.moveTo(10,390);
 context.quadraticCurveTo(170,360,260,390);  //left
 context.lineWidth = 1.5;
 context.strokeStyle = "rgb(179, 237, 255)";
 context.stroke();


 context.beginPath();
 context.moveTo(200,400);
 context.quadraticCurveTo(350,450,410,410);  //middle left
 context.lineWidth = 1.5;
 context.strokeStyle = "rgb(179, 237, 255)";
 context.stroke();

//sand

 var quad = context.createLinearGradient(100,100,400,600);
         
 quad.addColorStop(0, "rgb(255, 245, 204)");

 quad.addColorStop(1, "rgb(255, 230, 179)");

 context.beginPath();
 context.moveTo(0,448);
 context.quadraticCurveTo(25,444,65,445);
 context.quadraticCurveTo(105,425,209,452);
 context.quadraticCurveTo(225,469,450,455);
 context.quadraticCurveTo(430,540,800,455);
 context.lineTo(795,795);
 context.lineTo(0,600);
 context.lineTo(0,548);
 context.closePath();
 context.fillStyle = quad;
 context.fill();

context.stroke();

var x1 =108;
var y1 =580;
var x2 =108;
var y2 =430;
var x3= 110;
var y3= 352;
var x4= 280;
var y4= 425;

//flagpole
  context.beginPath();
  context.moveTo(x1,y1);
  context.lineTo(x2,y2);
  context.lineWidth = 10;
  context.strokeStyle = 'rgb(189, 195, 199)';
  context.lineCap = 'round';
  context.stroke();


  context.lineWidth = 10;
  context.strokeStyle = 'rgb(0, 0, 0  )';
  context.lineCap = 'round';

  context.fillStyle = '#B71C1C';
context.fill();
context.strokeStyle = ' #B71C1C ';
context.stroke();

context.strokeStyle = '#BDC3C7';
context.lineCap = 'round';
  context.stroke();
context.fillRect(100, 350, 186, 85);



// Lines on flag

var x1 =102;
var y1 =353;
var x2 =280;
var y2 =428;
var x3= 103;
var y3= 363;
var x4= 275;
var y4= 435;
var x5= 112;
var y5= 346;
var x6= 279;
var y6= 415;




//Black line
  context.beginPath();
  context.moveTo(x1,y1);
  context.lineTo(x2,y2);
  context.lineWidth = 10;
  context.strokeStyle = 'rgb(0,0,0)';
  context.lineCap = 'round';
  context.stroke();



//Lower white line
context.beginPath();
  context.moveTo(x3,y3);
  context.lineTo(x4,y4);
  context.lineWidth = 8;
  context.strokeStyle = 'rgb(255, 255, 255  )';
  context.lineCap = 'round';
  context.stroke();

//upper white line
context.beginPath();
  context.moveTo(x5,y5);
  context.lineTo(x6,y6);
  context.lineWidth = 8;
  context.strokeStyle = 'rgb(255, 255, 255  )';
  context.lineCap = 'round';
  context.stroke();


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 1.5;
context.fillStyle = 'rgba(255, 255, 255, .5  )';
context.fill();
context.strokeStyle = ' rgba(255, 255, 255, .5  ) ';
context.stroke();

// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();

// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;





////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>