Canvas Project: Flames

My Canvas Project started off with the idea of Flames and Dice. Obviously, through trail and error, this idea changed into something more focused in on the flames, as the Dice was(being honest) too difficult to do in 3D format.

The image is an honest reflection of why I love Tampa. The flames represent the heat of Florida, which I love! The stars and moon are the beautiful nights that we have here. If I was doing it again, I would've loved to add lightning as thats also a big part of living here.

Overall this project took me 8 hours to complete, with most of the time being taken up through my errors. The flames were my favorite to work on, with the different (x,y) points I used to make it look(somewhat) realistic. The stars in the background were actually hard to comprehend. Finding out how to move them around my canvas took some time. I tried to keep all the colors simple to reflect that my canvas is a simple piece.

If I were to do this project again, I would've liked to have more on my canvas. An idea I would've liked to use was a forest with animals in it, overlooking a sunset. Unfortunately, I am a slow learner, so it was hard for me to put my ideas into this project with little knowledge of the ins and outs of Dreamweaver.

The original photo I used to start my ideas was this;

Because of the fact I didn't know how to work with 3D objects, sadly I had to move away from this idea even though I would've wanted to do this.

On reflection, I really enjoyed working in Dreamweaver on this project and I hope I can improve from the past few weeks. I want to know the insides and out of Coding in the near future and I feel as if I've had a good start.

Code:

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

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

var x=0;
var y=0;
var width = 700
var height= 300;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 600;
context.fillStyle = '(0,0,0)';
context.strokeStyle = 'rgb(0,0,0)';



context.stroke();

//Moon

var centerX = canvas.width / 2.6;

var centerY = canvas.height / 7.0;

var radius = 50;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(220,220,220)");

grd.addColorStop(1, "rgb(128,128,128)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 0.1;

context.strokeStyle = "black";

context.stroke();

//Flame in Yellow 1

var x = 100;
var y = 500;
var controlX = 225;
var controlY = 250;
var x1 = 100;
var y1 = 100;
var controlX1 = 125;
var controlY1 = 175;
var x2 = 50;
var y2 = 500;






context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(255,215,0)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,165,0)";
context.stroke();
//Flame in Yellow 2

var x = 250;
var y = 500;
var controlX = 150;
var controlY = 200;
var x1 = 200;
var y1 = 150;
var controlX1 = 125;
var controlY1 = 200;
var x2 = 50;
var y2 = 500;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(255,215,0)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,165,0)";
context.stroke();

//Flame in Yellow 3

var x = 350;
var y = 500;
var controlX = 330;
var controlY = 200;
var x1 = 205;
var y1 = 200;
var controlX1 = 250;
var controlY1 = 275;
var x2 = 200;
var y2 = 500;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(255,215,0)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,165,0)";
context.stroke();

//Flame in Yellow 4

var x = 400;
var y = 500;
var controlX = 500;
var controlY = 100;
var x1 = 375;
var y1 = 125;
var controlX1 = 400;
var controlY1 = 250;
var x2 = 350;
var y2 = 500;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(255,215,0)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,165,0)";
context.stroke();

//Flame in Yellow 5

var x = 450;
var y = 500;
var controlX = 375;
var controlY = 275;
var x1 = 450;
var y1 = 100;
var controlX1 = 350;
var controlY1 = 250;
var x2 = 400;
var y2 = 500;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(255,215,0)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,165,0)";
context.stroke();

//Flame in Yellow 6

var x = 300;
var y = 500;
var controlX = 300;
var controlY = 175;
var x1 = 325;
var y1 = 100;
var controlX1 = 250;
var controlY1 = 150;
var x2 = 225;
var y2 = 500;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(255,215,0)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,165,0)";
context.stroke();

//Flame in Yellow 7

var x = 500;
var y = 500;
var controlX = 600;
var controlY = 100;
var x1 = 475;
var y1 = 175;
var controlX1 = 475;
var controlY1 = 250;
var x2 = 400;
var y2 = 500;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(255,215,0)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,165,0)";
context.stroke();

//Flame in Yellow 8

var x = 550;
var y = 500;
var controlX = 490;
var controlY = 200;
var x1 = 550;
var y1 = 125;
var controlX1 = 425;
var controlY1 = 175;
var x2 = 475;
var y2 = 500;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(255,215,0)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,165,0)";
context.stroke();

//Flame in Yellow 9

var x = 625;
var y = 500;
var controlX = 675;
var controlY = 100;
var x1 = 575;
var y1 = 100;
var controlX1 = 600;
var controlY1 = 175;
var x2 = 500;
var y2 = 500;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(255,215,0)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,165,0)";
context.stroke();


//Piece of Wood 1

var x=50;
var y=450;
var width = 600
var height= 50;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
//context.fillStyle = 'rgb(139,69,19)';
context.strokeStyle = 'rgb(139,69,19)';
// add linear gradient
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
        grd.addColorStop(0, "rgb(139,69,19)");
        //intermediate color
        grd.addColorStop(0.5, "rgb(139,69,19)");
        // ending color
        grd.addColorStop(1, "rgb(139,69,19)");
        context.fillStyle = grd;
        context.fill();
context.fill();


context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value


//Star 1

var centerX = canvas.width / 1.4;

var centerY = canvas.height / 8.5;

var radius = 10;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(220,220,220)");

grd.addColorStop(1, "rgb(220,220,220)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 0.1;

context.strokeStyle = "black";

context.stroke();

//Star 2

var centerX = canvas.width / 1.6;

var centerY = canvas.height / 9.5;

var radius = 5;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(220,220,220)");

grd.addColorStop(1, "rgb(220,220,220)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 0.1;

context.strokeStyle = "black";

context.stroke();

//Star 3

var centerX = canvas.width / 4.6;

var centerY = canvas.height / 11.5;

var radius = 12;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(220,220,220)");

grd.addColorStop(1, "rgb(220,220,220)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 0.1;

context.strokeStyle = "black";

context.stroke();

//Star 4

var centerX = canvas.width / 3.6;

var centerY = canvas.height / 5.5;

var radius = 8;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(220,220,220)");

grd.addColorStop(1, "rgb(220,220,220)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 0.1;

context.strokeStyle = "black";

context.stroke();

//Star 5

var centerX = canvas.width / 4.6;

var centerY = canvas.height / 7.5;

var radius = 4;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(220,220,220)");

grd.addColorStop(1, "rgb(220,220,220)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 0.1;

context.strokeStyle = "black";

context.stroke();

//Star 6

var centerX = canvas.width / 1.45;

var centerY = canvas.height / 7.5;

var radius = 4;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(220,220,220)");

grd.addColorStop(1, "rgb(220,220,220)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 0.1;

context.strokeStyle = "black";

context.stroke();

//Star 6

var centerX = canvas.width / 2.4;

var centerY = canvas.height / 2.5;

var radius = 9;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(220,220,220)");

grd.addColorStop(1, "rgb(220,220,220)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 0.1;

context.strokeStyle = "black";

context.stroke();

//Grey bottom

var x=0;
var y=500;
var width = 800
var height= 100;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
//context.fillStyle = 'rgb(139,69,19)';
context.strokeStyle = 'rgb(139,69,19)';
// add linear gradient
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
        grd.addColorStop(0, "rgb(107,142,35)");
        //intermediate color
        grd.addColorStop(0.5, "rgb(107,142,35)");
        // ending color
        grd.addColorStop(1, "rgb(107,142,35)");
        context.fillStyle = grd;
        context.fill();
context.fill();




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

};

</script>
<link href="background colour.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Business Cards

Image
For my first business cards, I made sure my logo was clear and incorporated colors that were involved in the mountain. The dots make the card stand out and continue the blue. water trend throughout the front of the card. This and the third card are probably my favorite. For the second card design, I found it very difficult to use the darker colors in my card. I tried to incorporate the purple into the front of my card but it came out looking disjointed from the rest of the card. Overall, this would be my least favorite card. For my last business card, the colors that were used were very simple and linked the whole card together. The pattern I created on the back, personally, looks really good and helps the focus of the viewer go to the logo. The total layout of the card makes sense and the information on the front is very clear and obvious.  Overall, this process took 3-4 hours and it was a very enjoyable task as it is something I will need to use shor
Read more

Boxing Glove

Image
Using Illustrator and the mesh tool, I created a boxing glove. The image I created is on the right. This process took around 3 hours and a lot of mistakes were made(and its still not perfect). I begun with tracing the image using mainly the pen tool. I made sure that every detail was done from the original image to make sure they were almost identical at the end. after tracing I began using the mesh tool, which unfortunately was causing me a lot of trouble with the weird outline I used. So instead of using the mesh tool for all of the shadows, I used the curvature tool firstly to outline the shape, then using the mesh tool inside the shape, to merge the colors. Overall, this was a good place to get my head space in check before moving onto creating my face using illustrator.
Read more

Portrait

Image
The purpose of my portrait was to create an identical image of myself while keeping the concept of my portrait very simple. I started with the outline of the image, making sure every major part of the image I used was sketched. Next was the identifying of colors for my face, eyes and mouth. The most difficult part that I couldn't do very well was the shading of my face, there is a small portion of my face that has been shaded, but the difficulty came from not wanting it looking obvious. So I made sure the shading was minimal which kept the simplicity. The quote 'GO WITH THE FLOW' is something I drive to be like everyday. Making sure that at every turn in life, I have an open mind and take the journey as it comes. The idea of peace in the necklace also related to how I live my life. Back home, being natural in the way I eat and live is important to myself and the planet we live in. The background image also helped have more color, plus zooming the attention onto the po
Read more