Calligram Assignment

Below is the final cut of my Calligram project.

Below is the rough outline of the wolf that I used to shape my calligram.

     

          After about three hours of work I was able to complete Calligram assignment on Illustrator. I struggled with this project because I wanted to add more to my assignment than what was talked about in class.  I chose a wolf outline in which I copied to Illustrator and used the curvature tool to make the silhouette of the wolf. After I was satisfied with how the animal looked I was able to go in and highlight his fur with the words from the script Balto. I chose this script due to the fact that Balto was living between different worlds of a dog and a wolf and so the howling wolf would having a lonesome emotion. 

          I chose the wolf outline because I was inspired by my friend's passion of being a veterinarian. We want to get tattoos of a wolf because it symbolized being in a pack and how friendships, in general, can last for a long time. The movie Balto spoke about the hardships and the kindness that anyone can give and will be able to receive and I wanted this image to signify as such. When making the image, the hardest part was filling the wolf in with the script due to the different curves and smaller spaces. I knew that I wanted to leave certain parts blank to highlight different parts of the wolf's body and so it was difficult for me to decide which parts to leave white. After the work I put in, however, I think I captured a captivating part of how people may see wolves as well as each other.          

3 Illustrator Tutorials

https://youtu.be/3GzumUieDPY

This tutorial on YouTube is something a lot of people may post; however, this tutorial goes over the main tools and how to use them. He even speaks on what keys to use when using the tools to make things easier.

https://www.jotform.com/blog/40-fresh-and-useful-adobe-illustrator-tutorials/

This website is a whole list of tutorials and how to create different objects and shapes. Guiding oneself around this website helps to problem solve and think about how to create other interesting pieces.

https://youtu.be/pre5UZlMnQ8

I found this YouTube tutorial in attempt to find something that uses vectors in an art piece. This is video walks the audience step by step on how to place an image to help someone trace and use layers to gage where the drawing lies. The result was very interesting and is something I may find helpful in the future.

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>

<meta charset="UTF-8">

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

<style type="text/css">

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>

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>

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>