Course Title: HCI & Computer Graphics
LAB MANUAL
Course Instructor: M. Irfan Anwar
Course Code: COMP3145
Department: Information Sciences
Submitted By: Zahra,Aqeedat,Iman,Saira
Roll No:
bsf23005097,bsf23005096 ,bsf23005057,bsf23005092
Program: Bs Computer Science
Semester: 5th (A)
Lab Report Contents
Lab No. Contents
1
1 Window appearance (title,geometry,max,min,icon)
• Program no 1
2 Label
• Program no 2
3 Frames
• Program no 3
4 Pack
• Program no 4
5 Display Image using Label.
• Program no 5
6 Create shapes using graphics.h
• Program no 6
• Program no 7
• Program no 8
• Program no 9
7 Add color border to a shape.
• Program no 10
• Program no 11
8 Fill color styles
• Program no 12
• Program no 13
• Program no 14
9 Texture fill using graphics.h
• Program no 15
• Program no 16
• Program no 17
• Program no 18
• Program no 19
LAB NO 1
Window appearance (title,geometry,max,min,icon)
Title: Sets the text displayed on the window’s title bar.
Geometry: Specifies the size and position of the window on the screen.
Maximum size: Defines the largest size to which the window can be resized.
Minimum size: Defines the smallest size to which the window can be resized.
Icon: Sets the icon displayed in the window title bar and taskbar.
Transparency: Controls the opacity level of the window.
Background color: Sets the background color of the window.
Mainloop: Starts the Tkinter event loop and keeps the window running.
Program no 1:- Write a simple program in tkinter using title,
geometry, mainloop.
Source Code Output
from tkinter import*
root = Tk()
[Link]("My Window")
[Link]("600x400")
[Link](300, 200)
[Link](800, 600)
[Link]
(False,[Link](file="[Link]") )
[Link]("-alpha", 0.8)
[Link](bg="lightblue")
[Link]()
Result:
The screen is show with title “my window” and screen is not full clear because of
attribute value .It is not 1.0 ,so it is not fully clear.
LAB NO 2
LABEL
How to create [Link] are the parameters like text, background and foreground color, padding
Label:-
The Label is used to specify the container box where we can place the text or
images.
Syntax: name = Label(parent, options)
The options are
• bd:It represents the border width in pixels.
• bg:It represents the background color of the label.
• text:It is set to the text displayed on the label.
• fg:Foreground color of the label.
• Height: The height of the label.
• image: It is set to the image displayed on the label.
• padx: Additional padding to the label in the horizontal direction.
• pady: Additional padding to the label in the vertical direction.
• width: The width of the label.
• font: Defines the font style, size, and weight of the text.
• relief: Specifies the border style of the label (flat, raised, sunken, solid, ridge,
groove).
Program no 2:- Write a simple program in tkinter using label.
Source Code Output
from tkinter import *
root = Tk()
[Link]("My Window")
[Link]("600x400"
)
label =Label(root,text=
"Welcome", bg="blue",
fg=
"white",font=("Arial",
14, "bold"),
relief="raised",
padx=20, pady=10)
[Link]()
[Link]()
Result: A window titled “My Window” opens with a blue background label displaying the
text “Welcome” in white, bold Arial font with a raised border.
LAB NO 3
FRAMES
How to create Frames. What are the parameters.
Frames:-
Frame widget is used to organize the group of widgets. It acts like a container which
can be used to hold the other widgets. The rectangular areas of the screen are used to
organize the widgets to the python application.
Syntax: name = Frame(parent, options)
The options are
• bd: It represents the border width in pixels.
• bg: It represents the background color of the frame.
• width: The width of the frame.
• height: The height of the frame.
Program no 3:- Write a simple program in tkinter using frames.
Source Code Output
from tkinter import *
root = Tk()
[Link]("Frame
Example")
[Link]("400x300")
frame = Frame(root,
bg="lightblue", bd=5,
relief="ridge",
width=300, height=200)
[Link]()
[Link]()
Result: A window titled “Frame Example” opens displaying a light blue rectangular
frame with a raised border.
LAB NO 4
PACK()
How to pack the labels and Frames.
Pack():-
The pack() method is used to organize components or widgets in
main window.
Syntax:
[Link] (options)
The possible options are
Side: it represents the side to which the widget is to be placed on the window. Side may be
LEFT or RIGHT or TOP (default) or BOTTOM.
Anchor: Defines the position of the widget relative to the packing side. Possible values:
N, S, E, W, NE, NW, SE, SW, CENTER (default).
fill: Specifies whether the widget should expand to fill space. Possible values:
NONE (default), X (fill horizontally), Y (fill vertically), BOTH (fill both).
expand: When set to True, allows the widget to expand to fill any extra space in the
geometry master.
Program no 4:- Write a simple program in tkinter using frames,label
and pack().
Source Code Output
from tkinter import *
root = Tk()
[Link]("Pack Options
Example")
[Link]("500x400")
top_label = Label(root,
text="Top Label",
bg="lightgreen", fg="black",
font=("Arial", 14))
top_label.pack(side=TOP,
fill=X, padx=10, pady=10)
left_frame = Frame(root,
bg="lightblue", bd=5,
relief="sunken", width=150,
height=300)
left_frame.pack(side=LEFT,
fill=Y, padx=10, pady=10)
right_frame = Frame(root,
bg="lightpink", bd=5,
relief="ridge", width=150,
height=300)
right_frame.pack(side=RIGH
T, fill=Y, padx=10, pady=10)
label1 = Label(left_frame,
text="Inside Left Frame",
bg="purple")
[Link](padx=5, pady=5)
label2 = Label(right_frame,
text="Inside Right Frame",
bg="brown")
[Link](padx=5, pady=5)
[Link]()
Result:
A window opens with a green label at the top.A light blue frame on the left and a
light pink frame on the right, each containing a [Link] frames and labels are organized
using pack() options like side, fill, padx, pady.
LAB NO 5
Display Image using Label.
Program no 5:- Write a simple program in tkinter display image using
frames.
Source Code Output
from tkinter import *
root = Tk()
[Link]("600x400")
tk_img = PhotoImage
(file="[Link]")
l=Label(root, image=tk_img)
[Link]()
[Link]()
Result: A 600×400 window opens showing the [Link] image.
LAB NO 6
Create shapes using graphics.h
Program no 6:- Write a program in dev c++ using graphics.h and
create an arc.
Syntax: arc(x-axis of center ,y-axis of center,starting angle, ending angle,radius)
Source Code Output
#include<graphics.h>
int main()
initwindow(500,500);
arc(300,300,90,180,100)
;
getch();
Program no 7:- Write a program in dev c++ using graphics.h and
create an circle.
Syntax: circle(x-axis of center ,y-axis of center,radius)
Source Code Output
#include<graphics.h>
int main()
initwindow(500,500);
circle(250,250,120);
getch();
Program no 8:- Write a program in dev c++ using graphics.h and
create an line.
Syntax: line(x-axis of starting,y-axis of starting, x-axis of ending,y-axis of ending)
Source Code Output
#include<graphics.h>
int main()
initwindow(600,600);
line(150,150,550,450);
line(550,150,150,450);
getch();
Program no 9:- Write a program in dev c++ using graphics.h and
create an rectangle.
Syntax: rectangle(left,top,right,bottom)
Source Code Output
#include<graphics.h>
int main()
initwindow(700,700);
rectangle(100,100,650,500
);
getch();
LAB NO 7
Add color border to a shape.
Syntax: setcolor(color-name)
Program no 10:- Write a program in dev c++ using graphics.h create
an arc add color border to a shape..
Source Code Output
#include<graphics.h>
int main()
{
initwindow(500,500);
setcolor(4);
arc(300,300,90,180,100
);
getch();
}
Program no 11:- Write a program in dev c++ using graphics.h create
an arc add color border to a shape.
Source Code Output
#include<graphics.h
>
int main()
initwindow(500,500)
;
setcolor(CYAN);
circle(250,250,120);
getch();
LAB NO 8
Fill Color Styles
Different Style to fill color in shapes.
Solid Fill
Syntax: setfillstyle(SOLID_FILL,color-name);
floodfill(value of x,value of y, color-name);
Program no 12:- Write a program in dev c++ using graphics.h create
an rectangle and fill a shape with solid fill.
Source Code Output
#include<graphics.h>
int main()
{
initwindow(500,500);
setcolor(5);
rectangle(40,70,410,290);
setfillstyle(SOLID_FILL,6)
;
floodfill(200,200,5);
getch();
}
Pattern Fill
Syntax: setfillstyle(pattern_fill_options,color-name);
floodfill(value of x,value of y, color-name);
Options:
EMPTY_FILL (0): Fills with the background color (makes the area transparent).
SOLID_FILL (1): Fills with a solid, uniform color.
LINE_FILL (2): Fills with horizontal lines.
LTSLASH_FILL (3): Fills with light diagonal lines (/).
SLASH_FILL (4): Fills with thick diagonal lines (/).
BKSLASH_FILL (5): Fills with thick reverse diagonal lines (\).
LTBKSLASH_FILL (6): Fills with light reverse diagonal lines (\).
HATCH_FILL (7): Fills with a coarse, cross-hatched grid pattern.
XHATCH_FILL (8): Fills with a fine, cross-hatched grid pattern.
INTERLEAVE_FILL (9): Fills with an interleaved pattern (may appear solid in some modes).
WIDE_DOT_FILL (10): Fills with widely spaced dots.
CLOSE_DOT_FILL (11): Fills with closely spaced dots.
USER_FILL (12): Uses a custom pattern defined by setfillpattern().
Program no 13:- Write a program in dev c++ using graphics.h create
an rectangle and fill a shape with pattern fill.
Source Code Output
#include<graphics.h>
int main()
{
initwindow(500,500);
setcolor(5);
rectangle(40,70,410,290);
setfillstyle(WIDE_DOT_FILL,2)
;
floodfill(200,200,5);
getch();
}
Program no 14:- Write a program in dev c++ using graphics.h create
an rectangle and fill a shape with pattern fillusing number.
Source Code Output
#include<graphics.h>
int main()
initwindow(500,500);
setcolor(5);
rectangle(40,70,410,290);
setfillstyle(8,2);
floodfill(200,200,5);
getch();
LAB NO 9
Gradient fill using glut
Texture Fill
A texture fill is a method of filling a shape or area with a repeated pattern
instead of a solid color. It adds visual detail to graphics objects by using a custom pattern or
image to simulate surfaces like bricks, tiles, wood, fabric, or other textures.
Program no 15:- Write a program in dev c++ using grahics.h and
create a rectangle and fill a shape with texture fill of brick pattern.
Source Code Output
#include <graphics.h>
#include <conio.h>
int main() {
int gd = DETECT, gm;
initgraph(&gd, &gm,
(char*)"");
setcolor(RED);
char brick_pattern[8] =
{0xFF, 0x80, 0x80, 0xFF, 0x08,
0x08, 0x08, 0xFF};
setfillpattern(brick_pattern,
BLUE);
rectangle(100, 100, 300,
250);
floodfill(101, 101, RED);
outtextxy(100, 80,
(char*)"Brick Texture Fill");
getch();
return 0;
}
Program no 16:- Write a program in dev c++ using grahics.h and
create a rectangle and fill a shape with texture fill of horizontal pattern.
Source Code Output
#include <graphics.h>
#include <conio.h>
int main() {
int gd = DETECT, gm;
initgraph(&gd, &gm, (char*)"");
setcolor(RED);
char horizontal[8] = {0xFF, 0x00,
0xFF, 0x00, 0xFF, 0x00, 0xFF, 0x00};
setfillpattern(horizontal, BLUE);
rectangle(100, 100, 300, 250);
floodfill(101, 101, RED);
outtextxy(100, 80, (char*)"Brick
Texture Fill");
getch();
return 0;
}
Program no 17:- Write a program in dev c++ using grahics.h and
create a rectangle and fill a shape with texture fill of vertical pattern.
Source Code Output
#include <graphics.h>
#include <conio.h>
int main() {
int gd = DETECT, gm;
initgraph(&gd, &gm,
(char*)"");
setcolor(RED);
char vertical[8] = {0x81,
0x81, 0x81, 0x81, 0x81, 0x81,
0x81, 0x81};
setfillpattern(vertical,
GREEN);
rectangle(100, 100, 300,
250);
floodfill(101, 101, RED);
outtextxy(100, 80,
(char*)"Brick Texture Fill");
getch();
return 0;
}
Program no 18:- Write a program in dev c++ using grahics.h and
create a circle and fill a shape with texture fill of checker pattern.
Source Code Output
#include <graphics.h>
#include <conio.h>
int main() {
int gd = DETECT, gm;
initgraph(&gd, &gm, (char*)"");
setcolor(RED);
char checker[8] = {0xAA, 0x55,
0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55};
setfillpattern(checker, GREEN);
circle(200, 200, 50);
floodfill(200, 210, RED);
outtextxy(100, 80, (char*)"Brick
Texture Fill");
getch();
return 0;
}
Program no 19:- Write a program in dev c++ using grahics.h and
create a circle and fill a shape with texture fill of diagonal pattern.
Source Code Output
#include <graphics.h>
#include <conio.h>
int main() {
int gd = DETECT, gm;
initgraph(&gd, &gm, (char*)"");
setcolor(RED);
char diagonal[8] = {0x80, 0x40,
0x20, 0x10, 0x08, 0x04, 0x02, 0x01};
setfillpattern(diagonal, GREEN);
circle(200, 200, 50);
floodfill(200, 210, RED);
outtextxy(100, 80, (char*)"Brick
Texture Fill");
getch();
return 0;
}