Line 101: | Line 101: | ||
== Manipulating Fonts == | == 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. | 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 [https://vimeo.com/147027181 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"); | |||
} |