Tag: circle

Calculate Area of a Circle without using math.h library: C

We can calculate area of circle if we know the value of its radius. So using that, we shall write the logic in c program to calculate the area of a circle, without using math.h library functions.

Related Read:
Basic Arithmetic Operations In C

 
#include < stdio.h >

int main()
{
    float radius;
    const float PI = 3.14;

    printf("Enter the value for radius \n");
    scanf("%f", &radius);

    printf("Area of the circle is %f\n", (PI * radius * radius));

    return 0;
}

Output:
Enter the value for radius
5.0
Area of the circle is 78.500003

Scanf(): For user input

In above c program we are asking user to enter the values for variable a and b. You can know more about scanf() method/function in this video tutorial: Using Scanf in C Program

Calculate Area of a Circle without using math.h library: C


[youtube https://www.youtube.com/watch?v=9-_G0N4HnLc]

YouTube Link: https://www.youtube.com/watch?v=9-_G0N4HnLc [Watch the Video In Full Screen.]


Whenever we declare and initialize a constant, its a convention to make use of capital letter variable. That way we can easily spot and identify a constant in our program. And as we already know, value of constant can not be changed through out the program execution.
Ex: const float PI = 3.14;

Formula for calculating Area of a circle


area of circle

Formula for calculating Area of a circle is PI * radius * radius. We take value of radius from user and using above formula calculate area of the circle and output result to the console window.

Note that we’ve not used math.h library and any of its methods/functions in our program.

For full C programming language free video tutorial list visit:C Programming: Beginner To Advance To Expert

Simple Animation using Canvas: HTML5

Today lets see how we can do simple animation using Canvas.

moving-circle-animation-canvas-html5

Demo

Here we draw a circle and move it from starting point of x-axis to the end of the canvas.

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

JavaScript file: Moving Circle Code
myScript.js

1
2
3
4

context.beginPath();
context.fillStyle = "red";
context.arc(x++, context.canvas.height/2, r, 0, 2 * Math.PI);
context.fill();

Here I’m drawing a circle with a red fill and incrementing it’s x-axis value each time it is called.

JavaScript file: x-axis movement control
myScript.js

1
2
3
4
5

var r = 50;
var x = -r;
 
if( x >= context.canvas.width + r)
    x  = -r;

Here the x-axis value is tracked each time and is set back to -50 ( minus radius of the circle ) once the circle moves out of the x-axis or the canvas width.

Simple Animation using Canvas: HTML5


[youtube https://www.youtube.com/watch?v=iyGQhumPgcc]

YouTube Link: https://www.youtube.com/watch?v=iyGQhumPgcc [Watch the Video In Full Screen.]



JavaScript file: Full Free Source Code
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
var r = 50;
var x = -r;
 
setInterval(function(){
context.fillStyle   = "#000";
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
 
context.beginPath();
context.fillStyle   = "red";
context.arc(x++, context.canvas.height/2, r, 0, 2 * Math.PI);
context.fill();
 
if( x >= context.canvas.width + r)
    x  = -r; 
}, 10);
}
}

Here we use the setInterval() method to iterate/loop through the anonymous function and each time the background of the canvas is set to black(#000 or #000000) by drawing a black rectangle across the entire canvas width and height. For every call the value of x increments by 1, hence the circle moves 1px away from its previous position, until it reaches the end of canvas – after which it is reset back to -r value.

Draw Arcs/Circle with Canvas: HTML5

Today lets learn how to use arcs and paths to draw circle.

Arcs are curves that are portions of a circle. A full circle is a 360 degree arc!
A Path is a collection of some lines(or shapes) that once defined can be either filled or stroked.

index.html and myStyle.css files are kept same as illustrated in previous video tutorial: Canvas State: HTML5

Syntax
arc(x, y, r, sA, eA, TF);

arc method takes 6 parameters. x and y are the x-axis and y-axis, which is the center of the circle.
i.e., The x and y parameters determine where the center of the circle will be located on your canvas.

r is the radius of the circle, in pixels.
i.e., the distance of the curve from the center of the circle.

sA is start angle of the circle.
eA is the end angle of the circle.

TF is the direction – which can take 2 values i.e., True or False.

True: negative degrees, counter-clockwise direction.
False: positive degrees, clockwise direction.

Javascript file
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.lineWidth= 6;
context.beginPath();
 
var degree = 270;
var radian = ( Math.PI / 180 ) * degree;
 
context.arc(100, 100, 50, 0, radian, false);
context.strokeStyle= "red";
context.fillStyle= "blue";
context.stroke();
context.fill();
context.closePath();
 
}
}

Degree to Radian

radians-and-degrees

We convert degrees to radians using a simple mathematical formula:
Radians = (PI / 180 ) * degree;

Draw Arcs/Circle with Canvas: HTML5


[youtube https://www.youtube.com/watch?v=vE0bstctkp4]

YouTube Link: https://www.youtube.com/watch?v=vE0bstctkp4 [Watch the Video In Full Screen.]



Note:
1. By default, direction of drawing the arc is clockwise/positive degrees(i.e., the value of last parameter is false).
2. PI value is 180.
3. 2 * PI is 360!
4. arc method should be passed with radian values and not degrees.