Canvas Project



Final 


Inspiration

I can say without a doubt that this is the most frustrating and hardest project I have ever done. This took about 10 hours and more than half the time I was experimenting with different codes and shapes and lines and they didn’t turn out the way I wanted it to or pasting it into my code ruined my whole image. But this is the final product. I can’t say I’m proud of it, but it’s also the best I could have done with the time I had.

 

It didn’t turn out quite like my inspiration that I sketched out, but it doesn’t look horrible. I love this symbol and I was excited to create something with it. The power of Thor’s hammer, representing strength and worthiness, and lightning attracting it, seems like a cool concept. I thought with the idea I had that this would be simple to make and it sure was not. I did have a little fun doing it, it just takes a lot of effort and patience which I do not have. As hard as it is, I thought coding was very interesting and I know a lot more now than I did when we started.




#fmxCanvas { 

position: relative; 

background-color:rgba(2,4,21,1.00); 

border: rgba(255,255,255,1) ; 

cursor: crosshair; 

display: inline-block; 

}


////sky

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 2;

        var radius = 200;

        var startangle = 0;

        var endangle = 2 * Math.PI;

context.lineWidth = 2;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);   

context.fillStyle = 'rgba(84,93,119,1.00)'

context.fill();

//grass

        var centerX = canvas.width / 2;

        var centerY = canvas.height / 2;

        var radius = 200;

        var startangle = 0;

        var endangle =  1* Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        context.fillStyle = "rgba(33,54,33,1.00)";

context.fill();


var x3= 400;

var y3= 110;

var x4= 400;

var y4= 400;



//brown handle

context.beginPath();

  context.moveTo(x3,y3);

  context.lineTo(x4,y4);

  context.lineWidth = 70;

  context.strokeStyle = 'rgba(28,20,6,1.00)';

  context.lineCap = 'round';

  context.stroke();

///hammer

var lingrad = context.createLinearGradient(0,100,400,0);

 lingrad.addColorStop(0.5, 'rgba(39,39,39,1.00)');

 lingrad.addColorStop(1, 'rgba(84,84,84,1.00)');

 context.fillStyle = lingrad;

 context.fillRect(250,310,300,200);

 

//lightning 1

context.beginPath();

context.moveTo(0,0); // COORDINATES OF STARTING POINT

context.lineTo(300,250); // COORDS OF ENDING POINT 1

context.lineTo(500,100); // COORDS OF POINT 2

context.lineTo(650,800); // COORDS OF POINT 3

context.moveTo(400,300);

    context.lineWidth = 2; // STROKE WIDTH

context.strokeStyle = 'rgba(19,152,255,1.00)';

    context.stroke(); // STROKE

    

 

//lightning 2

context.beginPath();

context.moveTo(500,600); // COORDINATES OF STARTING POINT

context.lineTo(300,250); // COORDS OF ENDING POINT 1

context.lineTo(500,400); // COORDS OF POINT 2

context.lineTo(750,1000); // COORDS OF POINT 3

context.moveTo(400,300);

    context.lineWidth = 2; // STROKE WIDTH

context.strokeStyle = 'rgba(19,152,255,1.00)';

    context.stroke(); // STROKE

    

 

//lightning 3

context.beginPath();

context.moveTo(600,0); // COORDINATES OF STARTING POINT

context.lineTo(700,200); // COORDS OF ENDING POINT 1

context.lineTo(500,100); // COORDS OF POINT 2

context.lineTo(0,800); // COORDS OF POINT 3

context.moveTo(800,370);

    context.lineWidth = 2; // STROKE WIDTH

context.strokeStyle = 'rgba(19,152,255,1.00)';

    context.stroke(); // STROKE

    

 

//lightning 4

context.beginPath();

context.moveTo(1000,0); // COORDINATES OF STARTING POINT

context.lineTo(900,500); // COORDS OF ENDING POINT 1

context.lineTo(200,200); // COORDS OF POINT 2

context.lineTo(950,100); // COORDS OF POINT 3

context.moveTo(200,800);

    context.lineWidth = 2; // STROKE WIDTH

context.strokeStyle = 'rgba(19,152,255,1.00)';

    context.stroke(); // STROKE

    


//lightning 5

context.beginPath();

context.moveTo(0,600); // COORDINATES OF STARTING POINT

context.lineTo(100,150); // COORDS OF ENDING POINT 1

context.lineTo(40,700); // COORDS OF POINT 2

context.lineTo(150,600); // COORDS OF POINT 3

context.moveTo(0,300);

    context.lineWidth = 2; // STROKE WIDTH

context.strokeStyle = 'rgba(19,152,255,1.00)';

    context.stroke(); // STROKE


//lightning 6

context.beginPath();

context.moveTo(0,0); // COORDINATES OF STARTING POINT

context.lineTo(100,150); // COORDS OF ENDING POINT 1

context.lineTo(400,700); // COORDS OF POINT 2

context.lineTo(150,700); // COORDS OF POINT 3

context.moveTo(0,300);

    context.lineWidth = 2; // STROKE WIDTH

context.strokeStyle = 'rgba(19,152,255,1.00)';

    context.stroke(); // STROKE


//divide

context.beginPath();

// A QUADRATIC CURVE HAS A STARTING POINT

// ONE CONTROL POINT

// AN ENDING POINT

context.moveTo(0,300); // STARTING POINT

context.quadraticCurveTo(mouseX,mouseY,850,300);

context.lineTo(mouseX, mouseY); // TANGENT

context.lineTo(50,300); // TANGENT

context.strokeStyle = "rgba(0,0,0,1.00)";

context.lineWidth = 0.5;

context.stroke();

 

 

//band

context.beginPath();

    

    context.moveTo(100, 0);

    

    context.bezierCurveTo(mouseX, mouseY, 800,0, 100,0);

    

// context.closePath();


    context.stroke()

    

context.beginPath();

    

context.moveTo(0,0);

context.lineTo(mouseX,mouseY);

context.lineTo(0,0);

context.lineTo(100,0);


context.stroke();

 


Comments

Post a Comment

Popular posts from this blog

Autoscopy

Image
For this project, I wanted to contrast the background with what is going on inside me. The background is a peaceful environment that represents optimism and happiness that I want to surround myself with. Inside of me are flames and cogwheels to represent the amount of stress I have gained this year and how much I have changed negatively. I wanted to tell a little story and add a little seriousness to this project, but I like the contrast. I used layers and masking and curves to blend all the images together and adjusted the opacity, hue and saturation, and brightness to add more emphasis and darkness overall. I enjoyed using photoshop, it wasn't as hard as I thought. All Images Used  
Read more

Tag Brush

Image
  For this project, I needed to create a tag brush design using my logo from illustrator. I used a color combination I think look good together which is green and blue. I liked the scratch and spray effect we used to create the design around the logo. I think cooler colors went better with this design. Black and White Logo Used
Read more

Propaganda Poster

Image
   For this project, I wanted to do an issue that I really care about and I love animals, so I went with an important problem. I have two dogs in the poster and words emphasizing that these animals are family. I covered half of my profile with the dogs so that it kind of blends in. I am very proud of how this turned out and I believe it is a convincing argument.  I made the dogs black and white as a nice contrast and I used a light purple background to present and comforting and calm feeling. I made my face red like the rage and anger I have toward the subject and I wanted to hide my face to make the dogs the main focus. I put the words "end pet abandonment" over and over so it emphasizes the importance of this issue and to make sure my argument is clear. This took about 3-4 hours.
Read more