How can I add ControlP5 to my sketch

sandercrombach · July 2015

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

sandercrombach · July 2015

This is my sketch processing script.

bilmor · July 2015

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

sandercrombach · July 2015

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;
}

Howdy, Stranger!

Categories

In this Discussion

How can I add ControlP5 to my sketch

Answers