How to add controlP5 to my script

sandercrombach

Hi there!

I really need some help. I'm a visual designer (not a coder, unfortunately) and I made a script (after hours and hours) with which I can make images out of letters, for a visual project. And now I want to add the controlP5 so it's easier to adjust the settings of the images. But whatever I try, it doesn't work! :(

I would like to add these controls to the script, but I'm not a coder and I don't understand how to get it to work.

• Load image file (png, jpg, gif) (button)
• Add text (textfield)

• Save file (PDF) (button)

• Font line height (slider)

• Font letter spacing (slider)

• Font size range (slider)

• Font size static (button)

• Font size static range (slider)

• Color / BlackWhite (toggle)

• Text align (left/center/right) (toggle)
• Background color (textfield # ?)

I imported the controlP5 library in sketch and it works with example scripts.

Down below is my script. Hopefully someone can help me!?

Cheers Sander

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

GoToLoop

http://forum.Processing.org/two/discussion/11710/how-can-i-add-controlp5-to-my-sketch