Never in my life have I taken any computer graphics or digital arts courses. Coding was like a foreign language to me. However, from what I learned, I have come to appreciate how creative and talented people must be to work with coding everyday. For my project, I decided to take a more abstract route and incorporate a plethora of shapes with various colors and gradients. I began with a blank page and a rectangle and from there I attempted to intertwine different shapes into one another. I hope to further my skills through out the remainder of this course and hopefully be able to recreate some of my favorite pieces of art.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("chrisButler");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//Rectangle 1
var rectx =0;
var recty =0;
var rectwidth = canvas.width;
var rectheight = canvas.height;
var startx = 800;
var starty = 600;
var endx = 0;
var endy = 0;
//Rectangle 1
context.beginPath();
context.rect(rectx,recty,rectwidth,rectheight);
//Rect Color 1
var grd= context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(.5,'rgb(250,0,250)');
grd.addColorStop(1,'rgb(0,0,0)');
context.fillStyle=grd;
context.lineWidth = 0;
context.fill();
context.strokeStyle = 'rgb(155,0,155)';
context.stroke();
//Circle 1 Variables
var centerX1= 800
var centerY1= 400
var radius1= 100
//Circle 1
context.beginPath();
context.arc(0, 0, 300, 0, 2 * Math.PI, false);
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#9F5F9F');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
//context.fillStyle = "pink";
//context.fill();
//context.lineWidth = 70;
//context.strokeStyle = 'rgb(177,0,188)';
//context.stroke();
//Circle 2 Variables
var centerX2= 100
var centerY2= 50
var radius2= 20
//Circle 2
context.beginPath();
context.arc(50, 50, 50, 0, 2 * Math.PI, false);
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#9F5F9F');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
//context.fillStyle = 'rgb(177,0,188)';
//context.fill();
//context.lineWidth = 70;
//context.strokeStyle = "pink";
//context.stroke();
//Circle 3 Variables
var centerX3= 200
var centerY3= 100
var radius3= 50
//Circle 3
context.beginPath();
context.arc(400, 50, 50, 0, 2 * Math.PI, false);
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#9F5F9F');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
//context.fillStyle = 'rgb(177,0,188)';
context.fill();
context.lineWidth = 70;
//context.strokeStyle = "pink";
context.stroke();
//Circle 4 Variables
var centerX4= 200
var centerY4= 100
var radius4= 50
//Circle 4
context.beginPath();
context.arc(500, 50, 50, 0, 2 * Math.PI, false);
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#9F5F9F');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
//context.fillStyle = 'rgb(177,0,188)';
context.fill();
context.lineWidth = 70;
//context.strokeStyle = "pink";
context.stroke();
//Circle 5 Variables
var centerX5= 100
var centerY5= 400
var radius5= 200
//Circle 5
context.beginPath();
context.arc(100, 400, 200, 0, 2 * Math.PI, false);
context.fillStyle = "pink";
context.fill();
context.lineWidth = 70;
context.strokeStyle = 'rgb(177,0,188)';
//Circle 5 Gradience
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#CC3299');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
context.stroke();
//Circle 6 Variables
var centerX6= 800
var centerY6= 390
var radius6= 200
//Circle 6
context.beginPath();
context.arc(800, 390, 200, 0, 2 * Math.PI, false);
context.fillStyle = "pink";
context.fill();
context.lineWidth = 70;
context.strokeStyle = 'rgb(177,0,188)';
//Circle 6 Gradience
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#CC3299');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
context.stroke();
context.stroke();
// Bezier Curve Variables For Heart
var x = 450;
var y = 150;
var controlX1 = 350;
var controlY1 = 15;
var controlX2 = 155;
var controlY2 = 160;
var endX = 350;
var endY = 325;
//Quadratic Curve Variables For Heart
var controlX3 = 425;
var controlY3 = 385;
var endX3 = 450;
var endY3 = 480;
//Quadratic Curve Variables For Heart
var controlX4= 475;
var controlY4= 375;
var endX4= 550;
var endY4= 325;
//Bezier Curve Variables For Heart
var controlX5 = 745;
var controlY5 = 160;
var controlX6 = 550;
var controlY6 = 15;
var endX5 = x;
var endY5 = y;
// Heart
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX5, endY5);
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#CC3299');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'rgb(177,0,188)';
context.stroke();
//Rectangle 2
var rectx1 =0;
var recty1 =520;
var rectwidth1 = canvas.width;
var rectheight1 = canvas.height;
var startx1 = 100;
var starty1 = 200;
var endx1 = 0;
var endy1 = 0;
//Rectangle 2
context.beginPath();
context.rect(rectx1,recty1,rectwidth1,rectheight1);
//Rect Color 2
var grd= context.createLinearGradient(startx1, starty1, endx1, endy1);
grd.addColorStop(0,'rgb(177,0,188)');
grd.addColorStop(.5,'rgb(173,234,255)');
grd.addColorStop(1,'rgb(173,234,234)');
context.fillStyle=grd;
context.lineWidth = 0;
context.fill();
context.strokeStyle = 'rgb(173,234,234)';
context.stroke();
//Chelsea Variables
var x=630
var y=100
//Chelsea
context.font='italic 30pt Script';
context.lineWidth=3;
context.strokeStyle='#ADEAEA';
context.strokeText('CHELSEA', x, y);
////////////////////////////////////// end here
};
</script>
<title>South Park Character</title></head>
<body>
<canvas id="chrisButler" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment