Skip to content

Instantly share code, notes, and snippets.

View p5-word-anim-2.js
const words = [] // store word objects
function setup() {
createCanvas(800, 400)
background(0)
const str = 'Hello, world! Hi, there! Nice to meet you!'
const wordsStr = str.split(' ')
textSize(48)
View p5-word-anim-4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
</head>
View p5-word-anim-3.js
const words = [] // store word objects
function setup() {
createCanvas(800, 400)
background(0)
const str = 'Hello, world! Hi, there! Nice to meet you!'
const wordsStr = str.split(' ')
textSize(48)
View p5-word-anim-1.js
function setup() {
createCanvas(800, 400)
background(0)
const str = 'Hello, world! Hi, there! Nice to meet you!'
const wordsStr = str.split(' ')
textSize(48)
// track word position
View p5-textToPoints-opentypejs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
</head>
@erraticgenerator
erraticgenerator / p5-textToPoints-2.html
Created Dec 6, 2020
2. individual letters with 2d array
View p5-textToPoints-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
</head>
@erraticgenerator
erraticgenerator / p5-textToPoints-1.html
Created Dec 6, 2020
1. basic use of p5.Font.textToPoints()
View p5-textToPoints-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
</head>
@erraticgenerator
erraticgenerator / p5js-mp4-export-2.html
Created Dec 5, 2020
Video export from p5.js sketch 2 (draw loop)
View p5js-mp4-export-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/h264-mp4-encoder/embuild/dist/h264-mp4-encoder.web.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
</head>
@erraticgenerator
erraticgenerator / p5js-mp4-export-1.html
Last active Dec 5, 2020
Video export from p5.js sketch 1
View p5js-mp4-export-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/h264-mp4-encoder/embuild/dist/h264-mp4-encoder.web.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<style>
html { font-family: sans-serif; font-size: 12px; }
View gfonts-2-everything.py
from IPython.display import clear_output
# display images
monitor = False
# font filtering
df = pd.read_csv('./google-fonts-annotaion.csv')
paths = filter_fonts_get_paths(df, root=ROOT, subsets=['latin'], variants=['bold'], category='serif')
# text setup