Tag Brush

Original Logo

 Tag Brush Logo

Final Product 

        This assignment was really fun and simple enough to do. My logo was something I made that really brought out multiple angles on who I am and adding these styles on top enhanced it more. It took me about a couple hours to do. The hardest part was reading the directions as carefully as I can and making sure I don't miss a step. I had issues finding different presets, but after some patience I was able to locate everything I needed to and finish the project. 

       During this interesting and confusing time in quarantine, I found myself listening to music I either haven't listened to in a long time or finding new music to me. I always admired classic rock and have been really getting into its groove and artistry. I wanted to pick colors that gave the feel of this classic rock or vintage nostalgia. I experimented with the placement as well as the size to my liking in order to emulate my inspiration. Playing with angles got too messy for my liking and the feel as well as the original logo became way too lost with everything. I'm really satisfied with what I was able to do with my logo.

Propoganda Poster

The Final Piece 

Self portrait inspiration

Propaganda inspiration piece 

          When given this assignment, I wanted to make a fun bandwagon propaganda poster that still held a message of something that people should think about more. I was able to find it when browsing images of myself and realized how many pictures I have wearing glasses. This became my inspiration for my poster. When doing the Self-Portrait portion of the assignment, I had a lot of difficulty when it came to my hair. The most difficult part was finding the texture that I thought was close to my image and still blended with the minimalistic idea I wanted. The self portrait portion took me about six hours to finish. 

          When it came down to the text and the actual poster, I wanted to do something fun and bright to highlight my message of wearing sunglasses to prevent damage to someone's eyes from the sun. I wanted bright orange and yellow colors for this. After the "text assignment" I knew I wanted to include some sort of image, in this case, of a sun. I found an image that I thought suited the picture, traced it and incorporated the words I wanted into the sun's image. This portion took me an hour, including brainstorming and research. 

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>

3 Dreamweaver Tutorials

https://www.html5canvastutorials.com

     This is a website that I found with many tutorials that wold be helpful in basic functions if I want to add anything new to my codes and pictures.

https://youtu.be/LQPKzf_G18Q

     This YouTube video was something that was similar to the first class that taught me basic coding and the different functions. I thought this was a good review that went more depth into the different functions.

https://youtu.be/yq2au9EfeRQ

     This YouTube video I really liked and goes step by step into many different functions. It is for beginners and was easy for me to follow.

My first impressions

     After digesting the first day in Digital Media, I became intimidated by what I’ll be learning. I consider myself a creative person; however, the technological aspects is where my weakness will show. I know I will have to work harder when navigating my way around the computer, but I am up for the challenge. With this thought, though, I am very excited to learn what this class has in store and strengthen my digital arts knowledge. 

     When introducing myself in class, I told everyone that my name is Vreanna, born in the Philippines, but raised in Florida and that I am an Advertising and Public Relations Major. To elaborate a bit more about myself, my concentration in my major is Creative Advertising and I also took upon a minor: Theatre/Dance. It’s interesting to note that I stepped into the Univertiy of Tampa with a General Biology Major and a thought of my theatre minor, but knew it would be too difficult for myself. Yet, during my first semester, I knew I wanted to do something more creative which led me to my current concentrations.

     Knowing that this class is something useful for me to take, as well as something I need to take, I want to be able to see through a project fully, knowing I did everything I could to the best of my ability. I want to take from this class more confidence, knowledge and a growth that will help me in my future career. It’ll be a challenge, but I know that understanding what I learn in this class will help me through our digital age.