“You can make anything by writing” – C. S. Lewis

Concept:

I’ve been watching a few of Patt Vira’s videos on coding and one of them about generative text jumped out to me. In this video she made the text rotate in a interesting pattern. So I followed along the video and decided to add more to it to make it more interactive in that sense. I wanted to see if it is possible to change the font, to change the message and have some sort of mouse contact with it. Whilst the font change and user inputted message was fine, learning to manipulate with position vectors was a bit of a challenge to learn. But this was quite a fun project to extend and make. Below is the final product.

How it’s made:

So the code is done with points, where the points are displayed based on the text’s poistion. Then lines are drawn to give that 3D effect of the code. Now this code utilizes the angles, and degrees which I will be honest, I struggle to understand as they were quite, finiky to say the least.

But then the text itself is displayed on the screen, in the rotational motion and in 3D. Again, learning this was quite a challenge but it was interesting nonetheless. And then of course, making it so the user could input a bit of code was done with the createInput function. There’s a text box below where the user can generate any text they want and it will be displayed.

And of course then came making a list of different fonts, and a mousePressed function to cycle through the various different fonts.

But the challenging part was still the vectors and manipulating the mouse.

Highlighted bit of Code I’m proud of:

So figuring this out took some time but I believe I got it down for the most part. The idea is to see the distance of the mouse with the points on screen. In this way, we can measure how far the mouse is from a given point so it can have some force when applied.

Then seeing the distance as it gets closer, the force in terms of a vector is applied to a point. Then its just simply adding or subtracting that vector so that point can go back to its original position.

But of course to make it smoother, I found out there is a function called lerp which calculates the number between two numbers, following some incriment. In this case, it can be used to see the distance between the origin point, and the vector point, and in a sense, make a line. Then depending on the incriment, that number, or in our case the point, will travel based on the speed provided from the incriment.

let mX = mouseX - 100;
let mY = mouseY - 300;

for (let i = 0; i < points.length; i++) {
let p = points[i];

// The variable d checks the distance from the mouse to any given point
let d = dist(mX, mY, p.x, p.y);

// These if elses make it so if the mouse is getting closer, then some force is applied to push the points
if (d < 50) {
let pushForce = 5; 
if (mX < p.x) p.x += pushForce;
else p.x -= pushForce;

if (mY < p.y) p.y += pushForce;
else p.y -= pushForce;
}

//I found this lerp function makes it so the points return back to their original position
p.x = lerp(p.x, p.originX, 0.1);
p.y = lerp(p.y, p.originY, 0.1);

Reflection

I will say, I wish I could do more with this code. Obviously time constraints and many assignments coming up did hinder the overall product but I feel like some ways I can expand on it is by making different designs of the typography. Or even, finally figuring out how to make the text spin in different directions. However I feel confident in what I learned so far through this assignment so hopefully I can use this to expand on it for the midterm project.