Professional Documents
Culture Documents
на OpenFrameworks
Двумерная графика
лекции и объявления:
www.uralvision.blogspot.com
в main.cpp:
ofSetBackgroundAuto(bool bAuto)
- включает/выключает режим очистки картинки
в каждом кадре, перед вызовом draw() (по умолчанию true).
Рисование фигур
Линия ofLine(float x1, float y1, float x2, float y2)
Эллипс ofEllipse
Цвет рисования ofSetColor(int red, int greeb, int blue), где числа от 0 до 255.
ofSetColor(int red, int green, int blue, int alpha )
/*alpha - прозрачность, см. далее*/
ofSetColor(int hexColor) - 16-чная задание цвета,
Толщина линий
ofSetLineWidth(float lineWidth)
толщина линий в пикселах
setup()
ofBackground( 255, 255, 255 );
ofSetBackgroundAuto( false );
px = 320;
py = 240;
qx = 0;
qy = 0;
col = 0;
Пример
update()
px += ofRandom( -1, 1 ); //ofRandom(a,b) - случайная велечина в [a,b]
py += ofRandom( -1, 1 );
qx += ofRandom( -0.3, 0.3 );
qy += ofRandom( -0.3, 0.3 );
if ( px < 0 ) px += 640;
if ( px >= 640 ) px -= 640;
if ( py < 0 ) py += 480;
if ( py >= 480 ) py -= 480;
col += 0.02;
if ( col >= 256 ) col = col - 256;
Пример
draw()
int r = col;
int g = int(col * 2) % 256;
int b = 255 - col;
ofSetColor( r, g, b );
ofLine( px, py, px + qx, py + qy );
Рисование изображений
Коллаж
Коллаж (от фр. collage — наклеивание) — технический приём в изобразительном искусстве,
заключающийся в наклеивании на подложку предметов и материалов, отличающихся от основы по
цвету и фактуре. Коллажем также называется произведение, целиком выполненное в этой технике.
(Википедия)
http://www.chinesecontemporary.com/hong_hao_5.htm
Загрузка и рисование изображения
объявление картинки
ofImage image;
в setup()
image.loadImage( "texture.jpg" ); //загрузка с диска
//файл должен лежать в bin/data
в draw()
ofSetColor( 255, 255, 255 ); //зачем это нужно - см. ниже
//"Прозрачность всего изображения"
image.draw ( 100.0, 50.0 ); //вывод на экран
//левый верхний угол будет в (100, 50)
Если значение alpha фрагмента в [0, 1] (то есть alpha = Alpha / 255.0)
то старый цвет C0 смешивается с цветом фрагмента C1 по формуле
R = (1-alpha) * R0 + alpha * R1
G = (1-alpha) * G0 + alpha * G1
B = (1-alpha) * B0 + alpha * B1
//Инициализация
void testApp::setup(){
image.loadImage( "texture.png" ); //png - с прозрачностью
angle = 0.0;
}
//Обновление состояния
void testApp::update(){
angle += 0.1; //поворот
}
Пример: вращающиеся подсолнухи
//Рисование
void testApp::draw(){
//включить режим прозрачности
ofEnableAlphaBlending();
R = r / 255.0 *R0
G = g / 255.0 *G0
B = b / 255.0 * B0
A = a / 255.0 * A0
Как это сделать? Если запоминать траекторию в виде ломаной и каждый раз ее
выводить на экран - постепенно программа будет работать все медленней.
Лучший способ решения - рисовать траекторию маятника в некоторый буфер вне
экрана, а потом выдавать содержимое буфера на экран.
В такой буфер можно рисовать как на экране, а затем использовать результат как
текстуру - т.е. выводить ее а экран или рисовать ей в других буферах.
Можно делать сложные многослойные изображения, позволяющие делать эффекты
типа "следа" от движущихся объектов. Для этого нужно рисовать один буфер в
другом с разной прозрачностью.
Как нарисовать путь движения
маятника
Тогда алгоритм рисования в
draw() будет такой:
1. в буфере рисуется
прямая, соединяющая текущее
положение маятника с
предыдущим,
2. буфер выводится на экран
3. на экране рисуется сам маятник
Работа с буфером рисования
...
#include "ofxFBOTexture.h"
...
ofxFBOTexture buffer; //буфер для рисования вне экрана
в setup()
//создание буфера
buffer.allocate( ofGetWidth(), ofGetHeight(),
false //без автоочистки при каждом рисовании - т.к. будем там
накапливать картинки
);
//нужно заметить, что если ставить не черный цвет, то буфер может окраситься в
первый используемый вами цвет. Как устранить проблему?
Работа с буфером рисования
в draw()
// остальное рисование
...