Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za...

174
Select menu item and press Push the button Push the brush tool (paint bucket, ereaser tool) and use (apply) it Niniejsze materiały są przeznaczone do użytku wewnętrznego. Rozpowszechnianie jest zabronione. These materials are intended for internal use only. Dissemination is prohibited. GRAFIKA – TEORIA GRAPHICS - THEORY Grafika rastrowa i wektorowa Grafika rastrowa (mapy bitowe -bitmap) oznacza zapamiętanie każdego punktu obrazu. Grafika wektorowa wykorzystuje algorytmy tworzenia obrazu na podstawie minimalnej ilości danych. Np. okrąg: promień, współrzędne środka, grubość i kolor linii oraz procedura znajdowania punktów na obwodzie). Umożliwia przeskalowanie rysunku i dostosowanie do aktualnej rozdzielczości. (AutoCAD -plotter, CorelDraw, Adobe Acrobat PostScript, True Type Fonts).

Transcript of Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za...

Page 1: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Select menu item and pressPush the button

Push the brush tool (paint bucket, ereaser tool) and use (apply) it

Niniejsze materiały są przeznaczone do użytku wewnętrznego.

Rozpowszechnianie jest zabronione.

These materials are intended for internal use only.Dissemination is prohibited.

GRAFIKA – TEORIAGRAPHICS - THEORY

Grafika rastrowa i wektorowaGrafika rastrowa (mapy bitowe -bitmap) oznacza zapamiętanie każdego punktu obrazu.Grafika wektorowa wykorzystuje algorytmy tworzenia obrazu na podstawie minimalnej ilości danych. Np. okrąg: promień, współrzędne środka, grubość i kolor linii oraz procedura znajdowania punktów na obwodzie). Umożliwia przeskalowanie rysunku i dostosowanie do aktualnej rozdzielczości. (AutoCAD -plotter, CorelDraw, Adobe Acrobat PostScript, True Type Fonts).Raster and vector graphicsIn case of a raster graphics (bitmaps) each point of the image is remembered.Vector graphics uses algorithms to create an image based on a minimum amount of data. For example, a circleradius, coordinates of the center, the thickness and color of the line and the procedure for finding the points on the circumference).

Page 2: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

It allows you to scale the drawing and adapt to the current resolution. (AutoCAD plotter, CorelDraw, Adobe Acrobat, PostScript, True Type Fonts).

http://www.sketchpad.net/basics1.htm

http://en.wikipedia.org/wiki/Raster_graphicsPhotoshop Elements: after opening the image - V Window Navigator - move the slider to the right

Image- Resize – Image Size

Photoshop Elements: po otwarciu obrazka – V Window Navigator – przesuwamy suwak w prawo

Page 3: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Zwiększając ilość pixeli Width - Height, zmniejszyliśmy ich rozmiary Pixel Dimensions (Resolution) Dodalismy średnie

wartości i poprawiliśmy rozdzielczość obrazka

By increasing the number of pixels Width - Height, have reduced their sizes Pixel Dimensions (Resolution) We've added

the mean values and improved image resolution

Page 4: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Programy ułatwiające realizację grafiki rastrowej:Programmes for the implementation of raster graphics:Adobe Photoshop, Corel Photo Paint Definiowanie własnego pędzlaDefining your own brush

Page 5: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Definiowanie pędzlaMożna: Window – Grid lub bez siatki

Rysujemy pędzel i zaznaczamy

Edit – Define Brush

Teraz jest on dostępny jako ostatni

Programy ułatwiające realizację grafiki wektorowej: Programmes for the implementation of vector graphics: Corel Draw, AutoCAD 

 Grafika wektorowa realizowana jest przez ploter

Vector graphics is performed by the plotterhttp://www.google.pl/imghp?hl=pl&tab=wi

Plotterhttp://en.wikipedia.org/wiki/Plotter

Programowanie - realizacja grafiki ploterem RolandProgramming - implementation of graphics with plotter Roland

procedure TForm3.GotoXYPlotter(X,Y:integer); begin writeln(lst,'M',X,',',YMaxPlotter-Y)   end; procedure TForm3.DrawAscii(var x,y:integer;size,ch:byte);begin writeln(lst,'S',size);

Page 6: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

 write(lst,'M',x,',',y);writeln(lst,'P',chr(ch)); end ; procedure TForm3.LineStyle(ls:integer); var i:integer; const lsa:array [0..4] of byte=($FF,$88,$F8,$E4,$EE); Begin writeln(lst,'L',ls); End; Procedure TForm3.SetPitch(pitch:integer); begin writeln(lst,'B',pitch);end; Procedure TForm3.LinePlotter(x1,y1,x2,y2:integer);BEGIN Write(lst,'M',x1,',',y1);writeln(lst,'D',x1,',',y1,',',x2,',',y2); END; procedure TForm3.DrawPolygPlot(Point1,NumPoints:word; var Wsp:PWspXY);var i,x1,y1,x2,y2:integer;       begin       x1:=Wsp^[1,1];y1:=Wsp^[1,2];       write(lst,'M',x1,',',y1);       For i:=point1 to NumPoints-1 do       begin       x1:=Wsp^[i,1];y1:=Wsp^[i,2];x2:=Wsp^[i+1,1];y2:=Wsp^[i+1,2];       if i=point1 then write(lst,'D',x1,',',y1,',',x2,',',y2)       else  write(lst,',',x1,',',y1,',',x2,',',y2);       end;       writeln(lst,'H');       end;  Procedure TForm3.SetPlotterOff; Begin writeln(lst,'B80');writeln(lst,'L0');writeln(lst,'H');   end; 

 

Page 7: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

 Grafika wektorowa realizowana jest na monitorze po

rasteryzacji jako mapa bitowa

Vector graphics on the monitor is performed after rasterization as a bitmap

Narzędzia Photoshop Tools

Realizacja grafiki wektorowej na monitorze i drukarce polega na rasteryzacjiWspółrzędne punktuZałóżmy, że mamy mały monitor (8x8) tzn. o szerokości 8 pixeli i wysokości 8.

Implementation of vector graphics on the monitor and printer require a rasterizationThe coordinates of the pointSuppose we have a small monitor (8x8), ie a width of 8 pixels and a height of 8th

Punktom o współrzędnych ekranowych (7,0), (6,1), (5,2), (4,3) odpowiadają bityScreen coordinates of the points (7,0), (6,1), (5,2), (4.3) correspond to bits

00000001 =100000010 =200000100 =4

Page 8: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

00001000 =8Zawierające je byte’y tworzą ciąg liczb (1,2,4,8,0,0,0,0). Linia prosta przechodząca przez punkty (7,0), (4,3) oznacza ten ciąg liczb.Dla monitora 16x4 mamy ciąg liczb: (1,0,2,0,4,0,8)Containing them bytes create a sequence of numbers (1,2,4,8,0,0,0,0).The straight line passing through the points (7,0), (4.3) means that string of numbers.For a monitor 16x4 we have a sequence of numbers: (1,0,2,0,4,0,8)

 Narysowanie prostej przechodzącej przez punkty o współrzędnych (7,0) i (0,3) wymaga ustalenia ciągu liczb (1,4,16+32,128)Draw a straight line passing through points with coordinates (7.0) and (0.3) requires the sequence of numbers (1,4,16 32.128)

Programowanie - rysowanie linii prostejProgramming - drawing a straight line

procedure TForm1.DrawLineDirect(x1,y1,x2,y2:integer; kolor:TColor); var x,y,DeltaX,DeltaY,XStep,YStep,direction,yy1,yy2:integer;begin      x:=x1;       y:=y1;       XStep:=1;       YStep:=1;      if x1>x2 then XStep:=-1;       if y1>y2 then YStep:=-1;      DeltaX:=abs(x2-x1);       DeltaY:=abs(y2-y1);      if DeltaX=0 then direction:=-1       else direction:=0; 

Page 9: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

      while not ((x=x2) and (y=y2)) do       begin         Canvas.Pixels[x,y]:=kolor;

if direction<0 then         Begin           y:=y+YStep;           direction:=direction+DeltaX;          end         else         Begin           x:=x+XStep;           direction:=direction-DeltaY;          end;       end;end; Uruchomienie:DrawLineDirect(0,0,1000,500,clBlue);  

Wypełnienie prostokąta (1,1) (5,4)Filling the rectangle (1,1) (5,4)

Polega na wypełnieniu bitów kolorem B od nieparzystego R (pierwszy napotkany czerwony) do parzystego R (drugi napotkany czerwony). It consists in filling in bits of color B from odd R (first encountered red) to the even R (second encountered red).

Na tym rysunku wypełniamy obszar kolorem zielonym (1-2, 3-4). Tak działa niżej pokazany kubek z farbąIn this figure, the area is filled with a green color (1-2, 3-4). That work is shown below with the paint cup

Page 10: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

 

//Programowanie: grafika wektorowa, rastrowa, mysz//Programming: vector graphics, raster, mouse

//Proste procedury realizujące grafikę wektorową w Delphi.//Simple procedures for performing vector graphics in Delphi. procedure TForm1.Button1Click(Sender: TObject);var x,y,r,g,b:integer;kolor:longint;  xx,yy:real;BEGINwith canvas doBeginBrush.Color:=clYellow ; Rectangle(0,0,Screen.Width, Screen.Height); //kolor tłaPen.Color:=clGreen;     Pen.Width:=6;   MoveTo(10,10);                 LineTo(100,200);Brush.Color:=clRed ;         TextOut(300,300,'Nazwisko');Pen.Width:=2;                   Pen.Color:=clBlue;  Brush.Color:=clBlue ; Rectangle(20,20,50,70);  Ellipse(20,20,100,200);repeat until getinputstate;//Przykładem zastosowania jest Corel Draw An example of application is Corel Draw

//Grafika rastrowa – zastosowanie Adobe Photoshop, Corel Photo Paint//Raster graphics - using Adobe Photoshop, Corel Photo Paint

//Przykładowa realizacja wektora=funkcji(x,y) przez zamianę na bitmpę//Example of a vector = function (x, y) by replacing a bitmapbegin  For x:=0 to Screen.Width do  For y:=0 to Screen.Height do  begin  xx:=x;yy:=y;

Page 11: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

  r:=trunc(255*sin((xx+yy)/27/2));  g:=trunc(255*sin(xx/23/20)-255*sin(yy/17/20));  b:=r+g;  kolor:=RGB(LO(r),LO(g),LO(b));  Pixels[x,y]:=kolor;  end;repeat until getinputstate; Brush.Color:=clWhite ; Rectangle(0,0,Screen.Width, Screen.Height);repeat until getinputstate;end; repeat until getinputstate;  repeat until getinputstate;close( );End;END;end.    C++Builder//C:/CG/dywan/dywan1.cbproj//---------------------------------------------------------------------------#include <vcl.h>#pragma hdrstop#include <math.h>#include "dywan.h" #include <jpeg.hpp>//---------------------------------------------------------------------------#pragma package(smart_init)#pragma resource "*.dfm"TForm1 *Form1;//---------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner)        : TForm(Owner){

Page 12: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

}//---------------------------------------------------------------------------//ograniczenia zakresu od 0 do 255// limit the range from 0 to 255byte Range(int a) { byte b; b=a; if(a>255) b= 255; if(a<0) b= 0; return b; } //Ze względu na ograniczenia zakresu RGB od 0 do 255, zmiany wartości RGB nie zawsze są odwracalne.//Ze względu na typ byte musimy wprowadzić funkcje ograniczająca  RGB do wartości 255//Range(155+100)=255, teraz powrót 255-100=155//Range(200+100)=255, teraz powrót 255-100=155//W ten sposób różnica pomiędzy 155 i 200 ostała zniwelowana, co oznacza, że powrót od oryginału nie jest możliwy // Because of the limitations of RGB from 0 to 255, changes the RGB values are not always reversible.// Because the range of byte, we need to introduce a limitation function to value 255 for RGB// Range (155 + 100) = 255, now back 255-100 = 155// Range (200 + 100) = 255, now back 255-100 = 155// In this way, the difference between the 155 and 200 is lost, meaning that the return to the original value is not possible  // odczytanie R,G,B z TColor// Read the R, G, B TColor

void TForm1:: GetRGBValue(TColor kolor, byte &R, byte &G, byte &B)

Page 13: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

{ LongInt L; int RR,GG,BB;L =  ColorToRGB(kolor);BB= L >> 16;GG= (L-(BB << 16)) >> 8;RR= L-(BB << 16)-(GG << 8);R=Range(RR);G=Range(GG); B=Range(BB); } void __fastcall TForm1::Button1Click(TObject *Sender){   float x, y, r, g, b;         byte R,G,B;  TColor kolor;

//Dywan bezpośrednio na ekranie  for( x = 0; x < ClientWidth; x ++) {         for( y = 0; y < ClientHeight; y ++)                {                r = 255. * sin( (x + y)/27.);                g = 255. * sin(x/23.) - 255. * sin(y/17.);                b = (r + g);                 kolor = (TColor)RGB( r, g, b);                Canvas -> Pixels[x][y] = kolor;    }  }

//Dywan bezpośrednio stworzony na bitnmapie i przerzucony na ekran// Carpet directly created in the bitnmapie and passed on to the screen

Graphics::TBitmap *Obraz = new Graphics::TBitmap; Obraz->Height= ClientHeight;    // msza byc okreslone wymiary Obraz->Width= ClientWidth;        for( y= 0; y<=Obraz->Height; y++)        {         for( x= 0; x<=Obraz->Width; x++)        {         r = 255. * sin( (x + y)/27.);                g = 255. * sin(x/23.) - 255. * sin(y/17.);                b = (r + g);                kolor =TColor(RGB( r, g, b));

Page 14: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

           Obraz->Canvas -> Pixels[x][y] =kolor;           }          }   Form1->Canvas->Draw(0,0, Obraz);   Obraz->SaveToFile("c:/skas/obrazek.bmp");  //Wczytanie obrazka bmp i umieszczenie go na ekranie// Loading a bmp image and placing it on the screenGraphics::TBitmap *Obrazek = new Graphics::TBitmap;                Obrazek->LoadFromFile("C:\\CG\\Raj.bmp");                Canvas->Draw(10, 10, Obrazek); //Odczytanie koloru pikseli obrazka z ekranu i rozjaśnianie// Read the image pixel color screen and brightening for( x = 0; x < ClientWidth; x ++) {  for( y = 0; y < ClientHeight; y ++) {  kolor=Canvas -> Pixels[x][y]; //Pipeta = eyedropper GetRGBValue(kolor,R,G,B); R=Range(R+50);G=Range(G+50); B=Range(B+50); kolor = (TColor)RGB(R,G,B); Canvas -> Pixels[x][y] = kolor;  }  } // Sleep(100);delete Obraz; delete Obrazek;  //zamiana formatu bmp na jpg i odwrotnie//Kod do wczytywania pliku bmp, zamiany go na jpg z dowolną kompresją:// bmp format conversion on jpg and vice versa// Code to load bmp file, convert it to jpg with any compression:int jakosc = 100; // //dowolna wartość od 1 (najgorsza jakość) do 100 (najlepsza jakość)any value from 1 (worst quality) to 100 (best quality)

Page 15: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//AnsiString nazwa_pliku = "plik.bmp"; // nazwa pliku bmpAnsiString nazwa_pliku ="C:\\CG\\Raj.bmp";Graphics::TBitmap *bmp0 = new Graphics::TBitmap();bmp0->LoadFromFile(nazwa_pliku);TJPEGImage *jpg0 = new TJPEGImage();try{ jakosc=80;jpg0->CompressionQuality = jakosc;jpg0->Assign(bmp0);jpg0->Compress();jpg0->SaveToFile("c:/skas/obrazek.jpg"); }catch (...) { }delete jpg0;

// Kod do wczytywania jpg z pliku i zamiana go na bmp// Code to load a jpg from the file and translating it on bmp//AnsiString nazwa_pliku1 = "plik.jpg"; // nazwa pliku jpgAnsiString nazwa_pliku1 ="c:\\skas\\obrazek.jpg";Graphics::TBitmap *bmp1 = new Graphics::TBitmap();TJPEGImage *jpg1 = new TJPEGImage();try{ jpg1->PixelFormat = jf24Bit;jpg1->Performance = jpBestQuality;jpg1->LoadFromFile(nazwa_pliku1);bmp1->Assign(jpg1);bmp1->SaveToFile("c:\\skas\\brazek2.bmp"); }catch (...) { }delete jpg1;bool inputstate;while (true) { inputstate = GetInputState( ); if (inputstate == true) break ; }PostQuitMessage( 10 ); // zakonczenie programu    }

Page 16: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//---------------------------------------------------------------------------

//Rysowanie myszą: Drawing with a mouse//CG\Rysuj\rys1.cbproj#include <vcl.h>#pragma hdrstop#include "rys.h"//---------------------------------------------------------------------------#pragma package(smart_init)#pragma resource "*.dfm"TForm1 *Form1;//---------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner)        : TForm(Owner){}bool rysuj;//---------------------------------------------------------------------------void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y){         rysuj = true;        Canvas->MoveTo(X,Y); }//---------------------------------------------------------------------------void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift, int X, int Y){         if (rysuj)   Canvas->LineTo(X,Y);}//---------------------------------------------------------------------------void __fastcall TForm1::FormMouseUp(TObject *Sender, TMouseButton Button, TShiftState Shift,          int X, int Y){ rysuj = false;

Page 17: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

}//---------------------------------------------------------------------------

 TColor kolor;                    kolor = (TColor)RGB( r, g, b);kolor:=Canvas -> Pixels[x][y] ;  

 Oprócz współrzędnych piksel charakteryzuje się trzema kreseczkami o kolorach czerwony, zielony i niebieski:In addition to the coordinates of the pixel, it is characterized by three dots (lines) having the colors red, green and blue:

 Widmo światła białego

Barwy podstawowe Red- Yellow- Blue – według długości faliThe spectrum of white light

http://en.wikipedia.org/wiki/Visible_spectrumhttp://rci.rutgers.edu/~oldnb/356/index.html

Primary colors Red-Yellow-Blue - according to the wavelength

Siatkówka oka posiada receptory światła. Są to pręciki (rod) wrażliwe na intensywność światła (używane

głównie w nocy) oraz trzy typy stożków (cone) wrażliwych na kolory R czerwony G zielony i B niebieski.Retina has light receptors [re`septor]. These are: rods (rod) sensitive to light intensity (used mainly at night) and three types of cones (cone) that are sensitive to

colors of R red G green and B blue. `Retinal receptors ->Brain R+G=Y

Page 18: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Długość fali Wavelength

Red = (600 ..670) 10-9m Green = (500..550)  10-9m Blue = (470.500)  10-9m Yellow =(580 ..590) 10-9mPrędkość światła w

próżniSpeed of light in

vacuumc=299 792 458 m/s

 

Zgodnie z widmem, częstość fali   światła koloru żółtego ma wartość pośrednią, pomiędzy częstością fali światła

czerwonego i zielonego.

According to the spectrum, the wave frequency of yellow light has a value intermediate between the

frequency of the red and green light wave. 

Dodanie dwóch fal o różnej częstości daje wynik o średniej częstotliwości i powoli zmieniającej się amplitudzie

Adding two waves of different frequencies produces a result with an average frequency and slowly varying

amplitude

Ta średnia częstotliwość mieści się w zakresie wrażliwości receptorów siatkówki. Mała częstotliwość zmian „amplitudy” jest

poza ich zasięgiem.

Page 19: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

This average frequency is in the range of sensitivity of receptors of the retina. Low frequency „`amplitude”

changes is beyond their reach. 

Suma – przebieg fali :Sum - waveform:

Suma – porównanie okresów:Suma – porównanie okresów:

Page 20: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

  

Dodanie dwóch fal o różnej intensywności daje uśredniony wynik, ale zależny od intensywności składników.

Adding two waves of different intensity gives average results, but dependent on the intensity of the

components. 

3 składniki koloru –sąsiadujące kreseczki RGB

Three-color adjacent components of RGB

  

Page 21: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Głębokość (intensywność) 8 bitów (256 stopni) dla każdego ze składników (red, green, blue) oznacza256*256*256=16 777 216 kolorów (24 bity na piksel)

Depth (intensity) of 8 bits (256 degrees) for each component (red, green, blue) gives256 * 256 * 256 = 16 777 216 colors (24 bits per pixel)

Truecolor (direct color):  32 bit = 8 red, 8 green, 8 blue, dodatkowo 8 bitów alpha – transparency -przezroczystość, opacity - nieprzezroczystść)

Truecolor (direct color): 32 bits = 8 red, 8 green, 8 blue, 8 bits plus alpha – transparency - opacity)

Hicolor: 16 bit = 5 red, 5 green, 5 blue, 1 overlayHicolor: 16 bits = 5 red, 5 green, 5 blue,1 overlay

Do oka dociera światło odbite

The eye is reached by the reflected light

http://www.daviddarling.info/childrens_encyclopedia/light_Chapter6.html

  

Spektrum światła dziennego i sztucznego

The spectrum of daylight and artificial light

 http://www.olympusmicro.com/primer/lightandcolor/

lightsourcesintro.html

Page 22: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Spektrum powierzchni odbijających światło, które wydaje się być żółte, niebieskie, czerwone, purpurowe (yellow, blue, red,

purple):

The spectrum of reflective surfaces, which appears to be yellow, blue, red, purple (yellow, blue, red, purple):

  

Spektrum czułości receptorów b, g, r siatkówki oraz widoczność o zmroku:

The retina spectrum sensitive receptors b, g, r and visibility at dusk:

http://users.rcn.com/jkimball.ma.ultranet/BiologyPages/V/Vision.html

http://webvision.med.utah.edu/book/part-ii-anatomy-and-physiology-of-the-retina/photoreceptors/

http://www.oneminuteastronomer.com/86/averted-vision-nature-gave/

  

Mózg stymulowany jest przez iloczyn spektrów emisji, odbicia i receptorów

The brain is stimulated by the product of the = emission + reflection + and receptors spectra

 Opacity = Nieprzezroczystość

Kreska niebieska ma opacity 100%, kreska czerwona ma opacity 50%

Page 23: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Blue line is 100% opacity, the red line has a 50% opacity

Przezroczystość =TransparencyFile- New - Transparent

Page 24: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Widoczna szachownica oznacza przezroczystość

Visible checkerboard denotes the transparency

Malujemy na transparent (na szachownicy)

We paint on the transparent board (checkerboard)

Select All –CopyWklejamy na inny obrazek – Paste

Paste into another image

Wymazywanie tła:

Erasing the background:

Page 25: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

FiltryFilters

Photoshop

Razem=5-1-1-1-1=1

Page 26: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Sum =5-1-1-1-1=1Scale = mnoży

Scale = multiplyOffset = dodaje wartość do wyniku

Offset = adds value to the resultUśrednianie powoduje rozmycie plamekStosuje się też inne funkcje przypisujące pikselowi wartość obliczoną na podstawie wartości sąsiednich pikseli

Averaging causes blur spotsOther functions are also used to assign new pixel value that is calculated basing on the values of neighboring pixels

Filter- Filter Gallery

Programowanie -filtryDla C++float MapaFiltra1[3][4] = {{1,1,1,1}, {1,1,1,1}, {1,1,1,1}}; Dla Delphivar MapaBitowa1:TBitmap;const MapaFiltra1:array[1..3,1..4] of real=((1,1,1,1), (1,1,1,1), (1,1,1,1));  Procedure TForm1.ProcFiltr(ilxF,ilyF:byte;Filter:filtry;mian,dodac:real);var RRR,GGG,BBB:real;RR,GG,BB:byte;RR1,GG1,BB1,x,y,xx,yy:integer;kolor,kolor1: TColor;begin

Page 27: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

With canvas doFor x:=1+ilxF to MapaBitowa1.Width -ilxF doFor y:=1+ilyF to MapaBitowa1.Height -ilyF do               begin               RRR:=0;GGG:=0;BBB:=0;                               For xx:=1 to ilxF do                               For yy:=1 to ilyF do                               begin                               kolor1:=MapaBitowa1.Canvas.Pixels[x+xx,y+yy];;                               GetRGBValue(kolor1,RR,GG,BB);                               RRR:=RRR+RR*Filter[yy,xx];                               GGG:=GGG+GG*Filter[yy,xx];                               BBB:=BBB+BB*Filter[yy,xx];                               end;               RR1:=Trunc(RRR/mian+dodac);               GG1:=Trunc(GGG/mian+dodac);               BB1:=Trunc(BBB/mian+dodac); Range0_255(RR1);Range0_255(GG1);Range0_255(BB1);kolor:=RGB(LO(RR1),LO(GG1),LO(BB1));Pixels[x+ ilxF div 2,y+ ilyF div 2]:=kolor;end;end;

Programming - filters

TBitmapPrzezroczyste warstwy

Transparent layers

Page 28: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Przed Layers ma być V

Before Layers must be V

Tworzymy warstwę

Create a layer

Page 29: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

W Layer 1 ma nie być kłódki, jeżeli jest to usuń x znajdujące się po Lock

In Layer 1 should not to be a lock, if it is clear x that is located after Lock

Można utworzyć więcej warstw i malować na każdej oddzielnie, można wytrzeć elementy warstwy nie naruszając elementów innych

warstw, można zamknąć warstwę lub ją usunąć

You can create more layers and paint on each separately, you can wipe the elements of a layer

Page 30: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

without affecting other layers of elements, you can close the layer or to remove

Programowanie - nakładanie obrazów A i B, przezroczystość alfa -udział od 0 do 1Nakładanie obrazów A i B, przezroczystość alfa (udział od 0 do 1):bAB:=(udziałA*bA+(1-udziałA)*bB);gAB:=(udziałA*gA+(1-udziałA)*gB);rAB:=(udziałA*rA+(1-udziałA)*rB); Procedure TForm1.Przezroczystosc(colorA,colorB:TColor; var colorAB:TColor;udzialA:real);var rA,gA,bA,rB,gB,bB:byte;rAB,gAB,bAB:integer;begin

GetRGBValue(colorA,rA,gA,bA);GetRGBValue(colorB,rB,gB,bB);bAB:=trunc((udzialA*bA+(1-udzialA)*bB));gAB:=trunc((udzialA*gA+(1-udzialA)*gB));rAB:=trunc((udzialA*rA+(1-udzialA)*rB));Range0_255(bAB);Range0_255(gAB);Range0_255(rAB);colorAB:=RGB(LO(rAB),LO(gAB),LO(bAB));

end;  

Programming - overlapping images of A and B, alpha transparency, participation from 0 to 1

Page 31: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Rozdzielczość –resolution Określa rozmiar najmniejszego widzialnego przedmiotu,

wyrażana w ppi (pixels per inch) dla obrazka oraz dpi (dots per inch) dla ekranu (lub ilości pikseli w szerokości i wysokości) Zwiększenie rozdzielczości ekranu powyżej rozdzielczości

obrazka nie poprawi jego jakości.Panel Sterowania –Ekran lub (Komputer Przenośny) Vista:

Personalizacja – Ustawienie Ekranu

ResolutionSpecifies the size of the smallest visible object, expressed in ppi (pixels per inch) for image and dpi (dots per inch) for the screen

(or the number of pixels in width and height). The increase screen resolution above image resolution does not improve its

quality.Control Panel-Display or (Portable Computer) Vista

Customization - Setting Screen

 

Monitory i karty graficznehttp://computer.howstuffworks.com/monitor.htmMonitors and graphics cards

   RGB:   additive primaries;    przestrzeń kolorów - color space

      

Page 32: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

 

Przenoszenie obrazka z ekranu do edytora graficznego

Taking image from the screen to the graphic editor

PrintScreen – w dowolnym programie in any programPhotoshop lub or Corel PhotoPaint Edycja -WklejEdit – Paste

Narzędziem maska prostokątna zaznaczamy obrazekObrazek – Wykadruj- Do maskiPlik – Zapisz...

Rectangular mask tool to select the picturePicture - Frame-Up to maskFile - Save ..

Programowanie – histogramHistogramZliczamy ilość pixeli o tej samej wartości oddzielnie R, G, B np.:Procedure TForm5.Histogram;Var re,gr,bl:byte; kolor1: TColor; xx,yy:string; x,y,i,il:integer;BEGINnew(ar);new(ag);new(ab);For i:=1 to 256 dobeginar^[i,1]:=i-1; ar^[i,2]:=0;ag^[i,1]:=i-1; ag^[i,2]:=0;ab^[i,1]:=i-1; ab^[i,2]:=0;end;With canvas doFor x:=0 to Screen .Width doFor y:=0 to Screen.Height dobegin

Page 33: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

kolor1:=Pixels[x,y];GetRGBValue(kolor1,re,gr,bl);ar^[re+1,2]:=ar^[re+1,2]+1;ag^[gr+1,2]:=ag^[gr+1,2]+1;ab^[bl+1,2]:=ab^[bl+1,2]+1;end;  GraphDriver:=Detect;InitGraph('');InitGraphic; ClearDevice; Linestyle(ps_Solid); il:=256;DifferenceX:=25;Wykres(ar,il,il,0,2,0,rzedna,odcieta,0.04,0.0,0.51,0.47);VarSubsc(0.26,0.47,0,'Bit','');VarSubsc(0.04,0.2,1,'Red','');  DifferenceX:=25;Wykres(ag,il,il,0,2,0,rzedna,odcieta,0.53,0.0,1.0,0.47);VarSubsc(0.75,0.47,0,'Bit','');VarSubsc(0.52,0.2,1,'Green','');  DifferenceX:=25;Wykres(ab,il,il,0,2,0,rzedna,odcieta,0.04,0.5,0.51,0.97);VarSubsc(0.25,0.97,0,'Bit','');VarSubsc(0.04,0.7,1,'Blue','');CloseGraph; dispose(ar);dispose(ag);dispose(ab);END; 

Programming - histogram

Zmiana zakresu lub jego przesunięcie przy zachowaniu wzajemnych relacji pomiędzy kolorami i intensywnością zachowuje podobieństwo (matematyczne) obrazu do oryginału. Change in scope or its displacement while maintaining the relationship between colors and retains the intensity of similarity (mathematics) to the original image.

Page 34: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Enhence- Adjust lightening - Levels

Przesuwamy suwaki i obserwujemy zmiany na histogramie (z prawej strony)

Move the sliders and watch the changes on the histogram (right)

Naciskamy kolejne pipety i pobieramy z ekranu kolor czarny, szary i biały, obserwujemy zmiany histogramu.

Pushing ono by one pipette and taking from screen the colors black, gray and white, we observe changes in the histogram.

Corel Foto Paint Select EditionObrazek – Dopasuj – Równoważenie poziomówImage - Adjust - Balancing the levels

Zakres RGB (0..255) zastąpiono zakresem (2..152)

RGB range (0 to .255) was replaced by the scope (2 .152)

Zakres RGB (0..255) zastąpiono zakresem (148..255)

RGB range (0 to .255) was replaced by the scope (148th .255)

Podobnie możemy zmienić dzień na zmrok

Similarly, we can change the day at dusk

Page 35: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Enhance – Adjust Color – Adjust Color Curves

Corel Foto Point Select EditionObrazek – Dopasuj – Krzywa tonalna

Image - Adjust - Tone Curve

Zakres R(0..255) został zastąpiony przez zakres R(0..151).

Range (0 to .255) was replaced by the range (0 to .151).

Wartości pośrednie zmniejszone są liniowo. Można zmienić je nieliniowo.Intermediate values are linearly reduced. You can change them nonlinearly

Corel Foto Point Select EditionObrazek – Dopasuj – Gamma

Gamma – nieliniowa zależność pomiędzy napięciem i luminescencją. Zmiana gamma umożliwia regulację kontrastu i jaskrawości. Pozwala skorygować średnie tony nie naruszając skrajnych (jasnych i ciemnych).

Gamma - a non-linear relationship between voltage and luminescence. Changing the gamma adjusts the contrast and brightness. Corrects the middle tones without affecting the extreme (light and dark)

 Przytrzymujemy mysz na kolorze, ukazuje się jego nazwa

(swatch – próbka)

Page 36: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Hold down the mouse on the color's name appears (swatch - a sample)

Wartości RGB znajdujemy wybierając z palety i aktywując

RGB values we are choosing from the palette and activating

 Zwiększanie RGB rozjaśnia kolory, zmniejszanie RGB

powoduje ich ciemnienie

Increasing the RGB lightens colors, reducing RGB will cause their darkening

Color=RGB(R, G, B)

black=RGB(0,0,0);                white=RGB(255,255,255);Red=RGB( 255, 0, 0)

Page 37: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Green =RGB(0, 255, 0)Blue=RGB(0, 0, 255)

cyan:=RGB(0,255,255);magenta:=RGB(255,0,255); violet

yellow:=RGB(255,255,0);

coral:=RGB(200,100,100);maroon:=RGB(128,0,0);

darkBrown:=RGB(102,51,51);orange:=RGB(255,102,0);brown:=RGB(153,102,51);

navyBlue:=RGB(0,51,153); (granatowy)

pink:=RGB(255,153,204);Pink(tint)=RGB(255, 128, 128)ecru:= RGB(242, 228, 209) (ekri)

Zestawienie nazw kolorówZestawienie nazw kolorówhttp://pl.wikipedia.org/wiki/Lista_kolor%C3%B3w

http://www.perbang.dk/rgb/index.php?q%5Brgb%5D=F2E4D1

 

 Programowanie - bitowe działania na kolorach Programming - bit operations on colorsInformacja o kolorze jest 24 bitowa.Łączenie byte’ów w jedną 24 bitową liczbęInformation about color is a 24-bit number.Combining bytes in a 24 bit number

L= (R or (G shl 8) or (B shl 16)) 

Page 38: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Bit 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 11111111Potęga 23 22 21 20 19 18 17 16 15 14

13

12

11

10 9 8 76543210

2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 22222222

2 do potę

gi

838860

8

419430

4

209715

2

104857

6

524288

262144

131072

6553

6

3276

8

1638

4

8192

4096

2048

1024

512

256

128

64

32

168421

L= suma

B= L shr 16 111111117654321022222222128

64

32

168421

G=(L-(B shl 16)) shr 8; 11111111

7654321022222222128

64

32

168421

R=L-(B shl 16)-(G shl 8) 111111117654321022222222128

64

32

168421

 Powrót do odrębnych byte’ówBack to separate bytes

B=L shr 16;G=(L-(B shl 16)) shr 8;

Page 39: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

R=L-(B shl 16)-(G shl 8); 

Procedure TForm1.GetRGBValue(kolor:TColor;var R,G,B:byte);var L:LongInt;RR,GG,BB:integer;beginL := ColorToRGB(kolor);BB:=L shr 16;GG:=(L-(BB shl 16)) shr 8;RR:=L-(BB shl 16)-(GG shl 8);Range0_255(RR);Range0_255(GG);Range0_255(BB);R := LO(RR); G := LO(GG); B := LO(BB);end;  Procedure TForm1.Range0_255(var a:integer);beginif a>255 then a:=255;if a<0 then a:=0;end;    Wartość pixela mnoży przez S i dodaje do niej P:Pixel value is multiplied by the S and P added to it:

Procedure TForm1.RGBMultPlus(SR,SG,SB,PR,PG,PB:real);var RRR,GGG,BBB:real;RR,GG,BB: byte;RR1,GG1,BB1,x,y:integer;kolor,kolor1: TColor;beginWith canvas doFor x:=0 to Screen.Width doFor y:=0 to Screen.Height do

beginkolor1:=Pixels[x,y];GetRGBValue(kolor1,RR,GG,BB);RRR:=RR*SR+PR;

Page 40: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

GGG:=GG*SG+PG;BBB:=BB*SB+PB;RR1:=Trunc(RRR);GG1:=Trunc(GGG);BB1:=Trunc(BBB);Range0_255(RR1);Range0_255(GG1);Range0_255(BB1);kolor:=RGB(LO(RR1),LO(GG1),LO(BB1));Pixels[x,y]:=kolor;end;

end;   //Przyciemnianie dimmingRGBMultPlus(0.5,0.5,0.5,0,0,0); //Rozjasnianie brighteningRGBMultPlus(2,2,2,0,0,0); //Przyciemnianie, druga możliwość//Dimming, second possibilityRGBMultPlus(1,1,1,-50,-50,-50); //Rozjaśnianie, druga możliwość//Brightening, second possibilityRGBMultPlus(1,1,1,50,50,50); //Negatyw inversion//R =255-R; G :=255-G; B :=255-B;RGBMultPlus(-1,-1,-1,255,255,255); 

  

DRUKARKA ATRAMENTOWAInkjet Printer

Page 41: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

(Światło odbite)(Reflected light)

Błękitny Purpurowy Żółty CzarnyCyan [`sajan] C, Magenta [ma`dżenta] M , Yellow Y, Black K

inks

 CMY(K) [simajk]: subtractive primaries;

 przestrzeń kolorówcolor space

Kolory podstawowe CMY: primary colors CMY

C=RGB(0,255,255);   M=RGB(255,0,255);   Y=RGB(255,255,0); White=RGB(255,255,255); Black=(0.0.0)

Przekształcanie z przestrzeni

Transforming the spaceZakres - Range

CMY 0.0..1.0, RGB 0..255RGB to CMY

C = 1 - ( R / 255 )M = 1 - ( G / 255 )Y = 1 - ( B / 255 )

CMY to RGBR = ( 1 - C ) * 255

Page 42: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

G = ( 1 - M ) * 255B = ( 1 - Y ) * 255

 CMY 0..255, RGB 0..255

C = 255 – R;  M =255 – G; Y =255 – B

   

Photoshop

 Photoshop: Wybieramy przestrzeń (HSB, RGB, Lab, CMYK) i równocześnie płaszczyznę w przestrzeni. Na rysunku dla R

(czarna kropka) widoczna płaszczyzna BG; składnik R ustawiamy suwakiem. Kolor punktu możemy widzieć w

dowolnej płaszczyźnie.

Photoshop: Select area (HSB, RGB, Lab, CMYK) and at the same plane in space. The figure for R (black dot) plane visible

BG, R component set slider. Color of a point can be seen at any plane.

 Programowanie C++ modele kolorówProgramming C + + models of colorhttp://paulbourke.net/texture_colour/convert/

DrukarkiPrinters

Drukarki atramentoweInkjet printers.

Bubble Jet Printers

Page 43: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Thermal bubble – ( Canon and Hewlett Packard).

Rezystor podgrzewa tusz, tworzy się bańka pary, która rozszerzając się wypycha tusz przez dysze na papier. Gdy bańka zniknie tworzy się próżnia, która zasysa tusz z kałamarza. Typowa głowica zawiera 300 lub 600 maleńkich dysz, które działają równocześnie.Resistor heats the ink, creating a bubble of vapor which expand and pushes the ink through nozzles onto the paper. When the bubble disappears creates a vacuum that sucks the ink from the ink bottle. A typical head contains 300 or 600 tiny nozzles that operate simultaneously.

View of the nozzles on a thermal bubble inkjet print headEpson’s Piezoelectric Printer TechnologyPiezoelectric –( Patented by Epson ) .

Piezo kryształ umieszcony jest z tyłu za zbiornikiem tuszu każdej z dysz. Kryształ otrzymuje mały ładunek elektryczny, który wzbudza jego drgania. Ruch w jedną stronę powoduje wypychanie tuszu, w przeciwną zasysanie.Piezo crystal is placed behind the ink reservoir of each nozzle. The crystal receives a small electrical charge, which raises its vibrations. Movement in one direction causes the ink pushing in the opposite aspiration.

Wpływ jakości papieruEffect of paper quality

Page 44: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Drukarki laseroweLaser printersKuleczki pokryte cząstkami toneraThe beads coated with toner particles

Bęben otrzymuje ładunek elektrostatyczny od corona wire. Elektrostatyczny obraz utworzony jest na bębnie przez częściowe usunięcie ładunku laserem. Toner zawiera elektrycznie naładowany proszek składający się z pigmentu i plastiku (później plastik stopi się pod wpływem ciepła). Ujemnie naładowane kuleczki przyciągają dodatnie cząstki tonera. Są one rozprowadzone na powierzchni bębna. Elektrostatyczny obraz na powierzchni bębna posiada większy ładunek ujemny niż kuleczki i odbiera im toner. Papier otrzymuje większy ładunek (corona wire) niż bęben i odbiera z niego toner. Papier przechodzi pomiędzy parą podgrzanych walców (fuser), które topią (plastik) toner przyklejając go do papieru. Kolorowa drukarka wykonuje te czynności 4-krotnie: CMYK (cyan, magenta, yellow, black).The drum receives an electrostatic charge from the corona wire. An electrostatic image is formed on the drum by the partial removal of the charge by laser. Toner contains electrically charged powder consisting of pigment and plastic (later plastic will melt when exposed to heat). Negatively charged microspheres attract positive toner particles. They are distributed on the surface of the drum. Electrostatic image on the drum surface has a greater negative charge than the balls, and take from them the toner. This paper has greater electric charge (corona wire) than the drum and takes the toner from the drum. Paper passes between a pair of heated rollers (fuser), which melt (plastic) toner sticking it to the paper. Color printer does this 4 times: CMYK (cyan, magenta, yellow, black).

Page 45: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Drukarki termiczne - elementy grzejne topią barwnik i przekazują go z taśmy na papierThermal printers - heating elements melt pigment and transfer it from the tape on paper

 Sumowanie kolorów według percepcji człowieka

(człowiek, monitor, drukarka)

Summation of colore according to human perception

(man, monitor, printer)

Color triangle

http://en.wikipedia.org/wiki/Color_temperature

W punktach reprezentujących sumowane barwy umieszczamy wektory prostopadłe do płaszczyzny barw, mające długość proporcjonalną do ciężaru barwy. Miejsce położenia wypadkowej wskazuje barwę otrzymaną, długość wypadkowej ciężar barwy.

The points representing the summed, the vectors of color is placed perpendicular to the plane of color, having a length proportional to the weight of the color. The location of the resultant indicates color obtained, the length of the resultant burden of color.    

 Widok - Korekcja kolorów - Dokładna - Symulacja drukarki

– Sygnalizuj kolory niedrukowalne

Page 46: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

View-Color Correction - Exact - Printer Simulation - Signal unprintable colors

Kolory niedrukowalne nie będą zastąpione kolorem zielonym ale najbliższym  rzeczywistego

Unprintable colors will not be replaced with a green color, but soon the real

Obraz rzeczywisty:Real image:

 

 Z powyższych ilustracji wynikają następujące wnioski:1. Ten sam efekt dla oka mogą dać kombinacje różnych składników widma - metamerism. 2. Nie wszystkie kolory widziane dla człowieka mogą być pokazane na monitorze, 3. Nie wszystkie kolory widoczne w na monitorze (RGB) będą drukowane (CMYK). From the above illustration, the following conclusions can be drawn:First: The same effect for the eye may give a combination of various components of the spectrum - metamerism.Second: Not all colors visible to humans can be displayed on the monitor,Third: Not all colors visible on the monitor (RGB) will be printed (CMYK).

Modele oszczędzające pamięć, uwzględniające fakt, że wrażliwość oka jest większa na luminescencje niż na

Page 47: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

składowe chromatyczne, co pozwala na zmieszenie ilości bitów

Memory-saving models, taking into account the fact. that the eye is more sensitive to luminance than to chromatic components, which allows the minimizing amount of bits

Modele kolorówColor models

Model Lab

L -luminescencja luminescence (a, b) – składowe kolorów color components

Model kolorów niezależny od urządzeniaModel of device-independent color

Na rysunku widoczna płaszczyzna a-b dla stałego L, ustawianego suwakiem.

The figure shown for the permanent ab plane L, an adjustable slider.  

MODELE TELEWIZYJNE

Page 48: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

YIQ – telewizyjny model kolorów (US)

Y = luminance (not yellow); (I, Q)=chromaticity components.Na rysunku widoczna płaszczyzna I-Q dla stałego Y,

ustawianego suwakiem. 

Zależności transformacyjne pomiędzy przestrzeniami YIQ oraz RGB

Y= 0.299*R+0.587*G+0.114*BI= 0.596*R-0.275*G-0.321*BQ=0.212*R-0.528*G+0.311*B

R= 1.003*Y+0.955*I+0.618*QG=0.997*Y-0.271*I-0.645*QB=1.008*Y-1.110*I+1.700*Q

 YUV model (16bits) TV (Europa); 

Y = luminance (not yellow); U (CB), V (CR)=chromaticity components.

Zależności transformacyjne pomiędzy przestrzeniami YUV oraz RGB

 Y= 0.299*R + 0.587*G + 0.114*BU=B - YV=R – Y

R=V+YB=U+YG=(Y-0.299*R-0.114*B)/0.587

 

Page 49: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

  RGB     YUV

   Y = 0.299R + 0.587G + 0.114B   U = 0.492 (B-Y)   V = 0.877 (R-Y)

 Y = 0.299R + 0.587G + 0.114BU = − 0.147R − 0.289G + 0.436BV = 0.615R − 0.515G − 0.100B

 YUV    RGB

R = Y − 0.000039457070707U + 1.139827967171717VG = Y − 0.394610164141414U − 0.580500315656566VB = Y + 2.031999684343434U − 0.000481376262626V

   

Model telewizyjny pozwala na zmniejszenie ilości bitów (Y 8bits, U 4bits, V 4bits) - wrażliwość oka na składowe chromatyczne

jest mniejsza niż na luminescencjeModel TV reduces the amount of bits (Y 8bits, 4bits U, V

4bits) - sensitivity of the eye to the chromatic components is less than luminescences

  

YPbPr =analogowa wersja YCbCr 

R', G', B' in [0; 1],   Y' in [0; 1],   Pb in [-0.5; 0.5],  Pr in [-0.5; 0.5]

 Y' =  Kr * R'        + (1 - Kr - Kb) * G' + Kb * B'

Pb = 0.5 * (B' - Y') / (1 - Kb)Pr = 0.5 * (R' - Y') / (1 - Kr)

Page 50: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Kb = 0.114Kr = 0.299

 Y' =     + 0.299    * R' + 0.587    * G' + 0.114    * B'

Pb =     - 0.168736 * R' - 0.331264 * G' + 0.5      * B'Pr =     + 0.5      * R' - 0.418688 * G' - 0.081312 * B'

 

Standard 4-pin S-Video cable connector, with each signal pin paired with its own ground pin.S-Video (Separate video) inaczej zwane Y/C   (Y = luminance C=chromaticity); obraz wideo przekazywane jest 

Zależności transformacyjne pomiędzy przestrzeniami HSV oraz RGB

Zakresy: H(0..360), S(0..1) nasycenie, V(0..1) jasnośćDla danych RGB znajdujemy V, S, H:

V=Max(R,G,B)/255;D=(Max(R,G,B)-Min(R,G,B))/255;

S=D/VHue zależnie od tego, który ze składników RGB ma największą

wartość: 

Max(R,G,B) HR 60(G-B)/DG 60(2+(B-R)/D)B 60(4+(R-G)/

D) 

Dla danych HSV znajdujemy (R,G,B) w kolumnach zależnie od wartości I=H/60 w odpowiednim wierszu:

I=trunc(H/60);F=H-I; P=V(1-S); Q=V(1-SF); T=V(1-S(1-F));I R/255 G/255 B/2550 V T P

Page 51: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

1 Q V P2 P V T3 P Q V4 T P V5 V P Q6 V P Q

  

Transformation between HSV and RGB spaces

Programowanie C++ modele kolorówProgramming C + + models of colorhttp://paulbourke.net/texture_colour/convert/

 Odbiornik TV set: Brightness, Contrast, Color Saturation

Page 52: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Przestrzenie percepcji człowieka: HLS, HSV, HSB

Human perception spaces: HLS, HSV, HSB

Umożliwia malowanie światłem

Allows you to paint with light 

HLS - Hue, Lightness, SaturationHSV - Hue, Saturation, Value;

HSB bazujący na kole, B-BrightnessHSB based on the wheel

Page 53: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Na rysunku płaszczyzna H-S dla stałego B, ustawianego suwakiem.

Kąt pomiędzy S i promieniem wodzącym oznacza H

In figure H-S plane for a constant B - adjustable by slider.

The angle between S and the radius is H wodzącym

Transformujemy RGB do HSV, dokonujemy zmian, które są teraz intuicyjne dla człowieka, a następnie wracamy do

przestrzeni RGB monitoraTransform RGB to HSV, then we make the changes that are now intuitive to man, then we go back to

the RGB monitor

 RGB HSL HSV

(1, 0, 0) (0°, 1, 0.5) (0°, 1, 1)(0.5, 1, 0.5) (120°, 1, 0.75) (120°, 0.5, 1)(0, 0, 0.5) (240°, 1, 0.25) (240°, 1, 0.5)

 Filter – Render – Lightening Effects

Page 54: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

HSV przykladHSV example

 

Corel 8: HLS, HSBW przestrzeni HLS widoczna płaszczyzna LS. Suwak pozwala ustawić H.In the space HLS visible is LS plane. The slider lets you set H.

W czterech rogach dostępne 4 palety. Kolory niedrukowalne zaznaczone drogowym znakiem zakazu.In the four corners available are 4 pallets. Unprintable colors are marked by road sign ban.

 Słownictwo:

Vocabulary:  

Hue – barwa- podstawowe długości fali koloru (the primary wavelengths of a color)

Saturation – nasycenie - czystość koloru (the purity or vividness of a color, how far color is from a gray of equal intensity)

Lightness, brightness, Value – ilość światła- jasność, jaskrawość, wartość, percepcja luminescencji przez człowieka

Hue - the basic color wavelength (the primary wavelengths of a color)

Saturation - color purity (the purity or vividness of a color, how color is far from a gray of equal intensity)

Lightness, brightness, value - the amount of light, human perception luminescence [ `luminesens]

Lightness–od czerni do bieli poprzez kolor (ciemny -jasny )

Page 55: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Lightness-from black to white through the color (dark-bright)Saturation – nasycenie -od maksimum koloru do szarościSaturation - Saturation-the maximum color to gray

Shades – odcienie -mieszanina koloru & czerniShades - shades of color - mixture & blackTints – odcienie- mieszanina koloru & bieliTints - shades of a color - combination & whiteTones –(odcienie - tonować) mieszanina koloru i jego dopełnienia lub szarościTones - (shades - tone down) the mixture of color and its complement to gray

 

Enhance – Adjust Color- Color Variations

Page 56: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Intensity – natężenie energii promieniowania na jednostkę powierzchni (the rate at which radiant energy is transferred per

unit area)Luminance – moc promieniowania ważona przez funkcję spektralnej wrażliwości ludzkiego wzroku (a radiant power weighted by a spectral sensitivity function characteristic of human vision)Intensity - the intensity of energy radiation per unit area (the rate at which radiant energy is transferred per unit)Luminance – power of radiation weighted by the luminosity function of the spectral sensitivity of human vision (a radiant power weighted by a spectral sensitivity function characteristic of human vision)

Kolory twarzyFace colour

Enhance – Adjust Color- Adjust color to skin tonePipetą w kolor na twarzy – przesuwamy suwakiPipette in color on the face - move the sliders

Tan- opalenizna, blush – rumieniec

Enhence- Adjust Color – Replace color -

Pipetą zaznaczamy który kolor i suwakami ustawiamy nowy

Using a pipette select which color and use sliders to set new

Page 57: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Photoshop: File – Save as….. wybieramy formatFormaty plików bez utraty danych:

BMP (bitmap) 24-bit RGB, Zawiera w sobie prostą kompresję bezstratną,

informację o użytych kolorach RGB.

Photoshop: File - Save as ... .. choose the formatFile formats without losing any data:

BMP (bitmap) 24-bit RGBContains a simple lossless compression, information about the used colors RGB.

TIFF (Tagged image file format), TIFF umożliwia stosowanie kompresji bezstratnej.Pliki zapisane w tym formacie mają rozszerzenie ".tif".Pozwala na zapisywanie obrazów stworzonych w trybie kreskowym, skali szarości oraz w wielu trybach koloru i wielu głębiach bitowych koloru. Przechowuje ścieżki i kanały alfa, profile koloru, komentarze tekstowe. Używany jest obecnie w DTP (Desktop Publishing – publikowanie zza biurka) jako jeden z podstawowych formatów w tej branży, grafice trójwymiarowej (pomocniczo), w obrazowaniu medycznym itd. Umożliwia także zapisywanie dokumentów wielostronicowych.Opracowany do drukowania postscriptowego.

TIFF allows for lossless compression.Files saved in this format have the extension. "Tif".It allows you to save images created in the bar mode, grayscale and color in various modes and multiple-bit color depths.

Page 58: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Holds the path and alpha channels, color profiles, text comments.Is currently used in DTP (Desktop Publishing - publishing from the desk) as one of the main formats in the industry, three-dimensional graphics (the alternative), in medical imaging, etc. It also allows you to save multi-page documents.Designed for PostScript printing.

PNG   24 i 32bity (Portable Network Graphics) format stosowany dla WWW bez animacji.

Najpierw ukazuje się mała rozdzielczość, później się poprawia.

Obsługuje stopniowaną przezroczystość (tzw. kanał alfa) oraz 24-bitową głębię kolorów.

Dzięki temu można zapisać bezstratnie dowolne grafiki RGB (a nawet RGBA, czyli RGB+Alfa).

PNG 24 and 32 bits (Portable Network Graphics) format used for the Web without animation.

First published in low resolution, then improves.It supports a graduated transparency (the alpha

channel) and 24-bit color depth. This allows you to save any lossless RGB graphics (and

even RGBA or RGB + alpha).

Inne formaty:PS  (PostScript) stosowany głównie do grafiki

wektorowejPostScript – uniwersalny język opisu strony opracowany

przez firmę Adobe Systems, będący obecnie standardem w zastosowaniach poligraficznych.

Page 59: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Other formats:PS (PostScript), used mainly to vector graphics

PostScript - a universal page description language developed by Adobe Systems, which is now standard in

printing applications.

EPS  (Encapsulated PostScript) –opis pojedynczej stronyEPS (Encapsulated PostScript) – format plików, będący podzbiorem języka PostScript, służący do przechowywania pojedynczych stron grafiki wektorowej w postaci umożliwiającej osadzanie ich w innych dokumentach. Użytecznym rozszerzeniem tego formatu jest format EPSI ( Encapsulated PostScript Interchange), zawierający dodatkowo informacje ułatwiające wyświetlenie szybkiego podglądu grafiki zapisanej w zasadniczej części pliku.

EPS Encapsulated PostScript -a description of a single page

EPS (Encapsulated PostScript) - a file format, which is a subset of the PostScript language, used to store individual pages in the form of vector graphics that allows embedding them in other documents. Useful extension of this format is the format EPSI (Encapsulated PostScript Interchange), which contains additional information to help you quickly preview image contained in the body of the saved file.

 Paleta kolorówColor palette

 

Page 60: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

LUT- look up table (Index). Pseudocolor  (indexed color, colormap): kolejnym liczbom przypisane są kolory, razem na

przykład 256 kolorów.

Próbki kolorów = paleta

LUT-look up table (Index). Pseudocolor (indexed color, colormap): the consecutive numbers are assigned to colors,

for example 256 colors.

Color swatches [słoczys] = palette

 

  

Format GIF (Graphics Image File),

Page 61: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

GIF (Graphics Interchange Format - www): grupuje piksele o podobnych kolorach, zastępuje 256*256*256 kolorów paletą

256 kolorów. Obraz (www) ukazuje się stopniowo

GIF (Graphics Interchange Format - www) groups pixels with similar colors, replaced by 256 * 256 * 256 color palette of

256 colors.Picture (www) shows a gradual from up to down

Photoshop: File - Save as

Można zmienić 256 na inną ilość kolorówYou can change 256 to a different number of colors

Jeżeli mało kolorów to efekt posterowyIf not enough colors then posterize effect appeare

Format BMP -Windows bitmap image file, 1-, 4-, and 8-bit color index images, BMP (bitmap) 24-bit RGB,

 Kompresja JPEG, MPEG

JPEG compression, MPEG

Kompresja plików graficznych Przykłady kompresji: (AAAAAAbbbXXXXXt =6A3b5X1t )

Page 62: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

 Przechowywanie przyrostów wartości wymaga mniejszej ilości bitów:

Kodowanie HuffmanaKorzystamy z histogramu – zastępujemy najczęściej występujące wartości (byte) najkrótszym kodem (bitami):

Dla 8-bitowej wartości 123, zamiast 8*67234 bitów mamy 2*67234.Wartości bardzo prawdopodobne (często występujące) są reprezentowane przez krótsze ciągi zer i jedynek, a mało prawdopodobne (rzadko występujące) - przez dłuższe. JPEG (Joint Photographic Experts Group) oraz MPEG (motion video) – z utratą mało istotnych danych. Rozmiar około 25-krotnie zmniejszony. (MP3 –dźwięk –utrata nie słyszalnych dżwięków

 

       JPEG  Joint Photographic Experts Group

1. Transformujemy z przestrzeni RGB (8+8+8bity) do przestrzeni YUV (YCbCr) (8+4+4bity).    Oko jest mniej wrażliwe na zmniejszenie dokładności koloru niż luminescencji2. Zmniejszamy ilość danych przez zastąpienie grup pikseli ich średnimi wartościami.    Alternatywnie można zapamiętać wartość co któregoś piksela (np. co drugiego). Wartości pośrednie można później odzyskać przez interpolację i ekstrapolację.

Page 63: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

3. Zastępujemy liczby wzorem (funkcją). Stosujemy sumę kosinusów (dyskretną transformatą Fouriera ograniczoną do kosinusów DCT).

       Obliczamy współczynniki a.4. Odrzucamy współczynniki o małych wartościach np. jeżeli a1=3,  a5=0.003 to a5 można pominąć5. Ograniczmy ilość miejsc znaczących współczynników np.  a=2.34567892 zastępujemy a=2.34.

GIF (Graphics Interchange Format - www): grupuje piksele o podobnych kolorach, zastępuje 256*256*256 kolorów paletą 256 kolorów. Obraz (www) ukazuje się stopniowo linia po linii

Page 64: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

od góry do dołu

Motion JPEG (M-JPEG) -video codec (koduje + dekoduje) każde obraz oddzielnie skompresowanym w JPEG.

Pakowanie JPEG - programC++Builder

//zamiana formatu bmp na jpg i odwrotnie//Kod do wczytywania pliku bmp, zamiany go na jpg z dowolną kompresją:int jakosc = 100; // dowolna wartość od 1 (najgorsza jakość) do 100 (najlepsza jakość)//AnsiString nazwa_pliku = "plik.bmp"; // nazwa pliku bmpAnsiString nazwa_pliku ="C:\\CG\\Raj.bmp";Graphics::TBitmap *bmp0 = new Graphics::TBitmap();bmp0->LoadFromFile(nazwa_pliku);TJPEGImage *jpg0 = new TJPEGImage();try{jakosc=80;jpg0->CompressionQuality = jakosc;jpg0->Assign(bmp0);jpg0->Compress();jpg0->SaveToFile("c:/skas/obrazek.jpg");}catch (...) { }delete jpg0;

// Kod do wczytywania pliku jpg z pliku i zamiana go na bmp//AnsiString nazwa_pliku1 = "plik.jpg"; // nazwa pliku jpgAnsiString nazwa_pliku1 ="c:\\skas\\obrazek.jpg";Graphics::TBitmap *bmp1 = new Graphics::TBitmap();TJPEGImage *jpg1 = new TJPEGImage();try{

Page 65: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

jpg1->PixelFormat = jf24Bit;jpg1->Performance = jpBestQuality;jpg1->LoadFromFile(nazwa_pliku1);bmp1->Assign(jpg1);bmp1->SaveToFile("c:\\skas\\brazek2.bmp");}catch (...) { }delete jpg1;

MPEG  Moving Picture Experts GroupOgraniczoną przy pakowaniu ilość klatek zwiększamy tworząc

dodatkowe metodą interpolacji znajdując klatki pośrednie w funkcji czasu (t).Klatki filmu: INTRA (obraz rzeczywisty), PREDICTED (I+zmiana), BIDIRECTIONAL (interpolowany) Sekwencja klatek:    IBBPBBPBBPBBIBBPBBPB...

3. Klatki PREDICTED - zapamiętane są tylko te fragmenty obrazu, które uległy zmianie, pozostała część obrazu brana

jest z poprzedniej klatki I.  

MPEG-2 zmniejsza ilość danych 55 krotnie.

Page 66: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Programowanie - pakowanie JPEG

Programming - packing JPEG

Skaner I kameraScanner and Camera

 Kontrast

Obliczamy wartość średnią pikseli w danym obszarze (lokalnie). Piksele mające wartość mniejszą od wartości średniej zastępujemy jeszcze mniejszą wartością. Piksele mające wartość większą od wartości średniej zastępujemy jeszcze większą wartością. 10   20   30   40 średnia=(10+20+30+40)/4=2515  15,   35,  35

ContrastWe calculate the average value of pixels in a given area (local).Pixels having a value less than the average replace by an even smaller value.Pixels having a value greater than the average replace by even greater value.10 20 30 40mean = (10 +20 +30 +40) / 4 = 2515 15, 35, 35

Odwrotna operacja  polega na zastępowaniu pikseli wartościami średnimi kilku sąsiednich pikseli.  

Page 67: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

The reverse operation is to replace pixels mean values of several neighboring pixels.

Corel Photo Point Select EditionNakładanie na siebie obrazówEfekty – Artystyczne – Płótno

Overlay imagesEffects - Artistic - Canvas

Corel Photo Point Select EditionEfekty – Artystyczne – Płótno – Załaduj – \Corel\Draw70\

Photopnt\Canvas\linen2c.pcxPodgląd – OK.

Obrazek – obróć – w lewo 90Efekty – Artystyczne – Płótno - OK

Obrazek – obróć – w prawo 90Effects - Artistic - Canvas - Load - \ Corel \ Draw70 \ Photopnt \

Canvas \ linen2c.pcxPreview - OK.

Image - Rotate - Left 90Effects - Artistic – Canvas (linen) - OK

Image - Rotate - Right 90

Nałożenie tekstury na zdjęcie może dać ciekawe efekty

The imposition of the image texture can give interesting effects

Plik – Otwórz - ... \cnbc12.jpg

Page 68: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Efekty – Artystyczne – Płótno – Załaduj ...\www.galleryone.com\10.jpgPrzesuwamy suwakiPodglądFile - Open - ... \ cnbc12.jpgEffects - Artistic - Canvas (linen)- Load ... \ www.galleryone.com \ 10.jpgMove the slidersPreview

   

 Aliasing 

Zbyt mała ilość punktów daje błędny wykres:

Too small number of points gives the wrong chart:

Zmniejszona ilość pikseli powoduje zmianę koloru:

Reduced number of pixels will change color:

Efekt aliasinguThe effect of aliasing

Po wykonaniu antyaliasingu

After the anti-aliasing

Page 69: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

 Można stosować inne filtry obejmujące większy obszar

You can apply different filters covering a larger area  

 Maska – Select zaznaczanieMask – select marked

Feather= wtapianie=rozmycie brzegów; Anti-aliased = bez schodków

Feather = the edges blur; Anti-aliased = no stairs

Find:

Aliased Antialiased

Znaczenie ilości kolorówThe importance of many colors

Przykład: dodatkowy kolor na granicy jest średnią kolorów sąsiadujących R=(Rn-1+Rn+Rn+1)/3, podobnie G i B.

Example: additional color on the border of neighboring colors is the average R=(Rn-1+Rn+Rn+1)/3, as G and B.

Aliasing is an effect that causes different continuous signals to become indistinguishable (or aliases of one another) when

sampled.

 

Zaznaczamy magnesemSelect with the magnet

Select- Refine Edges (Feather – pióro ptasie)

Przesuwamy suwaki

Page 70: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Move the sliders

Edit – Cut – Edit PastePrzesuwamy – brzegi rozmyte, wtopione w tło

Move - fuzzy edges, embedded in the background

Zaznaczamy „schodki” i Filter – Blur – Blur more wielokrotnie

Select the "stairs" and Filter - Blur - Blur more frequently

 

Różne odległości pomiędzy punktami powodują, że obie linie będą miały inne natężenie. Unikamy tego stosując

antyaliasing.

Different distances between the points mean that the two lines will have a different intensity. We avoid this by using anti-

aliasing.

  

Warstwice kolorów

Contours of colors

Kropki nadające odcieńDots giving shade

Image – Mode – Indexed Color - Dither: Pattern / Diffusion

*

Dithering: Kropki czarnego atramentu dają ciemny kolor, kropki nie zamalowane na białym papierze rozjaśniają kolor (dyfuzja).

Page 71: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Dithering: black ink dots give the dark color, not painted dots on white paper and brighten the color (diffusion). 

Contouring – zmniejszenie ilości kolorów

Contouring - reducing the number of colors 

Dla kolorowego obrazka:For color image:

                      

True color Dithered Color substitution 

Metamerism Dwa przedmioty mają ten sam kolor przy pewnym świetle, a

różny przy innym. Jest to spowodowane różnym składem widmowym.

Two objects have the same color with some light, and different for others. This is due to different spectral

composition.

Postrzeganie koloru zależy od tła

The perception of color depends on the background 

            

Zasłaniamy dwa obrazki i określamy kolor poduszki na widoczny obrazku (żółta, zielona, żółta?).

We cover two pictures and specify the color of the pillows on the visible image (yellow, green, yellow?).

Page 72: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Czy jest jeden kolor różowy czy dwa?Is it a pink color or two?

http://en.wikipedia.org/wiki/User:EnterphraseCzy kwadraty A i B mają ten sam stopień szarości?

Tak, można to stwierdzić wycinając je i umieszczając obok siebie.

Do the squares A and B have the same degree of gray?

Yes, as can be ascertained by cutting and placing them side by side.

 

 Retusz:

Obniżenie rozdzielczości, blur unsharpen filter, despeckle, reduce noise, remove dust and scratches.

Retouching:Lowering resolution, blur, unsharpen filter, despeckle,

reduce noise, remove dust and scratches.

 Najpierw z Alt w pobliżu kropki, później bez Alt w kropkęFirst, Alt near the dots, then without the Alt key in the

dot 

Do tworzenia obrazu możemy wykorzystać bezpośrednio języki programowania

W pełnym zakresie - wykorzystując kompilatory CodeGear  C++ Builder lub Delphi.

GDI: dostęp do pikseli oraz do składników koloru dają metody: Pixels, ColorToRGB, RGB.

OpenGL: obrazy przestrzenne można tworzyć korzystając z tej biblioteki

Page 73: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

OpenGL (ang. Open Graphics Library) - specyfikacja uniwersalnego API (Application Programming Interface) do generowania grafiki. Zestaw funkcji składa się z 250 podstawowych wywołań, umożliwiających budowanie złożonych trójwymiarowych scen z podstawowych figur geometrycznych.DirectX (API) to zestaw funkcji wspomagających generowanie grafiki (dwu i trójwymiarowej), dźwięku oraz innych zadań związanych zwykle z grami i innymi aplikacjami multimedialnymi. Dawniej odrębny, obecnie nawiązuje do OpenGL

To create the image directly, we can use programming languagesTo the fullest extent - using the compilers CodeGear C + + Builder or Delphi.GDI: access to the pixels and the color components give the method: Pixels, ColorToRGB, RGB.OpenGL: spatial images can be created using this libraryOpenGL (Open Graphics Library English) - Universal specification API (Application Programming Interface) to generate the graphics. The feature set consists of 250 primary procedures, enabling the construction of complex three-dimensional scenes of the basic geometric figures.DirectX (API) is a set of support functions to generate graphics (two-and three-dimensional), sound and other tasks usually associated with games and other multimedia applications. Formerly a separate, now refers to the OpenGL

Open Graphic Library OpenGL

Page 74: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

OpenGL to system operacyjny i platforma hardware niezależnej biblioteki graficznej zaprojektowana tak aby była łatwo przenośna i szybko działała. OpenGL był opracowany przez Silicon Graphics Inc. (SGI) dla workstations działających pod X-Windows. Stał się standardem dla aplikacji grafiki 3D wysokiej jakości. Przeciwnie do Direct3D, który działa tylko na PC, Xbox I Xbox 360, OpenGL działa na wielu platformach hardware oraz systemach operacyjnych X-Windows (Linux, Irix, BSD, Solaris), Mac OS X, Microsoft Windows 95, 98, 2000, NT, XP i Vista. Stosowany jest w grach komputerowych (na przykład Nintendo DS, Game Cube, Wii, Playstation 1,2, and 3.) Podstawowe pojęcia: Device Context  DC to struktura danych, która utrzymuje bieżące ustawienia oraz route calls do odpowiednich urządzeń (device). Rendering Context  RC to struktura danych, która utrzymuje zmienne stanu OpenGL oraz stanowi także portal przez który OpenGL calls są przesyłane do urządzeń (device). Można powiedzieć, że DC oraz RC to struktury danych, które utrzymują san bieżących ustawień routes calls do właściwych urządzeń. Pixel formats to tłumaczenie pomiędzy OpenGL i Windows   Podstawowe etapy stosowania OpenGL w Windows         Uzyskanie Device Context (DC) dla rendering location                   ghDC = GetDC(hWnd);                           Ustawienie pixel format dla Device Context

Page 75: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

PIXELFORMATDESCRIPTOR          Utworzenie Rendering Context (RC) dla Device Context

ghRC = wglCreateContext(ghDC);                   wglMakeCurrent(ghDC, ghRC);

GetClientRect(hWnd, &rect);          Rysowanie korzystając z komend OpenGL          Uwolnienie rendering context I device context

wglDeleteContext(ghRC),   ReleaseDC(hWnd, ghDC); 

RzutowanieProjection

 OpenGL (ang. Open Graphics Library).

OpenGL- Biblioteka 250 procedur realizujących podstawowe elementy geometryczne w przestrzeni trójwymiarowej (obiekty geometryczne: punkty, linie, wieloboki, images itd.). Pozwala na tworzenie wirtualnego świata i animacji. 

 

Układ współrzędnychPunkty I linie#define drawOneLine(x1,y1,x2,y2)  glBegin(GL_LINES);  \   glVertex2f ((x1),(y1)); glVertex2f ((x2),(y2)); glEnd();    glLineStipple (1, 0x0101);  /*  dotted  */   drawOneLine (50.0, 125.0, 150.0, 125.0);   glLineStipple (1, 0x00FF);  /*  dashed  */   drawOneLine (150.0, 125.0, 250.0, 125.0);

Page 76: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

   glLineStipple (1, 0x1C47);  /*  dash/dot/dash  */   drawOneLine (250.0, 125.0, 350.0, 125.0);   glLineWidth (5.0);   glLineStipple (1, 0x0101);  /*  dotted  */   drawOneLine (50.0, 100.0, 150.0, 100.0);   glLineStipple (1, 0x00FF);  /*  dashed  */   drawOneLine (150.0, 100.0, 250.0, 100.0);   glLineStipple (1, 0x1C47);  /*  dash/dot/dash  */   drawOneLine (250.0, 100.0, 350.0, 100.0);  Wielobok wypełniony wzorkami://układ szesnastkowy://1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,//1,2,3,4,5,6,7,8,9, a,  b,  c,  d,  e,  f//Liczba1*16+liczba2

Bitmapped F : //od dołu do góryGLubyte LiteraF[24] = {   0xc0, 0x00, 0xc0, 0x00, 0xc0, 0x00, 0xc0, 0x00, 0xc0, 0x00,   0xff, 0x00, 0xff, 0x00, 0xc0, 0x00, 0xc0, 0x00, 0xc0, 0x00,   0xff, 0xc0, 0xff, 0xc0}; glEnable (GL_POLYGON_STIPPLE);glPolygonStipple (LiteraF);   glBegin (GL_POLYGON);   glColor4f(0.0f, 0.0f, 1.0f, 0.57f);   glVertex3f(-0.5f, -0.5f, -1.2f);   glVertex3f(0.5f, -0.5f, -1.2f);   glVertex3f(0.5f, 0.5f, -1.2f);   glVertex3f(-0.5f, 0.5f, -1.2f);   glEnd();glDisable (GL_POLYGON_STIPPLE); 

Page 77: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

FiguryInterpolacja kolorów pośrednich glBegin(GL_TRIANGLES);   glColor3f(1.0,0.0,0.0);    glVertex3f( -1, 0, 2);   glColor3f(0.0,1.0,0.0);    glVertex3f(1, 0, 2);   glColor3f(0.0,0.0,1.0);    glVertex3f(0, 1, 2); glEnd; OpenGL polygonsvoid glPolygonMode( GLenum face, GLenum mode);face: GL_FRONT, GL_BACK, GL_FRONT_AND_BACKmode:  GL_FILL, GL_POINT, GL_LINE void glCullFace(  GLenum mode   );określa czy przednia czy tylnia strona ma być rysowana: GL_FRONT, GL_BACK i GL_FRONT_AND_BACK. Domyślne GL_BACK. void glFrontFace(  GLenum mode);Orientacja front-facing wieloboku. GL_CW lub GL_CCW. Domyślnie GL_CCW.  BryłyJedna kolorowa ściana prostopadłościanu:glBegin(GL_POLYGON);     glColor3f(0.5,0.0,0.0);    glVertex3f(-0.4,-0.4,+0.4);    glVertex3f(+0.4,-0.4,+0.4);    glVertex3f(+0.4,+0.4,+0.4);    glVertex3f(-0.4,+0.4,+0.4);glEnd; KwadratykigluQuadricDrawStyle (quadObj, GLU_FILL);gluQuadricNormals (quadObj, GLU_SMOOTH);

Page 78: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

 gluSphere(), gluCylinder(), gluDisk(), or gluPartialDisk(). gluDisk(quadObj, 0.3, 0.9, 6, 12);//Skala mnozy w kerunkach x,y,z glScalef(2.0, -0.5, 1.0);//Rysuje kulę po skalowaniu - elipsoidagluSphere (quadObj, 0.5, 30, 30);gluCylinder(quadObj, 0.3, 0.0, 1.6, 15, 10);  

 glViewport( 0, 0, width, height ); aspect = (GLfloat) width / height;Standardowo obszar renderingu w OpenGL pokrywa się z wielkością okna tuż po jego inicjalizacji, a jego początek leży w lewym, dolnym narożniku okna.Początek układu współrzędnych będzie w środku obszaru renderingu.W płaszczyźnie ekranu x (-0.5,+0.5), y (-0.5,+0.5), z o obszarze renderingu jest ujemne, ograniczone płaszczyzną z przodu i z tyłu przez „projection”

Układ współrzędnych

Zrzutowanie obiektów przestrzeni na płaszczyznę ekranuDuży element odległy, zrzutowany na ekran ma małe

wymiary Transformacja ze współrzędnych urządzenia do współrzędnych oknaObszar renderowania można zmienid funkcją:

Page 79: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

void glViewport(GLint x,   GLint y,   GLsizei width,   GLsizei height );x, y -> wspłrzędne lewego dolnego rogu prostokątawidth, height ->  szerokość i wysokośćFunkcja glViewport określa liniową transformację x i y z urządzenia do okna. Niech  (xnd, ynd) są znormalizowanymi współrzędnymi urządzenia. Współrzędne okna (xw, yw) obliczane są następująco:

Macierze:Model View dotyczy przesunięć i obrotów.Projection dotyczy rzutowania na płaszczyzne: perspektyw itd

 Najpierw rodzaj macierzy globalnej, która będzie modyfikowanaglMatrixMode(GL_MODELVIEW);Musi być ona jednostkowa: glLoadIdentity();      Teraz będziemy mnożyć przez macierz przesunięcia glTranslate, obrotu glRotate, skali glScale  oraz skąd patrzymy gluLookAt(eye, center, up) Układ współrzędnych związany z ciałem będzie przesuwany, obracany, skalowany i z skąd  ciało widzimy. Zapamiętujemy naszą pozycję na stosie.       glPushMatrix();Popycha macierz leżącą na wierzchu stosu w dół (kopiuje)Rysunek zawsze powstaje w (0,0,0). 

 Przesuwamy się tam gdzie ma być rysunek

Page 80: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

       glTranslatef(0.0,0.0,-1.0);

 bracamy się wokół osi        glRotatef(45.0,0.0,0.0,1.0);      

Kolejność daje widoczną różnicę 

glScalef(2.0, -0.5, 1.0).Zmienia wymiary - wykonuje lustrzane odbicie (-)  Rysujemy …………………. Tu zostanie obiekt Wracamy do zapamiętanej pozycji,      glPopMatrix();           gluLookAt(eyex, eyey, eyez,centerx,centery,centerz,upx,upy, upz ) Skąd patrzymy: zbliżamy się i obchodzimy dookoła przedmiotu             eyex, eyey, eyez: współrzędne oka (kamery);            centerx, centery, centerz: centrum sceny;            upx, upy, upz: wektor wskazujący górę

Default Camera Position + Using gluLookAt()   Macierz jest iloczynem: MmacierzModelView =MmacierzViewing * MmacierzModeling 

Page 81: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Każdy punkt  przechodzi transformacjeP’ = [x’, y’, z’, 1]T = Mmodelview*P.P” = [x”, y”, 1]T = Mprojection*P’.

  Szczegółowe omówienie macierzy obrotu i przesunięcia Przekształcenie pozwalające obliczyć współrzędne w układzie k-1, mając współrzędne punktu w układzie k.  Dla układu obróconego wokół osi z o kąt  mamy

 Współrzędne punktu w układzie k oraz k-1

 

(3.2)

W zapisie macierzowym 

. (3.3)

Page 82: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Podobne zależności znajdujemy dla układów obróconych wokół osi x i y. Macierze dla układów obróconych względem osi odpowiednio x, y, zmają postać 

,    ,    

.(3.4)

Uwzględniając przesunięcie zależność pomiędzy współrzędnymi możemy teraz zapisać następująco 

Wektor (a,b,c) oznacza przesunięcie początków układów współrzędnych względem siebie.  Zależność  można zapisać w postaci następującego iloczynu

 

Page 83: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Macierze dla układów obróconych względem osi odpowiednio x, y, z i przesuniętych o wektor (a,b,c) zastąpimy teraz macierzami 

,   , 

   

 Równanie można teraz zapisać następująco 

Page 84: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

  

 Współrzędne punktu w układach przesuniętych początkach i obróconych względem siebie.

 Jeżeli zamiast kątów obrotu wokół osi weźmiemy pod uwagę kąty pomiędzy osiami i dodatkowo uwzględnimy przesuniecie względne układów, to zależność pomiędzy współrzędnymi punktu w obydwu układach można wyrazić następująco

 

Page 85: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

 Obrót o kąt angle w lewo przez pomnożenie bieżącej macierzy przez macierz obrotuwokół wektora łączącego punkty (0,0,0) (x,y,z)glRotate*(kąt, x, y, z) Mnożenie aktualnej macierzy przez macierz przesunięcia o wektor (x,y,z)glTranslatef(a,b,c); //Macierz przesunięcia//1,0,0,a//0,1,0,b//0,0,1,c//0,0,0,1  Skala glScale*(x, y, z) – przemnożenie macierzy przez macierz diagonalną

Page 86: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

   PrzykładNajpierw podprogramy realizujące elementy: Rysuj_Kolo() Rysuj_srube()  Rysuj_Kolo i Sruby(){   int i;   Rysuj_Kolo();  //rysujemy koło tam gdzie jesteśmy   for(i=0;i<5;i++){      glPushMatrix(); // zapamiętujemy pozycję środka koła         glRotatef(72.0*i,0.0,0.0,1.0); //obracamy się w środku koła o kolejne 72 stopnie         glTranslatef(3.0,0.0,0.0); //przesuwamy się wzdłuż promienia o 3         Rysuj_srube();  //rysujemy śrubę      glPopMatrix(); //wracamy do środka koła}} 

Page 87: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//Teraz_mozemy_narysowac_samochod(){   RysujKaroserie ();    glPushMatrix();// zapamiętujemy obecną pozycję   glTranslatef(40,0,30);   //przesuwamy sie w miejsce pierwszego koła i rysujemy   Rysuj_Kolo_Sruby()   glPopMatrix(); // wracamy      glPushMatrix();// zapamiętujemy obecną pozycję   glTranslatef(40,0,-30);   // przesuwamy sie w miejsce drugiego koła i rysujemy   Rysujemy drugie koło   Rysuj_Kolo i Sruby()   glPopMatrix();// wracamy   ...                    } Rzutowanie przestrzeń 3D na płaszczyznę 2DglMatrixMode(GL_PROJECTION);glLoadIdentity();  

 Rzut prostopadły

glOrtho().

 void glOrtho(  GLdouble left,  GLdouble right,  GLdouble bottom,  GLdouble top,  GLdouble zNear,  GLdouble zFar);

Page 88: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

 Orthographic ProjectionThe call glOrtho(l, r, b, t, n, f ) generates R, where

R is defined as long as l  r, t  b, and n  f. 

   

Rzut perspektywa Każdy punkt obrazu charakteryzują trzy współrzędne X,Y,Z

 

  

Aby uzyskać takie wrażenie musimy przeliczyć współrzędne x i y na współrzędne na ekranie x1 i  y1 

Page 89: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

   

glFrustum(l, r, b, t, n, f)

       

Frustum = stożek lub ostrosłup ścięty 

GL_PROJECTION : glFrustum(),glFrustum(-width, width, -height, height, front, back);

Page 90: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

  

glMatrixMode(GL_PROJECTION);  glFrustum(-1.0,1.0,-1.0,1.0,2.0,37.0);

Tutaj, -1, 1, -1, 1 definiują rozmiary wirtualnego ekranu w kolejności lewy, prawy, dolny, górny; 2 definiuje odległość oka od ekranu, 37 definiuje daleką obcinającą płaszczyznę. Wszystko przed bliską albo za daleką obcinającą płaszczyzną jest niewidoczne. 

gluPerspective()

gluPerspective(fov, ratio, nearDist, farDist);     

gluLookAt(px,py,pz, lx,ly,lz, ux,uy,uz)Wierzchołek piramidy określa pozycja kamery (px,py,pz). View ray może być obliczony with direction d = l - p, gdzie l = (lx,ly,lz) i origin p = (px,py,pz). Płaszczyzny near i far są prostopadłe do view ray I znajdują sie w odległościach nearDist  i farDist.Prostokatne granice view frustum tych płaszczyzn, near i far, mają wymiary, które są funkcją odległości i fov (vertical field of view) oraz ratio (ratio between the horizontal and vertical fields of view).

 

Powierzchnie widoczne to te których normalne tworzą z kierunkiem widzenia kąt < 90 stopni.

 

Page 91: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Odrzucenie powierzchni zasłoniętych, a także będących poza obszarem dokonujemy przez porównanie i w kierunku prostopadłym do ekranu (depth).

 

 Odrzucenie elementów, które nie znajdują się w obszarze

widzenia Z- depth.  

//Analiza głębokości DEPTH i w ten sposób usuwanie (Clear) niewidocznych powierzchniglClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

  

 void glDepthRange(GLclampd near, GLclampd far); //Głębokość          glClearDepth( 1.0 );//od 0 do 1 ustawienie bufora głębokości           glEnable(GL_DEPTH_TEST);  Funkcja  glDepthFunc określa wartość porównawczą używaną przez depth-buffer.void glDepthFunc(  GLenum func);GL_NEVER: nigdy nie przechodzi.Domyślnie: GL_LESS: przechodzi gdy z< od wartości przechowywanej.GL_LEQUAL: z<=.GL_EQUAL: =.GL_GREATER: >.GL_NOTEQUAL: !=.GL_GEQUAL: >=.GL_ALWAYS: zawsze.

Page 92: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

glDepthFunc określa funkcje uzywaną do porowniana pixeli z wartoscią obecną w depth buffer. Porównanie wykonywane jest tylko gdy glEnable(GL_DEPTH_TEST). Domyślnie jest disabled.

   

Program główny 

LONG WINAPI MainWndProc (HWND, UINT, WPARAM, LPARAM);BOOL bSetupPixelFormat(HDC);Własne procedury:GLvoid resize(GLsizei, GLsizei);GLvoid initializeGL(GLsizei, GLsizei);GLvoid drawScene(GLvoid);void polarView( GLdouble, GLdouble, GLdouble, GLdouble);   int LoadGLTextures(){……}GLvoid InitLights(){…..} //The WinMain function is the conventional name for the user-provided entry point//for a Microsoft Windows-based application.int WINAPI WinMain{wndclass.lpfnWndProc   = (WNDPROC)MainWndProc; WS_OVERLAPPEDWINDOW | WS_CLIPSIBLINGS | WS_CLIPCHILDREN, while true drawScene();} 

Page 93: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

 LONG WINAPI MainWndProc{PixForm=bSetupPixelFormat(ghDC);           initializeGL(rect.right, rect.bottom); resize(rect.right, rect.bottom);}  BOOL bSetupPixelFormat(HDC hdc){            PIXELFORMATDESCRIPTOR pfd, *ppfd;ppfd->dwFlags = PFD_DRAW_TO_WINDOW | PFD_SUPPORT_OPENGL | PFD_DOUBLEBUFFER;ppfd->iPixelType=PFD_TYPE_RGBA;      // PFD_TYPE_RGBA or PFD_TYPEINDEXpixelformat = ChoosePixelFormat(hdc, ppfd);}  // OpenGL code GLvoid resize( GLsizei width, GLsizei height ){………… }  GLvoid createObjects(){… …}  GLvoid initializeGL(GLsizei width, GLsizei height){InitLights();LoadGLTextures(); createObjects(); } 

Page 94: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

  //Ruch void polarView(GLdouble radius, GLdouble twist, GLdouble latitude,                           GLdouble longitude){glTranslated(1.0, 0.0, -radius);         glRotated(-twist, 0.0, 0.0, 1.0);         glRotated(-latitude, 1.0, 0.0, 0.0);}   GLvoid drawScene(GLvoid){polarView( radius, 0, latitude, longitude ); glPushMatrix();glCallList(CONE);glPushMatrix();glCallList(GLOBE);…glPopMatrix();glPopMatrix(); SwapBuffers(ghDC);}   

  

 

Rysowanie i malowanie w przestrzeni 3d

Page 95: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Drawing and painting in 3D space

Modelowanie 3D

Primitives –proste (podstawowe) elementy przestrzenne

   Dwa elementyVertex – wierzchołek mający 3 współrzędne (czerwone kropki)

   

Face (polygon) – układ trzech (lub więcej) punktów definiujących powierzchnię trójkąta (czerwone trójkąty); normalna określa która strona ma być traktowana jako wewnętrzna, a która jako zewnętrzna  

 Mesh  -  zestaw trójkątów definiuje powierzchnię jako siatkę  glPolygonMode(GL_FRONT_AND_BACK,GL_POINT);// punkty glPolygonMode(GL_FRONT_AND_BACK,GL_LINE);// linie, siatka glPolygonMode(GL_FRONT_AND_BACK,GL_FILL);// wypełnienie

 //glBindTexture(GL_TEXTURE_2D, texture[1]); // tekstura

Page 96: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Rendering – komputer przekształca mesh w obraz

 

void MakeSphere(void){ int i,j,n=32; double fi1,fi2,alfa,r=4; XYZ e,p,c={0,0,0}; glPushMatrix();// glPolygonMode(GL_FRONT_AND_BACK,GL_POINT);// glPolygonMode(GL_FRONT_AND_BACK,GL_LINE); glPolygonMode(GL_FRONT_AND_BACK,GL_FILL);

//glShadeModel (GL_FLAT);glShadeModel (GL_SMOOTH);

Page 97: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//glEnable(GL_COLOR_MATERIAL);

float colorSph[] = { 1.0f, 0.0f, 0.2f, 1.0f };glMaterialfv(GL_FRONT, GL_AMBIENT_AND_DIFFUSE, colorSph);glColor3f(0.9,0.9,0.0);glEnable(GL_TEXTURE_2D);glTexGenf(GL_S, GL_TEXTURE_GEN_MODE, GL_SPHERE_MAP);glTexGenf(GL_T, GL_TEXTURE_GEN_MODE, GL_SPHERE_MAP);glEnable(GL_TEXTURE_GEN_S); // Enable sphericalglEnable(GL_TEXTURE_GEN_T); // Environment Mapping// glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_BLEND);

//ToDoTexture();//glBindTexture(GL_TEXTURE_2D, TexBuf[0]);//lub Ziemia//glBindTexture(GL_TEXTURE_2D, texture[1]);

//inny środek kuli://c.x=-10;c.y=3;c.z=-10;

glColor3f(1.0,1.0,1.0); for (j=0;j<n/2;j++) {

fi1 = -PID2 + j * PI / (n/2); fi2 = -PID2 + (j + 1) * PI / (n/2);

glBegin(GL_QUAD_STRIP); for (i=0;i<=n;i++) {

alfa = i * TWOPI / n;

e.x = cos(fi1) * cos(alfa); e.y = sin(fi1); e.z = cos(fi1) * sin(alfa);

Page 98: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

p.x = c.x + r * e.x; p.y = c.y + r * e.y; p.z = c.z + r * e.z; glNormal3f(e.x,e.y,e.z); glTexCoord2f(i/(double)n,2*j/(double)n); glVertex3f(p.x,p.y,p.z);

e.x = cos(fi2) * cos(alfa); e.y = sin(fi2); e.z = cos(fi2) * sin(alfa); p.x = c.x + r * e.x; p.y = c.y + r * e.y; p.z = c.z + r * e.z;

glNormal3f(e.x,e.y,e.z); glTexCoord2f(i/(double)n,2*(j+1)/(double)n); glVertex3f(p.x,p.y,p.z);

} glEnd();

}glDisable(GL_TEXTURE_GEN_S);glDisable(GL_TEXTURE_GEN_T);glDisable(GL_TEXTURE_2D);glPopMatrix(); }

// KULA gluSphere

glNewList(KULA, GL_COMPILE);glPushMatrix ();

//The gluNewQuadric function creates a quadric object:

Page 99: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//wielobok, wielościan, przybliżenie walca, kuli itp.GLUquadricObj *quadObj;quadObj = gluNewQuadric ();

//void glTranslated(GLdouble x, GLdouble y, GLdouble z);//void glTranslatef(GLfloat x, GLfloat y, GLfloat z);//Mnożenie aktualnej macierzy przez macierz przesunięcia o wektor (x,y,z)//Jeżeli matrix mode jest GL_MODELVIEW lub GL_PROJECTION,//wszystkie objects narysowane po glTranslate są przesunięte.//Stosuj glPushMatrix i glPopMatrix aby zachowac i odtworzyć nieprzesunięty//uklad współrzędnych.//Macierz przesunięcia//1,0,0,x//0,1,0,y//0,0,1,z//0,0,0,1

glTranslatef ((GLfloat)0.0, (GLfloat)1.0*1, (GLfloat)0.2*0);// glTranslatef ((GLfloat)0.42*0, (GLfloat)1.0*0, (GLfloat)1.0*0);//void gluQuadricDrawStyle(GLUquadricObj *qobj, GLenum drawStyle);//qobj -> quadric object stworzony za pomoca gluNewQuadric.//drawStyle: GLU_FILL, GLU_LINE, GLU_SILHOUETTE rysowane są linie z wyjątkiem//granic obiektow leżących w tej samej płaszczyźnie, GLU_POINT// gluQuadricDrawStyle (quadObj, GLU_LINE);// gluQuadricDrawStyle (quadObj, GLU_SILHOUETTE);

gluQuadricDrawStyle (quadObj, GLU_FILL);

//void gluSphere(GLUquadricObj *qobj, GLdouble radius, GLint slices, GLint stacks );//Rysuje kulę mająca środek dla z=0//qobj - quadric object stworzony za pomoca gluNewQuadric.//radius - promien kuli//slices - ilośc południków

Page 100: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//stacks - ilośc równolezników// glColor4b(0.0,0.0,100.0, 1.0); // od 0 do 100

glColor3f(0, 1, 1);// glBindTexture(GL_TEXTURE_2D, texture[1]);

glTranslatef ((GLfloat)-1.0, (GLfloat)1.0*0, (GLfloat)1.0*0);

//Skala mnozy w kerunkach x,y,zglScalef(2.0, -0.5, 1.0);

//Rysuje kulę po skalowaniu - elipsoidagluSphere (quadObj, 0.5, 30, 30);

//Przywraca stan z przed ...glPopMatrix ();glEndList(); 

  

Gouraud – kolor we wnętrzu elementu zmienia się stopniowo od wierzchołka do wierzchołka

  glEnable(GL_LIGHTING);glEnable(GL_BLEND);glEnable(GL_COLOR_MATERIAL);GLfloat global_ambient[] = { 0.5f, 0.5f, 0.5f, 1.0f };glLightModelfv(GL_LIGHT_MODEL_AMBIENT, global_ambient);

//Parametry oswietleniaGLfloat light0Ambient[4]={0.0, 0.0, 0.0, 1}; //ustaw zeroGLfloat light0Diffuse[4] ={1, 1, 1, 1.0};

Page 101: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

GLfloat light0Specular[4] ={1.0, 1.0, 1.0, 1.0};GLfloat light0Position[4] ={-100.0, 100.0, 100.0, 1.0};GLfloat light0Att[] ={0.0,0.0,1.0};

// glEnable(GL_LIGHTING);glLightfv(GL_LIGHT0, GL_AMBIENT, light0Ambient);glLightfv(GL_LIGHT0, GL_DIFFUSE, light0Diffuse);//////glLightfv(GL_LIGHT0, GL_SPECULAR, light0Specular);glLightfv(GL_LIGHT0, GL_POSITION, light0Position);glLightf(GL_LIGHT0, GL_SPOT_CUTOFF, 60.0);glLightfv(GL_LIGHT0, GL_CONSTANT_ATTENUATION, light0Att);//glLightfv(GL_LIGHT0, GL_LINEAR_ATTENUATION, light0Att);//glLightfv(GL_LIGHT0, GL_QUADRATIC_ATTENUATION, light0Att);glLightf(GL_LIGHT0, GL_SPOT_EXPONENT, 0.1);glEnable(GL_LIGHT0);

//Parametry materiału// GLfloat matAmb2[4] ={1.0, 1.0, 1, 1.0};// glMaterialfv(GL_FRONT, GL_AMBIENT, matAmb2);// GLfloat matDif2[4] = {1.0, 1.0, 1, 1.0};// glMaterialfv(GL_FRONT, GL_DIFFUSE, matDif2);// GLfloat matSpec2[4] = {1.0, 1.0, 1.0, 1.0};// glMaterialfv(GL_FRONT, GL_SPECULAR, matSpec2);// GLfloat matEm2[4] = {1.0, 1.0, 1.0, 1.0};// glMaterialfv(GL_FRONT, GL_EMISSION, matEm2);// GLfloat shininess1=50;// glMaterialfv(GL_FRONT, GL_SHININESS, &shininess1);  

 

Phong rendering – jeden krok dalej. Kolor każdego piksela jest określany biorąc pod uwagę wszystkie

Page 102: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

światła oraz teksturę  - przezroczystość, wektory, anti-aliasing

    

Flat Shading – siatka przekształcona w obraz, każdy element ma jeden kolorglShadeModel (GL_FLAT);

 

Stożek jako suma trójkątówfor (j=-1;j<=1;j+=2) {

for (i=0;i<360;i+=10) {

p[0] = origin;

Page 103: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

n[0] = p[0]; n[0].y = -1;

p[1].x = cradius * cos(i*DTOR); p[1].y = j*clength; p[1].z = cradius * sin(i*DTOR);

//normalne do okręgów, ale nie do powierzchni n[1] = p[1]; n[1].y = 0;

p[2].x = cradius * cos((i+10)*DTOR); p[2].y = j*clength; p[2].z = cradius * sin((i+10)*DTOR); n[2] = p[2]; n[2].y = 0;

glBegin(GL_POLYGON); if (i % 30 == 0)

glColor3f(0.2,0.2,0.2); else

glColor3f(0.5,0.5,0.5); for (k=0;k<3;k++) {

glNormal3f(n[k].x,n[k].y,n[k].z);glVertex3f(p[k].x,p[k].y,p[k].z);

} glEnd();

} } 

gluCylinder: walec - stożek

glNewList(STOZEK, GL_COMPILE);glPushMatrix ();

//GLUquadricObj* gluNewQuadric( void ); Tworzy quadric object.

Page 104: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

quadObj = gluNewQuadric ();glTranslatef ((GLfloat)-1.0, 1.0*1, (GLfloat)0.2*0);gluQuadricDrawStyle (quadObj, GLU_FILL);

//void gluQuadricNormals(GLUquadricObj *qobj, GLenum normals);//Określa jakie Normals mają byc zstosowane:

gluQuadricNormals (quadObj, GLU_SMOOTH);//void gluCylinder(GLUquadricObj *qobj,GLdouble baseRadius, GLdouble topRadius,//GLdouble height, GLint slices, GLint stacks);//Rysuje cylinder mający poczatek dla z=0//qobj quadric object stworzony za pomoca gluNewQuadric.//baseRadius -> promien podstawy dla z = 0.//topRadius -> promień dla z = height.//height -> wysokość//slices -> ilośc południków//stacks -> ilośc równolenikow

//glDisable(GL_TEXTURE_2D);

glColor4f(1, 0, 1,1.0);//float colorR[] = { 0.0f, 0.0f, 1.0f, 1.0f };glMaterialfv(GL_FRONT, GL_AMBIENT_AND_DIFFUSE, colorR);

gluCylinder(quadObj, 0.3, 0.0, 1.6, 15, 10);glPopMatrix ();glEndList();

Page 105: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

for( i = Rings - 1; i >=0; i --) { theta1 = theta + ringDelta; cosTheta1 = cos(theta1); sinTheta1 = sin(theta1);

glBegin(GL_QUAD_STRIP);phi = 0.0;for( j = Sides; j >=0; j --) { phi = phi + sideDelta; cosPhi = cos(phi); sinPhi = sin(phi); dist = Radius + (TubeRadius * cosPhi);

glNormal3f(cosTheta1 * cosPhi, -sinTheta1 * cosPhi, sinPhi);

Page 106: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

glVertex3f(cosTheta1 * dist, -sinTheta1 * dist, TubeRadius * sinPhi);

glNormal3f(cosTheta * cosPhi, -sinTheta * cosPhi, sinPhi);

glVertex3f(cosTheta * dist, -sinTheta * dist, TubeRadius * sinPhi);

} glEnd(); theta = theta1; cosTheta = cosTheta1; sinTheta = sinTheta1; }

Normalne

Polygonal Normals vs. True Normals

Ze względu na odbicie światła, oprócz punktów powierzchni podajemy normalne do niej.Normalną do powierzchni określonej trzema punktami znajdziemy korzystając z iloczynu wektorowego.Iloczyn wektorowy ( na przykład moment siły F na ramieniu r) dwóch wektorów r x F jest prostopadły do płaszczyzny jaką tworzą te wektory

Page 107: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

M r Fi j kr r rF F F

A x y z

x y z

M rFA sin M rA

M FA

Page 108: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

M=[r( y )F ( z)−r( z ) F( y )

r( z ) F(x )−r(x ) F ( z)

r( x ) F( y )−r( y ) F(x )]=[ 0 −r( z) r( y )

r( z) 0 −r( x )

−r( y ) r(x ) 0 ][F (x )

F( y )

F ( z ) ]=ρF

.

Mając współrzędne trzech punktów, możemy znaleźć wektory przechodzące przez te punkty, odejmując współrzędne.XYZ CalcNormal(XYZ p,XYZ p1,XYZ p2)

Page 109: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

{ XYZ n,pa,pb; pa.x = p1.x - p.x; pa.y = p1.y - p.y; pa.z = p1.z - p.z; pb.x = p2.x - p.x; pb.y = p2.y - p.y; pb.z = p2.z - p.z; Normalise(pa); Normalise(pb);//Współrzędne wektora prostopadłego znajdziemy jako iloczyn wektorowy tamtych wektorów n.x = pa.y * pb.z - pa.z * pb.y; n.y = pa.z * pb.x - pa.x * pb.z; n.z = pa.x * pb.y - pa.y * pb.x; Normalise(n); return(n);}

//Normalizujemy te wektory, to znaczy sprowadzamy ich długość do jedynki dzieląc przez długość

void Normalise(XYZ &p){ double length; length = sqrt(p.x * p.x + p.y * p.y + p.z * p.z); if (length != 0) {

p.x /= length; p.y /= length; p.z /= length;

} else { p.x = 0; p.y = 0; p.z = 0;

}}

Przykład zastosowania://The Triaxial tritorus is defined parametrically as//x = sin(u) (1 + cos(v))

Page 110: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//y = sin(u + 2 / 3) (1 + cos(v + 2 / 3))//z = sin(u + 4 / 3) (1 + cos(v + 4 / 3))//Where -pi <= u <=pi and -pi <= v <= piXYZ origin = {0.0,0.0,0.0};XYZ TriTorusEval(double u,double v){ XYZ p; p.x = sin(u) * (1 + cos(v)); p.y = sin(u + 2 * PI / 3) * (1 + cos(v + 2 * PI / 3)); p.z = sin(u + 4 * PI / 3) * (1 + cos(v + 4 * PI / 3)); return(p);}void MakeTriTorus(void){ int m = 51; int i,j,k; double u,v,u1,v1,delta=0.001; XYZ p[4],n[4],p1,p2;// glPolygonMode(GL_FRONT_AND_BACK,GL_POINT);// glPolygonMode(GL_FRONT_AND_BACK,GL_LINE); glPolygonMode(GL_FRONT_AND_BACK,GL_FILL);glPushMatrix();glColor3f(0.0,0.9,0.9);float colorCubTriTorus[] = { 0.0, 0.9, 0.9f, 1.0f };glMaterialfv(GL_FRONT, GL_AMBIENT_AND_DIFFUSE, colorCubTriTorus);glEnable(GL_TEXTURE_2D);// glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_BLEND);glTexGenf(GL_S, GL_TEXTURE_GEN_MODE, GL_SPHERE_MAP);glTexGenf(GL_T, GL_TEXTURE_GEN_MODE, GL_SPHERE_MAP);glEnable(GL_TEXTURE_GEN_S); // Enable sphericalglEnable(GL_TEXTURE_GEN_T); // Environment MappingglBindTexture(GL_TEXTURE_2D, texture[3]);

Page 111: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

glBegin(GL_QUADS); for (i=0;i<m;i++) {

for (j=0;j<m;j++) {

u = -PI + i * TWOPI / m; u1 = -PI + (i+1) * TWOPI / m; v = -PI + j * TWOPI / m; v1 = -PI + (j+1) * TWOPI / m;

p[0] = TriTorusEval(u,v); p1 = TriTorusEval(u+delta,v); p2 = TriTorusEval(u,v+delta); n[0] = CalcNormal(p[0],p1,p2);

p[1] = TriTorusEval(u1,v); p1 = TriTorusEval(u1+delta,v); p2 = TriTorusEval(u1,v+delta); n[1] = CalcNormal(p[1],p1,p2);

p[2] = TriTorusEval(u1,v1); p1 = TriTorusEval(u1+delta,v1); p2 = TriTorusEval(u1,v1+delta); n[2] = CalcNormal(p[2],p1,p2);

p[3] = TriTorusEval(u,v1); p1 = TriTorusEval(u+delta,v1); p2 = TriTorusEval(u,v1+delta); n[3] = CalcNormal(p[3],p1,p2);

for (k=0;k<4;k++) {glNormal3f(n[k].x,n[k].y,n[k].z);glVertex3f(2.5*p[k].x,2.5*p[k].y,2.5*p[k].z);

} }

} glEnd();glDisable(GL_TEXTURE_GEN_S); // Enable spherical

Page 112: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

glDisable(GL_TEXTURE_GEN_T); // Environment MappingglDisable(GL_TEXTURE_2D);glPopMatrix(); }

Tunel, droga z krajobrazem itp.

Patrzymy do środka

Page 113: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

J=0 jest na cały ekranTunel składa się z [I, J] czworoboków QUAD (nie kwadraty). Każdy QUAD jest utworzony przez cztery Veretxy: (I,J), (I+1,J), (I+1,J+1), (I,J+1). Każdy Vertex ma współrzędne xyz, które są funkcjami czasu.Perspektywę (zwężenie) uzyskujemy korzystając z: gluPerspective(fov, ratio, nearDist, farDist);Vertexy są wspólne z sąsiednimi czworobokami. Każdy ma swoją teksturę. for (J=0;J<=30/30;J++) {JJ=GLfloat(J);

J1=JJ/32.0 + Angle*TEXTURE_SPEED; // precalculate texture v coords for speed

Page 114: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

J2=(JJ+1.0)/32.0 + Angle*TEXTURE_SPEED;// near the end of the tunnel, fade the effect awayif (JJ >24.0) {C=1.0-(JJ-24.0)/10.0;}else {C=1.0;}glColor3f(C, C, C);

glBegin(GL_QUADS); for (I=0;I<=11/11;I++)

{II=GLfloat(I);glTexCoord2f((II-3.0)/12.0, J1);

glVertex3f(Tunnels[I][J].X, Tunnels[I][J].Y, Tunnels[I][J].Z); glTexCoord2f((II-2.0)/12.0, J1);

glVertex3f(Tunnels[I+1][J].X, Tunnels[I+1][J].Y, Tunnels[I+1][J].Z);

glTexCoord2f((II-2.0)/12.0, J2); glVertex3f(Tunnels[I+1][J+1].X, Tunnels[I+1][J+1].Y, Tunnels[I+1][J+1].Z);

glTexCoord2f((II-3.0)/12.0, J2);glVertex3f(Tunnels[I][J+1].X, Tunnels[I][J+1].Y,

Tunnels[I][J+1].Z); };glEnd();

Krzywe Bézier’a

Dla przyjętych N+1 punktów sterujących pk=(x,y,z) (k=0 to N) współrzędne B=(x,y,z) punktów krzywej w funkcji parametru u

Page 115: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Dla 4 punktów (N=3) mamyB(u) = P0 * ( 1 - u )3 + P1 * 3 * u * ( 1 - u )2 + P2 * 3 * u2 * ( 1 - u ) + P3 * u3

Krzywa nie przechodzi przez punkty sterujące z wyjątkiem pierwszego B(0) = P0 i ostatniego B(1) = PN. Nie oddala się zbytnio od obszaru tych punktów i nie charakteryzuje ją nadmierna oscylacyjność.

DOWOLNE POWIERZCHNIE GŁADKIE

Powierzchnia Beziera

glMap2f(GL_MAP2_VERTEX_3, 0, 1, 3, 4, 0, 1, 12, 4, &ctrlpoints[0][0][0]); glEnable(GL_MAP2_VERTEX_3); glMapGrid2f(20, 0.0, 1.0, 20, 0.0, 1.0);

Pij to zbiór m*n punktów sterujących m*n, Bi ro wielomian Bernstein polynomials. Pij representują współrzędne vertices, normals, colors lub texture.

NURBS: Non-Uniform Rational Basis Spline

gluBeginSurface(theNurb); gluNurbsSurface(theNurb,8,knots,8,knots,4 * 3,3,&ctlpoints[0][0][0],4, 4, GL_MAP2_VERTEX_3); gluEndSurface(theNurb);

// Zamiana obrazka na teksture

Page 116: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

// Załadowanie bitmapy i utworzenie tekstury//Najpierw Zmien rozmiar/rozdzielczośc// - punkty 256 na 256 lub 512 na 512// Teraz zapisujemy obraz w: Photoshop - Save as – BMP ...// Zapisz -Advanced mode- 24bit - R8 G8 B8

GLuint texture[10];Graphics::TBitmap* TextureImage[10];

int LoadGLTexturesAll(){int i;TJPEGImage *jpg1 = new TJPEGImage();jpg1->PixelFormat = jf24Bit;jpg1->Performance = jpBestQuality;for (i=0; i <= 9; i++){TextureImage[i] = new Graphics::TBitmap;

switch (i){case 0: TextureImage[0]->LoadFromFile("C:/CG/bmp/view.bmp"); break;case 1: TextureImage[1]->LoadFromFile("C:/CG/bmp/earth2.bmp"); break;case 2: TextureImage[2]->LoadFromFile("C:/CG/bmp/pluto.bmp"); break;case 3: TextureImage[3]->LoadFromFile("C:/CG/bmp/surface.bmp"); break;case 4: TextureImage[4]->LoadFromFile("C:/CG/bmp/girl.bmp"); break;case 5: TextureImage[5]->LoadFromFile("C:/CG/bmp/Floor.bmp"); break;case 6: TextureImage[6]->LoadFromFile("C:/CG/bmp/tunnel.bmp"); break;case 7: TextureImage[7]->LoadFromFile("C:/CG/bmp/Reflection.bmp"); break;case 8: TextureImage[8]->LoadFromFile("C:/CG/bmp/sun2.bmp"); break;

Page 117: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

case 9: {jpg1->LoadFromFile("C:/CG/jpg/roomwall.jpg");TextureImage[9]->Assign(jpg1);}

}

if(TextureImage[i]){/*Obiekty teksturowe. Każdy obiekt zapamiętuje pojedynczą teksturę.W programie można się przełączać pomiędzy różnymi teksturamizapamiętanymi w różnych obiektach teksturowych.Do obiektów teksturowych odwołujemy się poprzez ich identyfikatory.Identyfikatory generujemy przy użyciu funkcji:void glGenTextures( GLsizei n, GLuint *textures);Tworzy nazwę teksturyn - numer nazwy tekstury, ktora ma być utworzonatextures - pointer do pierwszego elementu tabklicy w której utworzonanazwa tekstury jest przechowywana*/

glGenTextures(i+1, &texture[i]);/*Zapis aktualnej tekstury w obiekcie teksturowym wykonuje funkcja:void glBindTexture( GLenum target, GLuint texture);Umożliwia stworzenie tekstury, która będzie przyklejona do elementu docelowego.target - cel do którego takstura ma być przymocowanaGL_TEXTURE_1D lub GL_TEXTURE_2D.texture - Nazwa tekstury, nie może być w tym czasie używana*/

glBindTexture(GL_TEXTURE_2D, texture[i]);

// Specifikacja dwuwymiarowego obrazu tekstury.//Dwie możliwości:

Page 118: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//111111111111111111111111111111111111111111111111111111111111111111111111111111

// void glTexImage2D( GLenum target, GLint level, GLint internalformat, GLsizei width,//GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid *pixels );

// Parametry://target - Docelowa tekstura. Musi byc GL_TEXTURE_2D.//level ->Poziom szczegółow number. Poziom 0 jest bazowym poziomem (image) obrazka.// Poziom n jest n-tym techniki tworzena tekstury "mipmap".//internalformat -> ilośc komponetów koloru w teksturze// Musi być 1, 2, 3, or 4, lub jedna z nstępujacych stałych okreslonych symbolicznie:// GL_ALPHA,GL_ALPHA4, GL_ALPHA8, GL_ALPHA12, GL_ALPHA16, GL_LUMINANCE,// GL_LUMINANCE4, GL_LUMINANCE8, GL_LUMINANCE12, GL_LUMINANCE16, GL_LUMINANCE_ALPHA,// GL_LUMINANCE4_ALPHA4, GL_LUMINANCE6_ALPHA2, GL_LUMINANCE8_ALPHA8,// GL_LUMINANCE12_ALPHA4, GL_LUMINANCE12_ALPHA12, GL_LUMINANCE16_ALPHA16,// GL_INTENSITY, GL_INTENSITY4, GL_INTENSITY8, GL_INTENSITY12, GL_INTENSITY16,// GL_R3_G3_B2, GL_RGB, GL_RGB4, GL_RGB5, GL_RGB8, GL_RGB10, GL_RGB12, GL_RGB16,// GL_RGBA, GL_RGBA2, GL_RGBA4, GL_RGB5_A1, GL_RGBA8, GL_RGB10_A2, GL_RGBA12,// or GL_RGBA16.//width -> Szerokośc obrazka tekstury. Musi być 2n + 2(border) dla pewnej// liczby całkowitej n.

Page 119: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//height -> Wysokośc obrazka tekstury. Musi być 2m + 2(border) dla pewnej// liczby całkowitej n.//border -Szerokość border. Musi byc 0 lub 1.//format ->Format danych pikszela. Może przyąć jedna z dziewięciu// wartośc okreslonych symbolami:// GL_COLOR_INDEX, GL_RED, GL_GREEN, GL_BLUE, GL_ALPHA, GL_RGB,// GL_RGBA, GL_BGR_EXT, GL_BGRA_EXT, GL_LUMINANCE, GL_LUMINANCE_ALPHA//type =>The data type of the pixel data. The following symbolic values are accepted:// GL_UNSIGNED_BYTE, GL_BYTE, GL_BITMAP, GL_UNSIGNED_SHORT, GL_SHORT,// GL_UNSIGNED_INT, GL_INT, and GL_FLOAT.//pixels - Pointer do danych obrazka w pamięci.

/* glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[i]->Width, TextureImage[i]->Height, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[i]->ScanLine[TextureImage[i]->Width-1]);

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);

// GL_NEAREST lub GL_LINEAR.

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);

//GL_CLAMP or GL_REPEAT.*///void glTexParameteri( GLenum target, GLenum pname, GLint param );

Page 120: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//Ustawienie parametrów tekstury.//target -> Tekstura doclowa, musi być albo GL_TEXTURE_1D lub GL_TEXTURE_2D.//pname -> Symboliczna nazwa jednowartościowego paramatru tekstury://GL_TEXTURE_MIN_FILTER, GL_TEXTURE_MAG_FILTER, GL_TEXTURE_WRAP_S, GL_TEXTURE_WRAP_T

//22222222222222222222222222222222222222222222222222222222222222222222222222222//Mipmapping wykorzystuje serię MIP map (mipmap), tj. tekstur o różnych rozmiarach,//które są wynikiem skalowania wyjściowej tekstury. Jeśli wyjściowa tekstura//ma rozmiar będący potęgą dwójki, to zostanie wygenerowanych n mipmap o rozmiarach//2, 4... razy mniejszych itd., aż do tekstury o rozmiarach 1x1 pikseli.//Np. jeśli n = 8,to kolejne mipmapy mają rozmiary: 256x256 (oryginalna tekstura),//128x128,64x64, 32x32, 16x16, 8x8, 4x4, 2x2 i 1x1.//http://pl.wikipedia.org/wiki/Mipmapping//Mipmapa to grupa obrazków utworzona z danego obrazka przez przeskalowannie//do kilu rozmiarów. które są później wybierane zaleznie od odległości.//Zamiast przeskalowywania w celu dopasowania do objektu w czasie//jego ruchu (on the fly,) opengl wybiera mipmapę, która pasuje rozmiarami// i ja naklada. Ta technika daje obraz lepszej jakości//http://www.swiftless.com/tutorials/opengl/mipmap_generation.html

//int gluBuild2DMipmaps(GLenum target,GLint components,GLint width,//GLint height,GLenum format,GLenum type,const void *data);//target: The target texture. Must be GL_TEXTURE_2D.

Page 121: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//components: The number of color components in the texture. Must be 1, 2, 3, or 4.//width, height//The format of the pixel data. Must be one of the following://GL_COLOR_INDEX, GL_RED, GL_GREEN, GL_BLUE, GL_ALPHA, GL_RGB, GL_RGBA,//GL_BGR_EXT, GL_BGRA_EXT, GL_LUMINANCE, or GL_LUMINANCE_ALPHA.//data type for data. Must be one of the following: GL_UNSIGNED_BYTE, GL_BYTE,//GL_BITMAP, GL_UNSIGNED_SHORT, GL_SHORT, GL_UNSIGNED_INT, GL_INT, or GL_FLOAT.//data: A pointer to the image data in memory.

//The gluBuild2DMipmaps function creates 2-D mipmaps.//int gluBuild2DMipmaps(GLenum target, GLint components, GLint width, GLint height,//GLenum format, GLenum type, const void *data);//components - The number of color components in the texture. Must be 1, 2, 3, or 4.

/**/ gluBuild2DMipmaps(GL_TEXTURE_2D, 3, TextureImage[i]->Width, TextureImage[i]->Height, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[i]->ScanLine[TextureImage[i]->Width-1]);

glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR );

glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR_MIPMAP_LINEAR );/**/// Jakości w kolejności od najgorszej do najlepszej: //GL_NEAREST, GL_LINEAR, GL_LINEAR_MIPMAP_NEAREST, GL_LINEAR_MIPMAP_LINEAR

Page 122: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

//Ustawianie parametrów tekstury//void glTexParameteri( GLenum target, GLenum pname, GLint param);//GL_TEXTURE_MIN_FILTER, GL_TEXTURE_MAG_FILTER, GL_TEXTURE_WRAP_S, GL_TEXTURE_WRAP_T

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

}// Jeżeli tekstura istnieje if (TextureImage[i]){if(TextureImage[i]) TextureImage[i]->ReleaseHandle(); delete TextureImage[i];}

}

return 0;}

Utworzenie tekstury za pomocą programutypedef char ColRGB[3];typedef ColRGB gTextureT[128][128];gTextureT gTexture;char PRGB[3] = {255, 0, 0};//pixelchar WRGB[3] = {255, 255, 255}; //pixel

void equalRGB(ColRGB &b, ColRGB a){ int i;

Page 123: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

for (i = 0; i <=2; i++) b[i]=a[i];}

GLuint gTextureHandle;GLuint CreateTexture(int pWidth, int pHeight, gTextureT &Dane){ GLuint Result; glGenTextures(1, &Result); glBindTexture(GL_TEXTURE_2D, Result); glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexImage2D(GL_TEXTURE_2D, 0, 3, pWidth, pHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, Dane);return Result;};

void Tekstura(){int i,j;//Wypełniamy tablicę pixeli za pomocą zdefiniowanych pixelifor( i=0; i<=63; i++) for (j=0;j<=127; j++)equalRGB(gTexture[i][j],PRGB);

for( i=63; i<=127; i++) for (j=0;j<=127; j++)equalRGB(gTexture[i][j],WRGB);gTextureHandle= CreateTexture(128, 128, &gTexture);glBindTexture(GL_TEXTURE_2D, gTextureHandle);}

long double Abs(long double x){if (x<0) x=-x;return x;}

Page 124: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

int signi(long double x){if (x>=0.0) return 1; else return -1;}int round(long double x){int ix;long double ax;ax=Abs(x);ix=int(Abs(x));if((ax-ix)>=0.5){return ceil(ax)*signi(x);} else{return floor(ax)*signi(x);}}

Tektura i świetlenie Texture and lightening

Utworzenie tekstury korzystając z obrazka// Zamiana obrazka na teksturę:// Załadowanie bitmapy i utworzenie tekstury//Najpierw zmień rozmiar / rozdzielczość - punkty 256 lub 512 // Teraz zapisujemy obraz w: Photoshop - Save as – BMP ...// Zapisz -Advanced mode- 24bit - R8 G8 B8

Jedna ściana prostopadłościanu z teksturą:glBegin(GL_POLYGON); glTexCoord2f(0.0,0.0); glVertex3f(-0.4,-0.4,+0.4); glTexCoord2f(8.0,0.0); glVertex3f(+0.4,-0.4,+0.4); glTexCoord2f(8.0,8.0); glVertex3f(+0.4,+0.4,+0.4); glTexCoord2f(0.0,8.0); glVertex3f(-0.4,+0.4,+0.4);glEnd;

Tekstura - przykład tekstury na powierzchni kuli

Page 125: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

TextureImage[1] = new Graphics::TBitmap;TextureImage[1]->LoadFromFile("C:/bmp/szachy.bmp");

glGenTextures(2, &texture[1]); glBindTexture(GL_TEXTURE_2D, texture[1]);glTexImage2D(GL_TEXTURE_2D, 0, 3,

TextureImage[1]->Width, TextureImage[1]->Height, 0, GL_RGB,

GL_UNSIGNED_BYTE, TextureImage[1]->ScanLine[TextureImage[1]->Width-1]);

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); /////////////////////////////////////////////////////////////////////////////////////////////// glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);// glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_BLEND);////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//Zwolnienie pamięciif (TextureImage[1]) {if(TextureImage[1]) TextureImage[1]->ReleaseHandle(); delete TextureImage[1]; }

 

Pobieranie fragment obrazka i zakładanie go na obiekt

 

Page 126: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Utworzenie tekstury za pomocą programuTworzymy tablicę pikselitypedef char ColRGB[3];typedef ColRGB gTextureT[128][128];gTextureT gTexture;//Definiujemy pikselechar PRGB[3] = {255, 0, 0};//pixelchar WRGB[3] = {255, 255, 255}; //pixel//Umieszczemy piksele w tablicy

void equalRGB(ColRGB &b, ColRGB a){ int i; for (i = 0; i <=2; i++) b[i]=a[i];}

GLuint gTextureHandle;GLuint CreateTexture(int pWidth, int pHeight, gTextureT &Dane){ GLuint Result; glGenTextures(1, &Result); glBindTexture(GL_TEXTURE_2D, Result); glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexImage2D(GL_TEXTURE_2D, 0, 3, pWidth, pHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, Dane);return Result;};

void Tekstura(){int i,j;//Wypełniamy tablicę pixeli za pomocą zdefiniowanych pixeli

Page 127: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

for( i=0; i<=63; i++) for (j=0;j<=127; j++)equalRGB(gTexture[i][j],PRGB);

for( i=63; i<=127; i++) for (j=0;j<=127; j++)equalRGB(gTexture[i][j],WRGB);

gTextureHandle= CreateTexture(128, 128, &gTexture);glBindTexture(GL_TEXTURE_2D, gTextureHandle);}

 Światło w pomieszczeniach i światło na zewnątrz

Ustawienie oświetlenia w przestrzeni rzeczywistej

1. Światło główne (kluczowe - key light) – tworzy cień, silne, nieco z tyłu kamery ( na rys. z prawej)

2. Światło boczne (wypełniające -fill light) -1/8 jasności światła głównego – oświetla i podwyższa jaskrawość cienia – z przeciwnej strony kamery niż światło główne

3. Światło tylne (backlight) – wyróżnia obiekt z tła tworząc otoczkę świetlną (halo -aureolę, nimb) (na rys. przy ścianie).

 

OświetlenieOświetlenie lokalne: obiekty

oświetlane są wyłącznie bezpośrednio przez źródło

światła

Oświetlenie globalne: światło emitowane +

odbite

  Oświetlenie – dwie części: 1) światło (kolor, natężenie itd.)

Page 128: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

2) materiał przedmiotów: kolor, przezroczystość, blik, błyszczenie się, tekstura.

Atrybuty światła: pozycja i kierunek, kolor, jasność, stożek lub wiązka, różne natężenie w różnych miejscach, zanikanie.

 Direct lights - pochodzi ze źródła światła, natężenie zależy od położenia. Ambient lighting  - światło odbite, charakteryzuje się stałym natężeniem Jednym ze sposobów stworzenia dobrego  światła (bez cieni) jest symulacja światła odbitego. Światło otaczające (ambient), odbite, rozproszone, z nieokreślonym źródłem, biegnące we wszystkich kierunkach. 

 Światło bezpośrednie – direct lightŚwiatło punktowe (point) -omnilights  (wszechświatło)-, rozchodzi się we wszystkich kierunkach (omnidirectional). 

 Odległe źródło światła – wiązka równoległa.          

Światło kierunkowe, z nieskończoności, równoległe, (directional, infinite, parallel) z niedostrzegalnym źródłem, symuluje światło słoneczne. Światło powierzchniowe (area ) – daje nieostre cienie. Światło liniowe. 

Page 129: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Cień może mieć ostra krawędź lub rozmytą. Punktowe źródło światła w pokoju nie daje  stopniowo zanikającego cienia. Powierzchnia jest oświetlona lub nie, co daje ostry kontrast. Światło powierzchniowe (relatywnie duże lub kilka obok siebie  - np. 2 okna lub duża ilość świetlówek na suficie) – daje nieostre cienie.

Natężenie światłaSpotlights       Stożek światła Spotlight (spot –miejsce oświetlone - plama światła otacza target) stożek światła charakteryzuje kierunek, kąt rozwartości, światło rozrzedza (osłabia) się (attenuate) i kończy (falloff ).Można rozróżnić stożki o różnej intensywności światła oraz miejsca różnie oświetlone.   Ustawienie światła - wynik  Suma kilku światełProcedure GLInit;const light0_position:TGLArrayf4=( -8.0, 8.0, -16.0, 0.0); ambient: TGLArrayf4=( 0.3, 0.3, 0.3, 0.3);begin

// set viewing projection glMatrixMode(GL_PROJECTION); glFrustum(-0.1, 0.1, -0.1, 0.1, 0.3, 25.0); // position viewer */ glMatrixMode(GL_MODELVIEW); glEnable(GL_DEPTH_TEST);

// ustaw światła

Page 130: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

glEnable(GL_LIGHTING); glLightfv(GL_LIGHT0, GL_POSITION, @light0_position); glLightfv(GL_LIGHT0, GL_AMBIENT, @ambient); glEnable(GL_LIGHT0);end;

C++glEnable(GL_LIGHTING);glEnable(GL_BLEND);GLfloat global_ambient[] = { 0.5f, 0.5f, 0.5f, 1.0f };glLightModelfv(GL_LIGHT_MODEL_AMBIENT, global_ambient);glLightModelf( GLenum pname, GLfloat param);GL_LIGHT_MODEL_LOCAL_VIEWER - określa jak ma być obliczony połysk (specular) -blikGL_LIGHT_MODEL_TWO_SIDE -dwustronnaglLightModelf(GL_LIGHT_MODEL_LOCAL_VIEWER,0);glLightModelf(GL_LIGHT_MODEL_TWO_SIDE,0);glLightfv(GL_LIGHT0, GL_AMBIENT, light0Ambient);glLightfv(GL_LIGHT0, GL_DIFFUSE, light0Diffuse);glLightfv(GL_LIGHT0, GL_SPECULAR, light0Specular);glLightfv(GL_LIGHT0, GL_POSITION, light0Position);glLightf(GL_LIGHT0, GL_SPOT_CUTOFF, 60.0);glLightfv(GL_LIGHT0, GL_CONSTANT_ATTENUATION, light0Att);//glLightfv(GL_LIGHT0, GL_LINEAR_ATTENUATION, light0Att);//glLightfv(GL_LIGHT0, GL_QUADRATIC_ATTENUATION, light0Att);glLightf(GL_LIGHT0, GL_SPOT_EXPONENT, 0.1);glEnable(GL_LIGHT0);

Page 131: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Oświetlenie i materiałPowierzchnie w przestrzeni i światłoPrzedmioty oświetlone: cień, połysk  Specular  - połysk – uwzględnia zarówno położenie źródła światła jaki i obserwatora. Jest to światło odbite i dlatego blik ma kolor światła. Można powiedzieć że mamy tu do czynienia ze zwierciadłem niedoskonałym.  Diffuse - dyfuzja – nie uwzględnia położenia obserwatora, natężenie równe we wszystkich kierunkach. Może być odbite (od papieru, tapety) lub przepuszczone np. przez szybę pokrytą mrozem. Ambient  - nie uwzględnia położenia źródła światła.

//Parametry materiałuGLfloat matAmb2[4] ={1.0, 1.0, 1, 1.0};glMaterialfv(GL_FRONT, GL_AMBIENT, matAmb2);

GLfloat matDif2[4] = {1.0, 1.0, 1, 1.0};glMaterialfv(GL_FRONT, GL_DIFFUSE, matDif2);

GLfloat matSpec2[4] = {1.0, 1.0, 1.0, 1.0};glMaterialfv(GL_FRONT, GL_SPECULAR, matSpec2);

GLfloat matEm2[4] = {1.0, 1.0, 1.0, 1.0};glMaterialfv(GL_FRONT, GL_EMISSION, matEm2);

GLfloat shininess1=50;glMaterialfv(GL_FRONT, GL_SHININESS, &shininess1);

float colorS[] = { 1.0f, 1.0f, 0.0f, 1.0f };

Page 132: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

glMaterialfv(GL_FRONT, GL_AMBIENT_AND_DIFFUSE, colorS);

Specular -ważne jest położenie obserwatora Według modelu Phonga padające światło l odbija się od niedoskonałego zwierciadła dając nie tylko światło odbite r pod kątem , ale także promień v pod kątem obserwatora które jest zależne od miejsca w którym znajduje się obserwator.

Shading (cieniowanie) - zmienność naświetlenia powierzchni  

1.    Stałe  -(Constant shading - flat)–Wszystkie punkty na powierzchni wieloboku mają tę samą wartość  koloru i intensywności.

   2.    Zmienne - Dla określonych wartości koloru w

wierzchołkach interpoluje się kolory pośrednie pomiędzy nimi

Flat shading Gouraud shading

glShadeModel(GL_SMOOTH);

glBegin(GL_TRIANGLES); glColor3f(1.0,0.0,0.0); glVertex3f( -1, 0, 2); glColor3f(0.0,1.0,0.0); glVertex3f(1, 0, 2); glColor3f(0.0,0.0,1.0); glVertex3f(0, 1, 2); glEnd;

Jeżeli używamy światło to kolor światła odbitego od materiału:float color1[] = { 1.0f, 0.0f, 0.0f, 1.0f };float color2[] = { 0.0f, 1.0f, 0.0f, 1.0f };float color3[] = { 0.0f, 0.0f, 1.0f, 1.0f };

Page 133: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

void TriAngle2(){glPushMatrix();glBegin(GL_TRIANGLES);glMaterialfv(GL_FRONT, GL_AMBIENT_AND_DIFFUSE, color1);glVertex3f(-1.5, -1.0, 0);glMaterialfv(GL_FRONT, GL_AMBIENT_AND_DIFFUSE, color2);glVertex3f( 1.0, -1.5, 0);glMaterialfv(GL_FRONT, GL_AMBIENT_AND_DIFFUSE, color3);glVertex3f( 0, 1.5, 0);glEnd();glPopMatrix(); }

Gouraud shading

Wykorzystuje się zmienność oświetlenia i koloru  Phong shading -Phong interpolation

Wykorzystuje się światło I połysk

 

  

 

  Radiosity – uwzględnia zależność pomiędzy ilością światła wyemitowanego, odbitego i pochłoniętegohttp://hcsoftware.sourceforge.net/RadiosGL/RadiosGL.html

Page 134: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

 Na prostopadłościanach widoczny jest kolor ścian pochodzący od światła odbitego od ścian

Mgła

Światło wolumetryczne (objętościowe) – oświetla pustą przestrzeń np. słup światła przychodzący z oświetlenia ulicznego.Kula oświetlona przez trzy światła.

Po lewej zwykłe oświetlenie, po prawej światło wolumetryczne rozpraszane na cząsteczkach znajdujących się w powietrzu (dym, mgła) i obserwowane jako snop światła (cienia)

Cień

Cienie i odbiciaglStencilFunc(GL_ALWAYS, 1, 0xFFFFFFFF);glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE);glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP); glCullFace(GL_FRONT) 

Mgłafloat FogCol[3]={0.9f,0.9f,0.9f};glEnable(GL_FOG); glFogfv(GL_FOG_COLOR,FogCol); glFogf(GL_FOG_DENSITY,0.9f);// glFogi(GL_FOG_MODE, GL_EXP);// glFogi(GL_FOG_MODE, GL_EXP2);

glEnable(GL_FOG); glFogi (GL_FOG_MODE, GL_LINEAR); glFogi (GL_FOG_INDEX, NUMCOLORS); glFogf (GL_FOG_START, 1.0); glFogf (GL_FOG_END, 6.0);

Page 135: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

glHint (GL_FOG_HINT, GL_NICEST); glClearIndex((GLfloat) (NUMCOLORS+RAMPSTART-1));

// Mgła Fog //GL_FOG_MODE, GL_FOG_DENSITY, GL_FOG_START, GL_FOG_END, GL_FOG_INDEX, GL_FOG_COLOR

float FogCol[3]={0.9f,0.9f,0.9f};glEnable(GL_FOG);

glFogfv(GL_FOG_COLOR,FogCol); glFogf(GL_FOG_DENSITY,0.9f);// glFogi(GL_FOG_MODE, GL_EXP);// glFogi(GL_FOG_MODE, GL_EXP2);//lub/* glClearColor(0.5f, 0.5f, 0.5f, 1);

GLfloat fogColor[] = {0.5f, 0.5f, 0.5f, 1};glFogfv(GL_FOG_COLOR, fogColor);glFogi(GL_FOG_MODE, GL_LINEAR);glFogf(GL_FOG_START, 0.8f);glFogf(GL_FOG_END, 1.0f);

*/

 

Płomienie z zastosowaniem radiosity oraz blob shadow

Programy użytkowe firm Corel i Adobe

ŚWIATŁA I CIENIE w Corel Photo Paint Otwórz c:\ \1trzy światła (później 4schody)

Zapisz jako C:\3sWykonaj następujące ćwiczenia:

Page 136: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

PhotoshopFilter – Render – Lightening Effects

PHOTOSHOP

Obrazek, Przekształć się w Kolor RGB 24 bity i zapisać jako bmp

Efekty, Renderowanie, Efekty świetlne

Oprócz światła punktowego działającego we wszystkich kierunkach, dostawiamy trzy światła kierunkowe:– (+ na lewo od rysunku oka)

Z prawej strony ustawiamy dla każdego światła jaskrawość i inne...Położenie i kierunek zmieniamy myszą lub z prawej strony Położenie.

Przykładowy wynik: przed i po zmianie

Teraz: Tekstura Kanały RGB Relief Kontrast

Przykładowy wynik: przed i po zmianie

Direct lights - pochodzi ze źródła światła, natężenie zależy od położenia.

Page 137: Grafika rastrowa i wektorowa - Urząd Miasta Ł Web viewPiezo kryształ umieszcony jest z tyłu za ... as can be ascertained by cutting and placing them side by ... //Jeżeli matrix

Ambient lighting - światło odbite, charakteryzuje się stałym natężeniem

Rodzaje światła, tekstura

Tekstura

Etapy tworzenia grafiki przestrzennejSteps to create graphic spatial

Ray Tracing, Raycasting

Mipmap: http://pl.wikipedia.org/wiki/MipmappingPowielanie o dwukrotnie mniejszych rozmiarach: Mając teksturę o rozmiarach , zostanie wygenerowanych n mipmap o rozmiarach ,

Reproduction of two smaller sizes:Having a texture of size , n-mipmaps of size

, are generated.