Wednesday, May 8, 2013

Tampa Skyline

Tampa Skyline








Posted by at 2 comments:

Monday, April 15, 2013

Sweet Life

This graphic was completely created on Photoshop and is based off the song Sweet Life by Frank Ocean. The song with lyrics is below:
This image is made by adding different photos onto the same file and then rendered and edited until all images seemed to seamlessly become one complete image. The images I have chosen were added based on the lyrics of this song, as well as some of the themes Frank Ocean seems to sing about in his album, Channel Orange, such as the bottle of wine and the gold pills on the table next to the seats in the pool. By listening to the above video and paying attention to the lyrics you can start to understand some of the images used such as the planet Earth in the sky and the TV floating on the pool.
Posted by at No comments:

Wednesday, March 27, 2013

Strawberry Fields Forever



Strawberry Fields Forever

Vector Illustration 


Posted by at No comments:

Wednesday, March 6, 2013

Text Lion





Text Lion

Posted by at No comments:

Monday, February 11, 2013

HTML Project - SUN




Sun



HTML Project - Description

 I decided to create a html code creating a sun. I thought it would make an interesting design and I was successful in this. I thought it would be an interesting way to play with different shapes as well as better learn the order in which they must go in when writing code. I started from the back going forward and then adjusting the order later if needed. I started with the blue box as the background to my canvas, then the back circle and continuing towards the forward-most circle. Labeling each code also helped me organize my work. The most difficult area of the project was figuring out how to conduct the curves to the way I wanted them to go and my project would not be as interesting or successful without them. The above pictures were used as references as well as the graph below. I am glad to have learned some basic code and hope to use it in the future.
Code Used
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background
context.beginPath();
context.rect(0, 0, 800, 600);
context.lineWidth = 5;
context.fillStyle = 'rgb(100, 100, 225)';
context.fill();
context.stroke();

//back circle
context.beginPath();
context.arc(400, 300, 300 ,0 ,2*Math.PI,false);
context.lineWidth = 1;
context.strokeStyle = 'rgb(100, 100, 225)';
var grd2 = context.createRadialGradient(400, 300, 25, 400, 300, 320);
grd2.addColorStop(0, 'orange');
grd2.addColorStop(1, 'rgb(255, 255, 200)');
context.fillStyle = grd2;
context.fill();
context.stroke();

//back square
context.beginPath();
context.rect(250, 150, 300, 300);
context.lineWidth = 0;
context.strokeStyle = 'orange';
context.fillStyle = 'orange';
context.fill();
context.stroke();


//Bezier curves
for (var i = 0; i < canvas.height; i+=20){

context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(50, 600, 0, i);
context.strokeStyle = 'rgb(225, 220, 0)';
context.stroke();

}

for (var i = 0; i < canvas.height; i+=20){

context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(750, 100, 800, i);
context.strokeStyle = 'rgb(225, 220, 0)';
context.stroke();

}

for (var i = 0; i < canvas.height; i+=20){

context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(750, i, 100, 800);
context.strokeStyle = 'rgb(225, 200, 0)';
context.stroke();

}

for (var i = 0; i < canvas.height; i+=20){

context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(50, i, 600, 0);
context.strokeStyle = 'rgb(225, 200, 0)';
context.stroke();

}

//twirl continued

for (var i = 0; i < canvas.height; i+=20){

context.beginPath();
context.moveTo(400, 300)
context.lineTo(canvas.width, i);
context.strokeStyle = 'rgb(255, 153, 0)';
context.stroke();

}

for (var i = 0; i < canvas.height; i+=20){

context.beginPath();
context.moveTo(400, 300)
context.lineTo(0, i);
context.strokeStyle = 'rgb(255, 153, 0)';
context.stroke();

}

//triangles
context.beginPath();
context.moveTo(400, 0);
context.lineTo(450, 250);
context.lineTo(350, 250);
context.lineTo(400, 0);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(400, 600);
context.lineTo(450, 350);
context.lineTo(350, 350);
context.lineTo(400, 600);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(700, 300);
context.lineTo(450, 250);
context.lineTo(450, 350);
context.lineTo(700, 300);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(100, 300);
context.lineTo(350, 250);
context.lineTo(350, 350);
context.lineTo(100, 300);
context.fillStyle = 'rgb(249, 132, 15)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();


//curves
context.beginPath();
context.moveTo(500, 300);
context.quadraticCurveTo(425, 175, 300, 100);
context.quadraticCurveTo(375, 200, 400, 300);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(500, 300);
context.quadraticCurveTo(300, 325, 200, 400);
context.quadraticCurveTo(275, 275, 400, 200);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();


context.beginPath();
context.moveTo(300, 300);
context.quadraticCurveTo(375, 425, 500, 500);
context.quadraticCurveTo(425, 375, 400, 300);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();


context.beginPath();
context.moveTo(400, 300);
context.quadraticCurveTo(500, 275, 600, 200);
context.quadraticCurveTo(525, 325, 400, 400);
context.fillStyle = 'rgb(255, 119, 0)';
context.fill();
context.stroke();


//front circle
context.beginPath();
context.arc(400, 300, 115 ,0 ,2*Math.PI,false);
context.lineWidth = 1;
var grd3 = context.createRadialGradient(400, 300, 25, 400, 300, 320);
grd3.addColorStop(0, 'orange');
grd3.addColorStop(1, 'rgb(255, 255, 200)');
context.fillStyle = grd3;
context.fill();
context.stroke();





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

};

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

Posted by at No comments:
Subscribe to: Posts (Atom)