How can I make text scroll vertically? Kind of like a vertical marquee?

Programming Questions

bianconer..

How can I make text scroll vertically? Kind of like a vertical marquee?

in Programming Questions • 2 years ago

I have been playing around with the "Typing" example in the Processing IDE (under 3D>Typography) and been trying to use the same effect but scroll up and not move horizonatally (i.e cursor shouldn't move to the left" Can someone help me? Thanks in advance :)

Replies(8)

clankill3r

Re: How can I make text scroll vertically? Kind of like a vertical marquee?

2 years ago

i looked at the example but i don't really understand what you want.

cedrickie..

Re: How can I make text scroll vertically? Kind of like a vertical marquee?

2 years ago

i am not really sure what you want as well...
so i did what you asked for "cursor not moving horizontally" and "test scoll up"
is that what you wanted ?

int leftmargin = 10;
int rightmargin = 20;
String buff = "";
boolean didntTypeYet = true;

void setup()
{
size(640, 360, P3D);

}

void draw()
{
background(176);

if((millis() % 500) < 250){ // Only fill cursor half the time
    noFill();
}
else {
    fill(255);
    stroke(0);
}
float rPos;
// Store the cursor rectangle's position
rPos = width/2;
rect(rPos+1, 319, 10, 21);

// Some instructions at first
if(didntTypeYet) {
    fill(0);
    //text("Use the keyboard.", 22, 40);
}

fill(0);
pushMatrix();
translate(rPos,310+25);
char k;
for(int i = 0;i < buff.length(); i++) {
    k = buff.charAt(i);
    translate(textWidth(k),0);
    rotateY( textWidth(k)/70.0);
    rotateX(-textWidth(k)/70.0);
    scale(1.1);
    text(k,0,0);
}
popMatrix();
}

void keyPressed()
{
char k;
k = (char)key;
switch(k){
case 8:
    if(buff.length()>0){
      buff = buff.substring(1);
    }
    break;
case 13: // Avoid special keys
case 10:
case 65535:
case 127:
case 27:
    break;
default:
    if(textWidth(buff+k)+leftmargin < width-rightmargin){
      didntTypeYet = false;
      buff=k+buff;
    }
    break;
}
}

bianconer..

Re: How can I make text scroll vertically? Kind of like a vertical marquee?

2 years ago

Cedrick, Clankiller,

I meant something like a news ticker, but instead of it flowing from right to left, it flows bottom up. Ideally I would want to use some rotation or something to give it a visual effect, maybe a sine wave or something.

cedrickie..

Re: How can I make text scroll vertically? Kind of like a vertical marquee?

2 years ago

how should the text scroll up ? letter by letter, word by word ? can you give an example? maybe some mockup in photoshop if you can

bianconer..

Re: How can I make text scroll vertically? Kind of like a vertical marquee?

2 years ago

The idea is text move vertically in some kind of a curve, maybe a sine wave or something....

Here is an image of how I want it to look like.

Thanks in advance :)

EDIT: I don't care about text input from keyboard, text will be fed into processing from another program and processing should make that text scroll up that way.

cedrickie..

Re: How can I make text scroll vertically? Kind of like a vertical marquee?

2 years ago

this is pretty hard to achieve with standart processing text. but take a look at the nexttext library. it already comes with an example that is quite similar http://www.nexttext.net/examples/

bianconer..

Re: How can I make text scroll vertically? Kind of like a vertical marquee?

2 years ago

Cedrick,

The pic is just for illustration and I realize that the wave is irregular, couldn't it be done in a sine wave?

Nexttext seems neat and all, but is outdated, and documentation is kinda crappy.

bianconer..

Re: How can I make text scroll vertically? Kind of like a vertical marquee?

2 years ago

Hey Cedrick,

I found this code at processinghacks.com and modified it to give me what I wanted. Here it is for the benefit of somebody in the future

Thanks for putting up with me :)

/*
textoncurves taken from http://processinghacks.com/hacks:textoncurves
@author Chris Hoge

Slightly edited by Rami Taibah
*/
PFont font;

TextCurve textCurve;
Identity identity;
Sine sine;
Cosine cosine;

String s;
float t;

void setup()
{
size( 1440, 900,P3D );
font = loadFont( "AlArabiya.vlw" );
textFont( font, 40 );

// The functions we want to draw a curve against
identity = new Identity();
sine = new Sine( height/5, 0.01, height/2 );
cosine = new Cosine( height/4, 0.01, height/2 );

// The string to place on the curve
s = new String("Hello World! Hello World! Hello World!");

textCurve = new TextCurve( identity, sine );

t = 0;
background(0);
}
int m=900;
void draw()
{
background(255);
smooth();
fill( 0, 50 );
rect( 0, 0, width, height );
fill( 0 );

// draw the text on the curve
textCurve.draw( s, m, 25 );
//Change speed of scrolling here
m=m-10;

// update the functions for the animation
sine.m_d = t;
cosine.m_d = t;
t += 4;
}

class TextCurve
{
Function m_xfunction;
Function m_yfunction;
String m_nextChar;

// Text curve uses parametric functions, so y and x are functions of t
TextCurve( Function xfunction, Function yfunction )
{
    m_xfunction = xfunction;
    m_yfunction = yfunction;
}

void draw( String value, float t, float spacing )
{
    float x;
    float y;
    float dx;
    float dy;
    float theta;
    for ( int i = 0; i < value.length(); ++i )
    {
      // compute the location
      x = m_xfunction.f( t );
      y = m_yfunction.f( t );

      // compute the tangent line
      dx = m_xfunction.f( t + 0.01 ) - x;
      dy = m_yfunction.f( t + 0.01 ) - y;

      // compute the letter rotation
      theta = atan2( dy, dx );

      // move the location to draw the letter to the origin
      // then rotate the letter by the proper amount
      pushMatrix();
      translate( y, x );
      rotate( theta );

      // draw the text
      text( value.substring( i, i+1 ), 0, 0 );

      // return to our original canvas
      popMatrix();
      t += spacing;
    }
}
}

// an interface for a parametrix function
interface Function
{
float f( float t );
}

class Identity implements Function
{
Identity() {}

float f( float t )
{
    return t;
}

}

// wrapper for sin
class Sine implements Function
{
float m_a;
float m_b;
float m_c;
float m_d;

Sine( float a, float b, float c)
{
    m_a = a;
    m_b = b;
    m_c = c;
    m_d = 0;
}

float f( float t )
{
    return m_a*sin( m_b*(t +m_d) ) + m_c;
}
}

// wrapper for cos
class Cosine implements Function
{
float m_a;
float m_b;
float m_c;
float m_d;

Cosine( float a, float b, float c)
{
    m_a = a;
    m_b = b;
    m_c = c;
    m_d = 0;
}

float f( float t )
{
    return m_a*cos( m_b*(t +m_d) ) + m_c;
}
}

Top Reply