Basically I want to fill the 700x1000 canvas with 3 sets of text lines till it hits 600 pixels y.
I’ve tried to make a String with the lines of text and put it into a for loop but I’m not sure if it’s the correct way or whether I’ve done it correct or not.
String [] words = {"vinterjazz", "01-24 feb. 2019", "www.jazz.dk"};
void setup() {
size(700,1000);
textSize(30);
}
void draw() {
background(0);
for (int i = 20; i < 500; i+35) {
text(words[1], 50, 100);
}
}
There are different ways to do this. If you ever play darts, you can shoot darts to the dart board. If you shoot enough darts, you can eventually fill the dart board. The only issue is that some of your darts my fall on top of other darts already in the board. In your case, is it ok for the text to overlap? You could place text randomly many times until your sketch is full of text.
Another approach is making sure that your text does not overlap. I am thinking along the lines that you want to fill your sketch with single letters. If you don’t want the letters to overlap, then you need an algorithm that checks for overlapping with “letters” already drawn in your sketch. I suggest you check this post where it discusses this approach. Instead of letters, you are using circles. So what you need to do is replace the circles with letters. For instance, instead of
ellipse(posx,posy,radius,radius);
you would need
text("a",posx,posy);
where the radius of the circle would be interpret as half size of the text size. You can set the text size using textSize(x); where x is the height in pixels. Also, don’t forget to use textAlign(CENTER,CENTER) to place the letter centrally aligned in the horizontal and vertical direction so to have the same behavior as the ellipse() function in the above post.
The approach you show above would work better if you use the text() function with 5 parameters instead of 3. Check the reference for more info.
Kf
final int TEXTSIZE=30;
void setup() {
size(700, 1000);
textSize(TEXTSIZE);
textAlign(CENTER, CENTER);
frameRate(1);
}
void draw() {
background(0);
String msg="";
//Partition your whole sketch area by the area of a single letter
// The factor of two is to ensure filling the whole area
//
float n = width*height / float(TEXTSIZE*TEXTSIZE/2);
for (int i = 0; i < n; i++) {
//Ensures adding a letter in the range of a..z
msg+=char('a'+int(random(0, 26)));
}
text(msg, 0, 0, width, height);
}
You are right I would prefer the words not to overlap - I would also prefer the words to be aligned horizontally (not spread out randomly)
Your code gives me random letters instead of the three pieces of text in my String.
I assume that I have to replace
msg+=char(‘a’+int(random(0, 26)));
in the loop but I’m not quite sure how to.
Essentially I want the code to fill the canvas with “vinterjazz / 01-24 feb. 2019 / www.jazz.dk” (each piece of text in a different color) with the possibility of scaling in size flexibly.
Quite new to processing so I appreciate the help a lot
Checking previous post in the forum could help you get started.
There is an example with words which almost does what you want. For different size text, it becomes more challenging as you need to become familiar with textAscent and textDescent and you need to adapt it to your use-case. Would a line of text fill your sketch? Would the line need to be repeated to to fill the sketch horizontally? I suggest you give it a try and find what works best for you. If you get stuck, tell us what part is not clear and I could help a bit more.
Next, some changes to adjust color:
final int TEXTSIZE=30;
void setup() {
size(700, 1000);
textSize(TEXTSIZE);
textAlign(CENTER, CENTER);
frameRate(1);
}
void draw() {
background(0);
for(float stepY=0;stepY<=height;stepY+=TEXTSIZE){
fill(lerpColor(50,200,stepY/height)); // Gradual lighter color toward the bottom edge of the sketch
//OTHER option: fill(int(random(50,200))); // random color at each line
text("vinterjazz / 01-24 feb. 2019 / www.jazz.dk", 0, stepY, width, stepY+TEXTSIZE);
}
}
