Elements of
Multimedia
Lecture 5
Dr.Eman Abdellatif
Advanced Multimedia SIM
Elements of
Multimedia
Continue…
• Graphics
• Images
Graphic Shapes
Shapes description
3 Parts of Form:
1.Point – no dimensions, no height and no width.
2.Line – a point in motion, capable of infinite variety
• Line is the most common design element!
3.Contours—shapes bounded or bordered by line; an outline
Shapes description
Two-dimensional
(2D) shapes are
all around us.
They are flat and
occupy the two
dimensions of
length and width.
They have no
depth. They
enclose an area of
2D space
Shapes description
• •A polygon is a 2D (flat) shape with 3 or more straight sides.
• •The word comes from the Greek words, poly (many) and gonia(angles).
• •A regular polygon has equal (the same) length sides and angles.
• •An irregular polygon has different length sides and angles.
Shapes description
2D Shapes Names
1.Circle
2.Triangle
3.Square
4.Rectangle
5.Pentagon
6.Octagon
The basic types of 2d shapes are a circle, triangle, square, rectangle, pentagon,
quadrilateral, hexagon, octagon, like last slide.
Apart from the circle, all the shapes are considered as
polygons, which have sides.
A polygon which has all the sides and angles as equal is called a regular
polygon. Including the circle, an ellipse is also a non-polygon shape.
Both circle and ellipse have a curved shape, whereas the polygons have a closed
structure with sides. Now let us discuss some shapes one by one.
Circle
A circle is a closed 2d figure in which the set of all the
points in the plane is equidistant from a given point called
“center”. The distance from the center to the outer line of
the circle is called a radius. The example of the circle in
real life are wheels, pizzas, orbit, etc.
Triangle
A triangle is a three-sided polygon (2d
Shape) which has three edges and three
vertices. The sum of all the three angles
of a triangle is equal to 180°. Pyramids
are the best example of a triangle shape.
You can also learn the properties of
triangle here.
Square
A square is a four-sided polygon (2d Shape), whose
four sides are equal in length and all the angles are
equal to 90°. It is considered to be a two-dimensional
regular quadrilateral. The diagonals of the square also
bisect each other at 90°. A wall or a table where all the
sides are equal are the examples of square shape.
Rectangle
A rectangle is a 2d shape which has four
sides, where the opposite sides are equal
and parallel to each other. All the angles
of a rectangle are equal to 90°. A brick,
TV, cardboard, which has length and
breadth are examples of the rectangle.
Pentagon
A pentagon is a five-sided polygon (2d Shape), and it
can be regular or irregular. In the case of a regular
pentagon, each interior angle is equal to 108°, and
each exterior angle measures 72°. It has five
diagonals. The Pentagon building, which is the
headquarters of the US Department of Defense, is a
great example of the pentagon shape
Octagon
An octagon is an eight-sided polygon which can
be either regular or irregular. It is a 2d shape
which has eight angles. The sum of all the
interior angles of an octagon is 1080°. The stop
sign board has an octagon shape, which you
can see on the roadside.
3 Dimensional Objects (3D)
When we are
describing 3D
shapes we
use the
language of;
Faces
Edges
Vertices
(corners)
3 Dimensional Objects (3D)
3 Dimensional Objects (3D)
Remember image types
Graphical images - used to add emphasis, direct attention,
illustrate concepts, and provide background content
● Raster (Bitmap) • Vector
graphics – Draw-type graphics
represents the or vector graphics
image as an array – represent an
of dots, called image as a
pixels geometric shape
Representations in graphics
Draw-type Graphics Or Vector Graphics
• Image is represented by continuous geometric objects:
lines, curves, etc.
Raster (Bitmap) Graphics
• Image is represented as an rectangular grid of coloured
squares
18
Bit-Mapped vs. Draw Type Graphics
• Drawing programs
– object-based representation
– e.g., Powerpoint, outline fonts
• Painting programs
– bit-mapped representation
– e.g., Adobe Photoshop, bit-map
fonts
Raster : Zooming
on it
Vector :
Zooming on it
Raster vs Vector
Raster (Bitmap) Graphics
• Bitmaps – array of dots or pixels
• Color depth per pixel
• High quality pictures
• Photo realistic
• Larger than draw-type
• File size = pixels x color depth / 8
Raster (Bitmap) graphics
• Advantage
– Can have different textures
on the drawings; detailed and
comprehensive.
• Disadvantage
– Large file size.
– Not easy to make
modification to
objects/drawings.
– Graphics become "blocky"
when the size is increased.
Graphics Software
• Drawing programs – used to create draw-type
graphics (Adobe Illustrator, AutoCAD )
• Paint programs – used to create bitmap images
(Paint Shop Pro, Photoshop )
• Image editing programs – useful in making
changes, or applying textures or patterns to
existing images
Uses of Vector Graphics
• Graphics that will be scaled (or resized)
– Architectural drawings and CAD programs
– Flow charts
– Logos that will be scaled (resized)
• Cartoons and clip art
• Graphics on websites
– Because they have very small file sizes.
– This allows them to load quickly.
• Fonts and specialized text effects
Advantages of Vector Images
• Vector graphics are resolution
independent, which means
they can be output to the
highest quality at any scale.
• Vector graphic images
normally have much smaller
file sizes than raster-based
bitmaps.
• Changing or transforming the
characteristics of a vector
object does not effect or
distort the object.
Advantages of Vector Images
• Vector images are not
limited to rectangular
shapes like bitmaps.
• An image can be
enlarged or reduced
without affecting the
quality of the image.
• There is no background
unless it is placed behind
the image as a layer
Advantages of Vector Images
• Vector images have the appearance of artistic
form such as cartoons.
• Vector images can be easily converted to
bitmap images.
• Lines and curves are easily defined and will
always be smooth and retain their continuity.
Disadvantages of Vector Images
• The main disadvantage is
they are not photorealistic.
• Vector images are usually
filled with solid or gradient
colors but lack in depth and
appearance in the values and
colors of a true continuous
tone image.
Classifications of Vector Images
• Simple line art is a
1 bit graphic image
with large areas of
black and White.
• Complex line art is
made up of many
curves with linear
contrast but still
maintains the quality
of a black and white
image.
Task
Show More Examples:
https://developer.mozilla.org/enUS/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
https://developer.mozilla.org/en-US/blog/javascript-shape-drawing-function/
https://developer.mozilla.org/enUS/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
Task
• Create Application with canvas tag and js code to
draw following :
1. Client can choose shape and application draw
2. We can draw shape (regular or irregular shape) with mouse
and application refine it again
3. Bonus:
convert shape to be 3d
