Processing - changing the font size based on mouseY position

164 views
Skip to first unread message

whosAltoon

unread,
Jun 3, 2016, 12:11:33 PM6/3/16
to Processing.js

Hi there everyone I am trying to create a program that changes the size of a text with the Y position of the mouse. When the mouse cursor reaches the top of the screen, the text will become smaller, when the mouse cursor reaches the bottom of the screen, the text will increase in size. I can seem to figure out how to make this processing smooth and seamless gradually changing the font size with the mouse Y position.

This video will illustrate the effect I am trying to create:


https://www.youtube.com/watch?v=hsiUACf2vmw


My Code: 


void setup() {

  noiseSeed(1);

  size(600,600);

  smooth();

  noFill();

  PFont Bebas100;

  Bebas100 = loadFont("Bebas100.vlw");

  textFont(Bebas100);

  }

 

 void draw() 

  {

  background(0);

  textAlign(CENTER,CENTER);

  textSize(50);

  { 

  if(pmouseY > 350)

  textSize(90);

  if(pmouseY < 250)

  textSize (10);

  }

  

  createFont("Text Example", 30, true);

  text ("Text Example", 300, 300);

    

  

  

}

Lee Brunjes

unread,
Jun 3, 2016, 12:51:17 PM6/3/16
to proces...@googlegroups.com
Looking at your code you have a few extraneous things in there.


In setup you turn fill off.
  noFill();

This means items will not fill.  I believe the default for text is to fill and not stroke so that means when you do your  text call at the end it does nothing try adding fill(255,255,255)  and it may render text.

Ill hack some of the extra stuff you aren't using out, but this is what you end up with:

void setup() {

  size(600,600);

  PFont  Bebas100 = loadFont("Bebas100.vlw");

  textFont(Bebas100);

  }

 

 void draw() 

  {

  background(0);

  textAlign(CENTER,CENTER);

  textSize(50);

  if(pmouseY > 350){

  textSize(90);

}

  if(pmouseY < 250){

  textSize (10);

  }

  fill(255,255,255);

--
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to processingjs...@googlegroups.com.
To post to this group, send email to proces...@googlegroups.com.
Visit this group at https://groups.google.com/group/processingjs.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages