Monday, October 26, 2015
Tuesday, October 20, 2015
HTML
I based my graphic off of this graphic of a sun set.
And this is is the graph I used
The final product is much more stylized then the original. I used lines to create depth and color changes. It has a tribal feel to the whole peice. The process of using html was very frustrating and i don't think it would be my choice for graphics in the future but it was good to gain some experience with it.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'lightBlue';
context.fill();
context.lineWidth = 0;
context.stroke();
context.beginPath();
context.rect(0, 300, 800, 600);
context.fillStyle = 'darkBlue';
context.fill();
context.lineWidth = 0;
context.stroke();
context.beginPath();
context.moveTo(250, 300);
context.quadraticCurveTo(400, 90, 525, 300);
context.lineWidth = 8;
context.strokeStyle = 'yellow'
context.closePath();
// line color
context.stroke();
context.beginPath();
context.moveTo(225, 260);
context.lineTo(110, 260);
context.strokeStyle = 'yellow';
context.stroke();
context.beginPath();
context.moveTo(249, 215);
context.lineTo(135, 120);
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(295, 170);
context.lineTo(225, 60);
context.strokeStyle = 'yellow';
context.stroke();
context.beginPath();
context.moveTo(390, 150);
context.lineTo(390, 10);
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(490, 170);
context.lineTo(550, 50);
context.strokeStyle = 'yellow';
context.stroke();
context.beginPath();
context.moveTo(525, 225);
context.lineTo(650, 125);
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(550, 260);
context.lineTo(675, 260);
context.strokeStyle = 'yellow';
context.stroke();
context.beginPath();
context.moveTo(350, 250);
context.lineTo(420, 250);
context.strokeStyle = 'yellow';
context.stroke();
context.beginPath();
context.moveTo(285, 280);
context.lineTo(495, 280);
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(340, 220);
context.lineTo(440, 220);
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(10, 400);
context.lineTo(440, 400);
context.strokeStyle = 'lightBlue';
context.stroke();
context.beginPath();
context.moveTo(400, 350);
context.lineTo(700, 350);
context.strokeStyle = 'lightBlue';
context.stroke();
context.beginPath();
context.moveTo(430, 500);
context.lineTo(760, 500);
context.strokeStyle = 'lightBlue';
context.stroke();
context.beginPath();
context.moveTo(100, 480);
context.lineTo(250, 480);
context.strokeStyle = 'Blue';
context.stroke()
context.beginPath();
context.moveTo(300, 450);
context.lineTo(550, 450);
context.strokeStyle = 'Blue';
context.stroke()
context.beginPath();
context.moveTo(470, 410);
context.lineTo(780, 410);
context.strokeStyle = 'Blue';
context.stroke()
context.beginPath();
context.moveTo(100, 320);
context.lineTo(300, 320);
context.strokeStyle = 'Blue';
context.stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
And this is is the graph I used
The final product is much more stylized then the original. I used lines to create depth and color changes. It has a tribal feel to the whole peice. The process of using html was very frustrating and i don't think it would be my choice for graphics in the future but it was good to gain some experience with it.
Code
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'lightBlue';
context.fill();
context.lineWidth = 0;
context.stroke();
context.beginPath();
context.rect(0, 300, 800, 600);
context.fillStyle = 'darkBlue';
context.fill();
context.lineWidth = 0;
context.stroke();
context.beginPath();
context.moveTo(250, 300);
context.quadraticCurveTo(400, 90, 525, 300);
context.lineWidth = 8;
context.strokeStyle = 'yellow'
context.closePath();
// line color
context.stroke();
context.beginPath();
context.moveTo(225, 260);
context.lineTo(110, 260);
context.strokeStyle = 'yellow';
context.stroke();
context.beginPath();
context.moveTo(249, 215);
context.lineTo(135, 120);
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(295, 170);
context.lineTo(225, 60);
context.strokeStyle = 'yellow';
context.stroke();
context.beginPath();
context.moveTo(390, 150);
context.lineTo(390, 10);
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(490, 170);
context.lineTo(550, 50);
context.strokeStyle = 'yellow';
context.stroke();
context.beginPath();
context.moveTo(525, 225);
context.lineTo(650, 125);
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(550, 260);
context.lineTo(675, 260);
context.strokeStyle = 'yellow';
context.stroke();
context.beginPath();
context.moveTo(350, 250);
context.lineTo(420, 250);
context.strokeStyle = 'yellow';
context.stroke();
context.beginPath();
context.moveTo(285, 280);
context.lineTo(495, 280);
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(340, 220);
context.lineTo(440, 220);
context.strokeStyle = 'orange';
context.stroke();
context.beginPath();
context.moveTo(10, 400);
context.lineTo(440, 400);
context.strokeStyle = 'lightBlue';
context.stroke();
context.beginPath();
context.moveTo(400, 350);
context.lineTo(700, 350);
context.strokeStyle = 'lightBlue';
context.stroke();
context.beginPath();
context.moveTo(430, 500);
context.lineTo(760, 500);
context.strokeStyle = 'lightBlue';
context.stroke();
context.beginPath();
context.moveTo(100, 480);
context.lineTo(250, 480);
context.strokeStyle = 'Blue';
context.stroke()
context.beginPath();
context.moveTo(300, 450);
context.lineTo(550, 450);
context.strokeStyle = 'Blue';
context.stroke()
context.beginPath();
context.moveTo(470, 410);
context.lineTo(780, 410);
context.strokeStyle = 'Blue';
context.stroke()
context.beginPath();
context.moveTo(100, 320);
context.lineTo(300, 320);
context.strokeStyle = 'Blue';
context.stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Tuesday, October 6, 2015
vector picture
I used
vectors to copy a picture of a boy smoking a hookah pen. I then changed the
hookah pen into a blunt and had the smoke turn into a silhouette of a sexy
lady. I wanted the women to be very subtle so I made her the same color as the
smoke. To keep the focus on the figure I made a very soft and subdued back
round which while still gives a sense of space it doesn’t take away from the
rest of the piece. Over all I wanted this piece to be sexy but in a subtle way
just like the lady hiding in the smoke and I think him smoking a blunt and the
overall soft feel of the piece accomplishes that.
Subscribe to:
Posts (Atom)