Monday, March 25, 2019

Poster



I go to Lake George almost every Summer with our family friends so I chose a photo from when we were last there. I added a fun quote on the bottom to give it a post card feel. It's truly one of the happiest places on earth so I felt that the saying fit perfectly.  
                          
at No comments:

Monday, March 18, 2019

Gradient Mesh



Once I finished, I thought back about all the times I restarted my process and didn't actually have to. Quite a LONG lesson learned on gradient mesh! I am still proud of myself with the outcome. 

This was a picture of the cake at my mother's baby shower. I would love to master this skill so that next time I would have fewer imperfections and I would be able to recreate ALL details in the photo.
at No comments:

Wednesday, February 27, 2019

Logo




I got lucky while making my logo because I found a font that was almost exactly like what I had imagined in my mind for this project. I typed out the letters and then selected the "V" and moved it so that it overlaps with the "A" so it'd looked like a cursive font. 

at No comments:

Monday, February 25, 2019

Calligram Project

I am not a huge fan of poems so I choose a song that I'm always playing. The words you see are lyrics to the song These Heights by Bassjackers and Lucas & Steve, ft. Carolina Pennell. I decided to go with a theme of smiley faces for my entire blog just to have a focus going into every project. 

at No comments:

Tuesday, February 12, 2019

Canvas Project


TOTAL HOURS: 6

Honestly, I am quite impressed with myself. I was the student who couldn't figure out how to make a simple check, even though I was given the entire code for it. After experimenting with the different shapes and figuring out what worked and what didn't... this is my final canvas. 

I started in the middle and worked outward. Initially, all I had was a black circle with two smaller black circles as "eyes" for the smiley face and a half circle as the smile. I knew that I wanted lots of colors and for the final piece to kind of give you a headache while also making perfect sense. Easily the most difficult part was figuring out the bézier and quadratic curves which are in aqua and magenta. Once I mastered how to do those, everything else fell right into place and it ended up being way easier than I had originally thought.


CODE:

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

 ////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

 //SMILEY FACE

//smileyface CIRCLE
context.arc (400, 300, 150, 0, Math.PI *2, false)
context.lineWidth = 4;
context.fillStyle = 'yellow';
context.fill();
context.stroke ();

//smileyface EYES

//left eye
context.beginPath();
context.ellipse(350, 250, 15, 25, Math.PI / 1, 0, 2* Math.PI);
context.fillStyle = 'black';
context.fill();
context.stroke();

//right eye
context.beginPath();
context.ellipse(450, 250, 15, 25, Math.PI / 1, 0, 2* Math.PI);
context.fillStyle = 'black';
context.fill();
context.stroke();

//smileyface SMILE

 context.beginPath ();
context.arc (400, 300, 100, 0, Math.PI *1, false)
context.lineWidth = 4;
context.stroke ();

//left line
context.beginPath ();
context.moveTo(295, 300);
context.lineTo(305, 300);
context.lineWidth = 3;
context.stroke ();

//right line
context.beginPath ();
context.moveTo(495, 300);
context.lineTo(505, 300);
context.lineWidth = 3;
context.stroke ();

 //AQUA QUADRATIC CURVES

//curve1 (staring top left going clockwise)
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.quadraticCurveTo(30, 30, 315, 175);
context.strokeStyle = 'aqua'
context.lineWidth = 2;
context.stroke();

//curve 2
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(315, 175);
context.quadraticCurveTo(400, -150, 485, 175);
context.strokeStyle = 'aqua'
context.stroke();

//curve 3
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(552, 300);
context.quadraticCurveTo(770, 30, 485, 175);
context.strokeStyle = 'aqua'
context.stroke();

//curve 4
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(552, 300);
context.quadraticCurveTo(790, 550, 485, 427);
context.strokeStyle = 'aqua'
context.stroke();

//curve 5
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(315, 425);
context.quadraticCurveTo(400, 750, 485, 427);
context.strokeStyle = 'aqua'
context.stroke();


//curve 6
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.quadraticCurveTo(10, 555, 315, 427);
context.strokeStyle = 'aqua'
context.stroke();

//second round of aqua curves, starting w left curve
//curve 1
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(270, 220);
context.quadraticCurveTo(-55, 300, 270, 380);
context.strokeStyle = 'aqua'
context.stroke();

//curve 2
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(270, 220);
context.quadraticCurveTo(200, -100, 400, 150);
context.strokeStyle = 'aqua'
context.stroke();

//curve 3
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(400, 150);
context.quadraticCurveTo(600, -100, 530, 220);
context.strokeStyle = 'aqua'
context.stroke();

//curve 4
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(530, 220);
context.quadraticCurveTo(855, 300, 530, 380);
context.strokeStyle = 'aqua'
context.stroke();

//curve 5
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(530, 380);
context.quadraticCurveTo(600, 700, 400, 450);
context.strokeStyle = 'aqua'
context.stroke();

//curve 6
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(400, 450);
context.quadraticCurveTo(200, 700, 270, 380);
context.strokeStyle = 'aqua'
context.stroke();




 //MAGENTA BÉZIER CURVES

//curve 1 (highest one)
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(0, 0, 800, 0, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 1;
context.stroke();




//curve 2 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(20, 20, 780, 20, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 2;
context.stroke();

//curve 3
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(40, 40, 760, 40, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 3;
context.stroke();

//curve 4
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(60, 60, 740, 60, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 4;
context.stroke();

//curve 5
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(80, 80, 720, 80, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 5;
context.stroke();

//curve 6
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(80, 520, 720, 520, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 5;
context.stroke();

//curve 7
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(60, 540, 740, 540, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 4;
context.stroke();

//curve 8
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(40, 560, 760, 560, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 3;
context.stroke();

//curve 9
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(20, 580, 780, 580, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 2;
context.stroke();

 //bottom curve 10 (lowest one)
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(0, 600, 800, 600, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 1;
context.stroke();



 //YELLOW CIRCLE
context.beginPath ();
context.arc (400, 300, 290, 0, Math.PI *2, false)
context.lineWidth = 8;
context.strokeStyle = 'yellow'
context.stroke ();


// CADETBLUE CIRCLES

//first thick one
context.beginPath ();
context.arc (400, 300, 300, 0, Math.PI *2, false)
context.lineWidth = 9;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 2
context.beginPath ();
context.arc (400, 300, 310, 0, Math.PI *2, false)
context.lineWidth = 7;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 3
context.beginPath ();
context.arc (400, 300, 320, 0, Math.PI *2, false)
context.lineWidth = 6.5;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 4
context.beginPath ();
context.arc (400, 300, 330, 0, Math.PI *2, false)
context.lineWidth = 6;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 5
context.beginPath ();
context.arc (400, 300, 338, 0, Math.PI *2, false)
context.lineWidth = 5;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 6
context.beginPath ();
context.arc (400, 300, 344, 0, Math.PI *2, false)
context.lineWidth = 4;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 7
context.beginPath ();
context.arc (400, 300, 350, 0, Math.PI *2, false)
context.lineWidth = 3;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 8
context.beginPath ();
context.arc (400, 300, 355, 0, Math.PI *2, false)
context.lineWidth = 2;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 9
context.beginPath ();
context.arc (400, 300, 359, 0, Math.PI *2, false)
context.lineWidth = 1.9;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 10
context.beginPath ();
context.arc (400, 300, 362, 0, Math.PI *2, false)
context.lineWidth = 1.8;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 11
context.beginPath ();
context.arc (400, 300, 365, 0, Math.PI *2, false)
context.lineWidth = 1.7;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 12
context.beginPath ();
context.arc (400, 300, 368, 0, Math.PI *2, false)
context.lineWidth = 1.6;
context.strokeStyle = 'CadetBlue'
context.stroke ();

//circle 11
context.beginPath ();
context.arc (400, 300, 371, 0, Math.PI *2, false)
context.lineWidth = 1.5;
context.strokeStyle = 'CadetBlue'
context.stroke ();

context.beginPath ();
context.arc (400, 300, 374, 0, Math.PI *2, false)
context.lineWidth = 1.4;
context.strokeStyle = 'CadetBlue'
context.stroke ();

context.beginPath ();
context.arc (400, 300, 377, 0, Math.PI *2, false)
context.lineWidth = 1.5;
context.strokeStyle = 'CadetBlue'
context.stroke ();

context.beginPath ();
context.arc (400, 300, 380, 0, Math.PI *2, false)
context.lineWidth = 1.4;
context.strokeStyle = 'CadetBlue'
context.stroke ();

 context.beginPath ();
context.arc (400, 300, 383, 0, Math.PI *2, false)
context.lineWidth = 1.4;
context.strokeStyle = 'CadetBlue'
context.stroke ();

context.beginPath ();
context.arc (400, 300, 386, 0, Math.PI *2, false)
context.lineWidth = 1.3;
context.strokeStyle = 'CadetBlue'
context.stroke ();

context.beginPath ();
context.arc (400, 300, 389, 0, Math.PI *2, false)
context.lineWidth = 1.2;
context.strokeStyle = 'CadetBlue'
context.stroke ();

context.beginPath ();
context.arc (400, 300, 392, 0, Math.PI *2, false)
context.lineWidth = 1.1;
context.strokeStyle = 'CadetBlue'
context.stroke ();

context.beginPath ();
context.arc (400, 300, 368, 0, Math.PI *2, false)
context.lineWidth = 1.6;
context.strokeStyle = 'CadetBlue'
context.stroke ();


 //black circle around smiley face
context.beginPath ();
context.arc (400, 300, 150, 0, Math.PI *2, false)
context.lineWidth = 4;
context.strokeStyle = 'black'
context.stroke ();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

 };

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

</html>

at No comments:

Wednesday, January 30, 2019

The Internet vs. The World Wide Web

Assignment #2
The internet and the World Wide Web are often mistaken for being the same. While they work together and interact with one another, they are not as similar as people assume.

 The internet was introduced in 1969 and is credited to Vinton Cerf and Bob Kahn with inventing the internet communication protocols that we use today. The internet is a network of networks that connects millions of computers around the world. As long as you can connect to the internet, you are able to communicate with any other computer. 

 The World Wide Web was created by Tim-Berners Lee and colleagues at CERN in 1989. The WWW is the leading information retrieval service of the internet, it is a collection of web pages following http protocol that can be accessed via the internet. It uses HTTP, a language to transmit data, to access information that is on a different network. 

 The internet is much bigger than the WWW, however the WWW is something we use to get into the internet. Just like you're using Chrome to view this blog post. 
at No comments:

Monday, January 28, 2019

Who am I? What am I thinking?


Assignment #1

My name is Annalisa. I am a sophomore studying Advertising and Public Relations with a minor in Marketing. I had little to no idea what to expect for this course when I signed up for it but after the first class I am more excited to learn about digital media and just keep an open mind on the topic. I am a hands on learner so I'm excited to learn as I go rather than just reading and memorizing facts about something. I do expect this class to challenge me everyday but there is nothing better than overcoming a challenge. 
at No comments:
Subscribe to: Posts (Atom)

Portfolio

I used one of the templates on InDesign to create my portfolio because I really loved the color scheme. I chan...

  • Meme
             I used an off-guard picture from brunch because we are clearly annoyed at something and what would be a better picture for a m...
  • Business Cards
                                                                                 I played around with different colors to see whi...