topical media & game development

talk show tell print

lib-of-vs-apps-addonsExamples-vectorGraphicsExample-src-testApp.cpp / cpp



  include <testApp.h>
  include <stdio.h>
  
  //--------------------------------------------------------------
  void testApp::setup(){
          capture = false;
          bFill        = true;
  }
  
  //--------------------------------------------------------------
  void testApp::update(){
          ofBackground(255, 255, 255);
  
  }
  
  //--------------------------------------------------------------
  void testApp::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
          ofSetColor(0xCC0000);
          ofDrawBitmapString("a) triangle();", 65, 140);
  
          output.setColor(0x000000);
          output.triangle(80, 110, 110, 50, 140, 110);
  
          //b - rectangle from the top left corner
          ofSetColor(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
          ofSetColor(0xCC0000);
          ofDrawBitmapString("d) circle(); \n", 380, 140);
          output.setColor(0x828282);
          output.circle(425, 80, 30);
  
          //e - ellipse
          ofSetColor(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
          ofSetColor(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.
          ofSetColor(0xCC0000);
          ofDrawBitmapString("g) curve(); \n", 240, 300);
  
          output.setColor(0x7e7e7e);
          output.curve(160, 100,  240, 270,   330, 240,  360, 500);
  
          //h - an arc
          ofSetColor(0xCC0000);
          ofDrawBitmapString("h) arc(); \n", 390, 300);
  
          output.setColor(0x5c5c5c);
          output.arc(400, 270, 60, 0, -70);
  
          //i - just a line
          ofSetColor(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 vertexes
  
          // -----------------------------------
          // j - polygon shape based on mouse position
          // -----------------------------------
          ofSetColor(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
          // -----------------------------------
          ofSetColor(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
          // -----------------------------------
          ofSetColor(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);
          ofSetColor(0x000000);
          ofRect(60, 630, 200,60);
  
          //some text to explain whats what
          ofSetColor(0xDDDDDD);
          ofDrawBitmapString("spacebar to capture\n'f' key toggles fill\nmouse to doodle", 75, 650);
  
  }
  
  //--------------------------------------------------------------
  void testApp::keyPressed(int key){
          if(key == ' '){
                  capture = true;
          }else if(key =='f'){
                  bFill = !bFill;
          }
  }
  
  //--------------------------------------------------------------
  void testApp::keyReleased(int key){
  
  }
  
  //--------------------------------------------------------------
  void testApp::mouseMoved(int x, int y ){
  
  }
  
  //--------------------------------------------------------------
  void testApp::mouseDragged(int x, int y, int button){
  
          //we add a new point to our line
          pts.push_back(ofPoint());
          int last = pts.size()-1;
  
          pts[last].x = x;
          pts[last].y = y;
  
  }
  
  //--------------------------------------------------------------
  void testApp::mousePressed(int x, int y, int button){
          pts.clear();
  
          //lets store the first point of the line
          pts.push_back(ofPoint());
          pts[0].x = x;
          pts[0].y = y;
  
  }
  
  //--------------------------------------------------------------
  void testApp::mouseReleased(int x, int y, int button){
  
  }
  
  //--------------------------------------------------------------
  void testApp::windowResized(int w, int h){
  
  }
  
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.