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.
//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);
}
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!
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.
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);
}