Skip to main content

Canvas project - happy day


    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

Popular posts from this blog

FMX210 Journey

    Many things have changed from the first day of class to now. First off, I was very nervous to take this course because I have never taken any sort of digital art class prior. I wanted to give each assignment my all, but was scared that it still wouldn't be enough. I never thought I would enjoy taking this class as much as I did. Each assignment took a lot of effort, but I always enjoyed the process. I'm extremely happy with everything that I have learned in this class, considering it has only been just a few months. The grading criteria, and high expectations of this course definitely pushed me to try my hardest and shoot for the 100%. I became more confident with my work and the critique process after each assignment, even though they would continuously get harder. I now have experience with so many different Adobe applications and look forward to using them in the future, because I know I have benefited from this class!
Post a Comment
Read more
This series consists of five photos that I have personally colorized from a black and white photo. First is the realistic one, where I colorized the photo with it's original colors. Next, is the compound color palette, analogous, free, and shades. This assignment was incredibly time consuming, and I found myself restarting plenty of times. It was also really fun experimenting with different color palettes, and seeing what I can turn myself into!
Post a Comment
Read more

BRUSHES sketch

Post a Comment
Read more