GMU:Wild Type/Benjamin Voßler

Benjamin Voßler

— Benjamin Voßler 15:14, 27 October 2015 (UTC)

Letter G/g

I decided to design the letter "G" for any reason.
I added a slider and a button from the controlP5 Library. Maybe that's the reason why the sketch isn't working properly on "openprocessing.org".

http://www.openprocessing.org/sketch/226732

Sketch

import controlP5.*; ControlP5 cp5; Slider abc;

int posX = 350; float radiusKlein = 200; float radiusGross = 350;

float linienStaerke = 1; float sliderValue = 0.1;

boolean buttonState1 = true; boolean buttonState2 = false;

void setup() {

 size(450, 450);

 cp5 = new ControlP5(this);

 // add a horizontal sliders, the value of this slider will be linked
 // to variable 'sliderValue' 
 cp5.addSlider("sliderValue")
   .setPosition(10, 10)
   .setSize(100, 10)
   .setRange(0.5, 60)
   ;

 cp5.addButton("switchCapitals")
   .setValue(0)
   .setPosition(10, 25)
   .setSize(100, 20)
   ;

};

void draw() {

 background(255);
 linienStaerke = sliderValue;
 strokeWeight(linienStaerke);

 ////////////  g  ////////////////
 if (buttonState1 == true) {
   pushMatrix();
   translate(350, 50);
   ellipseMode(CORNER);
   rotate(PI/2);
   ellipse(0, 0, radiusKlein, radiusKlein);
   popMatrix();
   line(350, 50, 350, 300);
   ellipseMode(CENTER);
   arc((posX - 200/2), 300, 200, 200, 0, HALF_PI*1.4);
   noFill();
 };

 ////////////  G  ////////////////
 if (buttonState2 == true) {
   arc(225, 225, radiusGross, radiusGross, 0, PI*1.75);
   line(200, 225, 400, 225);
 };

};

// change state of buttonA for lower g public void switchCapitals(int theValue) {

 println("a button event from buttonA: "+theValue);
 buttonState1 = !buttonState1;
 buttonState2 = !buttonState2;

};

Encrypted School Font

In Grammar School a friends of mine and I, we designed a set of letters to write encrypted letters, which, if our teacher find, he cannot read.
This font is an tribute to this school font.
This font has been designed with Adobe Illustrator. I spent 2 days to import the .svg's into Processing and then generate the font out of it. But I found no way.
So I generated it with: https://icomoon.io
Download it here

Manipulating Fonts

I tried to manipulate the font with Geomerative, but somehow it could't be detected as a font. I spent another 2 days to figure out why, but I found no solution.

Animating Fonts

I took the letters A and B of my Encrypt-School-Set Font and drew the intersection points between the letters and a animated ellipse.

See the video here or here.

And have a look at the code here:

import processing.opengl.*; import geomerative.*;

import de.looksgood.ani.*;

RShape shp; RShape shp2;

float incr = 0; float swing = 0;

void setup() {

 size(600, 600, OPENGL);
 smooth();

 // you have to call always Ani.init() first!
 Ani.init(this);

 // VERY IMPORTANT: Allways initialize the library before using it
 RG.init(this);
 RG.setPolygonizer(RG.ADAPTATIVE);

 shp = RG.loadShape("A.svg");
 shp = RG.centerIn(shp, g);

 shp2 = RG.loadShape("B.svg");
 shp2 = RG.centerIn(shp2, g);

 RG.ignoreStyles();

}

void draw() {

 //let the incr variable grow 
 incr = incr+0.025;
 //set it to randomRad variable 
 float randomRad = noise(incr);
 randomRad = randomRad*50;
 //let the ellipse swing
 float swing = sin(incr);

 translate(width/2, height/2);
 background(#FFFFFF);
 noFill();
 stroke(0);

 // Draw the shape
 if (keyPressed == true) {
   if (key == 'a') {
     //Ani.to(this, 0.5, "swing", width-100, Ani.BOUNCE_OUT);
     //println("swing"+swing);
     RG.shape(shp);
     // Create and draw a cutting line
     RShape cuttingLine = RG.getEllipse(width/2-width/2, height/2-height/2, (width)*swing, (height)*swing);
     RG.shape(cuttingLine);

     fill(0, 255);
     noStroke();

     // Get the intersection points
     RPoint[] ps = shp.getIntersections(cuttingLine);
     if (ps != null) {
       for (int i=0; i<ps.length; i++) {
         ellipse(ps[i].x, ps[i].y, randomRad, randomRad);
         strokeWeight(1);
         stroke(0);
       }
     }

     if (ps != null) {
       for (int i=0; i<ps.length-1; i++) {
         line(ps[i].x, ps[i].y, ps[i+1].x, ps[i+1].y);

         stroke(0);
       }
     }
     strokeWeight(0);
   };
   if (key == 'b') {
     RG.shape(shp2);
     // Create and draw a cutting line
     RShape cuttingLine2 = RG.getEllipse(width/2-width/2, height/2-height/2, (width)*swing, (height)*swing);
     RG.shape(cuttingLine2);

     fill(0, 255);
     noStroke();

     /*(if(mousePressed == true){
      // animate the variables x and y in 1.5 sec to mouse click position
      println("BAM");
      Ani.to(this, 1, "x", random(width-randomRad*1.3), Ani.BOUNCE_OUT);
      Ani.to(this, 1, "y", random(height -randomRad*1.3), Ani.BOUNCE_OUT);
      
      }*/

     // Get the intersection points
     RPoint[] ps2 = shp2.getIntersections(cuttingLine2);
     if (ps2 != null) {
       for (int i=0; i<ps2.length; i++) {
         ellipse(ps2[i].x, ps2[i].y, randomRad, randomRad);
         strokeWeight(1);
         stroke(0);
       }
     }

     if (ps2 != null) {
       for (int i=0; i<ps2.length-1; i++) {
         line(ps2[i].x, ps2[i].y, ps2[i+1].x, ps2[i+1].y);

         stroke(0);
       }
     }
     strokeWeight(0);
   };
 };
 // Saves each frame as line-000001.png, line-000002.png, etc.
 //saveFrame("data/Frames/line-######.png");

}