Skip to content

Instantly share code, notes, and snippets.

View erraticgenerator's full-sized avatar

ErraticGenerator erraticgenerator

1 follower · 0 following
View GitHub Profile
@erraticgenerator
erraticgenerator / p5-word-anim-4.html
Last active December 9, 2020 03:51
<!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-word-anim-3.js
Last active December 9, 2020 03:50
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)
@erraticgenerator
erraticgenerator / p5-word-anim-2.js
Last active December 20, 2020 05:18
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)
@erraticgenerator
erraticgenerator / p5-word-anim-1.js
Last active December 9, 2020 02:10
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
@erraticgenerator
erraticgenerator / p5-textToPoints-opentypejs.html
Created December 6, 2020 19:59
<!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 December 6, 2020 19:36
2. individual letters with 2d array
<!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 December 6, 2020 18:58
1. basic use of p5.Font.textToPoints()
<!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 December 5, 2020 22:19
Video export from p5.js sketch 2 (draw loop)
<!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 June 27, 2022 04:51
Video export from p5.js sketch 1
<!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; }
@erraticgenerator
erraticgenerator / gfonts-2-everything.py
Created November 1, 2020 00:50
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