Wednesday, March 30, 2016

Magazine Cover

Here I have my friend Courtney as the feature with a monkey, my boyfriend with a puppy because why not and of course myself because we had to and my dog because she definitely is the cutest. I thought that the pictures on the side were fun to add and also made it to where I could easily throw in a caption that real magazines tend to do. But I also included a barcode for authenticity and although some of the tools gave me trouble, it really was not as hard as I thought it would be. I think that the hardest part was cutting out my friend with the monkey and trying to make that look realistic but all it took was a combination of the lasso, polygonal and magnetic tool to get her onto the background section by section.

Posted by at No comments:

Tuesday, March 29, 2016

Mini Assignment

I found a picture of myself sitting on a wall by bayshore and thought that it was a perfect fit so that I could place myself sitting down somewhere. Although I don't know exactly the name of this location, it is a castle somewhere in Ireland. It was hard trying to get myself to match up to the color of the rest of the vibrant scene, but I think the sun coming in from the same angle as the photo and enhancing the colors helped to match to the Irish scenery.
Posted by at No comments:

Monday, March 21, 2016

HTML Design

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

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

//context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);

//background
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(0, 300, 800, 300);
grd.addColorStop(0, 'rgb(0, 255, 255)');
grd.addColorStop(.4, 'rgb(255, 255, 255)');
grd.addColorStop(1, 'rgb(255, 0, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();



//top half//
context.beginPath();
context.moveTo(155, 200);
context.quadraticCurveTo(146, 209, 195, 175);
context.quadraticCurveTo(225, 150, 245, 115);
context.quadraticCurveTo(255, 97, 280, 70);
context.quadraticCurveTo(300, 46, 345, 38);
context.quadraticCurveTo(375, 35, 395, 60);
context.quadraticCurveTo(407, 80, 406, 80);
context.quadraticCurveTo(445, 46, 480, 45);
context.quadraticCurveTo(520, 48, 542, 80);
context.quadraticCurveTo(560, 100, 570, 130);
context.quadraticCurveTo(600, 176, 645, 200);
context.lineWidth = 1;
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();

//small corner
context.quadraticCurveTo(655, 210, 648, 230);
context.quadraticCurveTo(600, 268, 575, 300);
context.quadraticCurveTo(540, 350, 515, 400);
context.quadraticCurveTo(478, 472, 450, 485);
context.quadraticCurveTo(435, 496, 400, 498);


//bottom half
context.quadraticCurveTo(300, 410, 245, 370);
context.quadraticCurveTo(200, 282, 182, 247);
context.quadraticCurveTo(168, 230, 157, 220);
context.quadraticCurveTo(150, 210, 155, 200);
//150, 205);
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.stroke();

//tongue
context.beginPath();
context.moveTo(324, 200);
context.quadraticCurveTo(300, 203, 255, 225);
context.quadraticCurveTo(225, 250, 198, 279);
context.quadraticCurveTo(168, 318, 151, 350);
context.quadraticCurveTo(141, 375, 138, 400);
context.quadraticCurveTo(130, 445, 151, 500);
context.quadraticCurveTo(148, 499, 174, 525);
context.quadraticCurveTo(200, 548, 245, 555);
context.quadraticCurveTo(285, 560, 324, 552);
context.quadraticCurveTo(347, 550, 370, 532);
context.quadraticCurveTo(395, 515, 405, 496);
//line gets thicker//
context.quadraticCurveTo(420, 465, 430, 422);
context.quadraticCurveTo(440, 398, 460, 350);
context.quadraticCurveTo(470, 325, 495, 301);
context.quadraticCurveTo(514, 277, 553, 250);
context.quadraticCurveTo(575, 229, 550, 218);
context.quadraticCurveTo(530, 205, 510, 207);
context.quadraticCurveTo(475, 203, 450, 219);
context.quadraticCurveTo(425, 225, 400, 229);
context.quadraticCurveTo(350, 248, 325, 275);
context.quadraticCurveTo(285, 325, 258, 403);
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(258, 403);
context.quadraticCurveTo(265, 350, 280, 310);
context.quadraticCurveTo(300, 274, 326, 249);
context.quadraticCurveTo(365, 225, 335, 203);
context.quadraticCurveTo(335, 203, 324, 200);
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.stroke();

//teeth
context.beginPath();
context.moveTo(265, 165, 297, 135);
context.quadraticCurveTo(325, 135, 348, 149);
context.quadraticCurveTo(375, 165, 400, 157);
context.quadraticCurveTo(425, 150, 450, 148);
context.quadraticCurveTo(476, 150, 500, 168);
context.quadraticCurveTo(532, 205, 515, 220);
context.quadraticCurveTo(500, 225, 473, 205);
context.quadraticCurveTo(465, 213, 430, 215);
context.quadraticCurveTo(404, 208, 395, 198);
context.quadraticCurveTo(373, 203, 348, 208);
context.quadraticCurveTo(325, 202, 310, 172);
context.quadraticCurveTo(277, 182, 265, 165);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();

//white circle 1
context.beginPath();
context.moveTo(315, 95);
context.quadraticCurveTo(312,73, 330, 58);
context.quadraticCurveTo(348, 46, 376, 59);
context.quadraticCurveTo(395, 75, 387, 88);
context.quadraticCurveTo(374, 109, 352, 98);
context.quadraticCurveTo(348, 95, 350, 95)
context.quadraticCurveTo(330, 105, 315, 95)
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();

//white circle 2
context.beginPath();
context.moveTo(450, 85);
context.quadraticCurveTo(440, 65, 470, 59);
context.quadraticCurveTo(495, 56, 515, 70);
context.quadraticCurveTo(528, 82, 522, 99);
context.quadraticCurveTo(510, 108, 498, 105);
context.quadraticCurveTo(484, 100, 477, 90);
context.quadraticCurveTo(454, 98, 450, 85);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();

//tongue oval 1
context.beginPath();
context.moveTo(301, 250);
context.quadraticCurveTo(278, 252, 256, 275);
context.quadraticCurveTo(232, 300, 218, 321);
context.quadraticCurveTo(200, 349, 190, 375);
context.quadraticCurveTo(180, 400, 182, 400);
context.quadraticCurveTo(176, 420, 184, 430);
context.quadraticCurveTo(212, 423, 217, 400);
context.quadraticCurveTo(225, 375, 236, 350);
context.quadraticCurveTo(245, 325, 262, 300);
context.quadraticCurveTo(287, 253, 278, 292);
context.quadraticCurveTo(280, 289, 301, 250);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();

//tongue oval 2
context.beginPath();
context.moveTo(476, 252);
context.quadraticCurveTo(470, 253, 450, 270);
context.quadraticCurveTo(420, 296, 415, 305);
context.quadraticCurveTo(400, 325, 387, 350);
context.quadraticCurveTo(372, 375, 360, 399);
context.quadraticCurveTo(345, 425, 335, 450);
context.quadraticCurveTo(326, 467, 328, 478);
context.quadraticCurveTo(343, 500, 363, 479);
context.quadraticCurveTo(373, 467, 378, 450);
context.quadraticCurveTo(387, 424, 400, 400);
context.quadraticCurveTo(414, 368, 425, 350);
context.quadraticCurveTo(434, 325, 445, 310);
context.quadraticCurveTo(455, 290, 476, 252);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();

//inside mouth
context.beginPath();
context.moveTo(266, 166);
context.quadraticCurveTo(248, 179, 236, 188);
context.quadraticCurveTo(215, 198, 200, 205);
context.quadraticCurveTo(210, 210, 216, 215);
context.quadraticCurveTo(238, 240, 240, 240);
//context.fillStyle = '#000000';
//context.fill();
context.stroke();








////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

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








////////COMMENTS///////////

This project turned out to be a lot harder than I thought it would be but it really just took more time than anything. I simplified the Rolling Stones logo a little because the bold lines around the tongue just didn't seem to look well with coding as it was difficult to generate the flow like the original. I also took out the black back in the mouth area but only because i felt like it looked better this way. I used quadratic curves the entire time which was also difficult but once I realized that all I needed to do was plot the points closer, it manipulated the image more easily. I attached some of the graph photos too to show how many little points I had to graph. I tried to keep up with the numbers on the graph and in the coding but not all of them match up because it was hard to keep up with. Too many number started to make my head hurt. This project was interesting to say the least, I like my end result a lot more than I thought I would but now I know that coding is not my specialty.
Posted by at No comments:
Subscribe to: Posts (Atom)