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:
-
The Processing website has references, examples, tutorials, links to resources, etc.
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://www.youtube.com/user/shiffman
https://thecodingtrain.com/ -
Happy Coding
Processing Tutorials - Happy Coding -
The source code can give insight if you are adventurous:
GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE) -
Explore Processing on GitHub:
Processing Foundation · GitHub
processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub < Many of the Processing functions are here! -
The Processing Foundation
https://processingfoundation.org/
Check out the menu.
In the education menu, there is a reference to the Coding Train. -
And the Internet.
:)
:)
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 …
@glv I have read all of this… I tried everything… that didn’t help me at all… That’s i’m asking it here…
@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 
. 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:
This is your journey. Enjoy it!
What I did so far to skew the character:
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.
1 Like