# Ideas which I want to realize in Processing

**URL:** <https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130>\
**Category:** Project Guidance\
**Created:** [August 8, 2020, 8:03am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130 "2020-08-08T08:03:45Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [August 8, 2020, 8:03am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/1 "2020-08-08T08:03:45Z")

</div>

Hello, everyone. I wanna give a motion to texts like [this](https://v-fonts.com/). Can we do it in processing ? If we can, who has an idea how to do it ?  
Thanks everyone who answers)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 8, 2020, 8:16am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/2 "2020-08-08T08:16:43Z")

</div>

Hello,

Scrollbar:

> **[Examples](https://processing.org/examples/)**
>
> Short, prototypical programs exploring the basics of programming with Processing.

A good example for mapping mouse:

> **[map() / Reference](https://processing.org/reference/map_.html)**
>
> Re-maps a number from one range to another. In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the w…

I find this useful for changing values with mouse movement and use it often in code development.

There are also GUI libraries to explore.

One of the best tools in a programmer’s tool chest is knowing the resources available to you and learning to navigate, filter, and use them.

A short list of resources to peruse:

> **Resources \< Click here to expand !**
>
> Explore the resources available here:
> 
> - The Processing _website_ has references, examples, tutorials, links to resources, etc.  
> [https://processing.org/](https://processing.org/)
> 
> - The Processing PDE (IDE) has lots to offer!  
> An exploration of the menu bar will reveal what is available; libraries, tools, local examples, and other goodies are in there.
> 
> - The Coding Train \< Experience the unbridled enthusiasm of Daniel Shiffman  
> [https://shiffman.net/](https://shiffman.net/)  
> [https://www.youtube.com/user/shiffman](https://www.youtube.com/user/shiffman)  
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
> 
> - Happy Coding  
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
> 
> - The source code can give insight if you are adventurous:  
> [GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)
> 
> - Explore Processing on GitHub:  
> [Processing Foundation · GitHub](https://github.com/processing)  
> [processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java) \< Many of the Processing functions are here!
> 
> - The Processing Foundation  
> [https://processingfoundation.org/](https://processingfoundation.org/)  
> Check out the menu.  
> In the education menu, there is a reference to the Coding Train.
> 
> - And the Internet. `:)`

`:)`

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [August 8, 2020, 8:47am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/3 "2020-08-08T08:47:19Z")

</div>

It seems like you want [variable fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)?

Processing doesn’t provide CSS properties like `font-weight` and `font-variation-settings` for adjusting the font styling. Those are specific to the web browser environment (which means you could accomplish this with [p5](https://p5js.org/), the JavaScript version of Processing).

But, variable fonts are kind-of-like multiple font variants bundled into a single file. So, you could add several fonts to your sketch and switch between them to achieve a similar effect.

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [August 8, 2020, 8:57am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/4 "2020-08-08T08:57:28Z")

</div>

@glv what do u say for it ? In processing there is no font weight …

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 8, 2020, 9:00am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/5 "2020-08-08T09:00:42Z")

</div>

Explore the references to see what is available:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ecc74f68b580a99f7182b409f54f9a99277a690a.png)

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [August 8, 2020, 9:02am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/6 "2020-08-08T09:02:23Z")

</div>

@glv I have read all of this… I tried everything… that didn’t help me at all… That’s i’m asking it here…

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [August 8, 2020, 9:05am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/7 "2020-08-08T09:05:16Z")

</div>

@glv look at [this](https://www.instagram.com/p/CCEsAViijX3/?utm_source=ig_web_copy_link). How is he doing ?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 8, 2020, 1:22pm UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/8 "2020-08-08T13:22:07Z")

</div>

@tabreturn provided his insight.

You can change textSize() and shearX() easily enough:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/098229e48a4a166dce66b05293ffcd20638c4ef6.png)

> [@yhlaskerimov](#):
>
> How is he doing ?

I hope they are doing well!

You can create your own custom shapes and manipulate those.  
This is achievable for a few characters as per your last example; it may be a lot of work for anything more than that.

`:)`

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [August 8, 2020, 1:43pm UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/9 "2020-08-08T13:43:12Z")

</div>

@glv but textSize() doesn’t change stroke of that text… I want to solve that problem… Thanks.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 8, 2020, 5:49pm UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/10 "2020-08-08T17:49:56Z")

</div>

> [@yhlaskerimov](#):
>
> @glv look at [this](https://www.instagram.com/p/CCEsAViijX3/?utm_source=ig_web_copy_link). How is he doing ?

Look at that!

I used my suggestions to recreate [this](https://www.instagram.com/p/CCEsAViijX3/?utm_source=ig_web_copy_link) (your link above):

Hints:

- map() of mouseX and mouseY for strokeWeight() and angle
- custom shape with line() and strokeCap(ROUND)
- You will have to use some trigonometry to translate the vertices of your line

> [@yhlaskerimov](#):
>
> textSize() doesn’t change stroke of that text… I want to solve that problem

strokeWeight() changed the stroke of that text.

I posted a picture to show that it was achievable for the example you provided. I will finish the E for me; rest of the alphabet I may for my personal library.

That is all I can offer on this topic.

Recreating that inspired me so took on that challenge.

Think of all the references as building blocks and the rest is you unleashing your creativity.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d68c133e0f4bd1129ea9fc6ecb1b202eb3bad630.png)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/afcfe034af28058dc24f1ba3855d0fa918011c66.png)

`:)`

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [August 10, 2020, 4:59am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/11 "2020-08-10T04:59:51Z")

</div>

@glv so you did it only with shapes ? Not text() function yes ?

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 10, 2020, 5:10am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/12 "2020-08-10T05:10:44Z")

</div>

You might be able to use the scale function in combination with textsize to simulate weight increases. Try setting textsize high and then reducing height and width with scale

---

<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:** [August 10, 2020, 8:56am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/13 "2020-08-10T08:56:04Z")

</div>

The geomative library has good font stuff

See library section

I forgot exact name

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [August 10, 2020, 12:38pm UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/14 "2020-08-10T12:38:27Z")

</div>

@Chrisir I’m trying to learn Geomerative for 1-2 months. But I can’t learn it 😟. I didn’t find any tutorials. I have tried to read documentation. That didnt help too…

---

<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:** [August 10, 2020, 1:13pm UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/15 "2020-08-10T13:13:59Z")

</div>

here are examples [http://www.generative-gestaltung.de/1/code](http://www.generative-gestaltung.de/1/code)

Chrisir

**Another example**

```auto

import geomerative.*;

RFont font;

void setup() {
  size(1000, 800);
  smooth();
  RG.init(this);

  font = new RFont( "ARIAL.TTF", 500, RFont.CENTER);

  frameRate( 200 );
}

void draw() {
  background(0); 
  // rect(0, 0, width, height);
  fill(255, 255, 255, 50);
  stroke(0);
  strokeWeight(2);
  translate(width/2, 500);

  RGroup grp = font.toGroup("Q");

  RCommand.setSegmentLength(1);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);

  RPoint[] pnts = grp.getPoints();
  float r=random(-30, 30);
  float time = 0.0;

  float inc = 0.01;
  for ( int i = 1; i < pnts.length; i=i+9 ) {
    float n=noise(time)*200;
    n = 37;
    stroke(i, 255, 22);
    point(pnts[i].x+n, pnts[i].y);
    time += inc;
  }
}

```

---

<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:** [August 10, 2020, 1:15pm UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/16 "2020-08-10T13:15:32Z")

</div>

and another example

```auto

import geomerative.*;

RFont fnt;
String inp = "Test…";

void setup () {
  size(1800, 700);
  noFill();
  RG.init( this );

  fnt = new RFont( "SNAP ____.TTF", 162, RFont.LEFT);

  // smooth();
}

void draw () {

  background( 120 );

  translate( 10, height/2 );
  scale(2);
  strokeWeight(0.2);

  if ( inp.length() > 0 )
  {
    RG.setPolygonizer(RG.UNIFORMLENGTH);
    RG.setPolygonizerLength( map(mouseX/2, 0, width, 1, 30) );

    RShape shp = fnt.toShape( inp );

    shp.polygonize();
    RPolygon poly = shp.toPolygon();
    for ( int i = 0; i < poly.contours.length; i++ )
    {
      RContour c = poly.contours[i];
      int a = mouseY/10 ;
      for ( int ii = 0; ii < c.points.length; ii++ )
      {
        if ( mousePressed )
          rLine( c.points[ii].x, c.points[ii].y, c.points[abs(ii+a)%c.points.length].x, c.points[abs(ii+a)%c.points.length].y );
        else
          line( c.points[ii].x, c.points[ii].y, c.points[(ii+a)%c.points.length].x, c.points[(ii+a)%c.points.length].y );
      }
    }
  }
}

void rLine ( float x1, float y1, float x2, float y2 )
{
  bezier( x1, y1, 
    x1+(abs(x1-x2)/2), y1+(abs(y1-y2)/2), 
    x2-abs(x1-x2)/2, y2-abs(y1-y2)/2, 
    x2, y2 );
}

void keyPressed ()
{
  if ( key == BACKSPACE || key == DELETE )
  {
    if ( inp.trim().length() > 0 )
    {
      inp = inp.substring( 0, inp.length()-1 );
    }
  } else if ( key != CODED )
  {
    inp += key;
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 10, 2020, 1:19pm UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/17 "2020-08-10T13:19:19Z")

</div>

> [@yhlaskerimov](#):
>
> I’m trying to learn Geomerative for 1-2 months. But I can’t learn it

It is my first time using Geomerative.

I took the _Tutorial\_07\_HelloWorld\_getPoints_ example that comes with the library and…

Only used:

```auto
RG.setPolygonizer(RG.ADAPTATIVE);

```

Added this to examine the vertices:

```auto
println(points[i].x , points[i].y );

```

And just the letter ‘E’.

I also removed any code I did not want.

Once I knew what the vertices were I added code to modify the vertices based on their position.  
I used map() to skew the letter based on the y vertex.

There are resources for learning about shapes and vertices; this in the resources I linked.

In my previous post I created my own shape (custom character) and knew the vertices.

Geomerative extracts the vertices from a font and enabled me to work with those.

There is a learning curve to all of this and you have to start somewhere.  
Every step I took was an essential part of my learning curve to achieve this.

My first step to see what the vertices are:

```auto
if(points != null)
    {
    noFill();
    strokeWeight(2);
    stroke(0, 0, 0);
    beginShape(POINTS);
    for(int i=0; i<points.length; i++)
      {
      float x1 = points[i].x; 
      float y1 = points[i].y;
      
      vertex(x1, y1);
      println(x1 , y1 );
      }
    endShape(CLOSE); 
    }

```

Output:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/123a6b0d75713fa9791f4d8d98f214b8de9b105f.png)

This is your journey. Enjoy it!

What I did so far to skew the character:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7e8ed3cd4d45913c38e1f53aaa77a7242e018b95.png)

I will definitely revisit this for my future projects.

`:)`

---

<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:** [August 10, 2020, 1:22pm UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/18 "2020-08-10T13:22:09Z")

</div>

Swarm example

```auto

/*

 
 http://www.caligraft.com/exhibition/pyrographie
 
 
 
 
 ----------------------------------------------------------------
 Copyright (C) 2005 Ricard Marxer Piñón
 
 email (at) ricardmarxer.com
 http://www.ricardmarxer.com/
 ----------------------------------------------------------------
 
 This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; either version 2 of the License, or
 (at your option) any later version.
 
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
 along with this program; if not, write to the Free Software
 Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
 
 ----------------------------------------------------------------
 Built with Processing (Beta) v098
 uses Geomerative (Alpha) v004
 ----------------------------------------------------------------
 
 Created 12 November 2006
 
 ----------------------------------------------------------------
 pyrographie
 ----------------------------------------------------------------
 
 */

import processing.opengl.*;
import geomerative.*;

RFont f;
RGroup grupo;
Particle[] psys;
int numPoints;
int ballsize;
float segLength;

//------------------------ Runtime properties ----------------------------------
// Save each frame
boolean SAVEVIDEO = false;
boolean SAVEFRAME = false;
boolean APPLICATION = true;

String DEFAULTAPPLETRENDERER = JAVA2D;
int DEFAULTAPPLETWIDTH = 680;
int DEFAULTAPPLETHEIGHT = 480;

String DEFAULTAPPLICRENDERER = OPENGL;
int DEFAULTAPPLICWIDTH = 800;
int DEFAULTAPPLICHEIGHT = 600;
//------------------------------------------------------------------------------

// Text to be written
String STRNG = "partycular";

// Font to be used
String FONT = "FreeSans.ttf" ; // "Lacuna.ttf";

String newString = "";

void setup() {

  int w = DEFAULTAPPLICWIDTH, h = DEFAULTAPPLICHEIGHT;
  String r = DEFAULTAPPLICRENDERER;

  if (!APPLICATION) {
    // Specify the widtha and height at runtime
    //w = int(param("width"));
    //h = int(param("height"));
    //r = (String)param("renderer");

    // (String) will return null if param("renderer") doesn't exist
    if (r != OPENGL && r != P3D && r != JAVA2D && r != P2D) {
      r = DEFAULTAPPLETRENDERER;
    }
    // int() will return 0 if param("width") doesn't exist
    if (w <= 0) {
      w = DEFAULTAPPLETWIDTH;
    }
    // int() will return 0 if param("height") doesn't exist
    if (h <= 0) {
      h = DEFAULTAPPLETHEIGHT;
    }
  }

  // size(w, h, r);
  size(680, 480, P3D);
  frameRate(25);

  // always initialize the library in setup
  RG.init(this);

  try {
    smooth();
  }
  catch(Exception e) {
  }
  background(0);

  f = new RFont( FONT, 372, RFont.CENTER);

  initialize();
}

void draw() {
  translate(width/2, height/2);
  noStroke();
  int val = 25;
  if (keyCode==CONTROL) val=5;
  fill(0, val);
  rect(-width/2, -height/2, width, height); 

  for (int i=0; i<numPoints; i++) {
    psys[i].update(grupo);
    psys[i].draw(g);
  }

  if (SAVEVIDEO) saveFrame("pyrographie-####.tga");
}

void initialize() {
  grupo = f.toGroup(STRNG);

  ballsize = ceil(width/400F);
  segLength = width/200F*((constrain(STRNG.length(), 1, STRNG.length())));

  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  RCommand.setSegmentLength(segLength);

  grupo = grupo.toPolygonGroup();
  grupo.centerIn(g, 50, 1, 1);

  RPoint[] ps = grupo.getPoints();
  if (ps != null) {
    numPoints = ps.length;

    psys = new Particle[numPoints];
    for (int i=0; i<numPoints; i++) {
      psys[i] = new Particle(g, i);
      psys[i].vel.add(new RPoint(random(-50, 50), random(-50, 50)));
    }
  }
}

void keyReleased() {
  //exit();
  //saveFrame(STRNG+"-###.tga");
  if (keyCode==ENTER) {
    STRNG = newString; 
    newString = "";
    initialize();
  } else if (keyCode==BACKSPACE) {
    if (newString.length() !=0 ) {
      newString = newString.substring(0, newString.length()-1);
    }
  } else if (keyCode!=SHIFT) {
    newString += key;
  }
}

void mouseDragged() {
  for (int i=0; i<numPoints; i++) {
    float distToMouse = dist(psys[i].pos.x, psys[i].pos.y, mouseX-width/2, mouseY-height/2)*0.1;
    distToMouse = constrain(distToMouse, 0.001, distToMouse);
    psys[i].pos.add(new RPoint((mouseX-pmouseX)*random(0, 0.5)/distToMouse/2, (mouseY-pmouseY)*random(0, 0.5)/distToMouse/2));
    psys[i].vel.add(new RPoint((mouseX-pmouseX)*random(0, 0.5)/distToMouse/2, (mouseY-pmouseY)*random(0, 0.5)/distToMouse/2));
  }
}

public class Particle {
  // Velocity
  RPoint vel;

  // Position
  RPoint pos;

  // Caracteristics
  int col;
  float sz;

  // ID
  int id;

  // Constructor
  public Particle(PGraphics gfx, int ident) {
    pos = new RPoint(random(-gfx.width/2, gfx.width/2), random(-gfx.height/2, gfx.height/2));
    vel = new RPoint(0, 0);

    colorMode(HSB);
    col = color(random(0, 255), random(100, 255), 255);
    sz = random(ballsize, ballsize+1);

    id = ident;
  }

  // Updater of position, velocity and colour depending on a RGroup
  public void update(RGroup grp) {
    pos.add(vel);
    RPoint[] ps = grp.getPoints();
    if (ps != null) {
      RPoint distPoint = new RPoint(ps[id]);
      distPoint.sub(pos);

      distPoint.scale(random(0.002, 0.005));
      vel.scale(random(0.8, 1.1));
      vel.add(distPoint);
    }
  }

  // Drawing the particle
  public void draw(PGraphics gfx) {
    fill(col);
    noStroke();
    ellipse(pos.x, pos.y, sz, sz);
  }

  RPoint[] getClosests(RPoint[] ps, int num) {
    return new RPoint[num];
  }
}

```

---

<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:** [August 10, 2020, 5:25pm UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/19 "2020-08-10T17:25:10Z")

</div>

```auto

import geomerative.*;

RGroup myGroup;
RFont font;
RShape shape;
Write words;
RPoint[] myPoints;

float force_radious = 80;
float maxForce = 5;
ArrayList<Attractor>attractors = new ArrayList<Attractor>();
String [] myText = {"Life without music is", "just a mistake"};
final color textColor = color(0, 200);

//----------------SETUP---------------------------------

void setup() {
  size(1920, 1080, JAVA2D);
  smooth();

  RG.init(this); 

  // font = new RFont("FreeSans.ttf", 180, CENTER);
  font = new RFont("ARIAL.TTF", 180, CENTER);

  for (int i=0; i< myText.length; i++) {
    words = new Write(myText[i]);
    RGroup myGroup = font.toGroup(myText[i]);
    myGroup = myGroup.toPolygonGroup();
    myPoints = myGroup.getPoints();
  }
  for (int j=0; j< myPoints.length; j++) {
    RPoint rp = myPoints[j];
    Attractor a= new Attractor(rp.x, rp.y);
    attractors.add(a);
  }
}
//----------------DRAW---------------------------------

void draw() {
  background(255);
  translate(width/2, height/1.2);
  for (int j=0; j< myText.length; j++) {
    words = new Write(myText[j]);
  }
  for (Attractor a : attractors) {
    a.attract();
  }
}
//////////////////////////////////////////////

class Attractor {
  PVector pos;

  Attractor(float x, float y) {
    pos = new PVector(x, y);
  }

  void attract() {
    PVector mouse = new PVector (mouseX-width/2, mouseY-height/1.2);
    float d= PVector.dist(pos, mouse);
    if (d < force_radious) {
      PVector desired = PVector.sub(pos, mouse);
      desired.normalize();
      desired.mult(map(d, 0, force_radious, maxForce, 0));
      pos.add(desired);
    }
  }
}

//////////////////////////////////////////////

import ddf.minim.*;

class Write {

  String words;

  Write(String _words) {
    words= _words;

    for (int i=0; i<myText.length; i++) {
      RGroup myGroup = font.toGroup(myText[i]);
      RPoint[] myPoints = myGroup.getPoints();

      for (int j=0; j<myPoints.length; j++) {
        float x = myPoints[j].x;
        float y = myPoints [j].y;
        pushMatrix(); 
        translate(myPoints[j].x, myPoints[j].y-350+i*200);
        beginShape();
        noFill();
        stroke(textColor);
        strokeWeight(0.05);
        float angle = TWO_PI;
        angle= angle*10;
        rotate(j/angle);
        //bezier(-10*(noise(20)), 30, -10*(noise(10)), 20, -20*noise(20), -20, 10, -10);
        bezier(-10*(noise(20))+mouseX/15, 30+mouseY/10, -10*(noise(10))+mouseX/15, 20+mouseY/15, -20*noise(20)+mouseX/15, -20+mouseY/5, 10+mouseX/15, -10+mouseY/15);
        endShape();
        popMatrix();
      }
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hellonearthis/32/3482_2.png) [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Post date:** [August 12, 2020, 7:19am UTC](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130/20 "2020-08-12T07:19:03Z")

</div>

I see you looking at variable fonts, which currently don’t have much support.  
Using P5 I had to use html styling and couldn’t put it into the canvas for manipulation.

[https://editor.p5js.org/hellonearthisman/sketches/ooLYBElyN](https://editor.p5js.org/hellonearthisman/sketches/ooLYBElyN)

[Next page](https://discourse.processing.org/t/ideas-which-i-want-to-realize-in-processing/23130.md?page=2)