//--------------------------------------------------------------
void testApp::mouseMoved(int x, int y ){
	morphValue = ofMap( x, 0, ofGetWidth(), 0, 1 );
	updateMorph( morphValue, morphImageIndex );
}
Exemple #2
0
//--------------------------------------------------------------
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);

}
Exemple #3
0
//--------------------------------------------------------------
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!
}