This assignment was definitely tough, and incredibly time consuming, but I had so much fun doing it. I came up with the design off the top of my head and completed a sketch, planned out all of the coordinates, and then went for it. Somehow, many people have said that the girl in my project almost looks like a self portrait which I think is pretty funny, but I guess this demonstrates my sense of style, and mood at the time. Clearly I was in a happy stage of my life, as portrayed in my project. I enjoyed playing with all the bright colors, gradients, layers, and shapes associated with Dreamweaver!
/// BACKGROUND RECTANGLE (SUN GRADIENT)
var myGradient0=context.createRadialGradient(0,0,50,100,100,300);
myGradient0.addColorStop(0,"rgba(255,255,255,1)"); //white
myGradient0.addColorStop(0.25,"rgba(247,234,54,1)"); // yellow
myGradient0.addColorStop(0.5,"rgba(255,174,37,1)"); // light orange
myGradient0.addColorStop(1,"rgba(123,255,232,1)"); // dark grey blue
context.beginPath();
context.rect(0,0,800,600);
context.closePath();
context.fillStyle= myGradient0;
context.fill();
///GRASS
var quad = context.createLinearGradient(200,500,400,400);
quad.addColorStop(0, "rgb(48,186, 24)");
quad.addColorStop(1, "rgb(15,56, 7)");
context.beginPath();
context.moveTo(0, 500);
context.quadraticCurveTo(110, 500, 235, 565);
context.quadraticCurveTo(330,500, 450, 555);
context.quadraticCurveTo(530, 500, 700, 475);
context.lineTo(805,600);
context.lineTo(0,600);
context.lineTo(0,675);
context.closePath();
context.fillStyle = quad;
context.fill();
/// LINE umbrella 1
context.beginPath();
context.lineWidth=10;
context.moveTo(175,460);
context.lineTo(175,600);
context.strokeStyle=("rgba(22,26,64,1)");
context.stroke();
/// LINE umbrella 2
context.beginPath();
context.lineWidth=10;
context.moveTo(270,550);
context.lineTo(270,600);
context.strokeStyle=("rgba(22,26,64,1)");
context.stroke();
/// LINE flower
context.beginPath();
context.lineWidth=5;
context.moveTo(400,390);
context.lineTo(400,600);
context.strokeStyle=("rgba(30,56,10,1)");
context.stroke();
/// TRIANGLE rain drop 2
var myGradient1 = context.createRadialGradient(300,260,20,300,270,100);
myGradient1.addColorStop(0,"rgba(0,201,209,.70)"); //medium bright blue
myGradient1.addColorStop(0.2,"rgba(151,246,255,.70)"); //light blue
myGradient1.addColorStop(.68,"rgba(255,255,255,.85)"); //white
myGradient1.addColorStop(1,"rgba(123,255,232,1)");//dark grey blue
context.beginPath();
context.moveTo(300,260)
context.lineTo(250,390)
context.lineTo(350,390)
context.closePath();
context.fillStyle= myGradient1;
context.fill();
/// TRIANGLE rain drop 3
var myGradient2 = context.createRadialGradient(420,40,3,420,30,78);
myGradient2.addColorStop(0,"rgba(0,201,209,.70)"); //medium bright blue
myGradient2.addColorStop(.2,"rgba(151,246,255,.70)"); //light blue
myGradient2.addColorStop(.6,"rgba(255,255,255,.85)"); //white
myGradient2.addColorStop(1,"rgba(123,255,232,1)");//dark grey blue
context.beginPath();
context.moveTo(420,30)
context.lineTo(390,120)
context.lineTo(450,120)
context.closePath();
context.fillStyle= myGradient2;
context.fill();
/// TRIANGLE rain drop 4
var myGradient3 = context.createRadialGradient(520,150,30,520,150,100);
myGradient3.addColorStop(0,"rgba(0,201,209,.70)"); //medium bright blue
myGradient3.addColorStop(.3,"rgba(151,246,255,.70)"); //light blue
myGradient3.addColorStop(.5,"rgba(255,255,255,.85)"); //white
myGradient3.addColorStop(1,"rgba(123,255,232,1)");//dark grey blue
context.beginPath();
context.moveTo(520,150)
context.lineTo(475,300)
context.lineTo(565,300)
context.closePath();
context.fillStyle= myGradient3;
context.fill();
/// TRIANGLE rain drop 5
var myGradient12 = context.createRadialGradient(650,50,30,650,50,100);
myGradient12.addColorStop(0,"rgba(0,201,209,.70)"); //medium bright blue
myGradient12.addColorStop(.3,"rgba(151,246,255,.70)"); //light blue
myGradient12.addColorStop(.5,"rgba(255,255,255,.85)"); //white
myGradient12.addColorStop(1,"rgba(123,255,232,1)");//dark grey blue
context.beginPath();
context.moveTo(650,70)
context.lineTo(600,200)
context.lineTo(700,200)
context.closePath();
context.fillStyle= myGradient12;
context.fill();
/// TRIANGLE rain drop 1
var myGradient4 = context.createRadialGradient(80,340,30,80,340,90);
myGradient4.addColorStop(0,"rgba(0,201,209,.70)"); //medium bright blue
myGradient4.addColorStop(.3,"rgba(151,246,255,.70)"); //light blue
myGradient4.addColorStop(.5,"rgba(255,255,255,.85)"); //white
myGradient4.addColorStop(1,"rgba(123,255,232,1)");//dark grey blue
context.beginPath();
context.moveTo(80,340)
context.lineTo(10,500)
context.lineTo(150,500)
context.closePath();
context.fillStyle= myGradient4;
context.fill();
/// QUADRATIC CURVE umbrella 1
var myGradient6=context.createRadialGradient(175,400,5,175,400,150);
myGradient6.addColorStop(0,"rgba(255,250,134,1)");
myGradient6.addColorStop(.2,"rgba(242,72,255,1)");
myGradient6.addColorStop(0.4,"rgba(201,255,188,1)");
myGradient6.addColorStop(.68,"rgba(121,36,127,1)");
myGradient6.addColorStop(.8,"rgba(255,255,255,1)");
myGradient6.addColorStop(1,"rgba(49,64,22,.8)");
context.beginPath();
context.moveTo(90,470);
context.quadraticCurveTo(175,300,260,470)
context.closePath();
context.fillStyle = myGradient6
context.fill();
/// QUADRATIC CURVE umbrella 2
var myGradient7=context.createRadialGradient(270,490,5,270,490,150);
myGradient7.addColorStop(0,"rgba(255,250,134,1)");
myGradient7.addColorStop(.2,"rgba(242,72,255,1)");
myGradient7.addColorStop(0.4,"rgba(201,255,188,1)");
myGradient7.addColorStop(.68,"rgba(121,36,127,1)");
myGradient7.addColorStop(.8,"rgba(255,255,255,1)");
myGradient7.addColorStop(1,"rgba(49,64,22,.8)");
context.beginPath();
context.moveTo(200,550);
context.quadraticCurveTo(270,420,340,550)
context.closePath();
context.fillStyle = myGradient7
context.fill();
/// BEZIER CURVE FLOWER
var myGradient5=context.createRadialGradient(400,370,10,400,350,250);
myGradient5.addColorStop(0,"rgba(255,255,255,1)");
myGradient5.addColorStop(.2,"rgba(255,252,108,1)");
myGradient5.addColorStop(0.4,"rgba(201,255,188,1)");
myGradient5.addColorStop(.68,"rgba(122,178,196,1)");
myGradient5.addColorStop(.75,"rgba(255,255,255,1)");
myGradient5.addColorStop(1,"rgba(22,26,64,1)");
context.beginPath();
//starting coordinates
context.moveTo(400,320);
//bezier curve
//cp1x, cp1y, cp2x, cp2y, bx, by
context.bezierCurveTo(440,230,490,200,430,350);
context.bezierCurveTo(600,270,600,330,450,370);
context.bezierCurveTo(610,360,550,430,400,400)
context.bezierCurveTo(250,430,190,360,350,370)
context.bezierCurveTo(200,330,200,270,370,350)
context.bezierCurveTo(310,200,360,230,400,320)
context.closePath();
context.fillStyle = myGradient5
context.fill();
///QUADRATIC CURVE back hair
var myGradient10=context.createLinearGradient(650,400,770,600);
myGradient10.addColorStop(0,"rgba(51,16,0,1)");
myGradient10.addColorStop(1,"rgba(28,24,17,1)");
context.beginPath();
context.moveTo(655,300)
context.quadraticCurveTo(700,400,630,600)
context.quadraticCurveTo(800,800,860,500)
context.closePath();
context.fillStyle = myGradient10
context.fill();
context.strokeStyle= ("rgba(28,24,17,1)")
context.stroke();
/// GUADRATIC CURVE neck
var myGradient9=context.createRadialGradient(800,500,20,800,500,100);
myGradient9.addColorStop(0,"tan");
myGradient9.addColorStop(1,"rgba(140,102,68,1)");
context.beginPath();
context.moveTo(750,400)
context.quadraticCurveTo(780,450,760,600)
context.quadraticCurveTo(880,850,900,500)
context.closePath();
context.fillStyle = myGradient9
context.fill();
context.strokeStyle= ("rgba(140,118,87,1)")
context.stroke();
/// BEZIER CURVE head
var myGradient8=context.createRadialGradient(800,350,90,800,350,200);
myGradient8.addColorStop(0,"tan");
myGradient8.addColorStop(1,"rgba(140,102,68,1)");
context.beginPath();
context.moveTo(800,450)
context.bezierCurveTo(600,320,600,185,800,70)
context.closePath();
context.fillStyle = myGradient8
context.fill();
context.strokeStyle= ("rgba(140,118,87,1)")
context.stroke();
/// QUADRATIC CURVE front bangs of hair
var myGradient11=context.createLinearGradient(770,50,600,150);
myGradient11.addColorStop(0,"rgba(51,16,0,1)");
myGradient11.addColorStop(1,"rgba(28,24,17,1)");
context.beginPath();
context.moveTo(800,70);
context.quadraticCurveTo(640,50,650,300)
context.quadraticCurveTo(750,200,800,70)
context.closePath();
context.fillStyle = myGradient11
context.fill();
context.strokeStyle= ("rgba(28,24,17,1)")
context.stroke();
/// QUADRATIC CURVE eye
var myGradient8=context.createRadialGradient(744,260,1.5,750,263,36);
myGradient8.addColorStop(0,"rgba(0,0,0,1)");
myGradient8.addColorStop(.1,"rgba(28,76,79,1)");
myGradient8.addColorStop(.35,"rgba(89,246,255,1)");
myGradient8.addColorStop(.45,"rgba(255,255,255,1)");
myGradient8.addColorStop(1,"rgba(131,131,140,1)");
context.beginPath();
context.moveTo(710,260);
context.quadraticCurveTo(750,220,780,260)
context.quadraticCurveTo(750,300,710,260)
context.closePath();
context.fillStyle = myGradient8
context.fill();
/// QUADRATIC CURVE eye lashes
context.beginPath();
context.moveTo(700,265);
context.quadraticCurveTo(750,200,785,260)
context.quadraticCurveTo(750,215,700,265)
context.closePath();
context.fillStyle = "black"
context.fill();
/// nose bottom
var x = canvas.width / 2.17;
var y = canvas.height / 4.5;
var radius = 35;
var startAngle = .88 * Math.PI;
var endAngle = 2.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(810,320, 20, startAngle, endAngle, counterClockwise);
context.lineWidth = 3;
// line color
context.strokeStyle = ("rgba(140,118,87,1)");
context.stroke();
/// nose side
context.beginPath();
context.moveTo(792,331);
context.quadraticCurveTo(760,340,785,300)
context.strokeStyle= ("rgba(140,118,87,1)");
context.stroke();
/// smile
context.beginPath();
context.moveTo(760,370);
context.quadraticCurveTo(800,400,820,370)
context.closePath();
context.fillStyle = ("rgba(194,38,79,1)");
context.fill();
context.strokeStyle= ("rgba(127,25,52,1)");
context.stroke();
Comments
Post a Comment