Beginning Digital Arts: Project #1

For this project I wanted to create something very funky and fun revolving around one of the things I love the most - photography! I wanted the end result to be somewhat abstract and complex but not too overwhelming. The loops coming from the right, top, and left are meant to give the effect of flashes going off from cameras. I love how many different colors I used and combined to give off that 'funky' feeling. It was difficult to create the slanted cameras at first, but I eventually got the hang of it. Also, deciding on what exact words I wanted to insert into the project was difficult. I decided to go with something similar to a slogan of a company - "Capture The Moment". Using the graph below made designing this project so much easier.

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

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

//background

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var startX = 400;

var startY = 100;

var endX = 400;

var endY = 550;

context.beginPath();

context.rect(x,y,width,height);

var grd = context.createLinearGradient(startX, startY, endX, endY);

grd.addColorStop(0, 'rgb(50, 0, 225)');

grd.addColorStop(1, 'rgb(200, 100, 175)');

context.fillStyle = grd;

context.fill();

context.lineWidth = 8;

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke();

//quadratic curve from left

var quadX = 200;

var quadY = 400;

var quadendX = 200;

var quadendY = 600;

context.beginPath();

context.moveTo(0, 400);

context.quadraticCurveTo(quadX, quadY, quadendX, quadendY);

context.lineWidth = 5;

context.strokeStyle = 'rgb(250, 50, 200)';

context.stroke();

var quadX2 = 300;

var quadY2 = 400;

var quadendX2 = 200;

var quadendY2 = 600;

context.beginPath();

context.moveTo(0, 300);

context.quadraticCurveTo(quadX2, quadY2, quadendX2, quadendY2);

context.lineWidth = 5;

context.strokeStyle = 'rgb(250, 50, 100)';

context.stroke();

var quadX3 = 400;

var quadY3 = 400;

var quadendX3 = 200;

var quadendY3 = 600;

context.beginPath();

context.moveTo(0, 200);

context.quadraticCurveTo(quadX3, quadY3, quadendX3, quadendY3);

context.lineWidth = 5;

context.strokeStyle = 'rgb(250, 50, 50)';

context.stroke();

//loop from top

var x2 = 800;

var y2 = 600;

var controlX = 700;

//var controlY = 50;

var endX = 400;

var endY = 0;

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

context.beginPath();

context.moveTo(x2, i);

context.quadraticCurveTo(controlX, i, endX, endY);

context.strokeStyle = 'rgb(300, 200, 175)';

context.lineWidth = 2;

context.stroke();

}

//loop from bottom

var x2 = 0;

var y2 = 700;

var controlX = 600;

//var controlY = 50;

var endX = 700;

var endY = 800;

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

context.beginPath();

context.moveTo(x2, i);

context.quadraticCurveTo(controlX, i, endX, endY);

context.strokeStyle = 'rgb(300, 200, 400)';

context.lineWidth = 2;

context.stroke();

}

//loop from the right

var x2 = 0;

var y2 = 0;

var controlX = 50;

//var controlY = 300;

var endX = 800;

var endY = 100;

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

context.beginPath();

context.moveTo(x2, i);

context.quadraticCurveTo(controlX, i, endX, endY);

context.strokeStyle = 'rgb(100, 175, 300)';

context.lineWidth = 3;

context.stroke();

}

//loop from left

var x2 = 800;

var y2 = 600;

var controlX = 700;

//var controlY = 50;

var endX = 0;

var endY = 350;

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

context.beginPath();

context.moveTo(x2, i);

context.quadraticCurveTo(controlX, i, endX, endY);

context.strokeStyle = 'rgb(300, 100, 75)';

context.lineWidth = 2;

context.stroke();

}

//quadratic from the top

var quadX4 = 200;

var quadY4 = 100;

var quadendX4 = 600;

var quadendY4 = 600;

context.beginPath();

context.moveTo(550, 0);

context.quadraticCurveTo(quadX4, quadY4, quadendX4, quadendY4);

context.lineWidth = 5;

context.strokeStyle = 'rgb(0, 300, 0)';

context.stroke();

var quadX5 = 200;

var quadY5 = 200;

var quadendX5 = 600;

var quadendY5 = 600;

context.beginPath();

context.moveTo(400, 0);

context.quadraticCurveTo(quadX5, quadY5, quadendX5, quadendY5);

context.lineWidth = 3;

context.strokeStyle = 'rgb(0, 200, 0)';

context.stroke();

var quadX6 = 200;

var quadY6 = 300;

var quadendX6 = 600;

var quadendY6 = 600;

context.beginPath();

context.moveTo(300, 0);

context.quadraticCurveTo(quadX6, quadY6, quadendX6, quadendY6);

context.lineWidth = 1;

context.strokeStyle = 'rgb(0, 100, 0)';

context.stroke();

//bezier curves from right

var controlX3 = 0;

var controlY3 = 0;

var controlX4 = 400;

var controlY4 = 400;

var endX = 800;

var endY = 400;

context.beginPath();

context.bezierCurveTo(controlX3, controlY3, controlX4, controlY4, endX, endY);

context.lineWidth = 3;

context.strokeStyle = 'rgb(100, 200, 500)';

context.stroke();

var controlX5 = 0;

var controlY5 = 50;

var controlX6 = 400;

var controlY6 = 500;

var endX2 = 800;

var endY2 = 400;

context.beginPath();

context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX2, endY2);

context.lineWidth = 3;

context.strokeStyle = 'rgb(100, 100, 400)';

context.stroke();

var controlX7 = 0;

var controlY7 = 100;

var controlX8 = 400;

var controlY8 = 600;

var endX3 = 800;

var endY3 = 400;

context.beginPath();

context.bezierCurveTo(controlX7, controlY7, controlX8, controlY8, endX3, endY3);

context.lineWidth = 3;

context.strokeStyle = 'rgb(100, 50, 300)';

context.stroke();

//big camera

var grdstartX = 400;

var grdstartY = 50;

var grdendX = 100;

var grdendY = 325;

context.beginPath();

context.moveTo(150, 200);

context.lineTo(225, 425);

context.lineTo(585, 310);

context.lineTo(500, 90);

context.lineTo(150, 200);

context.closePath();

context.lineWidth = 10;

var grd2 = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);

grd.addColorStop(0, 'rgb(0, 300, 300)');

grd.addColorStop(1, 'rgb(0, 500, 500)');

context.fillStyle = 'grd2';

context.fill();

context.lineJoin = 'round';

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke();

//flash

context.beginPath();

context.moveTo(170, 210);

context.lineTo(230, 190);

context.lineTo(241, 220);

context.lineTo(180, 240);

context.lineTo(170, 210);

context.closePath();

context.lineWidth = 5;

context.stroke();

//circle

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var centerX = 375;

var centerY = 250;

var radius = 60;

context.beginPath();

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

context.fillStyle = 'white';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke();

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var centerX2 = 375;

var centerY2 = 250;

var radius2 = 40;

context.beginPath();

context.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false);

context.fillStyle = 'rgb(0, 0, 0)';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke();

//shutter

context.beginPath();

context.moveTo(400, 120);

context.lineTo(395, 107);

context.lineTo(460, 86);

context.lineTo(465, 100);

context.closePath();

context.lineWidth = 8;

context.lineJoin = 'round';

context.fillStyle = 'rgb(0, 300, 300)';

context.fill();

context.stroke();

//camera bottom right

context.beginPath();

context.moveTo(650, 400);

context.lineTo(760, 450);

context.lineTo(725, 525);

context.lineTo(610, 475);

context.lineTo(650, 400);

context.closePath();

context.lineWidth = 5;

context.lineJoin = 'round';

context.fillStyle = 'rgb(100, 20, 300)';

context.fill();

context.stroke();

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var centerX = 685;

var centerY = 465;

var radius = 20;

context.beginPath();

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

context.fillStyle = 'white';

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke()

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var centerX = 685;

var centerY = 465;

var radius = 12;

context.beginPath();

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

context.fillStyle = 'rgb(0, 0, 0)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke();

//shutter

context.beginPath();

context.moveTo(714, 428);

context.lineTo(717, 420);

context.lineTo(748, 433);

context.lineTo(745, 441);

context.closePath();

context.lineWidth = 3;

context.lineJoin = 'round';

context.fillStyle = 'rgb(100, 20, 300)';

context.fill();

context.stroke();

//flash

context.beginPath();

context.moveTo(653, 410);

context.lineTo(680, 423);

context.lineTo(672, 437);

context.lineTo(645, 425);

context.lineTo(653, 410);

context.closePath();

context.lineWidth = 3;

context.stroke();

//camera upper left

context.beginPath();

context.moveTo(75, 25);

context.lineTo(175, 52);

context.lineTo(150, 125);

context.lineTo(50, 95);

context.lineTo(75, 25);

context.closePath();

context.lineWidth = 5;

context.lineJoin = 'round';

context.strokeStyle = 'rgb(0, 0, 0)';

context.fillStyle = 'rgb(200, 0, 200)';

context.fill();

context.stroke();

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var centerX = 115;

var centerY = 75;

var radius = 18;

context.beginPath();

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

context.fillStyle = 'white';

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke();

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var centerX = 115;

var centerY = 75;

var radius = 10;

context.beginPath();

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

context.fillStyle = 'rgb(0, 0 ,0)';

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'rgb(0, 0, 0)';

context.stroke();

//shutter

context.beginPath();

context.moveTo(135, 42);

context.lineTo(138, 30);

context.lineTo(168, 37);

context.lineTo(164, 50);

context.closePath();

context.lineWidth = 3;

context.lineJoin = 'round';

context.fillStyle = 'rgb(200, 0, 200)';

context.fill();

context.stroke();

//flash

context.beginPath();

context.moveTo(80, 35);

context.lineTo(100, 41);

context.lineTo(96, 50);

context.lineTo(77, 44);

context.lineTo(80, 35);

context.closePath();

context.lineWidth = 3;

context.stroke();

//words

var textx = 50;

var texty = 550;

context.beginPath();

context.font = '60pt Brush Script MT';

context.fillStyle = 'rgb(300, 300, 100)';

context.fillText('Capture The Moment', textx, texty);

context.strokeStyle = 'rgb(0, 0, 0)';

context.lineWidth = 2;

context.strokeText('Capture The Moment', textx, texty);

context.lineWidth = 20;

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

};

</script>

</head>

<body>

</body>

</html>

Beginning Digital Arts

Tuesday, February 12, 2013

Project #1

No comments:

Post a Comment