Serogodskaya N.I. GBOU school No. 118 South-Western Administrative District
Graphics mode
Computer science teacher GBOU school No. 118 South-Western Administrative District
Serogodskaya N.I.
Moscow
Lesson #1
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Goals
Educational:
introduce students to the Pascal ABC software environment and the structure of a program in Pascal;
to form in students primary knowledge on the application of the studied material.
Educational:
teach to analyze, generalize and systematize;
enrich students' vocabulary.
Educational:
develop students’ information culture, ability for independent and collective activity, and reflection.
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Serogodskaya N.I. GBOU secondary school No. 1 building 2
To work in graphic mode, you need to connect the module GraphABC :
The PassalABC graphic screen contains 640 points by horizontal and 400 points vertically.
Please note that the origin is the upper left corner of the screen, unlike the coordinate axes in mathematics
Serogodskaya N.I. GBOU secondary school No. 1 building 2
SCREEN CONTROL
SetWindowWidth(w) - sets the width of the graphics window;
SetWindowHeight(h) - sets the height of the graphics window;
Serogodskaya N.I. GBOU secondary school No. 1 building 2
ClearWindow; - clears the graphics window with white color.
ClearWindow(cl color name ); - clears the graphics window with the specified color.
ClearWindow(clMoneyGreen);
Green money color
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Graphic primitives
Serogodskaya N.I. GBOU secondary school No. 1 building 2
SetPixel(x,y,cl color name ) - paints one pixel with coordinates (x,y,) with color
SetPixel(300,200,clred);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
LineTo(x,y) - draws a segment from the current position of the pen to the point (x,y); The pen coordinates also become equal to (x,y).
begin LineTo(300,200);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Lines
Line(x1,y1,x2,y2) - draws a segment with the beginning at the point (x1,y1) and the end at the point (x2,y2).
line(100,50,500,250);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Colors used
clBlack - black clPurple - violet clWhite - white clMaroon – dark red clRed - red clNavy – dark blue clGreen - green clBrown - brown clBlue - blue clSkyBlue – blue clYellow - yellow clCream – cream
clAqua - turquoise clOlive – olive clFuchsia – lilac clTeal – blue-green clGray – dark gray clLime – bright green clMoneyGreen – the color of green money clLtGray – light gray clDkGray – dark gray clMedGray - grey clSilver – silver
Random(16777215) – a random color from the entire Pascal color palette
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Line color
SetPenColor(color) - sets the pen color specified by the parameter color .
setpencolor(clred);
line(30,30,400,350);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Dotted line
SetPenStyle(); -
sets the pen style specified by the number.
setpencolor(clred);
SetPenStyle(1); (1 - long stroke)
Line(10,100,350,100);
SetPenStyle(2); (2 - short stroke)
Line(10,125,350,125);
SetPenStyle(3); (3 - dash-dotted line)
Line(10,150,350,150);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Line thickness
SetPenWidth(n) - sets the width (thickness) of the pen to n pixels.
setpenwidth(20);
setpencolor(clred);
line(30,30,400,350);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Triangle
Drawn by procedures
Line(x1,y1,x2,y2); LineTo(x,y);
Program treugolnik;
setpenwidth(20);
setpencolor(clPurple);
line(300,100,500,300);
lineto(100,300);
lineto(300,100);
floodfill(300,200, clSkyBlue) ;
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Rectangle
Rectangle(x1,y1,x2,y2) - draws a rectangle specified by the coordinates of opposite vertices (x1,y1) and (x2,y2).
Program pryamougolnik;
Rectangle(50,50,200,200);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Fill color
FloodFill(x,y,color) - Fills an area of one color with color, starting at point (x,y).
Program pryamougolnik;
Rectangle(50,50,200,200);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Brush Fill
SetBrushColor(color) - sets the brush color.
The brush fill extends to closed loop, the description of which follows the procedure for setting the brush color.
Program filling_kist;
SetBrushColor( clMoneyGreen);
Rectangle(50,50,300,300);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Brush Fill
SetBrushStyle(number from 0 to 7 or name) - sets the brush style, specified by a number or symbolic constant.
Program p12_zalivka;
uses GraphABC;
SetBrushColor(clAqua);
SetBrushStyle(1);
Rectangle(10,10,100,100);
SetBrushColor(clRed);
SetBrushStyle(2);
Rectangle(110,10,200,100);
SetBrushColor(clBlue);
SetBrushStyle(3);
Rectangle(210,10,300,100);
SetBrushColor(clGreen);
SetBrushStyle(4);
Rectangle(10,110,100,210);
SetBrushColor(clYellow);
SetBrushStyle(5);
Rectangle(110,110,200,210);
SetBrushColor(clBlack);
SetBrushStyle(6);
Rectangle(210,110,300,210);
The default style is 0 – solid color fill.
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Brush Fill
SetBrushPicture('fname') -
sets the pattern stored in the fname file as the pattern for shading with the brush, in this case, the current brush color is ignored when painting.
begin SetBrushPicture("brush4.bmp"); Ellipse(0,0,640,400);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Outline color and thickness
are given by procedures SetPenWidth(w); SetPenColor(color);
Program pryamougolnik;
SetPenColor(clred);
SetPenWidth(20);
Rectangle(50,50,200,200);
FloodFill(100,100, clSkyBlue);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Circle
Circle(x,y,r) - draws a circle with center at point (x,y) and radius r .
Circle(500,200,100);
FloodFill(500,200, clGreen);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Ellipse
Ellipse(x1,y1,x2,y2) - draws an ellipse defined by its circumscribed rectangle with the coordinates of opposite vertices (x1,y1) and (x2,y2).
Ellipse(50,50,200,350);
FloodFill(50+100,50+100,clred);
Ellipse(250,150,550,300);
FloodFill(250+100,150+100,clBlue);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Arc of a circle
Arc(x,y,r,a1,a2)- Draws a circular arc with center at point (x,y) and radius r, enclosed between two rays forming angles a1 and a2 with the OX axis (a1 and a2 are real, specified in degrees and counted counterclockwise).
SetPenWidth(10);
Arc(300,250,150,45,135);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Sector
Pie(x,y,r,a1,a2) - draws a sector of a circle bounded by an arc (the procedure parameters have the same meaning as in the Arc procedure).
Pie(300,200,100,0,90);
FloodFill(300+10,200-10,clAqua);
Serogodskaya N.I. GBOU secondary school No. 1 building 2
References
Serogodskaya N.I. GBOU secondary school No. 1 building 2
Thank you for your attention!
Window management
SetWindowSize(w,h);
sets the dimensions of the graphics window
SetWindowWidth(w);
sets the width of the graphics window
SetWindowHeight(h);
sets the height of the graphics window
SetWindowTitle('Title') ;
changes the window title
Graphics in the programming environment
Turbo Pascal
EADC teacher: Neverova I.Yu.
Lesson plan:
I.G. Semakin, A.P. Shestakov. Fundamentals of Programming, pp.88-98, 398-409.
Graphics capabilities of the Turbo Pascal language - Graph library
InitGraph(Var Driver, Mode: Integer, Path: String);
Path to graphics library
Driver operating mode
Driver code
Graphics program operating modes
Program structure
Program ricunok; (program title)
Uses Graph ; (connecting a graphics library)
Var Dr, Md: integer; (driver variable description)
Begin (beginning of the program body)
Dr:= Detect ; (driver type)
InitGraph(Dr, Md,‘C:\TP 70\BGI’); (enable graphics with
graph library)
ReadLn ; (program delay)
End. (end of program)
Calculation of coordinates for geometric figure inference procedures
Bar(50,100,150,150)
Fillelipse(250,125,25,25)
VGA type monitor
Using Graphical Procedures
A program that displays a white Japanese flag with a red circle in the center
on a turquoise screen background.
Var Dr, Md: Integer;
InitGraph(Dr, Md, 'C:\TP70\BGI');
ClearViewPort ; (Screen clearing, to set the screen background)
SetBkColor(Cyan); (Set the screen background color to turquoise)
SetFillStyle(1, 15); (Color of rectangle filling according to pattern and color)
Bar(10, 10, 410, 210); (Drawing a filled rectangle by coordinates)
SetColor(4); (Setting the color of the circle lines)
Circle(210, 110, 30); (Drawing a circle with center coordinate and radius)
SetFillStyle(1, 4); (Color of filling the circle according to the pattern and color)
FloodFill(200, 100, 4); (Filling a closed shape with color around the coordinate to the borders)
ReadLn ; (program delay)
CloseGraph ; (exit graphics mode)
End. (end of program body)
Program that displays a block diagram
var dr,md:integer;
begin dr:=detect;
setlinestyle(0,1,3);
ellipse(320,40,0,360,50,10);
line(320,50,320,70);
line(270,70,390,70); line(390,70,370,100); line(370,100,250,100); line(250,100,270,70); line(320,100,320,120);
rectangle(260,120,380,150);
line(320,150,320,170); line(320,170,400,190); line(400,190,320,210); line(320,210,240,190); line(240,190,320,170);
line(240,190,200,190); line(200,190,200,210);
rectangle(140,210,260,240);
line(200,240,200,260);
rectangle(140,260,260,290);
line(200,290,200,310);
Line(140,310,260,310); Line(260,310,240,340); Line(240,340,120,340); Line(120,340,140,310); line(200,340,200,360);
line(200,360,100,360); line(100,360,100,170); line(100,170,320,170); line(400,190,440,190);
line(440,190,440,380); line(440,380,320,380); line(320,380,320,400);
ellipse(320,410,0,360,50,10);
settextstyle(7,0,2);
outtextXY(300,75,’F"); outtextXY(300,125,"N:=0"); outtextXY(292,178,'N
Result of program execution
Write a program that displays the following figure
Program paravoz;
var dr,md:integer;
begin dr:=detect;
initgraph(dr,md,"C:\tp70\bgi");
SetFillStyle(1, 2);
Bar(150,30,250,225);
SetFillStyle(1, 1);
Bar(180,55,220,115);
SetFillStyle(1, 2);
Bar(250,120,450,225);
Line(350,65,390,65);
Line(350,65,360,120);
Line(390,65,380,120);
Line(380,120,360,120);
SetFillStyle(1,1);
Sector(420,245,0,360,20,20);
Sector(300,245,0,360,20,20);
Sector(185,245,0,360,20,20);
SetFillStyle(1,7);
Sector(400,50,0,360,30,10);
Sector(425,25,0,360,20,10);
Sector(445,5,0,360,10,5);
Homework
In the workbooks Topic No. 4, complete tasks 1 and 2 on the use of graphic procedures.
Table of basic graphical procedures in Appendix 4.
Slide 2
Each pixel (point) has two coordinates: x and y. The geometric dimensions of a pixel are determined by the resolution of the monitor.
Slide 3
Example 1. Demonstration of connecting the GraphAbc module program tochka; uses graphabc; (connecting the GraphAbc module) begin setwindowsize(640,480);(sets the size of the graphics window) setpixel(100,120,clBlack); (sets the pen color to black and draws a point at coordinates (100,120)) end. In this example, we were introduced to the use of the setpixel command in a special case. IN general view this command looks like this: setpixel(x:integer,y:integer,c:color) – draws a point with coordinates (x,y) with color c. clBlack – black clPurple – purple clWhite – white clRed – red clGreen – green clBrown – brown clBlue – blue clSkyBlue – light blue clYellow – yellow
Slide 4
A program for drawing a segment connecting two points with coordinates (120,150) and (150,80) using a red pen color may look like this: Example 2. Demonstration of drawing a line program Linii; uses graphabc; begin setwindowsize(640,480); setpencolor(clred); (sets the pen color to red) line(120,150,300,100); (draws a segment from (120,150) to (300,100)) end.
Slide 5
Example 3. Demonstration of drawing lines with different pen colors program treugolnik; uses graphabc; begin setwindowsize(640,480); setpenwidth(5); (sets the width of the current pen. The number of pixels that make up the line width is indicated in parentheses) setpencolor(clred); (sets the pen color to red) line(100,200,170,70); (draws a segment from a point with coordinates (100,200) to a point with coordinates (170,70)) setpencolor(clGreen); (sets green pen) line(170,70,250,200); (draws a line from point(170,70) to point(250,200)) setpencolor(clBlue); (sets the pen color to blue) line(250,200,100,200);(draws a segment from point(250,200) to point(100,200)) (the result is a triangle with sides of different colors) end.
Slide 6
It is important to remember: 1. When drawing a line, you can set its size (the coordinates of its ends), color, width (thickness) and style. 2. To set the line style in the GraphAbc module, there is a procedure SetPenStyle (Style), where Style is the pen style constants (see Appendix to Chapter 3). 3. The line can be solid, dotted, dashed, dashed. Closed figures can be painted over.
Slide 7
Example 4. Demonstration of drawing closed figures using lines and painting them Program treug_zakrash; uses graphabc; begin setwindowsize(640,480); clearwindow(clWhite);(clears the graphics window with white color) setpenwidth(3); (sets the width of the current pen) setpenstyle(pssolid); (sets the line style - solid line) setpencolor(clgreen); (sets the pen color to green) line(100,200,170,70); (draws lines in green) line(170,70,250,200); line(250,200,100,200); floodfill(440,120,clred); (Paints the triangle red) end.
Slide 8
As a result of executing the program, a triangle drawn in green and shaded in red will appear on the monitor screen in the graphics window. It is important to remember: 1. You can only paint closed shapes whose outline is drawn in one color. 2. In the filling procedure floodfill(x,y,c), the coordinate of the point (x,y) is indicated, which must fall into the inner area of the shape being painted.
Slide 9
Rectangles and circles can be drawn using the commands rectangle(x1,y1,x2,y2) and circle(x,y,r), respectively. Let's look at how this can be done using the example of a program that draws a rectangle and a circle. Example 5. Demonstration of drawing a rectangle and a circle program geometry; uses graphabc; begin setwindowsize(640,480); setpencolor(clBlue); (sets the blue pen color for drawing the outline of the rectangle) setpenwidth(6); (sets the pen width) rectangle(50,50,250,150);(draws a rectangle specified by the coordinates of opposite vertices) setpencolor(clred); (sets the pen color for drawing the circle outline to red) circle(350,100,60); (draws a circle centered at coordinates (350,100) and radius 60) end.
Slide 10
Demonstration of painting a rectangle and a circle and their inscription program geometry3; uses graphabc; begin setwindowsize(640,480); clearwindow(clYellow);(sets the background color to yellow) setpencolor(clteal); (sets the blue-green color of the pen) setpenwidth(5); (sets the line width) setbrushcolor(clolive); (sets the olive color of the brush) rectangle(100,100,300,200); (draws a rectangle filled with olive color) setbrushcolor(clblue); (sets the brush color to blue) circle(400,150,50); (draws a blue circle) setfontstyle(fsbold);(sets the font style) setfontsize(15);(sets the font size) setbrushcolor(clwhite);(sets the brush color to white) setfontcolor(clolive);(sets the olive font color) textout (100,220,"Rectangle"); (makes a caption) setfontcolor(clblue); (sets the font color to blue) textout(380,220,"Circle"); (makes an inscription) end.
Slide 11
Pascal's ABC graphic procedures: 1. SetPixel(x,y,color: integer); - paints one pixel with coordinates (x,y) with color. 2. Line(x1,y1,x2,y2: integer); - draws a segment from point (x1,y1) to point (x2,y2). 3. Circle(x,y,r: integer); - draws a circle with center at point (x,y) and radius r. 4. Rectangle(x1,y1,x2,y2: integer); -draws a rectangle specified by the coordinates of opposite vertices (x1,y1) and (x2,y2). 5. TextOut(x,y: integer; s: string); - outputs string s to position (x,y) (point (x,y) specifies the upper left corner of the rectangle that will contain the text from string s). 6. FloodFill(x,y,color: integer); - fills an area of the same color with color, starting at point (x,y). 7. FillRect(x1,y1,x2,y2: integer); - fills the rectangle specified by the coordinates of opposite vertices (x1,y1) and (x2,y2) with the color of the current brush.
Slide 12
What will be displayed on the monitor screen as a result of executing these programs? program graphics1; uses graphabc; begin setpenwidth(10); setpencolor(clred); Line(100,100,270,90); End. Program grafika2; uses graphabc; begin setpenwidth(8); setpencolor(clblue); circle(200,150,50); End.
Slide 13
Copy in your notebook: Topic: Graphical capabilities of a programming language. 1. Line(x1,y1,x2,y2; - segment from (x1,y1) to (x2,y2) 2. Circle(x, y, r); - circle with center at (x,y) and radius r. 3. Rectangle(x1,y1,x2,y2); - rectangle defined by the coordinates of opposite vertices (x1,y1) and (x2,y2) 4. FloodFill(x, y, color); color color, starting from point (x,y).
View all slides