Jeremyxavfmx210: September 2019

Monday, September 30, 2019

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.

Wednesday, September 25, 2019

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 )

Friday, September 20, 2019

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>

Monday, September 9, 2019

homework assignment 1

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

//pink W

var x= 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 400;
var y2 = 300;
var x3 = 500;
var y3 = 450;
var x4 = 750;
var y4 = 100

//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context. lineTo(x3,y3)//draw line to following point
context. lineTo(x4,y4)// draw line to following point
context.lineCap = 'round';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(355,0,455)'; // or "#FF0876" // declare the line color in rgb or hexadecimal values

context.stroke();

//Line Caps
//context.lineCap = "butt"; // "round" or "square"

//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"

var x=850;
var y=200;
var width = 500
var height= 250;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(255,0,0)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(0,255,0)");
//intermediate color
grd.addColorStop(0.5, "rgb(255,0,0)");
// ending color
grd.addColorStop(1, "rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
context.fill();

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

var x1 =50;
var y1 =30;
var x2 =750;
var y2 =30;
var x3= 25;
var y3= 100;
var x4= 300;
var y4= 500;
var rectx3 = 325;
var recty3 = 100;
var rectwidth3 = 150;
var rectheight3 = 150;
var x5= 800;
var y5= 150;
var x6= 550;
var y6= 500;

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

//dark blue line
context.beginPath();
context.moveTo(x3,y3);
context.lineTo(x4,y4);
context.lineWidth = 15;
context.strokeStyle = 'rgb(0,0,250)';
context.lineCap = 'square';
context.stroke();

//blue square rectangle3
context.beginPath();
context.rect(rectx3,recty3,rectwidth3,rectheight3);
context.lineWidth = 00;
context.strokeStyle = 'rgb(60,70,100)';

context.fill();
context.stroke();

//orange line
context.beginPath();
context.moveTo(x5,y5);
context.lineTo(x6,y6);
context.strokeStyle = 'rgb(255,165,0)';
context.lineCap = 'butt';
context.stroke();

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

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

Wednesday, September 4, 2019

I found these video helpful in explaining how to use HTML5:

https://www.youtube.com/watch?v=EO6OkltgudE

https://www.youtube.com/watch?v=DPnqb74Smug

https://www.youtube.com/watch?v=UB1O30fR-EE

The beginning of this video seemed to be useful, the latter part not so much :

https://www.youtube.com/watch?v=pQN-pnXPaVg