Try to program a pointless texbox

[lousshe]

Hello. this is a small mini project. I am already so far that it is a normal interpretation of a text box with mouse tracking.

Now I try to modify the text if you move the red button around (textbox size).
By modify i mean something simple. like text size that changes dynamically. Text that overlaps or single letters that start to mirror each other. A small tool which serves more for entertainment…

Would be glad if someone explains me the mechanism. The text must be somehow merged with the mouse tracking.

PFont Nexa;
float mx;
float my;
float easing = 0.05;
int radius = 24;
int edge = 100;
int inner = edge + radius;

void setup() {
size(900, 900);
//fullScreen(2);
noCursor();

Nexa = createFont(“Nexa Bold.otf”, 111);
ellipseMode(RADIUS);
ellipseMode(RADIUS);
rectMode(22);
}

String quote = “SILLY TEXT FRAME –TO CONTROL THE VERTICAL ALIGNMENT OF TYPE, THE DISTANCE TEXT IS INSET FROM THE EDGE OF THE FRAME.XOXO XOOXOXOX OXOXOX OOXOX OXOXO XOXOX OXOX OOXO XOXO XOXOO XXO”;
//\n

//Nexa(textValue + getCursor(), x + 5, y + boxHeight/2);

void draw(){

background(#f1f1f1);
fill(0);
textFont(Nexa);
textSize(111);
//textAlign(frameCount, frameCount);

//ADD TEXT TO STRING
float fontSize = 315;
float lineHeight = fontSize * 0.9;

textAlign(RADIUS, TOP);

//
fill(0);
text(quote, 33, 33, mouseX, mouseY );
noFill();
stroke(#F03C3C);
strokeWeight(7);
rect(22, 22, mouseX, mouseY);
textAlign(LEFT, mouseY);
fill(#F03C3C);

//frameCount

//Movment
if (abs(mouseX - mx) > 0.1) {
mx = mx + (mouseX - mx) * easing;
}
if (abs(mouseY - my) > 0.1) {
my = my + (mouseY- my) * easing;
}

mx = constrain(mx, inner, width - inner);
my = constrain(my, inner, height - inner);
fill(76);
// rect(edge, edge, width-edge, height-edge);
fill(#F03C3C);
ellipse(mx, my, 11, 11);

//ellipse(width-mouseX, frameCount, 66, 66);
// ellipse(mouseX, mouseY, 11, 11);
//text(“here”, width-mouseX, mouseY);

//rect(30, 20, 55, ); //space left
}

[Mikey83]

Have you tried using the map() function with the mouse location, that would allow you to modify the text size dynamically. just insert it into the textSize() like

textSize(map(mouseX,0,width,20,200));

as an example

[glv]

Hello @lousshe,

See:
https://processing.org/reference/rect_.html

Replace c and d with mouseX and mouseY

Then progress to making a text box:
https://processing.org/reference/text_.html

You stated that you did the above already…

Next steps:

• use get() to grab the image in the text box.
• texture a shape with that image
  See texture()
• modify the u, v mapping to flip the image in the shape
• display the shape at the desired coordinates

And voila:

This all took a bit of effort but worth the trouble to learn…

The above is one way of doing it…

I am already thinking of other ways to do this and considering scale() to flip the images.

:)

[lousshe]

That’s great! thanks for the explanation. That helped me a lot. and partly i realized what is happening there. The .scale() and float fontSize i’ll try it too.

[glv]

Hello @lousshe,

The texturing of a PShape was just one thing that came to mind in the moment… the text was a bit blurry for me.

Another thing I had success with was direct pixel manipulation.

You can flip the pixels around and create cool effects… in this case I just reversed the text or flipped it vertically, horizontally or both.

References:
https://processing.org/tutorials/pixels
https://processing.org/tutorials/rendering If you use PGraphics
https://processing.org/tutorials/typography

Related topic:
https://forum.processing.org/two/discussion/24173/flipping-an-image.html

:)