# HEEELP letters moving with no mouse pressed

**URL:** <https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839>\
**Category:** Libraries\
**Created:** [April 1, 2019, 3:38pm UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839 "2019-04-01T15:38:35Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 1, 2019, 3:38pm UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839/1 "2019-04-01T15:38:35Z")

</div>

Hi Guys I want to make an animated gif with letters but I want the letters to change forms with no mouse Pressed can I do it? And it’s possible to save this gif into png? Thaaanks

```auto
import controlP5.*;
boolean record;

ControlP5 cp5;
Group g1;

//vars
int offset = 15;
int orbitRadius = 20;
int radius = 1;

int waveStrengthHorizontal= 5;
int waveStrengthVertical= 5;

float speed = 1;
PFont myFont;

void setupUI()
{  
    cp5 = new ControlP5(this);
    int space = 15;
    int cy = 0;
    int bx = 5;
    int by = 5;
    
    g1 = cp5.addGroup("Parameter")
                .setPosition(100,100)
                .setWidth(250)
                .setBackgroundHeight(100)
                .setBackgroundColor(color(255,50));
    
    cp5.addSlider("offset")
     .setPosition(by, bx + space * cy++)
     .setRange(0,30)
     .setGroup(g1);
     
    cp5.addSlider("orbitRadius")
     .setPosition(by, bx + space * cy++)
     .setRange(0,30)
     .setGroup(g1);
     
    cp5.addSlider("radius")
     .setPosition(by, bx + space * cy++)
     .setRange(0,30)
     .setGroup(g1);
     
    cp5.addSlider("waveStrengthHorizontal")
     .setPosition(by, bx + space * cy++)
     .setRange(0,30)
     .setGroup(g1);
     
    cp5.addSlider("waveStrengthVertical")
     .setPosition(by, bx + space * cy++)
     .setRange(0,30)
     .setGroup(g1);
     
    cp5.addSlider("speed")
     .setPosition(by, bx + space * cy++)
     .setRange(0,30)
     .setGroup(g1);
     
    g1.setPosition(10, height - 120 + 10);
}

void setup()
{
  frameRate(50);
  
  size(500, 500, P2D);
 beginRecord(PDF,"everything.pdf");

  setupUI();
  background(0);
   myFont = createFont("ATSackersHeavyGothic-48.ttf",34);
  
}

void draw()
{
 background(0);

 // text("3",10,10);
  
  int vCount = height / offset;
  int uCount = width / offset;
  
  for(int v = 0; v < vCount; v++)
  {
      for(int u = 0; u < uCount; u++)
      {
          float ox = u * offset;
          float oy = v * offset;
          
          float strength = u * waveStrengthHorizontal + v * waveStrengthVertical;
          int finalSpeed = (int)(360 / speed);
          
          float angle = (float)((((frameCount + strength) % finalSpeed) * Math.PI) / 90);

          float x = (float)(orbitRadius * Math.cos(angle));
          float y = (float)(orbitRadius * Math.sin(angle));
          
          stroke(255);
          fill(255);
          textSize(26);
          text("3",x + ox, y + oy, width/2, height/2);
      }
  }
}

void keyPressed()
{
  if(key == 'h')
  {
     g1.setVisible(!g1.isVisible());    

     if (key == 'q') {
        endRecord();
        exit();
     }
  }
 
  if (record) {
    endRecord();
    record = false;
  }
}

// Use a keypress so thousands of files aren't created
void mousePressed() {
  record = true;
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 1, 2019, 4:18pm UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839/2 "2019-04-01T16:18:08Z")

</div>

please repair your post and use the

```auto
</> code tag

```

and paste your code in.

( also repair your other recent topics )

now in 2 of them you try to ask something about  
mouse pressed,  
that is not understood,  
if you not want to use the mouse, replace the  
export start with a ? ( key == ‘s’ ) keyboard action.

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 1, 2019, 6:43pm UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839/3 "2019-04-01T18:43:59Z")

</div>

Sorry, I want to create a kinetic animation (letters moving again with different direction) but without using the mouse button.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 1, 2019, 11:54pm UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839/4 "2019-04-01T23:54:56Z")

</div>

-a- why you not repair your code posting?

-b- did you change your code already from mouse click to keyboard ?  
( like the PDF export to `if ( key == 's' )` )  
but  
for a singe frame save you must stay close to the example 3 from

> **[PDF Export / Libraries](https://processing.org/reference/libraries/pdf/index.html)**
>
> Create PDF files. These vector graphics files can be scaled to any size and printed at high resolutions.

with the `if ( record ) ` at begin and end of DRAW()

where is the import line for that library?  
`import processing.pdf.*;`

-c- why you talk about ‘GIF’ and ‘PNG’  
for PDF , SVG and DXF export need to use the respective library,  
for saving a display window to a picture use:

> **[save() / Reference](https://processing.org/reference/save_.html)**
>
> Saves an image from the display window. Append a file extension to the name of the file, to indicate the file format to be used: either TIFF (.tif), TARGA (.tga), JPEG (.jpg), or PNG (.png). If no ext…

-d- “letter moving again” is that a project description or a coding question?  
start stop a animation ( again, if not mouse use keyboard )  
but i not see any code for this?  
what is the variable what keeps your characters moving  
from one draw loop to the next?

-e- you actually not tell us what is your problem with the

> mousePressed

yes, you can not use a general CLICK on the canvas to do one thing  
and add use CP5 slider… where you also need to click mouse.

but you could change that export function also to a CP5 button instead keyboard action.

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 2, 2019, 7:30am UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839/5 "2019-04-02T07:30:05Z")

</div>

Firstly I don’t know how to post my code. Secondly I want the letters to change with time(for a few seconds).

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 2, 2019, 7:41am UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839/6 "2019-04-02T07:41:50Z")

</div>

import controlP5._;  
import processing.pdf._;  
boolean record;

ControlP5 cp5;  
Group g1;

//vars  
int offset = 20;  
int orbitRadius = 20;  
int radius = 10;

int waveStrengthHorizontal= 15;  
int waveStrengthVertical= 5;

float speed = 15;  
PFont myFont;

void setupUI()  
{

```
cp5 = new ControlP5(this);
int space = 15;
int cy = 0;
int bx = 5;
int by = 5;

g1 = cp5.addGroup("Parameter")
            .setPosition(100,100)
            .setWidth(250)
            .setBackgroundHeight(100)
            .setBackgroundColor(color(255,50));

cp5.addSlider("offset")
 .setPosition(by, bx + space * cy++)
 .setRange(0,30)
 .setGroup(g1);
 
cp5.addSlider("orbitRadius")
 .setPosition(by, bx + space * cy++)
 .setRange(0,30)
 .setGroup(g1);
 
cp5.addSlider("radius")
 .setPosition(by, bx + space * cy++)
 .setRange(0,30)
 .setGroup(g1);
 
cp5.addSlider("waveStrengthHorizontal")
 .setPosition(by, bx + space * cy++)
 .setRange(0,30)
 .setGroup(g1);
 
cp5.addSlider("waveStrengthVertical")
 .setPosition(by, bx + space * cy++)
 .setRange(0,30)
 .setGroup(g1);
 
cp5.addSlider("speed")
 .setPosition(by, bx + space * cy++)
 .setRange(0,30)
 .setGroup(g1);
 
g1.setPosition(10, height - 120 + 10);

```

}

void setup()

{  
frameRate(50);

size(500, 500, P2D);  
beginRecord(PDF,“everything.pdf”);

setupUI();  
background(0);  
myFont = createFont(“ATSackersHeavyGothic-48.ttf”,34);

}

void draw()  
{  
background(0);

int vCount = height / offset;  
int uCount = width / offset;

for(int v = 0; v \< vCount; v++)  
{  
for(int u = 0; u \< uCount; u++)  
{  
float ox = u \* offset;  
float oy = v \* offset;

```
      float strength = u * waveStrengthHorizontal + v * waveStrengthVertical;
      int finalSpeed = (int)(360 / speed);
      
      float angle = (float)((((frameCount + strength) % finalSpeed) * Math.PI) / 90);

```

float x = (float)(orbitRadius \* Math.cos(angle));  
float y = (float)(orbitRadius \* Math.sin(angle));

```
      stroke(255);
      fill(255);
      textSize(26);
      text("3",x + ox, y + oy, width/2, height/2);
  }

```

}  
}

void keyPressed()  
{  
if(key == ‘h’)  
{  
g1.setVisible(!g1.isVisible());

if (key == ‘q’) {  
endRecord();  
exit();  
}  
}

if (record) {  
endRecord();  
record = false;  
}  
}

void mousePressed() {  
record = true;  
}`Preformatted text`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 2, 2019, 8:35am UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839/7 "2019-04-02T08:35:56Z")

</div>

You can go back and edit your post (pen icon) or post the code anew

Prior to posting hit `ctrl-t` in processing to get auto-format

Then post and select the entire code section using the mouse. Then click ’\</\>’ in the command bar

---

<div class="post-metadata">

**Author:** ![fwtini](https://avatars.discourse-cdn.com/v4/letter/f/9d8465/32.png) [@fwtini](https://discourse.processing.org/u/fwtini)\
**Post date:** [April 2, 2019, 10:18am UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839/8 "2019-04-02T10:18:38Z")

</div>

Why I can not do it right? When you said me " Then click ’\</\>’ in the command bar" where exactly inside my code bar?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 2, 2019, 10:48am UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839/9 "2019-04-02T10:48:52Z")

</div>

In Processing: ctrl-t

Then copy and paste it into the forum

Then in the forum select code section with mouse

Then in the forum click the symbol `<\>` in the command bar OR click ctrl-shift-c

Then click the Reply button

Regards, Chrisir 😉

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 5, 2019, 4:46pm UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839/10 "2019-04-05T16:46:56Z")

</div>

> [@fwtini](#):
>
> where exactly inside my code bar?

When editing your code in the forum, highlight the code and format with this \</\> button

 ![25%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f6c66a0470da7160824e46d778012c2c5bc2f0e3.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 5, 2019, 6:51pm UTC](https://discourse.processing.org/t/heeelp-letters-moving-with-no-mouse-pressed/9839/11 "2019-04-05T18:51:47Z")

</div>

each box where you enter code in the forum has a small command bar right above it

click ’\</\>’ in the command bar after selecting with mouse