canvas #1

<!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.fillStyle = '41449B';

context.fill();

//cloud 1

context.beginPath();

context.moveTo(0, 100);

context.bezierCurveTo(200, 150, 500, 50, 800, 100);

context.lineTo(800, 200)

context.bezierCurveTo(500, 100, 200, 250, 0, 200);

context.lineTo(0, 100);

context.closePath();

context.fillStyle = 'rgba(255, 0, 0, .2)';

context.fill();

context.strokeStyle = 'rgba(255, 0, 0, .1)';

context.stroke();

//cloud 2

context.beginPath();

context.moveTo(0, 100);

context.bezierCurveTo(300, 250, 600, 60, 900, 200);

context.lineTo(800, 200)

context.bezierCurveTo(600, 200, 300, 350, 0, 300);

context.lineTo(0, 100);

context.closePath();

context.fillStyle = 'rgba(255, 0, 0, .2)';

context.fill();

context.strokeStyle = 'rgba(255, 0, 0, .1)';

context.stroke();

//moon

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 70;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#AEAEAE';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#AEAEAE';

context.stroke();

//cloud 3

context.beginPath();

context.moveTo(0, 100);

context.bezierCurveTo(100, 50, 400, 40, 800, 100);

context.lineTo(800, 200)

context.bezierCurveTo(400, 100, 100, 150, 0, 100);

context.lineTo(0, 100);

context.closePath();

context.fillStyle = 'rgba(255, 0, 0, .2)';

context.fill();

context.strokeStyle = 'rgba(255, 0, 0, .1)';

context.stroke();

//cloud 4

context.beginPath();

context.moveTo(0, 100);

context.bezierCurveTo(330, 270, 600, 60, 900, 200);

context.lineTo(800, 200)

context.bezierCurveTo(700, 400, 100, 150, 0, 300);

context.lineTo(0, 100);

context.closePath();

context.fillStyle = 'rgba(255, 0, 0, .2)';

context.fill();

context.strokeStyle = 'rgba(255, 0, 0, .1)';

context.stroke();

//mountain 1

context.beginPath();

context.moveTo(100, 700);

context.lineTo(700, 600);

context.quadraticCurveTo(500, 100, 400, 600);

context.lineWidth = 5;

context.strokeStyle = '#ACAEFD';

context.stroke();

context.fillStyle = '#ACAEFD';

context.fill();

//mountain 1

context.beginPath();

context.moveTo(100, 700);

context.lineTo(100, 600);

context.quadraticCurveTo(50, 150, 0, 600);

context.lineWidth = 5;

context.strokeStyle = '#ACAEFD';

context.stroke();

context.fillStyle = '#ACAEFD';

context.fill();

//mountain 2

context.beginPath();

context.moveTo(100, 700);

context.lineTo(100, 600);

context.quadraticCurveTo(-20, 100, 0, 600);

context.lineWidth = 5;

context.strokeStyle = '#BDBFFE';

context.stroke();

context.fillStyle = '#BDBFFE';

context.fill();

//mountain 3

context.beginPath();

context.moveTo(100, 700);

context.lineTo(100, 600);

context.quadraticCurveTo(300, -100, 300, 600);

context.lineWidth = 5;

context.strokeStyle = '#ACAEFD';

context.stroke();

context.fillStyle = '#ACAEFD';

context.fill();

//mountain 4

context.beginPath();

context.moveTo(100, 700);

context.lineTo(600, 600);

context.quadraticCurveTo(400, 100, 100, 600);

context.lineWidth = 5;

context.strokeStyle = '#BDBFFE';

context.stroke();

context.fillStyle = '#BDBFFE';

context.fill();

//mountain 5

context.beginPath();

context.moveTo(400, 600);

context.lineTo(1000, 600);

context.quadraticCurveTo(800, -20, 600, 600);

context.lineWidth = 5;

context.strokeStyle = '#ACAEFD';

context.stroke();

context.fillStyle = '#ACAEFD';

context.fill();

//mountain 6

context.beginPath();

context.moveTo(300, 600);

context.lineTo(300, 600);

context.quadraticCurveTo(100, 0, 30, 600);

context.lineWidth = 5;

context.strokeStyle = '#DADBFE';

context.stroke();

context.fillStyle = '#DADBFE';

context.fill();

//mountain 7

context.beginPath();

context.moveTo(400, 600);

context.lineTo(800, 600);

context.quadraticCurveTo(600, -100, 500, 600);

context.lineWidth = 5;

context.strokeStyle = '#DADBFE';

context.stroke();

context.fillStyle = '#DADBFE';

context.fill();

//mountain 8

context.beginPath();

context.moveTo(400, 600);

context.lineTo(200, 600);

context.quadraticCurveTo(400, 35, 500, 600);

context.lineWidth = 5;

context.strokeStyle = '#EEEEFF';

context.stroke();

context.fillStyle = '#EEEEFF';

context.fill();

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

};

</script>

</head>

<body>

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

</body>

</html>

final portfolio

animation

i decided to try to rotoscope for our class animation project. i found a surf movie on my computer and i thought it would be cool to try and draw over. i think keeping the lines sketchy and sort of vague gives it more of a sense of being water, at least i hope. it took a really long time but i think it turned out pretty well in the end.

lyrical collage

"whats the difference if it's real or a dream? imagination playing tricks on me"

Murakami by Made In Heights

custom graphic

i decided to do an abstract piece for my custom graphic. this is actually based off of a piece i recently did in my drawing class. i used a gradient for the bars on the bottom of the page. the rectangle with underneath and behind the black square has a pattern inside of it that i created. i also turned the lumpy things into a brush themselves using the regular small circle brush. i decided to stick with black and white for the piece because it gives it a different kind of dimension than when in color. 

magazine covers

i made two different magazine covers, just to see what i could come up with. the first one follows the assignment and has 3 photos of me on the cover. i wanted to do a travel magazine because i really enjoy traveling. each of the pictures of me was just edited using some of the adjustments in the adjustment panel, i didn't want to use all the crazy effects because i didn't want the cover to have too much going on. for the other cover i wanted to use one of my fashion photos from a shoot i did a while ago and see how it could look. i wanted to keep the covers simple and clean because i think that they are more effective that way.  

welcome to mars

photoshop practice