search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.57k stars 3.3k forks source link

Variable fonts manipulation in p5 #4790

Closed juandelperal closed 4 years ago

juandelperal commented 4 years ago

How would this new feature help increase access to p5.js?

Most appropriate sub-area of p5.js?

New feature details:

Are there any plans to add variable fonts support for this project? Is this have been already addressed I couldn't find examples in the codebase or demos.

You can see some examples of variable fonts possibilities: https://www.axis-praxis.org/

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

Thanks!

welcome[bot] commented 4 years ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

limzykenneth commented 4 years ago

This has been discussed in #4511 and #2522.

juandelperal commented 4 years ago

OK, thanks, will close this issue

Mark2Mark commented 4 years ago

The referencing in all discussing issues is an endless loop. If you follow any links that claim "it has been discussed here" you’ll always see the same answer and eventually come back to where you started, without finding an actual issue that’s left open.

Just want to make you aware that the implementation of Variable Fonts might get lost. It should not, Variable Fonts are no marginal fun technology anymore and implemented in all major browsers for a while. Processing is predestined for variable fonts. While I could help with implementing in Objective-C, I have no clue for how to contribute for Java, though

karenanndonnachie commented 3 years ago

I would agree that variable font support would be perfect for p5js, it differs from texttopoints, although it certainly leverages the same principles (ie. the points embedded into .otf font files. If anything, making the parameters of variable fonts accessible either at the moment of font declaration of (better yet) at the moment of a text/textwidth/texttopoints call as an extended parameter (like we do for fontSize) it would greatly extend the possibilities for these functions. For example, texttopoints is fab for applying an effect of animation to a font, and the opportunities are endless, but it is really tricky to keep the font's design/shape/typography in the same way a variable font is designed to do, for example if we wanted to make text stretch to fit any given container, you can of course attempt this with texttopoints, by affecting all points at once on any given char/word/para, but this does not truly/necessarily respect the type designer's built-in glyph-specific 'stretch options' (which can be mapped across eg. width, amount of italics, and any other number of parameters) which then allow for real-time, data-driven size and shape adjustments with pre-mapped kerning, tracking, height adjustments. ie. a font may be variable but when it 'stretches vertically, only the ascenders are affected, or never affected, or it gets 'squarer' etc. From a p5js headspace, it's as if any desired texttopoints morphs/shape changes can be built/designed into the font at the level of the geometry of each specific letter. I am going to try through CSS access first, but if anyone has ideas, it would be great.