How can I add ControlP5 to my sketch

Hi,

I'm unfortunately not a coder, but a designer... I know, I wish I could. And I made a script (after hours and hours) with which I can make images made out of letters, for a visual project. Really proud I managed to do so, you probably can imagine.

Now I tried to add the controlP5 controls so it is easier for me to adjust the settings, made in the script. Controls are like you can import images, change the line height and the letter space, make it into full colour or black/white and to save it as a vector based pdf (which is really nice).

But whatever I try, I can't make it work. I downloaded the controlP5 folder and placed it in the right libraries folder. Imported the library in sketch, but still nothing. Can someone help me?

I also want to make a applet out of it so it can be used as a seperate tool. But how do I do that?

Hope someone can help me.

Greetings Sander

Answers

  • edited July 2015

    This is my sketch processing script.

  • You'll get a better response if you format your code. Here's how:

    http://forum.processing.org/two/discussion/8045/how-to-format-code-and-text

  • import controlP5.*;
    
    import processing.pdf.*;
    
    ControlP5 cp5;
    
    // ADD TEXT (TEXT FIELD)
    String inputText = "DE TEKSTBROUWMEESTER";
    //
    
    
    void setup() {
    // IMAGE SIZE  
      size(800, 1200);
      smooth(); 
    
    
    // LOAD IMAGE FILE (PNG, JPG, GIF)
      img = loadImage("/Users/Sander/Documents/Processing/detekstbrouwmeester/data/4a LIZZYANN.jpg");
      println(img.width+" x "+img.height); 
    
    
    // LOAD FONT  
      font = createFont("/Users/Sander/Documents/Processing/detekstbrouwmeester/data/GT-Sectra-Trial-Black-Italic.otf", 12);
      textFont(font);
    }
    
    
    // FONT SIZE MAX
    float fontSizeMax = 200;
    
    
    // FONT SIZE MIN
    float fontSizeMin = 10;
    
    
    // FONT LINE HEIGHT
    float spacing = 8;
    
    
    // FONT LETTER SPACING
    float kerning = 0.2;
    
    
    // FONT SIZE STATIC
    boolean fontSizeStatic = false;
    
    
    // COLOR VS BLACK/WHITE
    boolean blackAndWhite = false;
    
    
    
    PFont font;
    PImage img;
    
    
    
    // SAVE FILE (PDF)
    boolean savePDF = false;
    
    void draw() {
      if (savePDF) beginRecord(PDF, "/Users/Sander/Documents/Processing/detekstbrouwmeester/pdf/beeld.pdf");
    
    
    // BACKGROUND COLOR
      background(#ffffff);
      
      
    // TEXT ALIGN  
      textAlign(CENTER);
    
    
      float x = 0, y = 10;
      int counter = 0;
    
      while (y < height) {
        // translate position (display) to position (image) belangrijk.
        int imgX = (int) map(x, 0, width, 0, img.width);
        int imgY = (int) map(y, 0, height, 0, img.height);
        // get current color
        color c = img.pixels[imgY*img.width+imgX];
        int greyscale = round(red(c)*0.222 + green(c)*0.707 + blue(c)*0.071);
    
        pushMatrix();
        translate(x, y);
    
        if (fontSizeStatic) {
          textFont(font, fontSizeMax);
          if (blackAndWhite) fill(greyscale);
          else fill(c);
        } else {
          // greyscale to fontsize
          float fontSize = map(greyscale, 0, 255, fontSizeMax, fontSizeMin);
          fontSize = max(fontSize, 1);
          textFont(font, fontSize);
          if (blackAndWhite) fill(0);
          else fill(c);
        } 
    
        char letter = inputText.charAt(counter);
    
    
        //int rotatie = int(random(0,4));
        // rotate(PI/rotatie);
    
        text(letter, 0, 0);
        float letterWidth = textWidth(letter) + kerning;
        // for the next letter ... x + letter width
        x = x + letterWidth; // update x-coordinate
        popMatrix();
    
        // einde van de regel
        if (x+letterWidth >= width) {
          x = 0;
          y = y + spacing; // voeg extra regel toe
        }
    
        counter++;
        if (counter > inputText.length()-1) counter = 0;
      }
    
      if (savePDF) {
        savePDF = false;
        endRecord();
      }
    }
    
    
    
    void keyReleased() {
    
      if (key == 'p' || key == 'P') savePDF = true;
      // change render mode
      if (key == '1') fontSizeStatic = !fontSizeStatic;
      // change color stlye
      if (key == '2') blackAndWhite = !blackAndWhite;
      println("fontSizeMin: "+fontSizeMin+"  fontSizeMax: "+fontSizeMax+"   fontSizeStatic: "+fontSizeStatic+"   blackAndWhite: "+blackAndWhite);
    }
    
    void keyPressed() {
      // change fontSizeMax with arrowkeys up/down 
      if (keyCode == UP) fontSizeMax += 2;
      if (keyCode == DOWN) fontSizeMax -= 2; 
      // change fontSizeMin with arrowkeys left/right
      if (keyCode == RIGHT) fontSizeMin += 2;
      if (keyCode == LEFT) fontSizeMin -= 2;
    }
    
    
    
    
Sign In or Register to comment.