New to Blogger, New to FMX 210: HTML5 CANVAS FINAL PROJECT

The Final Project:

The Pieces of Inspiration:

After about 10 hours of hard work, I finally completed my HDML5 Canvas Project on Dreamweaver. I struggled with this project because I was never someone who was brilliant with technology; however, I still wanted to do a good job and take on the challenge. I used simple shapes to my advantage and layered them to create new shapes. The more difficult techniques for me, I used as added detail which I believe made my piece more successful.

When thinking about what I wanted to work on, I instantly went to Japan. I have been to the country when I was little and now work at a sushi restaurant where the chef came to Florida from Okinawa, so I am constantly surrounded by its culture. I wanted this piece to be something that can be seen by anyone, but still have the fundamentals of tradition. It was easy enough for me to work on the background with the Rising Sun. All I had to do was expand an arc and work from there. It became a little bit more difficult with the buildings and mountain, but with added layers the piece came together. The hardest part for me was the sushi pieces. They look very simple, but it was difficult for me to find the right placement for each detail, especially the lines on the fresh salmon sushi (the third sushi from the left). I added a gradient and used the quadratic curve for the lined details and after shrinking the line width, it came together rather well. After the work that I put into my project, I believe I captured a fun, yet traditional picture of the culture in Japan.

Full Code:

<!doctype html>

<html>

<head>

<title> FMX 210 DIGITAL MEDIA - CANVAS PROJECT </title>

body,td,th {

font-family: Helvetica, Arial, sans-serif;

font-size: 12px;

color: rgba(255,255,255,1);

}

body {

background-color: rgba(0,0,0,1);

}

#myCanvas { border: rgba(102,0,255,1) medium dashed; background-color: rgba(255,255,255,1); }

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//white background

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 20;

context.fillStyle = 'rgb(255, 255, 255)';

context.fill();

context.strokeStyle = 'rgb(255, 255, 255)';

context.stroke();

//red moon

var centerX = 400;

var centerY = 800;

var radius = 600;

var startangle= 0* Math.PI;;

var endangle = 1* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.fillStyle = "red";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//blue mountain

var tx1 = 650;

var ty1 = 50;

var tx2 = 350;

var ty2 = 700;

var tx3 = 850;

var ty3 = 700;

var startx = 650;

var starty = 350;

var endx = 575;

var endy = 450;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 0

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(startx, starty, endx, endy);

grd.addColorStop(0, 'rgb(255, 255, 255)');

grd.addColorStop(1, 'rgb(0, 0, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//temple

var rectx2 = 400;

var recty2 = 300;

var rectwidth2 = 100;

var rectheight2 = 300;

context.beginPath();

context.rect(rectx2,recty2,rectwidth2,rectheight2);

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle = 'black';

context.fill();

context.stroke();

//building left of temple

var rectx2 = 200;

var recty2 = 425;

var rectwidth2 = 200;

var rectheight2 = 300;

context.beginPath();

context.rect(rectx2,recty2,rectwidth2,rectheight2);

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle = 'lightgray';

context.fill();

context.stroke();

//windows

context.beginPath();

context.rect(225,450,150,50); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(255,250,112)";

context.fill();

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round'

context.stroke();

context.beginPath();

context.rect(225,510,150,50); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(255,250,112)";

context.fill();

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round'

context.stroke();

//building behind sushi

var rectx2 = 0;

var recty2 = 325;

var rectwidth2 = 200;

var rectheight2 = 300;

context.beginPath();

context.rect(rectx2,recty2,rectwidth2,rectheight2);

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle = 'lightgray';

context.fill();

context.stroke();

//windows

context.beginPath();

context.rect(25,350,150,50); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(255,250,112)";

context.fill();

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round'

context.stroke();

context.beginPath();

context.rect(25,420,50,50); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(255,250,112)";

context.fill();

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round'

context.stroke();

context.beginPath();

context.rect(25,490,50,50); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(255,250,112)";

context.fill();

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round'

context.stroke();

context.beginPath();

context.rect(125,490,50,50); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(255,250,112)";

context.fill();

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round'

context.stroke();

context.beginPath();

context.rect(125,420,50,50); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(255,250,112)";

context.fill();

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round'

context.stroke();

///triangles of temple

//top

var tx1 = 450;

var ty1 = 200;

var tx2 = 350;

var ty2 = 300;

var tx3 = 550;

var ty3 = 300;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

//context.fillStyle = 'rgb(230, 230. 230)';

context.fillStyle = 'black';

context.fill();

context.stroke();

//middle

var tx1 = 450;

var ty1 = 300;

var tx2 = 350;

var ty2 = 400;

var tx3 = 550;

var ty3 = 400;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

//context.fillStyle = 'rgb(230, 230, 230)';

context.fillStyle = 'black';

context.fill();

context.stroke();

//bottom

var tx1 = 450;

var ty1 = 400;

var tx2 = 350;

var ty2 = 500;

var tx3 = 550;

var ty3 = 500;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

//context.fillStyle = 'rgb(230, 230. 230)';

context.fillStyle = 'black';

context.fill();

context.stroke();

/////tekka (left sushi)

var gradient1 = context.createLinearGradient(0, 0, 50, 0);

gradient1.addColorStop(0, 'grey');

gradient1.addColorStop(1, 'rgb(0, 0, 0)');

context.beginPath();

context.rect(8, 525, 90, 80);

context.fillStyle = gradient1;

context.lineWidth = 10;

context.strokeStyle = 'black';

context.lineCap = 'round'

context.stroke();

context.fill();

///top white part of tekka

var centerX = canvas.width / 14.5;

var centerY = canvas.height / 1.18;

var radius = 48;

var startangle = 0;

var endangle = 1* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

context.lineWidth = 5;

context.strokeStyle = "white";

context.stroke();

context.fillStyle = 'white';

context.fill();

context.stroke();

var centerX = canvas.width / 14.5;

var centerY = canvas.height / 1.12;

var radius = 48;

var startangle = 0;

var endangle = 1* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

//context.fillStyle = "red";

context.lineWidth = 5;

context.strokeStyle = "white";

context.stroke();

context.fillStyle = 'white';

context.fill();

context.stroke();

var centerX = canvas.width / 14.5;

var centerY = canvas.height / 1.18;

var radius = 30;

var startangle = 0;

var endangle = 1* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

context.lineWidth = 5;

context.strokeStyle = "lightpink";

context.stroke();

context.fillStyle = 'lightpink';

context.fill();

context.stroke();

var centerX = canvas.width / 14.5;

var centerY = canvas.height / 1.12;

var radius = 30;

var startangle = 0;

var endangle = 1* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

//context.fillStyle = "red";

context.lineWidth = 5;

context.strokeStyle = "lightpink";

context.stroke();

context.fillStyle = 'lightpink';

context.fill();

context.stroke();

///rice cake

var x = 250;

var y = 580;

// control point 1 coordinates ( magnet 1 )

var cpointX1 = 205; //moves bottom line

var cpointY1 = 450 ; //moves it up or down (fat or thin)

// control point 2 coordinates ( magnet 2 )

var cpointX2 = 150; //rightest part

var cpointY2 = 450; //moves it up or down

// ending point coordinates

var x1 = 110;

var y1 = 580;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,1)";

context.lineCap = 'round'

context.stroke();

//nori

var centerX = 180;

var centerY = 560;

var radius = 50;

var startangle = 1* Math.PI;;

var endangle = 0* Math.PI;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

var endRadius = 200;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

var grd = context.createLinearGradient(startX, startY, startRadius, endX, endY, endRadius);

grd.addColorStop(.9, 'rgb(99, 99, 98)');

grd.addColorStop(1, 'rgb(0, 0, 0)');

context.fillStyle = grd;

context.fill();

context.stroke();

//fresh salmon sushi

//rectangle (rice)

context.beginPath();

context.rect(260,535,150,60); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(255,255,255)";

context.fill();

context.strokeStyle = "rgb(0,0,0)";

context.lineCap = 'round'

context.stroke();

///semi circle (salmon)

var centerX = canvas.width / 2.4;

var centerY = canvas.height / 1.06;

var radius = 75;

var startangle = 0;

var endangle = 1* Math.PI;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

var endRadius = 200;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

var grd = context.createLinearGradient(startX, startY, startRadius, endX, endY, endRadius);

grd.addColorStop(.8, 'rgb(186, 71, 63)');

grd.addColorStop(.6, 'rgb(224, 128, 121)');

grd.addColorStop(.4, 'rgb(219, 160, 156)');

context.fillStyle = grd;

context.fill();

context.stroke();

/// lines on the fresh salmon

// starting point coordinates

var x = 360;

var y = 560;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 350;

var cpointY = canvas.height / 1 - 40;

// ending point coordinates

var x1 = 350;

var y1 = 510;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 1;

context.strokeStyle = "rgb(255,255,255)";

context.stroke();

var x = 330;

var y = 560;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 370;

var cpointY = canvas.height / 1 - 40;

// ending point coordinates

var x1 = 315;

var y1 = 510;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 1;

context.strokeStyle = "rgb(255,255,255)";

context.stroke();

var x = 277;

var y = 560;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 400;

var cpointY = canvas.height / 1 - 40;

// ending point coordinates

var x1 = 300;

var y1 = 515;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 1;

context.strokeStyle = "rgb(255,255,255)";

context.stroke();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

var credits = "Vreanna Bautista, FMX 210, Spring, 2020";

context.beginPath();

context.font = 'bold 20px Arial';

context.fillStyle = "rgba(0,0,0,1)";

context.fillText(credits, 10, 20);

context.closePath();

</script>

</body>

</html>

New to Blogger, New to FMX 210

Wednesday, February 12, 2020

HTML5 CANVAS FINAL PROJECT

No comments:

Post a Comment

Blog Archive