parametric abc

coded modular block letters

Developing modular block letters with nested programming structures. At first we sketched the letters with pen and paper, then in Illustrator with a grid system and at last coded them with p5js.

basic construction
The letters have to be composed out of a logic of modules. The aim is to have in the end a system with fixed amount of modules which can be used to piece together an alphabet. The left modules are for the upper case and the right one for the lower case.

code snippet lines
To draw one module we have written a function that represents two parallel lines with an arc each at both ends of the lines:

function drawLine(pos,length,angle){

push();
translate(pos.x,pos.y);
rotate(radians(angle));
noFill();
stroke(255);
strokeWeight(0.1);

arc(0.5,0.50,1,1,PI,2*PI,OPEN);
arc(0.5 ,0.5+length-1,1,1,0,PI,OPEN);

line(0,0.5,0,0.5+length-1);
line(1,0.5,1,0.5+length-1);
pop();
}

code snippet circles
For the circles and arcs we used a similar function.

function drawHalfcircle(pos,angle){

push();
translate(pos.x +3.5,pos.y +3.5 );
rotate(radians(angle));
noFill();
stroke(255);
strokeWeight(0.1);

ellipseMode(CENTER);
arc(0,0,7,7,PI,2PI,OPEN);
arc(0,0,5,5,PI,2
PI,OPEN);
ellipseMode(CORNER);
arc(-3.5,-0.5,1,1,0,PI,OPEN);
arc(2.5,-0.5,1,1,0,PI,OPEN);
pop();
}

function drawCircle(pos,radius){

push();
translate(pos.x,pos.y);
noFill();
stroke(255);
strokeWeight(0.1);
ellipseMode(CORNER);
ellipse(0, 0, 2+radius);
ellipseMode(CORNER);
ellipse(1, 1, radius);
pop();
}

build the alphabet
With the help of the modules wie build one alphabet. One with the lower case and one with the uppercase.
With that base everyone of us three created their own interactive alphabet. In the following you can see my solution.

surface and contour
The idea behind this example was to show which modules the alphabet consists of and in which combination it is built. For this I used the upper case. The letters are fully encoded with a light transparent one. If you hover with the mouse pointer over a letter, the modules change from full-surface to modules with a contour. The representation with the contour clearly shows the basic structure of the alphabet.

try it yourself

code description
Every letter was coded with outline and filled. To visualize the modules off the filled font we used the blendMode with the parameter "ADD" to show the overlaps. We then used a mouseover function to show the outlines, when hovered over the letter.

function A(pos,size){
var isInside = hittest(pos.x+8,pos.y, 7*8, 13*8);
strokeWeight(2);
stroke(255);

if (isInside == true){
//rect(pos.x+2+6,pos.y,7*8, 13*8);
push();
translate(pos.x,pos.y);
scale(size);
drawLineRotate({x:5.5,y:6.65},12.4,-14);
drawLineRotate({x:2.5,y:6.43},12.4,14);
drawLine({x:8.24,y:5},4.5,90);
pop();
}

else{
push();
translate(pos.x,pos.y);
scale(size);
blendMode(ADD);
stroke(0,206,209);
drawLineRotate2({x:4.9,y:5.65},12.4,-14);
drawLineRotate2({x:2.15,y:5.43},12.4,14);
drawLine2({x:8.76,y:5},4.5,90);
pop();
}

upper and lower length
For the next example I used the lower case. For this I took a closer look at the structure of the letters, especially at the middle aisles, ascenders and descenders. With a library I inserted the use of the microphone into the code, thus the ascenders and descenders are distorted, depending upon volume.

code description
The descenders and ascenders of the font are controlled via the input level of the microphone. You have to activate your microphone in the browser and read out the preset text in different volumes.

var mic;

function setup() { var vol = mic.getLevel();
micLevel = mic.getLevel();

var h = map(vol, 0, .4, 0, 100);

function a(pos,size){
 push();
 translate(pos.x,pos.y);
 scale(size);
 drawCircle({x:0,y:6},5);
 drawLine({x:6,y:6},7,0);

 pop();
}

My main task in this project was to develop that modular letters. With that base everyone of our team tried to experiment on their own. My solutions you can see above.

team partner
Janik Freisinger and Maximilian Walter

supervised by
Prof. Benedikt Groß

previous

next