Euclid’s Algorithm allows you to find the HCF of two numbers. The steps of the algorithm are given below:
Ask the user for 2 numbers
Test which one is bigger
Make the bigger number m and the smaller number n
Set r to be the remainder when m is divided by n
Set n to m
Set r to n
If r is 0, the HCF is n. Stop
Else go back to step 5
This article will cover steps 1 to 3. The first step is to create a script and name it euclid.py.
To write the code for step 1, enter the code shown below into the script:
# Ask the user for the first number
first_number = int(input("Please enter the first number: "))
# Ask the user for the second number
second_number = int(input("Please enter the second number: "))
To test which of the input numbers is bigger, we will use the greater than symbol. We will ignore other cases. The code to do this is shown below:
# Test if the second number is bigger than the first number
if (second_number > first_number):
# Swap if the first number is greater than the second number
temp = second_number
second_number = first_number
first_number = temp
# Print out to check the swap
print(first_number, second_number)
Now the program can receive input and swap them correctly. Below is an image of a running program.
The SVG path element is used for drawing complex shapes in the SVG path specification. It is the most complex element for drawing built-in shapes.
Paths represent the geometry of the outline of an object using commands. They take a single attribute to describe what to draw. In SVG the path element is represented by d will take the path string. In RaphaelJS, the path string is given to the library to handle drawing.
Setup
We will use a grid of 500 by 500 pixels to cover the topic of paths. The code to create the grid is given below:
All path commands are used in capital letters when used in absolute coordinates and lower case when used in relative coordinates.
M or m
This is the move command. It moves the drawing of the path to a point specified by the user.
Z or z
This closes the path of a path string returning it to the point where the path started from. It ends a point by connecting it back to its initial point.
Line Commands
L or l
This draws a line from the current point to a specified end point.
H or h
This draws a horizontal line from the current point to a specified end point.
V or v
This draws a vertical line from the current point to a specified end point.
Bring it all Together
In this section, we shall draw a simple arrow. The code to do this is shown below:
Now let us examine the commands that create the arrow.
M100 200 makes the starting point of the drawing at 100, 200 of the grid. Note that the origin of the drawing is in the top left corner of the grid.
H300 V150 draws a horizontal line to the point that is 300 from the origin and then a vertical line to 150 on the grid is drawn.
L450 250 L300 350 draws a line to point 450, 250 and then 300, 350 on the grid.
V300 H100 draws a line vertically to the point 300 on the y axis of the grid and a horizontal line of back to point 100 on the x axis.
Z completes the shape by drawing a line back to the initial point M.
To use relative paths, we would do this differently as we would have to take the relative position of each point. The advantage of using relative paths is that we can move the shape just by moving one point.
The code to draw the arrow using relative paths is shown below:
M100 200 like the command for absolute paths will start the drawing at the point 100,200 of the grid.
h200 will draw a horizontal line of length 200 from the starting point. v-50 will draw a line 50 in the negative direction.
l150 100 draws a line from the current point to the tip of the arrow. l-150 100 draws a line from the tip of the arrow to the lower left section.
v-50 h-200 draws the remaining parts of the arrow. z completes the arrow.
Curve Commands
They are used for drawing curves. There are 3 types of curves in SVG, they are:
Quadratic Curve
Cubic Curve
Arc Curve
Quadratic Curve
The quadratic curve takes in two coordinates. The first one is the location of the control point for drawing the curve and the second one is the end point for the curve.
The code:
paper.path("M100 200 Q150 100 200 200");
Will create the arc shown below:
Quadratic Curve
Suppose we move the control point to 200, 200 with the code shown below:
paper.path("M100 200 Q200 200 200 200");
We will get a quadratic curve that looks like this:
Quadratic Curve with Control Point on a Line
Note that the curve now is a straight line. This is because the control point is in the middle and on the same line with the start and end point of the curve.
The code:
paper.path("M100 200 Q150 100 200 200 T 300 200");
Will create a inverse of the curve and drag it to an end point giving the quadratic curve shown below:
Sine Wave
Cubic Curve
The cubic curve has 2 control points unlike the quadratic curve.
The code consist of a control points at 120, 160 and 180, 240 with the new position of the curve at 200, 200 is written as:
rx ry x-axis rotation y-axis rotation large arc flag sweep flag x y
The code:
paper.path("M100 200 A100 100, 0, 0 1, 200 200");
Will draw the curve shown below:
Drawing an Arc
Conclusion
Paths become too complex to create manually and you should use a vector graphics editor like Inkscape. However, understanding the above commands will help you understand what the program is doing under the hood.
There are seven basic arithmetic operators in the Python programming language.
They are:
Addition
Subtraction
Multiplication
Division
Integer Division
Exponentiation
Modulus
Addition
This is represented by the + symbol. It adds two numbers together and gives their sum.
Subtraction
This is represented by the – operator. It takes the value on the right from the value on the left to give the difference ot the two values.
Multiplication
This is represented by the * operator. It multiplies the value on the left with the value on the right to give a product of the two.
Division
This is represented by the / operator. It divides the value on the left with the value on the right to give the quotient.
Integer Division
This is a special form of division represented by //. It gives the whole number value of the quotient.
Exponentiation
This is represented by the ** operator. It gives the result of a value raised to another value.
Modulus
This is the remainder of division of one number by another number. It is used to test if the number on the right is a factor of the number of the left.
Conclusion
The above operators are how arithmetic is done in the Python programming language on a basic level.
RaphaelJS is a JavaScript library that provides an API for manipulating SVG, and SVG support for Internet Explorer. It achieves the latter by emulating SVG in Internet Explorer using VML.
SVG is a language for describing vector graphics in XML. SVG is a W3C specification and works well with HTML, CSS and JavaScript.
Setup
RaphaelJS is a JavaScript library so setting it up requires simply connecting to it in your code by linking to it.
The code below will draw a circle of radius 50 pixels at point (50, 50).
<html>
<head>
<title>Circle</title>
</head>
<body>
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script>
paper = Raphael('container', 100, 100);
var circle = paper.circle(50, 50, 25);
</script>
</body>
</html>
<div id=”container”> contains a div element that the library will be drawing in.
paper = Raphael(‘container’, 100, 100); creates a canvas object on which to draw. You must do this first, as all future calls to drawing methods from this instance will be bound to this canvas.
The first argument in the function Raphael() is the id of the HTML element inside of which you would like to start drawing things.
var circle = paper.circle(50, 50, 25); creates a RaphaelJS SVG object inside the thing with id=”container” that is a circle which is 50 pixels from the top and left of the paper.
RaphaelJS Elements
RaphaelJS supports 3 kinds of elements: shapes, images and text. This article will cover how to draw shapes in RaphaelJS.
After you create your paper object, in order to work with Raphael elements, you must:
Create a RaphaelJS element
Manipulate the style of the element
Add events to the element using JavaScript
Drawing a Circle
The code to draw a circle from the RaphaelJS documentation is Paper.circle(x, y, r) where x is the x coordinate of the circle, y is the y coordinate of the circle and r is the radius.
The code in the Setup section above already shows how to draw a circle of radius 25 at the point 50, 50 of the paper.
To add attributes to the circle is trivial. To draw a red circle with a black stroke, we use the code shown below:
<script>
paper = Raphael('container', 100, 100);
var circle = paper.circle(50, 50, 25);
var attributes = {
fill: "#FF0000",
stroke: '#000',
"stroke-width": 3,
"stroke-linejoin": "round",
};
circle.attr(attributes);
</script>
The generated image is shown below:
Circle with a Black Border
Drawing an Ellipse
The code to draw an ellipse from the RaphaelJS documentation is Paper.ellipse(x, y, rx, ry) where x is the x coordinate of the centre, y is the y coordinate of the centre, rx is the horizontal radius and ry is the vertical radius.
The code to draw an ellipse is shown below:
<script>
paper = Raphael('container', 100, 100);
var ellipse = paper.ellipse(50, 50, 40, 20);
var attributes = {
fill: "#FF0000",
stroke: '#000',
"stroke-width": 3,
"stroke-linejoin": "round",
};
ellipse.attr(attributes);
</script>
The generated ellipse is shown below:
Ellipse with a Black Border
Drawing a Rectangle
The code to draw a rectangle from the RaphaelJS documentation is Paper.rect(x, y, width, height, [r]) where x is the x coordinate of the top left corner, y is the y coordinate of the top left corner, width is the width of the rectangle and height is the height of the rectangle.
[r] is optional and is for the radius of the rectangle if it would have rounded corners.
<script>
paper = Raphael('container', 100, 100);
var rectangle = paper.rect(10, 10, 50, 50);
var attributes = {
fill: "#FF0000",
stroke: '#000',
"stroke-width": 3,
"stroke-linejoin": "round",
};
rectangle.attr(attributes);
</script>
The generated rectangle is shown below:
Rectangle with a Black Border
Conclusion
The RaphaelJS library is a very versatile library for drawing in the browser. Since its’ release in 2008, it has gone on to become a simple library for creating vector graphics in the browser.
