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:
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...