Writing out sentences with mouse

[tkelly4]

Hello, I am not a programmer in any way, so I barely know anything about coding. We are doing a code based imagery project for my art class using Java coding. We are supposed to eventually turn it into a drawing app and I wanted to use words to draw with but I am not sure how to do that or if its possible. I want to do something like this:

Typehover - OpenProcessing

this is what I have so far:

void setup() {
  size(1000, 1000);
  fill(126);
  background(102);
  cursor(CROSS);
}

void draw() {
    //text("80's mixtape",500,400);
    PFont mono;
    mono = createFont("Serif-48.vlw",50);
    textFont(mono);
   textAlign(CENTER,CENTER);
   text("80's mixtape",500,400);
    fill(255,random(255),random(255),255);
    if (key == 'j')
    text("~Don't stop believin'~",mouseX,mouseY);
    fill(random(255),random(255),random(255),random(255));
    textSize(30);
    if (key == 't')
    text("~I think we're alone now~",mouseX,mouseY);
    fill(random(255), 255, 255, 255);
    textSize(30);
 if (key == 'r')
    text("~Never gonna give you up~",mouseX,mouseY);
    fill(255,random(255),255,255);
    textSize(30);
}

I apologize in advance if I posted this in an incorrect format. Please and thank you for any advice you can offer.

[Lexyth]

You can format the Code by using the </> sign when posting/editing.

As for what you are trying to do…

Do you want to have the text as a predefined pattern, or be displayed along a drawn path (like in the sketch you linked)?

I just assume, that having the text like in your Code (i‘ll Just call it Windows Freeze Style) is not what you want, right?

[tkelly4]

Displayed along a drawn path like in the sketch.

Yea, what I have it not what I want. Its just what I could manage to do.

[Lexyth]

Actually, i meant the sign in the menu above when posting.

B I | ” </> and so on… (the signs aren‘t really that close to the originals

[Lexyth]

(Posting a new Message instead of editing the old one for notification reasons…)

As for how to achieve what you want to do, the simplest approach would probably be, to have an array with the mouse positions (the positions where the mouse was while mousePressed was true every n frame).

For that, you might actually want to use a List, since you‘ll need to dynamically append the values, or you can go with an array of size Text.length(), if you want the drawing to stop when the text ends (like a pen missing ink at some point), or to restart the text there, in which case the first part could be deleted…

Then, once you decided which approach to take, you just need to iterate over each of your positions and display the respective char at the given position.

It‘s way easier than it sounds, but you‘ll need to decide on the approach before i can get into more Detail, Else it‘s just gonna be a lot to cover.

[tkelly4]

Having the drawing stop when the text ends I think would be fine. I think I get what you are saying about arrays but am not for sure and that is my own fault. A lot of this code stuff is pretty confusing for me. I’m really sorry.

[Lexyth]

Well, since you want to go with a simple array instead of Lists (arrays have fixed size), it‘s going to be a bit easier.

Also, it‘s generally confusing when you start programming, just like it‘s confusing to have to write in a language you don‘t know… it‘s obviously going to take a while, but it‘s a lot simpler than learning a new language, since most of the things are already translated to english, so you can what things do or how to do things.

What you need to keep in mind, is that programming is basically just 2 things. Knowing what you want and knowing how to split it up into smaller parts (individual commands). Well, there‘s also other stuff like knowing what is more efficient, how to do certain things, a bit of Math is also useful, knowing where to look for answers (documentation/references, github and so on) and other things, but they come naturally over time and there‘s no need to know everything at once.

As for your Code, what you want is to display Text in a drawn path. So what we need for that, is :

•a way to display text in specific positions
For this we need :
•the specific positions
•the character to display in these positions
•An array of characters or a String. We‘ll just use “Hello” for now.
•The index at which the char is that we want to display at the position of the path array with the same index

•a way to get/set those locations
For that we need :
•mouse position while the mouse is pressed
•an if statement, to check if the mouse is pressed
•the last index we set in the path array, to set the position to the next index
•an array to store the position
•we need to know the length of the text

So these will be the lines of Code we need (not in that order/ not used in this way) :

//our text
String text = "Hello";

//the index we last saved a position to
int index; 

//i‘d rather use PVector[] for this, but let‘s go with this for starters
//The positions of our path
float[] pathX = new float[text.length()];
float[] pathY = new float[text.length()];

//a way to display the char at the position (both having the same index)
text(char c, float x, float y);

//a way to check if we want to add a new position
if (mousePressed) {}

//a way to check if we still want to add positions
if (index < text.length()-1) {}

//the actual positions for the points of our path
mouseX;
mouseY;

//Note that the length of an array is read with .length, while the length of a String is read using .length().
//a way to iterate over each position in the array/each char in the text we already have a position for
for (int i = 0; i < index; i++) {}

//a way to space out the characters a bit
dist();//to measure the distance to the last position we have, to space the chars out a bit

//a way to get a char at an index of a String
text.charAt(i);

I hope i didn‘t forget anything there…

That should be all you need to do it. If you need help with anything, just tell me

[tkelly4]

Thank you very much, I will do my best to work with this. I’m still somewhat confused. I’ve never done coding before and our art teacher didn’t really give us much to work with and it’s due tomorrow morning. I prob should have just asked sooner for help. Thank you again.

[Lexyth]

Well, i‘ll just add this here behind a spoiler, if you need some hints, but try to do it yourself first. It‘s not all that difficult, but getting the details right can be quite annoying (just fought for half an hour, because apparently having a variable called „text“ is not good with the IOS version )

Spoiler

int index = 0;

String txt = "Hellooooooooo543210";

float[] pathX = new float[txt.length()];
float[] pathY = new float[txt.length()];

void setup() {
   size(800, 600);
}

void draw() {
   background(0,0,255);
   
   for (int i = 0; i < index; i++) {
      text(txt.charAt(i), pathX[i], pathY[i]);
   }
   
   if (mousePressed) {
      if (index > 0 && index < txt.length()) {
         if (dist(pathX[index-1], pathY[index-1], mouseX, mouseY) > 20) {
            pathX[index] = mouseX;
            pathY[index] = mouseY;
            index++;
         }
      } else if (index == 0){
         pathX[0] = mouseX;
         pathY[0] = mouseY;
         index++;
      }
   }
}

[tkelly4]

Thank you again.
Is there a way to keep the letters from turning backwards when writing out? It’s not a big deal if they can’t be, just curious

[Lexyth]

Uhm… this might be a bit Late anyway, but what do you mean by keep from turning backwards? The letters shouldn‘t turn at all, since there‘s no Code for rotations (although you could add that, to make it more readable, but that would involve some more complex calculations)