Array and key press

Processing Libraries
1

The original code showed 8 letters and did the distorting on all the letters at once. I’m trying to do each letter part from eachother and doing the distorting per letter. I have added a key that once clicked, just shows one letter but i really only shows one letter, and still does the whole alphabet.

Anyone can help me or tell me what i did wrong?

to summarize: i want to show 1 letter at the time. Do the distorting, press N and shows the new letter and so on for the whole alphabet. At the end, it would save everything and ready to use. (I know have to add array were i can store the letter until the end, but can’t figure out how to add them separately and save them at the end)

Thanks for the help people! Still learning about processing possibilities!

import fontastic.*;
import geomerative.*;


Fontastic f;
RFont font;

PFont myFont;
int version = 0;
int charWidth = 512;
boolean fontBuilt = false;

void setup() {
  size(800, 400);
  fill(0);

  // always initialize the library in setup
  RG.init(this);

  // load the initial font
  font = new RFont("Courier New.ttf", 150);

  // get the points on the curve's shape
  // set style and segment resultion
  RCommand.setSegmentLength(200);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);

  initFont();

  updateFont();
}


void draw() {

  updateFont();

  background(255);

  strokeWeight(2);
  textSize(25);

  // Array of letters  // Total letters that is showed on the screen.
  int numberOfLetters = 1;


  for (int i=0; i<numberOfLetters; i=i+1) {
    if (key == 'n') {
      pushMatrix();
      translate(width/2, height/3);
      scale(charWidth/1000f / 5f); //Fontsize on screen.
      translate(-(numberOfLetters -1)*charWidth / 2 + i*charWidth, 0); //Position on screen.
      translate(-charWidth/2, charWidth/2);
      noStroke();
      fill(0, 128, 255);
      renderGlyphSolid(Fontastic.alphabet[i]);
      popMatrix();
    }
  }

  // if the ttf has already been built, display it
  if (fontBuilt) {
    pushMatrix();
    textFont(myFont);
    textAlign(CENTER, CENTER);
    fill(0);
    textSize(charWidth / 5f);
    text(new String(subset(Fontastic.alphabet, 0, numberOfLetters)), width/2, height*0.6);
    popMatrix();
  }
}

void initFont() {

  f = new Fontastic(this, "Distort" + nf(version, 4));

  for (char c : Fontastic.alphabet) {
    f.addGlyph(c);
  }

  for (char c : Fontastic.alphabetLc) {
    f.addGlyph(c);
  }

  //  f.setFontFamilyName("Confetti");  // if font has same name, it won't be loaded by Processing in runtime
  f.setAuthor("Andreas Koller");
  f.setVersion("0.1");
  f.setAdvanceWidth(int(charWidth * 1.1));
}


void updateFont() {
  RCommand.setSegmentLength(mouseX / 8f);// /2f is the distant where the distorted ends. (1 is closer, 1+ is futher)

  float maxOffset = 0; // This is the part that automates the animation when cursor is idle. (0 is none, 1+ is more)
  float speed = 0; // How more how slower its go. (1 is fastest, 1+ is slower)
  float timer = (millis()/speed) % maxOffset;
  float offset = (sin(timer / maxOffset * TWO_PI) + 1) * maxOffset / 2; // this is an sin oscillator between 0 and 100
  RCommand.setSegmentOffset(offset);

  for (char c : Fontastic.alphabet) {

    RShape shp = font.toShape(c);

    RPoint[] pnts = new RPoint[0];
    try {    
      pnts = shp.getPoints();
    }
    catch (NullPointerException e) {
      println("Problem with setSegmentOffset at Character "+c);
    }

    PVector[] points = new PVector[0];

    for (int i=0; i<pnts.length-1; i++) { // This part is how much distort you want.
      RPoint p = pnts[i];
      points = (PVector[]) append(points, new PVector(p.x * 5, -p.y * 5)); // Vertical and Horizontal scale
    }
    f.getGlyph(c).clearContours();
    f.getGlyph(c).addContour(points);
  }
}


void createFont() {
  f.buildFont(); // write ttf file
  f.cleanup();   // delete all glyph files that have been created while building the font

  fontBuilt = true;

  myFont = createFont(f.getTTFfilename(), 200); // set the font to be used for rendering

  version++;

  initFont();   // and make a new font right away
}

void renderGlyphSolid(char c) {

  FContour[] contours = f.getGlyph(c).getContoursArray();

  for (int j=0; j<contours.length; j++) {

    FPoint[] points = f.getGlyph(c).getContour(j).getPointsArray();

    //This part is about the visual rendering on screen.
    if (points.length > 0) {
      beginShape();
      vertex(points[0].x, -points[0].y);
      for (int i=0; i<points.length; i++) {
        FPoint p1 = points[i];
        FPoint p2 = points[(i+1)%points.length];
        if (p1.hasControlPoint2() && p2.hasControlPoint1()) {
          bezierVertex(p1.controlPoint2.x, -p1.controlPoint2.y, p2.controlPoint1.x, -p2.controlPoint1.y, p2.x, -p2.y);
        } else {
          vertex(p1.x, -p1.y);
        }
      }
      endShape();
    }
  }
}

void keyPressed() {

  if (key == 's') {
    createFont();
  }
}
1 Like
2
  • -a- your program in question needs 2 libraries and a font file
    so about 20 min to follow you and see what you see.
  • -b- but your problem is not related to any of this
    so you should have start in a new project just to work on the program structure
    ( like a array of circles … )
  • -c- what i miss is in setup a
  println(" [s] make font, [n] next char, mouse X segment length");
  • you reduced the array to [1] so how could it work anyhow?

//____________________________________
you want a operation concept like this?

  • cycle through the array with key [n]
  • use mouse x to adjust size
  • use mouse y to adjust color

cycle again and see that the adjusted values are remembered,
( but also can be edited again )

// array of 7 properties { size, color } 
int[][] show = {{5, 50}, {5, 100}, {15, 80}, {8, 10}, {3, 10}, {2, 90}, {11, 20}};  // default
int point = 0;

void setup() {
  size(400, 400);
  colorMode(HSB, 100, 100, 100);
  noStroke();
  println("key [n] next, mousepress X adjust size, mousepress Y adjust color");
}

void draw() {
  background(20, 100, 100);
  for (int i = 0; i <= point; i++) {
    fill(0);
    text(i+1, 5+i*50, 150);
    fill(show[i][1], 100, 100);
    ellipse(5+i*50, 200, show[i][0], show[i][0]);
  }
}

void keyReleased() {
  if ( key == 'n' ) {
    point++;
    if ( point > 6) { 
      point = 0;
    }
    println("key [n] "+point);
  }
}

void mousePressed() {
  show[point][0] = mouseX/4;
  show[point][1] = mouseY/4;
  println("point "+point+" show[point][0] size: "+show[point][0]+" show[point][1] color: "+show[point][1] );
}
2 Likes