• fullscreen
  • Buch2.pde
  • Buttons.pde
  • Help.pde
  • Inputs.pde
  • Lines.pde
  • Tools.pde
  • 
    
    // Book Prototype
    
    // new version with backspace for delete (the last small line segment)
    
    // separate the window in two areas, left is for text 
    
    // Title
    final String Title="Skizzenbuch";
    
    // Screen 
    int screenWidth = 900;
    int screenHeight = 650;
    
    // right Segment
    int rightSegmentX= screenWidth/2+5;
    int rightSegmentY= 5;
    int rightSegmentWidth=screenWidth/2-10;
    int rightSegmentHeight=screenHeight-10;
    
    // Font
    PFont fontHeadline;
    PFont fontNormalText;
    
    // Text in left segment
    final int leftIndentText = 30; 
    
    // Pages in Book
    int currentPage = 0;    // current page
    final int maxPages = 4; // max page 
    
    // Headlines
    String [] pageHeadlines = {
      "Inhalt", "Linien", "Boxen", "Kugeln", "Ellipsen"
    };
    
    // Misc
    float rotateValue=0.0; // for Box
    PVector helpPoint; // for Line
    PVector helpPoint2;
    PVector helpPointAdd;
    PVector helpPoint2Add;
    
    // Flags 
    boolean boolHelpModus = false; 
    
    // Maus 
    boolean halten = false;
    
    // Zeichnen
    // from http://processing.org/learning/topics/arraylistclass.html
    ArrayList lines;
    int lineWidth = 4;
    // array of colors
    color [] myNiceColors = { 
      color (255, 0, 0), 
      color (0, 255, 0), 
      color (0, 0, 255), 
      color (255, 0, 255), 
      color (255, 255, 255)
    };
    int colorPointer = 2; // current color 
    
    // ==========================================================
    
    void setup () {
      size(900, 650, P3D);
      // screenWidth = width;
      // screenHeight = height;
    
      fontNormalText = createFont("Arial", 18); 
      fontHeadline = createFont("Arial", 32); 
      textMode(SCREEN);
    
      // for line 
      initPointsForLine();
    
      // Init: 
      // Create an empty ArrayList
      lines = new ArrayList();
      // see tab Buttons
      SetupButtons ();
    }
    
    void draw () {
      // delete all
      background (200);
    
      // rotate
      rotateValue += 1.0; 
      if (rotateValue>=360) {
        rotateValue=0;
      }
    
      // Help for line on page 1 
      //if (currentPage==1) {
      checkHelpPointsForLine();
      //}
    
      // general layout
      strokeWeight(1);
      textFont(fontHeadline, 32); 
      showGeneralLayout();
    
      // current Page
      textFont(fontNormalText, 18); 
      textAlign(LEFT);
      // page number
      text (currentPage, screenWidth/4-12, screenHeight-40);  
      showCurrentPage();
    
      if ((mouseX!=mouseXOld) || (mouseY!=mouseYOld)) {
        // mouse moved 
        // store time since last mouse moved 
        timeSinceLastMouseMoved = millis();
      }
    
      // free hand drawing
      zeichnen() ;
    
      // monitor mouse
      mouseXOld=mouseX; 
      mouseYOld=mouseY;
    
      // draw Buttons
      checkListOfButtons() ;
    
      drawLines () ;
    } // func 
    
    // =================================================
    
    void showGeneralLayout() {
      // show frame left and right
      stroke(0);  
      fill(0, 0, 0);
      // parameter: x,y, width, height 
      rect (5, 5, screenWidth/2-10, screenHeight-10); // left 
      rect (rightSegmentX, rightSegmentY, rightSegmentWidth, rightSegmentHeight); // right 
    
        // Headline
      fill(255, 2, 2);
      // textSize(32);
      textAlign(CENTER);
      text (pageHeadlines[currentPage], screenWidth/4, 129);
    } // func
    
    void showCurrentPage() {
      switch(currentPage) {
      case 0:
        showPage0();
        break;
      case 1:
        showPage1();
        break;
      case 2:
        showPage2();
        break;
      case 3:
        showPage3();
        break;
      case 4:
        showPage4();
        break;  
      default:
        println("This should not be reached. Go to showCurrentPage and add more case-elements... +++++++++++++++++++++++++++++++++++");
        break;
      } // switch
    } // func 
    
    void showPage0() {
      // Page 0
      // left panel
      text ("Linien.........1 ", 111, 222);
      text ("Boxen.........2 ", 111, 262);  
      text ("Kugel..........3 ", 111, 302);
      text ("Ellipse........4 ", 111, 342);
    }
    
    void showPage1() {
      // Page 1
      // left panel
      text ("This explains a little about lines", leftIndentText, 222);
      stroke(0, 255, 0);
      /*  line (220, 275, 
       370, 360 );  */
      line (helpPoint.x, helpPoint.y, 
      helpPoint2.x, helpPoint2.y );
    }
    
    void showPage2() {
      // Page 2
      // left panel
      text ("This explains a little about boxes", leftIndentText, 222);
      drawBox();
    }
    
    void showPage3() {
      // Page 3
      // left panel
      text ("This explains a little about Spheres", leftIndentText, 222);
      drawBall();
    }
    
    void showPage4() {
      // Page 4
      // left panel
      text ("This explains a little about ellipses", leftIndentText, 222);
      stroke(22, 222, 22);
      ellipse ( 160, 375, helpPoint.x, 55);
    }
    
    // =========================================================
    
    void drawBall() {
      lights();
      stroke(0, 23, 23);
      fill(255, 23, 23);
      pushMatrix();
      translate ( helpPoint.x, helpPoint.y, 0 );
      noStroke();
      sphere( 44 );
      popMatrix();
    } // func 
    
    void drawBox() {
      lights();
      pushMatrix();
      translate ( 260, 375, +100 );
      rotateY(radians(rotateValue));
      rotateX(radians(31));
      // red
      fill(230, 11, 11);
      stroke(0);
      box ( 60 );
      popMatrix();
    }
    
    
    
    
    // command buttons on the screen 
    
    
    // Auf dem Screen sind Schaltflächen (Buttons) für die Maus: 
    // Für das Spielfeld in der Mitte und für die Befehle Neu, Hilfe, 
    // Verlassen am rechten Rand. 
    // Diese Buttons werden in einer Liste gespeichert. 
    // Anzahl der Buttons (Länge der Liste):
    final int btnLength = 2;
    
    // List of Buttons (length of List = btnLength).
    RectButton[] rectButtons = new RectButton[ btnLength ];
    boolean locked;
    
    // colors Buttons 
    final color col1 = #ff0000;
    final color col2 = #ffff00;
    final color col3 = #000000;
    
    int timeSinceLastMouseMoved=0;
    int mouseXOld=0;
    int mouseYOld=0;
    
    // -----------------------------------------------------------------------------------------
    // Init Buttons
    
    void SetupButtons () {
    
      // for the command-buttons
      int j = 0;
    
      // Pre-Init: All Buttons OFF 
      for (int i=0; i<btnLength; i++) {
        rectButtons[i] = new RectButton( 1, 1, 20, 20, col1, col2, false);
      } 
    
      // Init Buttons 
      j=0; 
      rectButtons[j] = new RectButton( 33, screenHeight-60, 90, 28, col1, col2, true);  
      rectButtons[j].Text ="<"; 
      rectButtons[j].ToolTipText = "Vorherige Seite"; 
    
      j=j+1; 
      rectButtons[j] = new RectButton( screenWidth / 2 -33-90, screenHeight-60, 90, 28, col1, col2, true);  
      rectButtons[j].Text = ">";  
      rectButtons[j].ToolTipText = "Nächste Seite";
      //
    } // function 
    
    void checkListOfButtons () {
      // List of Buttons 
      // draw buttons
      for (int i=0; i<btnLength; i++) {
        if (rectButtons[i].Exists) {
          // new color when Mouse over 
          rectButtons[i].update();
          // Buttons paint
          rectButtons[i].display();
        }
      }
      // show tool tip  
      for (int i=0; i<btnLength; i++) {
        // show tool tip
        rectButtons[i].toolTip();
      }
    } // function 
    
    // ------------------------------------------------------------------
    // Check the Button on the screen that's been 
    // pressed by the mouse.
    
    boolean CheckButtonsOfArray() {
    
      // go through all Screen-Buttons of the Array of Buttons. 
      // Left Mouse Button. 
    
      // Alle Buttons durchgehen.
    
      boolean done = false; 
    
      // Schleife über alle Buttons
      for (int i=0; i<btnLength; i++) {
        // Wenn Schaltfläche gedrückt... 
        if (rectButtons[i].pressed()) {  
          // Wenn es ein Button des Spielfeldes ist...
          if ( i == 0 ) {  // left 
            // Neues Spiel
            currentPage--;
            if (currentPage<0) {
              currentPage=0;
            }
            done = true;
          }
          else if ( i == 1 ) {  // right
            currentPage++;
            if (currentPage>maxPages) {
              currentPage=maxPages;
            }
            done = true;
          }      
          else {
            println("Fehler Nr. 7831  "); // Error
          }
        }
      } // Ende Schleife 
    
      return(done);
    } // func 
    
    // ====================================================================================
    // class Button and RectButton
    
    class Button {
      int x, y;
      int sizeX;
      int sizeY;  
      color basecolor, highlightcolor;
      color currentcolor;
      boolean over = false;
      boolean pressed = false;  
      boolean Exists = false;  
      String Text = "";
      String ToolTipText = ""; 
      String Tag = "";
      int Tag2 = 0;
      int TagMark = 0; 
      color ButtonStrokeColor = color (255, 255, 255);
    
      void update() {
        if (over()) {
          // Mouse over 
          currentcolor = highlightcolor;
        }
        else {
          // not Mouse over 
          currentcolor = basecolor;
        }
      } // update 
    
      void toolTip() {
        if (over()) {
          if (!ToolTipText.equals("")) {
            if (millis() - timeSinceLastMouseMoved > 800) {
              fill (242, 245, 75);
              noStroke();
              textSize (18);
              float tw = textWidth(ToolTipText);
              float xLeft = x-(tw/2); 
              float xRight = x-(tw/2) + tw; 
              float xLeftText = x; 
              if (xRight>=width) { 
                xLeft= width-tw-2;
                xLeftText= xLeft + tw/2;
              } 
              if (xLeft< 2) 
              { 
                xLeft=2;
                xLeftText= 2 + tw / 2;
              }
              rect (xLeft, y+32, tw, 20);
              textAlign(CENTER);
              fill(0);
              text(ToolTipText, xLeftText, y+sizeY+19);
            } //  if
          } // if
        } // if
      } // func 
    
      boolean pressed() {
        if ( over()) {
          locked = true;
          return true;
        }
        else {
          locked = false;
          return false;
        }
      }  // pressed; 
    
      boolean over() {
        return true;
      } // over 
    
      boolean overRect(int x, int y, int width, int height) {
        if (mouseX >= x && mouseX <= x+width &&
          mouseY >= y && mouseY <= y+height) {
          return true;
        }
        else {
          return false;
        }
      } // overRect
    } // class
    
    class RectButton extends Button {
      public RectButton(int ix, int iy, int isizeX, int isizeY, color icolor, color ihighlight, boolean iExist) {
        x = ix;
        y = iy;
        sizeX = isizeX;
        sizeY = isizeY;    
        basecolor = icolor;
        highlightcolor = ihighlight;
        currentcolor = basecolor;
        Exists = iExist;
        Text = "";
      }
    
      boolean over() {
        if ( overRect(x, y, sizeX, sizeY) ) {
          over = true;
          return true;
        }
        else {
          over = false;
          return false;
        }
      }
    
      void display() {
        if (Exists) {
          // Befehlsbutton
          stroke (ButtonStrokeColor); 
          // strokeWeight(0); 
          fill(currentcolor);
          rect(x, y, sizeX, sizeY);        
          if (Text != "") { 
            fill(0, 102, 153);
            textAlign(CENTER);
            textSize(16) ;
            text(Text, (x + (sizeX / 2.0)), (y + (sizeY / 2.0))+5);
          } // if (Text != "")
        } // if exists
      } // method display
    } // class
    
    
    
    
    // Help texts 
    
    // hier geht es um die Hilfe, die bei F1 
    // auftaucht und um den Text links oben. 
    
    
    void Hilfe() {
      background(217); 
      fill (222);
      ShowText(HelpText() +  "\n Drücken Sie eine Maustaste ...");
      boolHelpModus=true ; 
      noLoop();
    }
    
    void ShowText (String MyText) {
      // fill(254, 254, 254);
      fill(217);
      noStroke();
      rect (0, 34, 300, 54);
      fill (0, 0, 230);
      textAlign(LEFT);
      /* if (boolShowSpecialMessage) {   
       text(SpecialText, 40, 55);
       } 
       else {
       text(MyText, 40, 55);
       }
       */
      text(MyText, 40, 55);
    } // function 
    
    // ---------------------------------------------------------------
    
    String HelpText () {
    
      String Buffer = ""; 
    
      //   Buffer
    
      Buffer = "=== Hilfe in " + Title + " === " +  "\n " +  "\n"; 
      Buffer = Buffer + " " +  ""; 
      Buffer = Buffer + "F1 Hilfe. " ;  
      Buffer = Buffer + "\n  " ;    
      Buffer = Buffer + "+ and -  ändert Stiftdicke\n "  ; 
      Buffer = Buffer + "0..4  ändert Stiftfarbe "  ; 
      Buffer = Buffer + "Cursortasten < >  Seite ändern\n "  ; 
      Buffer = Buffer + "\n  " ;
      Buffer = Buffer + "\n  " ;
      Buffer = Buffer + " ------ Weitere Tasten --------\n"  ; 
      Buffer = Buffer + "Esc - verlassen.\n"  ;   
      Buffer = Buffer + "w - lösche rechte Seite.\n"  ;      
      Buffer = Buffer + ""  ;   
    
      return (Buffer);
    } // function help 
    
    
    // Alle Inputs per Tastatur and Maus
    
    void keyPressed() {
      if (key == CODED) {
        if (keyCode == RIGHT) {
          currentPage++;
          if (currentPage>maxPages) {
            currentPage=maxPages;
          }
          if (currentPage==1) {
            initPointsForLine() ;
          }
        } // crs right 
        else if (keyCode == LEFT) {
          currentPage--;
          if (currentPage<0) {
            currentPage=0;
          }
          if (currentPage==1) {
            initPointsForLine() ;
          }
        } // crs left
        else if (keyCode == KeyEvent.VK_F1) { 
          // F1 
          // Help
          Hilfe();
        }
      } // CODED
      else 
        // not CODED
      {
        if (key == 'w' || key == 'W') {
          // delete all
          lines.clear();
        }
        else if (key == BACKSPACE) {
          int lastOne = lines.size()-1;
          if (lastOne>=0) {
            // Items can be deleted with remove()
            lines.remove(lastOne);
          }
          // println("BACKSPACE pressed");
        }
        else if (key == '+') {
          lineWidth++;
          // println("+ pressed");
        }
        else if (key == '-') {
          lineWidth--;
          if (lineWidth<=1) {
            lineWidth=1;
          }
        }
        else if (key == '0' || key == '1' || key == '2'  || key == '3'  || key == '4') {
          int val1 = int(key);
          colorPointer = val1-48;
          println(colorPointer);
        }
      } // else not CODED
    } // func 
    
    void mousePressed() {
      halten = true;
    }
    
    // ==========================================================
    
    void mouseReleased () {
      // mouse clicked, evaluate. 
    
      boolean done = false; 
    
      // Wenn das Spiel im Modus ist, in dem es die Hilfe zeigt:
      if (boolHelpModus) {
        // Hilfe-Modus beenden
        loop();
        boolHelpModus=false; 
        // Hintergrund 
        background(217);       
        halten=false;
      }
      else
      {
        // normale Auswertung der Maus. 
        // Wenn linke Taste der Maus
        if  (mouseButton == LEFT) {  
          // Liste prüfen 
          done = CheckButtonsOfArray();
        } //  if  (mouseButton == LEFT)
        halten=false;
      } // else
    } // function 
    
    
    
    // Lines in the right segment 
    
    void drawLines () {
    
      // With an array, we say balls.length, with an ArrayList, we say balls.size()
      // The length of an ArrayList is dynamic
      // Notice how we are looping through the ArrayList backwards
      // This is because we are deleting elements from the list 
      for (int i = lines.size()-1; i >= 0; i--) {
        // An ArrayList doesn't know what it is storing so we have to cast the object coming out
        Line line = (Line) lines.get(i);
        //ball.move();
        //ball.diminish();   
        line.display();
      }
    }
    
    // =====================================================================
    // Simple bouncing ball class
    
    class Line {
    
      float x;
      float y;
      float x2;
      float y2;
    
      color myColor;
      float speed;
      float gravity;
      float opacity;
      float w;
      float life = 255;
    
      Line(float tempX, float tempY, float tempX2, float tempY2, float tempW, color tempmyColor1) {
        x = tempX;
        y = tempY;
        x2 = tempX2;
        y2 = tempY2;
    
        w = tempW;
    
        myColor=tempmyColor1;
    
        speed = 0;
        gravity = 0.1;
        opacity=255;   // opacity
      }
    
      void move() {
        // Add gravity to speed
        speed = speed + gravity;
        // Add speed to y location
        y = y + speed;
        // If square reaches the bottom
        // Reverse speed
        if (y >= height-19) {
          // Dampening
          speed = speed * -0.8;
          y = height-19;
        }
      }
    
      boolean finished() {
        // Balls fade out
        // life--;
        if (life < 0) {
          return true;
        }
        else {
          return false;
        }
      }
    
      boolean finishedByOpacity () {    
        if (opacity<=0) {
          return true;
        }
        else {
          return false;
        }
      }// func
    
      void display() {
        // Display the circle
        //fill(0, life);
        fill(myColor, opacity);
        //stroke(0,life);
        stroke (myColor); 
        // ellipse(x, y, w, w);
        strokeWeight (w);
        line (x, y, x2, y2);
      }
    
      void diminish() {
        opacity = opacity-0.5;
      } // func
    } // class
    
    // =====================================================================
    
    
    
    // minor tools 
    
    //Bereich zum Zeichnen.
    void zeichnen() {
      stroke(255);
      if (pointIsWithinRect ( rightSegmentX, rightSegmentY, rightSegmentWidth, rightSegmentHeight, mouseX, mouseY)) {
        if (pointIsWithinRect ( rightSegmentX, rightSegmentY, rightSegmentWidth, rightSegmentHeight, pmouseX, pmouseY)) {
          if (halten) {
            // line(pmouseX, pmouseY, mouseX, mouseY);
            // A new line object is added to the ArrayList (by default to the end)
            lines.add(new Line(pmouseX, pmouseY, mouseX, mouseY, lineWidth, myNiceColors [colorPointer] ));
          }
        }
      }
    }
    
    boolean pointIsWithinRect ( int rightSegmentX, int rightSegmentY, int rightSegmentWidth, int rightSegmentHeight, int mouseX, int mouseY) {
      // expects x,y,width,heigth and then the point with x and y
    
      boolean result ; 
      result = (mouseX > rightSegmentX && 
        mouseY > rightSegmentY && 
        mouseX < rightSegmentX + rightSegmentWidth && 
        mouseY < rightSegmentY + rightSegmentHeight ) ;
      return(result);
    } // func 
    
    void  initPointsForLine() {
      helpPoint = new PVector(random(leftIndentText+3, leftIndentText+299), 440);
      helpPoint2 = new PVector(random(leftIndentText+3, leftIndentText+299), 460);
      helpPointAdd = new PVector(random(-2, 2), random(-2, 2));
      helpPoint2Add = new PVector(random(-2, 2), random(-2, 2));
    }
    
    void checkHelpPointsForLine() {
    
      helpPoint.add(helpPointAdd);
      helpPoint2.add(helpPoint2Add);
    
      // check helpPoint ----------------------------
      if (helpPoint.x<leftIndentText+110)
      {
        helpPointAdd.x=abs(helpPointAdd.x);
      }
      if (helpPoint.x>leftIndentText+299) {
        helpPointAdd.x=-1*abs(helpPointAdd.x);
      }
      if (helpPoint.y<422)
      {
        helpPointAdd.y=abs(helpPointAdd.y);
      }
      if (helpPoint.y>screenHeight-130) {
        helpPointAdd.y=-1*abs(helpPointAdd.y);
      }
    
      // check helpPoint2 ----------------------------
      if (helpPoint2.x<leftIndentText)
      {
        helpPoint2Add.x=abs(helpPoint2Add.x);
      }
      if (helpPoint2.x>leftIndentText+299) {
        helpPoint2Add.x=-1*abs(helpPoint2Add.x);
      }
      if (helpPoint2.y<422)
      {
        helpPoint2Add.y=abs(helpPoint2Add.y);
      }
      if (helpPoint2.y>screenHeight-130) {
        helpPoint2Add.y=-1*abs(helpPoint2Add.y);
      }
    } // func 
    
    

    code

    tweaks (0)

    about this sketch

    This sketch is running as Java applet, exported from Processing.

    license

    advertisement

    polar

    Book Prototype II

    Add to Faves Me Likey@! 2
    You must login/register to add this sketch to your favorites.

    draw in the right panel.
    left panel gives you infos.
    press F1 for help.

    polar
    11 Jan 2012
    runs well in Safari

    polar
    11 Jan 2012
    + and - ändert Stiftdicke
    0..4 ändert Stiftfarbe
    Cursortasten &lt; &gt; Seite ändern
    w - lösche rechte Seite
    polar
    22 Feb 2012
    I made an example were you can scribble and use backspace to delete.
    Since he's painting very often for mini line segments (mini parts of the line), you have to click backspace very often.
    Works with an arraylist, has multiple tabs.

    + and - change the weight of the stroke.
    0..4 change the color of the pen
    Cursor left and right - change page (book left side)
    w - delete your drawing complete
    Backspace - delete last parts of the line.

    You need to login/register to comment.