Hi guys why my text doesn't show?

I want to direct the text from left to right and from up to down

PFont myFont;
String s= "test";



float x=100;
float y=100;
float speed=0.5;
int direction=1;


void setup(){
  size(700,700);
  background(255);
  myFont = loadFont("AppleGothic-48.vlw");
   // textSize(60);
//text(s,50,250); 
  
}
void draw(){
  background(255);
  x +=speed *direction;
  if((x>100) || (x<100)){
    direction = -direction;
  }
 
  if(direction==1){
    fill(0);
    text(s,x,200,1.45,3.4);
  
  
}}
1 Like

Here is the text:

//PFont myFont;
String s= "test";
float x=100;
float y=100;
float speed=0.5;
int direction=1;

void setup() {
  size(700, 700);
  //background(255);
  //myFont = loadFont("AppleGothic-48.vlw");
  // textSize(60);
  //text(s,50,250);
}

void draw() {
  background(255);
  x += speed * direction;
  if ((x<100) || (x>200)) {
    direction = -direction;
  }
  //if (direction==1) {
    fill(0);
    text(s, x, 200);//, 1.45, 3.4);
  //}
}

At least you can see it now. What’s wrong with how it moves?

1 Like

Yes I want the word “test” to go from right then down and again from down to right.

String s= "test";

float x=0;
float y=0;

void setup(){
  size(700,700);
  background(0);
  myFont = loadFont("AppleGothic-48.vlw");
  x=width;
}
void draw(){
 // background(255);
 
  if(x<=700){  
 fill(255);
textSize(60);
text(s,x,70);
x=x-5; 
}
}

How can I do this? Can you please explain it to me?

It is not clear how you want the text to move. Please draw a diagram.

Does it come in from the right?
When does it start to move down?
How far down does it move?
Then what does it do?

Your descriptions so far have not been clear.

A perimeter moving, starting from upper right corner to upper left corner and next to bottom left corner and bottom right corner and from a to b and then b to a.

Untitled-2

really lazy but you could do something like this

//set up some variables for handling the label
PVector[] targets;
PVector position;
int currentTarget;
String label;

void setup() {
  //set the display size of the sketch
  size(640, 480);
  //set the size of the text that is to be displayed
  textSize(32);
  
  //what you want the label to say
  label = "groovy";
  //the width of the label which is used for adjusting the target positions below
  float labelWidth = textWidth(label);
  //an array of targets which the label will travel to. in this case it is just the four corners of the display
  targets = new PVector[] {
    new PVector(0, 32),//top-left
    new PVector(width - labelWidth,  32),//top-right
    new PVector(width - labelWidth, height - 32),//bottom-right
    new PVector(0, height - 32)//bottom-left
  };
  //the position of the label
  position = new PVector(0, 0);
  //an index into the targets array
  currentTarget = 0;
}

void update() {
   //linearly interpolate the position of the label towards the current target
   position.lerp(targets[currentTarget], 0.1);
   
   //if the position of the label is within some distance (in this case < 1) of the current target
   //move to the next index of the target array with a wrap around
   if(PVector.dist(position, targets[currentTarget]) < 1) {
     //this just wraps the index into the target array from 0-3
     currentTarget = (currentTarget + 1) % targets.length;
   }
}

void draw() {
    //clear the display
    background(0);
	//perform the update
    update();
	//draw the label using the position
    text(label, position.x, position.y);
}

edit looks like

groovy

2 Likes

thank you! But I cannot understand the code. Maybe there is another easy way to do it?
Or no? =/

i’ve added some basic comments to the code maybe that will help. best of luck.

Maybe can you help me with another one! I want to rotate the numbers (1) when the letter moving from right to left. Can you tell me how can I do it? Thank you!

PVector[] targets;
PVector position;
PVector[] sTargets;

int currentTarget;
int sTarget;
String s;
String s1;
float x,y;
float xPosition;
void setup() {
  size(700, 700);
  textSize(32);
  

  s = "test";
  s1="1";

  float sWidth = textWidth(s);

  targets = new PVector[] {
    new PVector(0, 32),
    new PVector(width - sWidth,  32),
  };
  

  
  position = new PVector(0, -50);

}

void update() {
   position.lerp(targets[currentTarget], 0.1);
  
   if(PVector.dist(position, targets[currentTarget]) < 1) {
     currentTarget = (currentTarget +1) % targets.length;
   }
}

void draw() {
    background(0);
    update();
  text(s, position.x, position.y);
  for(x=0; x<500; x++){
      for(y=0;y<500; y++){
       if(x%100==0 && y%100==0){
      text(s1,x+150,y+150);
          }}}}

WE’RE DONE, AND HERE’S WHY: You are feature creeping us.

Don’t.

We don’t want to help you develop everything step by step. Tell us your end goal - your ultimate desire - your final perfect sketch. And tell us it NOW. UP FRONT. FIRST.

Then we can take steps towards it little by little. But you MUST have an end goal in mind first.

1 Like

ok sorry I din’t understand it

Regarding the initial moving-along-a-path question, one general approach is a list-based interpolation.

Here is an example. In setup, a path made of points is defined. In draw, the current path location is computed based on the clock. Then that location (0-1) is passed to the lerpVectors function to find the current point along the path.

// LerpVectorsSimplified
// 2019-04 Processing 3.4 - based on LerpVectorsExample by Jeremy Douglass
PVector vecs[];
PVector loc;

void setup() {
  size(200, 200);
  // mark path points
  vecs = new PVector[4];
  vecs[0] = new PVector(10, 10);
  vecs[1] = new PVector(width-10, 10);
  vecs[2] = new PVector(width-10, height-10);
  vecs[3] = new PVector(10, height-10);
  stroke(255,0,0);
  fill(0,0,255);
} 
 
void draw() {
  background(255);
  int time = millis()%4000;  // a clock that counts up to 4000 and starts over
  float sawtoothWave = map(time, 0, 3999, -1, 1);  // from -1 to 1, then starts over
  float triangleWave = abs(sawtoothWave);  // bounces 0-1-0-1-0
  loc = lerpVectors(triangleWave, vecs);  // find our location in 2D path based on 0-1
  ellipse(loc.x, loc.y, 50, 50);  // draw at the location
}
  
// based on an amount, find the location along a path made of points
PVector lerpVectors(float amt, PVector... vecs) {
  if(vecs.length==1){ return vecs[0]; }
  float cunit = 1.0/(vecs.length-1);
  return PVector.lerp(vecs[floor(amt / cunit)], vecs[ceil(amt / cunit)], amt%cunit/cunit);
}
1 Like