Ideas which I want to realize in Processing

Hello, everyone. I wanna give a motion to texts like this. Can we do it in processing ? If we can, who has an idea how to do it ?
Thanks everyone who answers)

Hello,

Scrollbar:

A good example for mapping mouse:

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:

:)

It seems like you want variable fonts?

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, 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.

1 Like

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

Explore the references to see what is available:

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

@glv look at this. How is he doing ?

@tabreturn provided his insight.

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

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.

:)

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

Look at that!

I used my suggestions to recreate this (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

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.

:)

1 Like

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

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

The geomative library has good font stuff

See library section

I forgot exact name

2 Likes

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

here are examples http://www.generative-gestaltung.de/1/code

Chrisir

Another example




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;
  }
}

and another example


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;
  }
}

It is my first time using Geomerative.

I took the Tutorial_07_HelloWorld_getPoints example that comes with the library and…

Only used:

RG.setPolygonizer(RG.ADAPTATIVE);

Added this to examine the vertices:

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:

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

This is your journey. Enjoy it!

What I did so far to skew the character:
image

I will definitely revisit this for my future projects.

:)

2 Likes

Swarm example



/*

 
 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];
  }
}

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();
      }
    }
  }
}

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

1 Like