//--------------------------------------------------------------
void testApp::mouseMoved(int x, int y ){
morphValue = ofMap( x, 0, ofGetWidth(), 0, 1 );
updateMorph( morphValue, morphImageIndex );
}
//--------------------------------------------------------------
void ofApp::draw(){
//we don't want to capture every frame
//so we only capture one frame when capture
//is set to true
if(capture){
output.beginEPS("test.ps");
}
//do we want filled shapes or outlines?
if(bFill)output.fill();
else output.noFill();
//--------------------
// some lines - lets make a grid!
//
int numX = ofGetWidth() / 10;
int numY = ofGetHeight() / 10;
output.setColor(0xEEEEEE);
for(int y = 0; y < numY; y++){
output.line(0, y * 10, ofGetWidth(), y * 10);
}
for(int x = 0; x < numX; x++){
output.line(x * 10, 0, x * 10, ofGetHeight() );
}
//--------------------
// basic shapes
//
//a - draw a triangle
ofSetHexColor(0xCC0000);
ofDrawBitmapString("a) triangle();", 65, 140);
output.setColor(0x000000);
output.triangle(80, 110, 110, 50, 140, 110);
//b - rectangle from the top left corner
ofSetHexColor(0xCC0000);
ofDrawBitmapString("b & c) rect();\n", 220, 140);
output.setColor(0x4d4d4d);
output.disableCenterRect();
output.rect(240, 50, 60, 60);
//c - rectangle from the center
output.setColor(0xededed);
output.enableCenterRect();
output.rect(270, 80, 20, 20);
//d - circle
ofSetHexColor(0xCC0000);
ofDrawBitmapString("d) circle(); \n", 380, 140);
output.setColor(0x828282);
output.circle(425, 80, 30);
//e - ellipse
ofSetHexColor(0xCC0000);
ofDrawBitmapString("e) ellipse(); \n", 520, 140);
output.setColor(0x363636);
output.ellipse(570, 80, 40, 30);
//f - bezier curve - we define the start, the first control point, the second control point and the end
ofSetHexColor(0xCC0000);
ofDrawBitmapString("f) bezier(); \n", 70, 300);
output.setColor(0x5c5c5c);
output.bezier(70, 270, 100, 200, 120, 260, 180, 270);
//lets also draw the handles
output.setColor(0xCCCCCC);
output.line(70, 270, 100, 200);
output.line(180, 270, 120, 260);
output.setColor(0xAAAAAA);
output.enableCenterRect();
output.rect(100, 200, 4, 4);
output.rect(120, 260, 4, 4);
//g - catmull curve - we give four points - the first and last are not drawn, but used to calculate the curve.
ofSetHexColor(0xCC0000);
ofDrawBitmapString("g) curve(); \n", 240, 300);
output.setColor(0x7e7e7e);
output.curve(160, 100, 240, 270, 330, 240, 360, 500);
//h - an arc
ofSetHexColor(0xCC0000);
ofDrawBitmapString("h) arc(); \n", 390, 300);
output.setColor(0x5c5c5c);
output.arc(400, 270, 60, 0, -70);
//i - just a line
ofSetHexColor(0xCC0000);
ofDrawBitmapString("i) line(); \n", 530, 300);
output.setColor(0x5c5c5c);
output.line(540, 220, 600, 270);
//--------------------
//--------------------
//--------------------
// advanced shapes
// these shapes can have an unlmited number of vertices
// -----------------------------------
// j - polygon shape based on mouse position
// -----------------------------------
ofSetHexColor(0xCC0000);
ofDrawBitmapString("j) shape w/ \npolyVertex \n", 70, 520);
output.setColor(0x6b6b6b);
output.beginShape();
//set number of sides based on mouse position
int numSteps = ( (float)mouseX / ofGetWidth() )* 12.0;
//make sure we don't go bellow 3 sides
numSteps = MAX(3, numSteps);
float step = TWO_PI / (numSteps);
float angle = 0.0;
float cenX = 110;
float cenY = 430;
float radius = 50;
for(int i = 0; i < numSteps; i++){
float rx = cenX + cos(angle) * radius;
float ry = cenY + sin(angle) * radius;
output.polyVertex(rx, ry);
angle += step;
}
output.endShape(true);
// -----------------------------------
// k - curve shape based on mouse position
// -----------------------------------
ofSetHexColor(0xCC0000);
ofDrawBitmapString("k) shape w/ \ncurveVertex \n", 290, 520);
output.setColor(0xb8b8b8);
output.beginShape();
//set number of sides based on mouse position
numSteps = ( (float)mouseX / ofGetWidth() )* 12.0;
//make sure we don't go bellow 3 sides
numSteps = MAX(3, numSteps);
step = TWO_PI / (numSteps);
angle = 0.0;
cenX = 340;
cenY = 430;
radius = 50.0;
//we need 3 extra points to get a complete curve shape
for(int i = 0; i < numSteps + 3; i++){
float rx = cenX + cos(angle) * radius;
float ry = cenY + sin(angle) * radius;
output.curveVertex(rx, ry);
angle += step;
}
output.endShape(true);
// -----------------------------------
// l - bezier shape based on mouse position
// -----------------------------------
ofSetHexColor(0xCC0000);
ofDrawBitmapString("l) shape w/ \nbezierVertex \n", 510, 520);
// we specify control points that shape each part of the shape
output.setColor(0xd4d4d4);
output.beginShape();
//set number of sides based on mouse position
numSteps = ( (float)mouseX / ofGetWidth() )* 12.0;
//make sure we don't go bellow 3 sides
numSteps = MAX(3, numSteps);
step = TWO_PI / (numSteps);
angle = 0.0;
cenX = 550;
cenY = 430.0;
radius = 40.0;
float scale = 1.0 + 0.6 * sin(ofGetElapsedTimef());
for(int i = 0; i < numSteps; i++){
float rx = cenX + cos(angle) * radius;
float ry = cenY + sin(angle) * radius;
if(i == 0){
output.polyVertex(rx, ry);
}
float rx2 = cenX + cos(angle+step) * radius;
float ry2 = cenY + sin(angle+step) * radius;
//lets make our control points in between each side and out a little way
float cx = cenX + cos(angle + step*0.5) * radius * scale;
float cy = cenY + sin(angle + step*0.5) * radius * scale;
output.bezierVertex(cx, cy, cx, cy, rx2, ry2);
angle += step;
}
output.endShape(true);
//----------------------------
//----------------------------
//----------------------------
// Bonuse :)
// Mouse draw - with curved line
//
if( pts.size() > 0 ){
int numPts = pts.size();
output.setColor(0x0088EE);
output.noFill();
output.beginShape();
//catmull curves create nice smooth curves between points
//so actually a lower resolution creates a smoother line
//and reduce the number of poiints in our eps file.
int rescaleRes = 6;
for(int i = 0; i < numPts; i++){
//we need to draw the first and last point
//twice for a catmull curve
if(i == 0 || i == numPts -1){
output.curveVertex(pts[i].x, pts[i].y);
}
if(i % rescaleRes == 0) output.curveVertex(pts[i].x, pts[i].y);
}
output.endShape();
}
//-------------------------
//-------------------------
// End capture!
//
//once we have done all our drawing
//we end the ouput which saves the file
//and then we stop capturing
if(capture){
output.endEPS();
capture =false;
}
//
// End capture!
//-------------------------
//-------------------------
//we don't save this to eps - just info for the app
ofFill();
ofSetRectMode(OF_RECTMODE_CORNER);
ofSetHexColor(0x000000);
ofRect(60, 630, 200,60);
//some text to explain whats what
ofSetHexColor(0xDDDDDD);
ofDrawBitmapString("spacebar to capture\n'f' key toggles fill\nmouse to doodle", 75, 650);
}
//--------------------------------------------------------------
void testApp::setup(){
ofBackground(22);
ofSetFrameRate(60);
ofSetVerticalSync(true);
ofSetCircleResolution(32);
ofEnableAlphaBlending();
//set some default values for your params (optional)
drawOutlines = false;
currentSentence = "unInited";
x = y = 66;
numCircles = 30;
menu = MENU_OPTION_1;
// START THE SERVER ///////////////////////////////////////////
OFX_REMOTEUI_SERVER_SETUP(10000); //specify a port if you want a specific one
//if you dont specify, the server will choose a random one
//the first time you launch it, and will use it forever
// SETUP A CALLBACK ///////////////////////////////////////////
OFX_REMOTEUI_SERVER_GET_INSTANCE()->setCallback(testApp::serverCallback); // (optional!)
// SET PARAM GROUPS / COLORS //////////////////////////////////
OFX_REMOTEUI_SERVER_SET_NEW_COLOR(); // set a bg color for all the upcoming params (optional)
OFX_REMOTEUI_SERVER_SET_UPCOMING_PARAM_GROUP("position"); //make a new group (optional)
// SHARE A FLOAT PARAM ////////////////////////////////////////
OFX_REMOTEUI_SERVER_SHARE_PARAM(x, 0, ofGetWidth() ); //add an "x" float param to the current group ("position")
OFX_REMOTEUI_SERVER_SHARE_PARAM(y, 0, ofGetHeight()); //provide a variable, a rangeMin and a rangeMax
OFX_REMOTEUI_SERVER_SET_UPCOMING_PARAM_GROUP("style"); //make a new group (optional)
OFX_REMOTEUI_SERVER_SET_NEW_COLOR(); // set a bg color for the upcoming params (optional)
// SHARE A BOOL PARAM ////////////////////////////////////////
OFX_REMOTEUI_SERVER_SHARE_PARAM(drawOutlines);
// SHARE A FLOAT PARAM ////////////////////////////////////////
OFX_REMOTEUI_SERVER_SHARE_PARAM(numCircles, 0, 30); //variable, rangeMin, rangeMax
OFX_REMOTEUI_SERVER_SET_UPCOMING_PARAM_GROUP("whatever"); //make a new group
OFX_REMOTEUI_SERVER_SET_UPCOMING_PARAM_COLOR( ofColor(255,0,0,64) ); // you can set a custom upcoming color too
// SHARE AN STRING PARAM //////////////////////////////////////
OFX_REMOTEUI_SERVER_SHARE_PARAM(currentSentence, ofColor(0,0,255,64)); // you can also set a color on a per-param basis
// SHARE A FLOAT //////////////////////////////////////
OFX_REMOTEUI_SERVER_SHARE_PARAM(currentMouseX, 0, ofGetWidth(), ofColor(255,64));
// SHARE AN ENUM PARAM //////////////////////////////////////
vector<string> menuItems;
menuItems.push_back("MENU_OPTION_0");menuItems.push_back("MENU_OPTION_1");
menuItems.push_back("MENU_OPTION_2"); menuItems.push_back("MENU_OPTION_3");
OFX_REMOTEUI_SERVER_SHARE_ENUM_PARAM(menu, MENU_OPTION_0, MENU_OPTION_3, menuItems);
// SHARE A COLOR PARAM //////////////////////////////////////
OFX_REMOTEUI_SERVER_SHARE_COLOR_PARAM(color);
OFX_REMOTEUI_SERVER_LOAD_FROM_XML(); //load values from XML, if you want to do so
//this will result on the UI showing the params
//as they were when last saved (on quit in this case)
//OFX_REMOTEUI_SERVER_START_THREADED(); //if you want all the communication to happen on a different
//thread, call this. This has implications though.
//your params can be changed at anytime by the client,
//potentially leading to problems. String params are
//especially very likely to cause crashes!
//so don't use this unless you know you need it!
}