Podstawy Processingu. Diana Domańska. Uniwersytet Śląski

Podobne dokumenty
Jarosław Kuchta Podstawy Programowania Obiektowego. Podstawy grafiki obiektowej

Podstawy Processingu. Diana Domańska. Uniwersytet Śląski

Wizualne systemy programowania. Wykład 11 Grafika. dr Artur Bartoszewski -Wizualne systemy programowania, sem. III- WYKŁAD

Szybkie tworzenie grafiki w GcIde

3 Przygotował: mgr inż. Maciej Lasota

Interakcje wizualno-muzyczne. Processing. w programowaniu obrazu. Piotr Welk

Grafika Komputerowa Materiały Laboratoryjne

Processing. Podstawy Processingu

Druga aplikacja Prymitywy, alpha blending, obracanie bitmap oraz mały zestaw przydatnych funkcji wyświetlających własnej roboty.

Kod źródłowy programu: program Grafika1; uses crt, graph; (1) var sterownik, tryb:smallint; (2)

Zatem standardowe rysowanie prymitywów wygląda następująco:

Wykład VII PASCAL - grafika;

1. Prymitywy graficzne

narzędzie Linia. 2. W polu koloru kliknij kolor, którego chcesz użyć. 3. Aby coś narysować, przeciągnij wskaźnikiem w obszarze rysowania.

Grafika Komputerowa Materiały Laboratoryjne

Pascal - grafika. Uruchomienie trybu graficznego. Moduł graph. Domyślny tryb graficzny

Wprowadzenie do rysowania w 3D. Praca w środowisku 3D

Rysowanie precyzyjne. Polecenie:

GRAFIKA KOMPUTEROWA 7: Kolory i cieniowanie

KGGiBM GRAFIKA INŻYNIERSKA Rok III, sem. VI, sem IV SN WILiŚ Rok akademicki 2011/2012

Tło CSS 3. Gabriela Panuś

3.4. Opis konfiguracji layoutów.

WSTĘP; NARZĘDZIA DO RYSOWANIA

Zajęcia nr 15 JavaScript wprowadzenie do JavaScript

Język programowania zbiór reguł określających, które ciągi symboli tworzą program komputerowy oraz jakie obliczenia opisuje ten program.

Janusz Ganczarski. OpenGL Pierwszy program

Podczas tej lekcji przyjrzymy się, jak wykonać poniższy rysunek przy pomocy programu BobCAD-CAM

Programowanie komputerów Wykład 6: Aplety Java

Grafika i komunikacja człowiek komputer Laboratorium. Część 2: Graphics

Prostokąt. AutoCAD pozwala na szybkie rysowanie figur o czterech bokach prostokątów. Do tego celu służy funkcja Prostokąt. Funkcję tą można wywołać:

Ćwiczenie P-3. Processing - przetwarzanie obrazów 2D i renderowanie scen 3D. Grafika komputerowa. Instrukcja laboratoryjna

Ćwiczenie 4 - Tabele

Ćwiczenie 2 Warstwy i kształty podstawowe

Elementy okna MatLab-a

Wykład A1. AutoCAD Dr inż. Jarosław Bydłosz

Visual Studio instalacja

AUTOCAD teoria i zadania z podstaw rysowania Rysowanie linii, prostej, półprostej, punktu, trasy, polilinii. Zadania geodezyjne.

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Rysowanie punktów na powierzchni graficznej

C Biblioteka G2. C.1 Koncepcja biblioteki G2.

Księgarnia PWN: Andrzej Jaskulski - AutoCAD 2010/LT Podstawy projektowania parametrycznego i nieparametrycznego

Java. Wykład 9. Piotr Tronczyk

WASM AppInventor Lab 3. Rysowanie i animacja po kanwie PODSTAWY PRACY Z KANWAMI

Programowanie: grafika w SciLab Slajd 1. Programowanie: grafika w SciLab

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

Grafika i komunikacja człowiek komputer Laboratorium. Część 3: Tekst, czcionki, kolory

1 Zrozumieć Flasha... 1 Co można zrobić za pomocą Flasha?... 2 Tworzenie obrazków do strony 3 Animowanie witryny 4 Tworzenie filmów

VBA w Excel Lekcja ta ma przybliżyć pojęcia związane z programowaniem w pakiecie Office. Poniższe przykłady związane są z wersją Office2007.

Kurs programowania 2 - listy

ANALIZA I INDEKSOWANIE MULTIMEDIÓW (AIM)

Kurs WWW. Paweł Rajba.

Grafika trójwymiarowa

PROGRAMOWANIE GRAFIKI I ELEMENTÓW INTERAKTYWNYCH NA STRONY WWW W P5.JS

ZAPOZNANIE SIĘ Z PODSTAWOWYMI SPOSOBAMI

PyGame Gra w Ponga. Spis treści

Wstęp do programowania INP001213Wcl rok akademicki 2017/18 semestr zimowy. Wykład 8. Karol Tarnowski A-1 p.

Informatyka- wykład. Podstawy programowania w Pythonie. dr Marcin Ziółkowski

etrader Pekao Podręcznik użytkownika Jak zacząć pracę z etrader Pekao?

PRZEWODNIK PO ETRADER PEKAO ROZDZIAŁ I. JAK ZACZĄĆ PRACĘ Z ETRADER PEKAO? SPIS TREŚCI

Języki programowania wysokiego poziomu. CSS Wskazówki

Spis treści CZĘŚĆ I. NIEPARAMETRYCZNE PROJEKTOWANIE 2D...31

Wstawianie nowej strony

Program graficzny MS Paint.

Dziedziczenie. Zadanie 1

Moduł graph w Pascalu

Grafika Komputerowa Materiały Laboratoryjne

Wprowadzenie do programowania z wykorzystaniem biblioteki OpenGL. Dorota Smorawa

GRAFIKA. Rodzaje grafiki i odpowiadające im edytory

Dokumentacja WebMaster ver 1.0

Języki i techniki programowania Ćwiczenia 2

HARMONOGRAM SZKOLENIA ECDL moduł S4 - edycja obrazów

HARMONOGRAM SZKOLENIA ECDL moduł S4 - edycja obrazów

Multimedia i interfejsy. Ćwiczenie 5 HTML5

JAVA. Platforma JSE: Środowiska programistyczne dla języka Java. Wstęp do programowania w języku obiektowym. Opracował: Andrzej Nowak

Okno zarządzania warstwami w dokumencie znajduje się na wstążce Narzędzia główne

BeStCAD - Moduł ŻELBET 1. Przed przystąpieniem do tworzenia pręta zbrojeniowego narysuj polilinią kształt pręta.

Rysowanie prostych obiektów graficznych przy użyciu biblioteki AWT (Abstract Window Toolkit)

Java w 21 dni / Rogers Cadenhead. Gliwice, cop Spis treści. O autorze 11. Wprowadzenie 13 TYDZIEŃ I JĘZYK JAVA

Laboratorium grafiki komputerowej i animacji. Ćwiczenie V - Biblioteka OpenGL - oświetlenie sceny

Podstawy Informatyki Wykład V

Kurs Adobe Photoshop Elements 11

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Materiały dla studentów pierwszego semestru studiów podyplomowych Grafika komputerowa i techniki multimedialne rok akademicki 2011/2012 semestr zimowy

4. Rysowanie krzywych

Tik Z wiadomości wstępne

Języki formalne i automaty Ćwiczenia 5

W niniejszym samouczku przedstawiono sposób tworzenia logo dla wymyślonej kawiarni. Tak będzie wyglądać ostateczny efekt pracy:

Opis implementacji: Poznanie zasad tworzenia programów komputerowych za pomocą instrukcji języka programowania.

CorelDRAW. wprowadzenie

W zależności od posiadanej karty, różna może być rozdzielczość i liczba kolorów. Schemat programu. zainicjowanie grafiki. operacje w trybie graficznym

Instrukcja do ćwiczeń laboratoryjnych Numeryczne metody analizy konstrukcji

Obsługa programu Paint materiały szkoleniowe

Celem ćwiczenia jest zapoznanie się z podstawowymi funkcjami i pojęciami związanymi ze środowiskiem AutoCAD 2012 w polskiej wersji językowej.

BRYŁY PODSTAWOWE I OBIEKTY ELEMENTARNE

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Wykład A1. AutoCAD. Jarosław Bydłosz Katedra Geomatyki

2 Przygotował: mgr inż. Maciej Lasota

Zadanie 1. Ściana. 1. Potrzebne zmienne w dołączonym do zadania kodzie źródłowym

Jarosław Kuchta. Podstawy Programowania Obiektowego. ćwiczenie 10. Podstawy grafiki w WPF

Tekst na mapach. Teksty na mapie. Ustawienia mapy. W tej instrukcji zostanie opisany sposób w jaki można na mapach wyświetlać teksty

Transkrypt:

Podstawy Processingu Diana Domańska Uniwersytet Śląski

Processing jest językiem programowania opartym na języku Java. Jest on nastawiony na aplikacje związane z grafiką, animacją. Projekt został zainicjowany w 2001 roku przez Bena Fry (MIT) i Casey a Reas (UCLA). Stworzyli oni Processing z myślą o artystach, dlatego też wprowadzono w tym języku wiele uproszczeń.

Processing jest językiem programowania opartym na języku Java. Jest on nastawiony na aplikacje związane z grafiką, animacją. Projekt został zainicjowany w 2001 roku przez Bena Fry (MIT) i Casey a Reas (UCLA). Stworzyli oni Processing z myślą o artystach, dlatego też wprowadzono w tym języku wiele uproszczeń. Środowisko do programowania w Processingu jest darmowe, wieloplatformowe (Windows, Linux, MacOS) i można je pobrać ze strony: http://www.processing.org/ Oprócz środowiska ze strony Processingu do programowania można użyć Eclipse lub Netbeans (opis konfiguracji można znaleźć w Internecie).

Ponieważ Processing jest oparty na Jave ie, więc wiele instrukcji ma taką samą postać w obu językach: komentarze, typy zmiennych, tablice, instrukcje warunkowe, pętle, operatory porównania, logiczne i arytmetyczne, definiowanie funkcji, definiowanie klas.

Przykładowy program w Processingu 1 size(300, 300); // wielkosc obszaru w oknie 2 line(0, 0, width, height);

Prymitywy graficzne 2D Punkt void point(int x, int y); void point(float x, float y); x, y współrzędne punktu.

Prymitywy graficzne 2D Punkt void point(int x, int y); void point(float x, float y); x, y współrzędne punktu. Linia void line(int x1, int y1, int x2, int y2); void line(float x1, float y1, float x2, float y2); x1, y1 współrzędne początku, x2, y2 współrzędne końca.

Trójkąt void triangle(int x1, int y1, int x2, int y2, int x3, int y3); void triangle(float x1, float y1, float x2, float y2, float x3, float y3); x1, y1, x2, y2, x3, y3 współrzędne wierzchołków trójkąta.

Trójkąt void triangle(int x1, int y1, int x2, int y2, int x3, int y3); void triangle(float x1, float y1, float x2, float y2, float x3, float y3); x1, y1, x2, y2, x3, y3 współrzędne wierzchołków trójkąta. Czworokąt void quad(int x1, int y1, int x2, int y2, int x3, int y3, int x4, int y4); void quad(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4); x1, y1, x2, y2, x3, y3, x4, y4 współrzędne wierzchołków czworokąta.

Prostokąt void rect(int x, int y, int s, int w); void rect(float x, float y, float s, float w); Interpretacja parametrów funkcji rect zależy od ustawionego trybu. Do zmiany trybu służy funkcja: void rectmode(int mode); mode przyjmuje jedną z wartości: CORNER (domyślny tryb), CORNERS, CENTER, RADIUS.

W trybie CORNER parametry funkcji rect interpretowane są jako: x, y współrzędne lewego górnego rogu, s szerokość, w wysokość. W trybie CORNERS parametry funkcji rect interpretowane są jako: x, y współrzędne jednego z rogów, s, w współrzędne przeciwległego rogu. W trybie CENTER parametry funkcji rect interpretowane są jako: x, y współrzędne środka, s szerokość, w wysokość. W trybie RADIUS parametry funkcji rect interpretowane są jako: x, y współrzędne środka, s połowa szerokości, w połowa wysokości.

Elipsa void ellipse(int x, int y, int s, int w); void ellipse(float x, float y, float s, float w); Podobnie jak w przypadku funkcji rect interpretacja parametrów zależy od trybu, który ustawiany jest za pomocą funkcji: void ellipsemode(int mode); mode przyjmuje jedną z wartości: CORNER, CORNERS, CENTER (domyślny tryb), RADIUS. Interpretacja jest taka sama jak w przypadku funkcji rectmode.

Łuk (wycinek elipsy) void arc(int x, int y, int s, int w, int start, int stop); void arc(float x, float y, float s, float w, float start, float stop); Pierwsze cztery parametry mają te same znaczenie jak w przypadku funkcji ellipse i można je zmienić za pomocą funkcji ellipsemode. start początkowy kąt łuku (w radianach), stop końcowy kąt łuku (w radianach).

1 size(200, 200); 2 3 point(20, 20); 4 line(50, 10, 70, 60); 5 triangle(100, 20, 80, 70, 130, 90); 6 quad(140, 30, 190, 50, 170, 90, 150, 70); 7 8 rectmode(center); 9 rect(30, 140, 30, 60); 10 11 ellipse(90, 140, 60, 30); 12 arc(140, 140, 80, 40, 0, HALF_PI);

Rysowanie dowolnych wielokątów, łamanych otrzymujemy za pomocą funkcji: void beginshape(); void beginshape(int mode); void vertex(int x, int y); void vertex(float x, float y); void endshape(); void endshape(int mode); Każde wywołanie funkcji beginshape musi posiadać odpowiadające wywołanie funkcji endshape. Pomiędzy tymi funkcjami umieszczamy wywołania funkcji vertex, które definiują kolejne wierzchołki kształtu. W zależności od wartości parametru mode otrzymamy inny kształt.

Parametr mode funkcji beginshape może przyjąć następujące wartości: POINTS każde wywołanie vertex definiuje jeden punkt, LINES każda para vertex definiuje jedną linię, TRIANGLES każda trójka vertex definiuje jeden trójkąt, TRIANGLE_STRIP pasek trójkątów, TRIANGLE_FAN wachlarz trójkątów, QUADS każda czwórka vertex definiuje jeden czworokąt, QUAD_STRIP pasek czworokątów.

Parametr mode funkcji beginshape może przyjąć następujące wartości: POINTS każde wywołanie vertex definiuje jeden punkt, LINES każda para vertex definiuje jedną linię, TRIANGLES każda trójka vertex definiuje jeden trójkąt, TRIANGLE_STRIP pasek trójkątów, TRIANGLE_FAN wachlarz trójkątów, QUADS każda czwórka vertex definiuje jeden czworokąt, QUAD_STRIP pasek czworokątów. Parametr mode funkcji endshape może przyjąć tylko wartość CLOSE i oznacza domknięcie kształtu.

v 0 v 2 v 5 v 3 v 3 v 4 v 1 v 0 v 1 bez parametrów CLOSE v 2 v 4 v 0 v 1 v 3 v 2 POINTS v 1 v 0 v 4 v 2 v 3 v 5 v 0 v 1 v 5 v 6 v 1 v 3 v 5 v 7 LINES v 1 v 4 v 5 v 2 v 3 v 4 v 1 QUADS v 3 v 7 v 0 v 2 v v 6 4 QUAD_STRIP v 4 v 3 v 4 v 0 v 0 v 2 v 3 v 0 v 2 v 2 TRIANGLES TRAINGLE_STRIP TRIANGLE_FAN v 1

1 size(200, 200); 2 beginshape(); 3 vertex(10, 10); 4 vertex(80, 60); 5 vertex(30, 80); 6 endshape(); 7 8 beginshape(); 9 vertex(100, 20); 10 vertex(180, 100); 11 vertex(140, 100); 12 vertex(110, 80); 13 vertex(125, 60); 14 endshape(close); 15 16 beginshape(triangles); 17 vertex(30, 100); 18 vertex(70, 150); 19 vertex(40, 145); 20 vertex(40, 100); 21 vertex(100, 140); 22 vertex(90, 120); 23 endshape();

Kolory, właściwości linii Interpretację składowych koloru zmienia funkcja void colormode(int mode); void colormode(int mode, int r); void colormode(int mode, int r1, int r2, int r3); void colormode(int mode, int r1, int r2, int r3, int r4); mode przestrzeń barw, przyjmuje jedną z wartości: RGB, HSB. r, r1, r2, r3, r4 zakresy składowych (oprócz typu int możemy podać również wartości typu float). Domyślną przestrzenią barw jest RGB.

W Processingu istnieje typ reprezentujący kolor: color. Do tworzenia koloru o podanych składowych służą funkcje color color(int gray); color color(int gray, int alpha); color color(int v1, int v2, int v3); color color(int v1, int v2, int v3, int alpha); color color(int hex); color color(int hex, int alpha); gray odcień szarości, alpha wartość składowej alfa, v1, v2, v3 składowe koloru (interpretacja zależy od użytej przestrzeni barw), hex reprezentacja szesnastkowa koloru np. #FFCC00.

Zmiana koloru tła void background(int gray); void background(int gray, int alpha); void background(int v1, int v2, int v3); void background(int v1, int v2, int v3, int alpha); void background(int hex); void background(int hex, int alpha);

Zmiana koloru tła void background(int gray); void background(int gray, int alpha); void background(int v1, int v2, int v3); void background(int v1, int v2, int v3, int alpha); void background(int hex); void background(int hex, int alpha); Zmiana koloru wypełnienia kształtu void fill(int gray); void fill(int gray, int alpha); void fill(int v1, int v2, int v3); void fill(int v1, int v2, int v3, int alpha); void fill(int hex); void fill(int hex, int alpha);

Zmiana koloru linii void stroke(int gray); void stroke(int gray, int alpha); void stroke(int v1, int v2, int v3); void stroke(int v1, int v2, int v3, int alpha); void stroke(int hex); void stroke(int hex, int alpha);

Zmiana koloru linii void stroke(int gray); void stroke(int gray, int alpha); void stroke(int v1, int v2, int v3); void stroke(int v1, int v2, int v3, int alpha); void stroke(int hex); void stroke(int hex, int alpha); Do wyłączenia wypełniania kształtów służy funkcja void nofill(); Zaś do wyłączenia rysowania linii służy funkcja void nostroke();

Ustawienie grubości linii void strokeweight(int g); void strokeweight(float g); g grubość linii (w pikselach).

Ustawienie grubości linii void strokeweight(int g); void strokeweight(float g); g grubość linii (w pikselach). Wygładzanie krawędzi void smooth();

Ustawienie grubości linii void strokeweight(int g); void strokeweight(float g); g grubość linii (w pikselach). Wygładzanie krawędzi void smooth(); Wyłączenie wygładzania krawędzi void nosmooth();

1 size(200, 200); 2 background(0); 3 4 stroke(255); 5 line(10, 10, 60, 50); 6 smooth(); 7 line(20, 10, 70, 50); 8 9 fill(255, 0, 0); 10 ellipse(120, 40, 40, 40); 11 nostroke(); 12 ellipse(170, 40, 40, 40); 13 14 stroke(0, 255, 0); 15 strokeweight(2); 16 rect(20, 110, 50, 50); 17 nofill(); 18 rect(100, 110, 50, 50);