Zoom in a specific letter

Processing Coding Questions
1

Hi Guys I want in the following code to zoom in a specific letter “3” and after to return back. Can I do it?

int w;
PFont myFont;
float x = 70;
float y = 6;
float theta = 0.0;  
float amplitude = 1000.0; 
float period =1.0;  

float[] yvalues; 

float xpos, ypos;
float xspeed= 0.0;
float yspeed = 0.0;
int xdirection = 10;
int ydirection = 10;
int rad =10;


int x1=100;
int dx=1;

void setup() {
  size(800,400);
  
  myFont = loadFont("Avenir-Medium-48.vlw");
  textFont(myFont);
  
  w = width+15;
 // dw = (TWO_PI / period) * xspacing;
  yvalues = new float[w/2];
  
  
  
  xpos= width/2;
  ypos = height/2;
  
  
  x1=x1+dx;
  if(x>width){
    dx = -1; 
  }
  if(x<0){
    dx = 1;
  }
}

void draw() {
  background(0);
  
xpos = xpos + (xspeed * xdirection);
ypos = ypos + (yspeed * ydirection);
  
calcWave();
renderWave();
  }

void calcWave() {
  
  theta += 1.0;

  float x = theta;
  for (int i = 0; i < yvalues.length; i++) {
    yvalues[i] = sin(x)*amplitude;
    x+=dx;
  }
}

void renderWave() {
  fill(255);
  // A simple way to draw the wave with an ellipse at each location
  for (int x = 0; x < yvalues.length; x++) {
    text("3",x*x+50, 100+yvalues[x], 800,400);
    
    
    
    
    
  if (xpos > width-rad || xpos < rad) {
    xdirection *= -1;
  }
  if (ypos > height-rad || ypos < rad) {
    ydirection *= -1;
     text("3",x*x, 400+yvalues[x], 300,300);
  }
  }
}
1 Like
2

? zoom = show bigger ? on what ?


float tsize = 10;
// ...
  textSize(tsize);

// ..
void keyPressed() {
  if ( key == '+' ) tsize++; 
  if ( key == '-' ) tsize--;   
}
3

With no mousepressed. =/ Can I do it?

4

zooming?
maybe you can use translate() pushMatrix() popMatrix() and scale()
Good Luck!

5

the 3 are moving fast.

How do you want to zoom? Stop the animation and then zoom in ?

6

Example

// vars
PFont myFont;

float s=1; 
float x1, y1;

int phase=0;

int xStart, xStart2;

void setup() {
  size(1500, 500, P2D);
  background(0);

  x1=width/2;
  y1=height/2;

  xStart=width+8;
  xStart2=width+18;

  myFont = createFont("ARIAL", 34);
  textFont(myFont);
  textAlign(CENTER, CENTER);
  textMode(SHAPE);
}

void draw() {
  background(0);

  animateThree();

  text("3", 
    xStart2, y1-33);
  xStart2-=3;
}//draw

// ------------------------------------------------------------------------------

void animateThree() {

  pushMatrix(); 

  if (phase==0) {
    if (xStart>width/2) { 
      text("3", 
        xStart, y1);
      xStart-=3;
    } else
    {
      phase=1;
    }
  }
  // --- 
  else if (phase==1) {
    translate(x1, y1);
    scale (s);
    text("3", 
      0, 0);
    s+=.1;
    if (s>11) 
    {
      phase = 2;
    }
  }//if
  // ---
  else if (phase==2) {
    translate(x1, y1);
    scale (s);
    text("3", 
      0, 0);
    s-=.1;
    if (s<=1) 
    {
      phase = 3;
    }
  }//if
  // ---
  else if (phase==3) {
    if (xStart>-12) { 
      text("3", 
        xStart, y1);
      xStart-=3;
    } else phase=4;
  }//if
  // ---
  else if (phase==4) {
    // end
  }

  popMatrix();
}

void mousePressed() {
  //
}
//
1 Like
7

thaaank you!!!
:grinning:

1 Like
8

Good example with scale. There are several different approaches to “zoom” onto text:

  1. change textSize – text is bigger, so appears closer – https://processing.org/reference/textSize_.html
  2. change the rendering scale – everything (including text) gets bigger while scaled – https://processing.org/reference/scale_.html
  3. in 3D, move the camera closer to the text plane – https://processing.org/reference/camera_.html
  4. in 3D, use translate to move the text drawing plane closer to the camera – https://processing.org/reference/translate_.html

Which approach works best depends on what your other goals for the sketch are – are there other objects, are there other camera motions, is it 3D et cetera.

2 Likes