Comments (2)
Hello, Boom,
the PNG files in this project ending in msdf
are the glyph textures. They look weird because they're "MSDFs". Here's how you make your own.
See the svg sources
folder? Those are vector graphics files I made in Illustrator. Each one is 512px X 512px, with the glyphs sitting in a grid of eight rows and eight columns. That means I gave myself 64 boxes, which fit my 57 matrix glyphs. But you can choose a different number than eight, if you have a million glyphs.
So yeah, your first step is to put your own glyphs in an SVG file like these.
By the way, the glyphs cycle in the order they show up in your SVG file, from top to bottom and left to right. So if you want your glyphs to cycle through a written message, you can use the grid kind of like this:
b o o m s h o p
h a s e n t e r
e d t h e m a t
r i x
The second step is to get msdfgen
running on your computer. And then you feed it your SVG. Let's assume your source file is in /sources
and is named boomshop_glyphs.svg
:
./msdfgen/out/msdfgen msdf -svg ./svg\ sources/boomshop_glyphs.svg -size 512 512 -pxrange 4 -o ./assets/boomshop_msdf.png
So that should make you your glyphs' MSDF PNG file.
The last step is to put your PNG in the repo next to the others, and edit config.js
to reference your new glyphs. You'll want to add a font description to the fonts
object up top. Let's assume your MSDF PNG is called boomshop_msdf.png
, and let's assume you used the same grid size I did with a glyph sequence 27 glyphs long:
boomshop: { glyphTexURL: "boomshop_msdf.png", glyphSequenceLength: 27, glyphTextureColumns: 8 }
.
Below that, in the versions
object, you'll want to make your own version, which you can customize a whole lot. But you should start simple:
boomshop: { ...defaults, ...fonts.boomshop },
—and experiment with all the other parameters you see there once you're happy with the new glyphs.
So! What's an MSDF? Well an SDF is a texture representing the distance of all its pixels to some shape. In our case, the shapes are glyphs. And an MSDF is an SDF that cleverly uses the red, green and blue channels to encode the corners of the shapes, so they look super crisp. SDFs (and MSDFs) are really useful for making 2D graphics look good in 3D graphics systems. MSDFs are explained in depth in msdfgen's programmer's master's thesis.
Anyway, I hope this helps! Making this process easier would make a good future part of this project. Let me know if you have any other questions, or need clarification.
-Rezmason
from matrix.
Hey Rezmason,
wow, that was easy! Thanks a bunch for the detailed explanation! I'd propose adding this description to the readme?
Best
Markus
from matrix.
Related Issues (20)
- skipOutro HOT 1
- Major Feature: dynamic parameters HOT 2
- Image displays upside-down with effect=image HOT 5
- Colors and intensities of glint and cursor should be separate properties— and colors should stay within their gamuts HOT 2
- Not an issue, congrats for this project HOT 1
- Background color with opacity or transparent HOT 1
- Feature Request: add an appropriate sound effect for falling digital rain HOT 4
- Feature Request: Animate between a "start" width and a "final" width HOT 4
- Request : ability to change every setting HOT 1
- Feature Request: render the effect to a transparent canvas HOT 2
- Improvement: modify the "operator" version to more closely resemble the effect in the original film HOT 2
- Feature Request: support Spout or NDI output HOT 1
- Unexpected behavior: intro with negative fallSpeed fills the screen with cursors HOT 3
- Change default version HOT 2
- Set as Windows Terminal background HOT 1
- Missing "6" character in custom font HOT 1
- Request: Set a custom image via JavaScript as a base64 string HOT 2
- Custom fonts and symbols HOT 1
- Feature request: finer control of the "distance" between raindrops, ie. wobble parameterization HOT 1
- Available to download these animations? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from matrix.