Rhythmic Glyphs
Rhythmic Glyphs is a generative design system that generates rhythmic text strings along trigonometric paths.
Rhythmic Glyphs: Transformation
The transformation of rhythmic glyph uses trigonometric functions. Its principle is based on trigonometric functions such as sine, cosine, and tangent, which are integrated functions of p5.js. Each glyph from a text input fills an array which is then translated into separated characters, each one following a trigonometric animation. and a value returned from a trigonometric calculation is given to each character, creating a clean rhythm
Relevating coding functions for a grid transformation
let input;
let Xdensity;
let size;
let letters = [];
function setup() {
createCanvas(600, 600);
input = createInput("The quick brown fox");
Xdensity = 6;
size = 50;
}
function draw() {
background(250);
const val = input.value();
let xOffset = 0;
for (var i = 0; i < val.length; i++) {
const charWidth = textWidth(val[i]);
const xPosition = i * Xdensity + xOffset;
letters[i] = new Letter(val[i], xPosition, i);
textSize(size)
fill(0);
xOffset += charWidth;
letters[i].display();
}
}
class Letter {
constructor(character, x, index) {
this.character = character;
this.x = x;
this.index = index;
this.size = 50;
this.Yspeed = 1;
this.amplitude = 180;
this.frequency = 0.3;
this.y = this.calculateYPosition();
}
calculateYPosition() {
return 400 + sin(this.index * this.frequency) * this.amplitude;
}
display() {
textSize(this.size);
text(this.character, this.x, this.y);
}
}
Rhythmic Glyphs: Parameters
The parameters are height density, width density, frequency, amplitude, repetitions, size, time factor, shear X factor, blur, and fly effect. Below are examples of the parameters amplitude and shear X factor. Below is an example with the parameter amplitude.
Relevating coding functions for a grid transformation
let input;
let Xdensity;
let frequency;
let amplitude;
let size;
let speed;
let letters = [];
let arrayOfLines = [];
let numberLines;
let sliderAmplitude;
function setup() {
createCanvas(600,600);
input = createInput("WORDS WEAVE DREAMS");
numberLines = 3; // Number of arrays of letters
Xdensity = 20;
frequency = 0.2;
amplitude = 100;
size = 35;
sliderAmplitude = createSlider(20,200,100,1)
sliderAmplitude.position(20,20)
}
function draw() {
background(250, 200);
let valAmplitude = sliderAmplitude.value();
const val = input.value();
const totalWidth = val.length * textWidth('W') * 0.6; // Total width of the text
let xOffset = (width - totalWidth) / 2; // Starting x-position to center the text
for (let j = 0; j < numberLines; j++) {
// Clear the array for each line
letters = [];
// Calculate y-position for each line
let yPosition = j * 50;
// Create letters for the current line
for (let i = 0; i < val.length; i++) {
const charWidth = textWidth(val[i]);
const xPosition = xOffset + i * Xdensity * 0.6; // Adjusted x-position for each character
// Calculate y-position with sine wave effect
let yOffset = sin((i + frameCount / 6) * frequency) * valAmplitude;
// Adjust y-position for the current line
let adjustedYPosition = yPosition + yOffset;
letters.push(new Letter(val[i], xPosition, adjustedYPosition));
textSize(size);
fill(0);
letters[i].display();
letters[i].update();
xOffset += charWidth * 0.6;
}
arrayOfLines.push(letters);
xOffset = (width - totalWidth) / 2;
}
}
class Letter {
constructor(character, x, y) {
this.character = character;
this.x = x;
this.y = y;
this.Yspeed = 2; // Randomize speed for each letter
}
update() {
this.y += this.Yspeed;
}
display() {
textSize(size);
text(this.character, this.x, 300 + this.y);
}
}
Rhythmic Glyphs: Iterations
The development of Rhythmic Glyphs took a few iterations, each one giving new results.
Relevating coding functions for a grid transformation
let input;
let Xdensity;
let frequency;
let amplitude;
let size;
let Yspeed;
let Ypos;
let abstand;
let speed;
let letterPositions;
function setup() {
createCanvas(600,600);
input = createInput("THE BROWN FOX JUMPS");
Xdensity = 6;
frequency = 0.2;
amplitude = 100;
size = 50;
Yspeed = 0.05;
abstand = 100;
letterPositions = [];
}
function draw() {
background(250);
const val = input.value();
let xOffset = 0;
for (let i = 0; i < val.length; i++) {
const charWidth = textWidth(val[i]);
const xPosition = i * Xdensity + xOffset;
let letterPos = letterPositions[i];
if (!letterPos) {
letterPos = createVector(xPosition, 0);
letterPositions[i] = letterPos;
}
letterPos.y += Yspeed * sin(i * frequency) * amplitude;
textSize(size);
fill(0);
text(val[i], letterPos.x, letterPos.y);
xOffset += charWidth;
if (letterPos.y >= height) {
letterPos.y = 0;
}
}
}
Rhythmic Glyphs: Instances
Below are three diferente instances of Rhythmic Glyphs. All possible instances can be explored in the live tool↗.