Inspiring text on spiral 🌀
Some creative usage of my BitmapText class Bitmap Font Text 🗒️
Uses polygon and transform class (by @reinder)
Log in to post a comment.
// Forked from "Bitmap Font Text 🗒️" by markknol
// https://turtletoy.net/turtle/48b904349d
const turtle = new Tortoise();
turtle.addTransform(Spiral(Math.PI*3, 0.4));
turtle.addTransform(Scale(0.25));
turtle.addTransform(Translate(0, 3));
const startPos = [5, -30];
let polygons = new Polygons();
let positions;
function init() {
const text = new BitmapText(BitmapTextFonts.NORMAL, 2.5);
let words = "see,feel,change,do,hear,love,think,turn,design,code,art,move".split(",");
words = [...words, ...words];
words.sort(_ => -0.5 + Math.random());
var word = _ => words.pop();
let label = [
`what makes you ${word()}`, `keep up and ${word()}`, `always ${word()}`, `life is to ${word()}`, `${word()} your ${word()}`,
`what makes you ${word()}`, `keep up and ${word()}`, `always ${word()}`, `life is to ${word()}`, `${word()} and ${word()}`,
];
label.sort(_ => -0.5 + Math.random());
// get postions based on text
positions = text.get(label.join(" ~ ").toUpperCase());
}
let prevX = 25;
let odd= true;
function walk(i) {
if (i === 0) {
init();
}
let pos = positions.pop();
// optimization
if (Math.abs(pos[0] - prevX) > 13) {
polygons = new Polygons();
console.log(1)
prevX = pos[0];
odd = !odd;
}
const scale = 6.6;
const p = [pos[0] * scale + startPos[0], pos[1] * scale + startPos[1]];
{
const shape = polygons.create();
PolygonsUtil.circle(shape, p[0] - 0.25, p[1] - 0.25, odd ? 4 : 6);
shape.addOutline();
polygons.draw(turtle, shape, true);
}
if (odd) {
const shape = polygons.create();
PolygonsUtil.circle(shape, p[0] - 0.25, p[1] - 0.25, 8);
shape.addOutline();
polygons.draw(turtle, shape, true);
}
return positions.length;
}
function Spiral(f, f2) {
return p => {
const x = p[0];
const y = p[1];
const angle = Math.pow(x, f2);
const radius = f*angle - y;
return [radius * Math.cos(angle), radius * Math.sin(angle)];
}
}
class Random {
static range(from, to) {
return from + Random.next() * (to-from);
}
static bool(change = 0.5) {
return Random.next() < change;
}
static or(a, b, change = 0.5) {
return Random.bool(change) ? a : b;
}
static next() {
return Math.random();
}
}
////////////////////////////////////////////////////////////////
// Polygon utility code - Created by Mark Knol 2019
// https://turtletoy.net/turtle/5ef089d251
////////////////////////////////////////////////////////////////
class PolygonsUtil {
static circle(polygon, x, y, radius = 10, segments = 10, useSegments = false) {
for (let ii = 0; ii <= segments; ii++) {
const a = ii / segments * Math.PI * 2;
const r = radius;
if (useSegments) {
const a2 = (ii+1) / segments * Math.PI * 2;
polygon.addSegments([x + Math.cos(a) * r, y + Math.sin(a) * r], [x + Math.cos(a2) * r, y + Math.sin(a2) * r]);
} else {
polygon.addPoints([x + Math.cos(a) * r, y + Math.sin(a) * r]);
}
}
}
static rect(polygon, x, y, width, height, useSegments = false) {
if (useSegments) {
polygon.addSegments([x, y], [x + width, y], [x + width, y], [x + width, y + height], [x + width, y + height], [x, y + height], [x, y + height], [x, y] );
} else {
polygon.addPoints([x, y], [x + width, y], [x + width, y + height], [x, y + height], [x, y]);
}
}
}
////////////////////////////////////////////////////////////////
// BitmapText utility code. Created by Mark Knol 2020
// https://turtletoy.net/turtle/48b904349d
////////////////////////////////////////////////////////////////
class BitmapText {
constructor(font, letterSpacing = 1, lineSpacing = 2) {
this.font = font;
this.letterSpacing = letterSpacing;
this.lineSpacing = lineSpacing;
// decode
const data = this.font.data;
this.bits = [];
let odd = true;
for(let ii=0; ii<data.length; ii++) {
for(let c=0;c<data.charCodeAt(ii) - 40; c++) {
this.bits.push(odd);
}
odd = !odd;
}
}
print(t, str, scale, diagonal1 = false, diagonal2 = false) {
const startPos = t.pos();
this.iter(str, pos => {
const a = [pos[0] * scale, pos[1] * scale];
const b = [(pos[0] + 1) * scale, (pos[1] + 1) * scale];
a[0] += startPos[0];
a[1] += startPos[1];
b[0] += startPos[0];
b[1] += startPos[1];
t.jump(a[0], a[1]);
t.goto(b[0], a[1]);
t.goto(b[0], b[1]);
t.goto(a[0], b[1]);
t.goto(a[0], a[1]);
if (diagonal1) t.goto(b[0], b[1]);
if (diagonal2) {
t.jump(a[0], b[1]);
t.goto(b[0], a[1]);
}
});
}
iter(str, cb) {
this.get(str).forEach(cb);
}
get(str) {
const positions = [];
let line = 0;
let offset = 0;
const cpl = this.font.charsPerLine;
for (let i=0; i<str.length; i++) {
if (str.charAt(i) == "\n") { line ++; offset = 0; continue; }
let char = str.charCodeAt(i) - 32; // start from space
if (char < 0 || char > 3 * 32) continue;
let drawPos = [offset++ * (this.font.size[0] + this.letterSpacing), line * (this.font.size[1] + this.lineSpacing)];
let charPos = [char % cpl * (this.font.size[0] + this.font.spacing[0]), Math.floor(char / cpl) * (this.font.size[1] + this.font.spacing[1])];
for (let y=0; y<this.font.size[1]; y++){
for (let x=0; x<this.font.size[0]; x++) {
let dotPos = [x, y];
if (this.bits[charPos[0] + dotPos[0] + (charPos[1] + dotPos[1]) * ((this.font.size[0] + this.font.spacing[0]) * cpl)]) {
positions.push([drawPos[0] + dotPos[0], drawPos[1] + dotPos[1]]);
}
}
}
}
return positions;
}
}
const BitmapTextFonts = {
// based on <https://robey.lag.net/2010/01/23/tiny-monospace-font.html>
SMALL: {
data: "(-)*)))))))**)),)+),)))+)))=+*)*+)+)))))+)+)+)+)+3)-)++.)*))))+)*,)))))*)+)+)+)+)8)))))*),)+)))))))+)-)))))))))*)+)+)*+*),).).)))***)+)/)+)*+)+-+.)*)))*)*+**)+)+)++))+)+1)1)*)6+)**)+))).)+)+)+)+)/)*)+)))*)*)-)+)+)))))+)))))+)*)+)+)*+*)3).)))*),)**/)))+)))-)0).+*)*+)++))+)++))+)+-)-)-),)«)+)**+*)**+)+**)))))++)))))))+)))))))*)**+)**+*)+)))))))))))))))))))))+)+-+*).)))))))))))))+)))))+)+)+)))*),)))))))++)+)))))))))))))))))),)*)))))))))))))))))))+)))+)-)))))-+)+)**)+))))+)+)+)+*),))**)++)+)))))**))))+*)+)*))))))))+*)+)+)*),),)1)+)))))))))+)))))+)+)))))))*)*)))))))))+))))+))))))++)*,)*)*)))*)*+))))*)*)+)-)+)2*)))))*+*)**+)),*)))))+*)*))))+))))))))*)*),*)))))*+)+**)*)))))))*)*+)+-+-+©)/)1)/)-),),)-*G)C**)**+*)+*).)1)***)+*))3),)7)+)*),*)+9))))+*)+)+)***+.*)*+***)))))+)+)*+),)))))*)*+)*+)*))))))))+)*+)*)))))))))))))))****))1)-+-)))))))))+))))*+),)))))*),))*+)*+)))))))))*+*)),**)*))))+)+*),))*+)+)+).+-+)*+******)***)))*)***))))+))))))))*)*)-)))+*+)+**)*+)))))**+***)**.+©",
size: [3,5],
spacing: [1,1],
charsPerLine: 32,
},
// based on <https://opengameart.org/content/ascii-bitmap-font-oldschool>
NORMAL: {
data: "(1)-))),)))-),*.+-)/),)X+-)5)-))),))),,***)*)*)-).).),))))),)E)*)+)+*5)3-*)))/)+)))4)0),+-)D)+)***)))5)4))),+-)-)5)0)+-*-1-3),))))),)5)3-,)))+)-)))))2)0),+-).);)-**),)B)))+,+)***)*)4).),))))),).):).)+),)5)4)))-)/*+*))4),)<)6)4++-ħ+,+-*+-+++-++,+O+,+,++,,++)+)*)+)+)))+).)2)*)+)*)+),).)/)3)-)+)*)+)*)+)*)+)*)+).).)*)*)+).)1)+)+)*)+):),-,),)+)*))+*)+)*)+)*)1)-*+-*,+,-)-+,,9)7).)+)))))*-*,+)0)0)-)/)*)+)+)-)+).)3).),-,).),))+*)+)*)+)*)/)-)+)-)/)*)+)+)-)+).),).)/)3)4).)+)*)+)*)+)*-++.)+,,+,).+,+3)D)-++)+)*,,+ħ,+-*-+++)+)*-*-*)+)*).)+)*)+)+++,,++,,,*-*)+)*)+)*).).)+)*)+),)0)*)+)*).*)**)+)*)+)*)+)*)+)*)+)*)0),)+)*)+)*).).).)+),)0)*)*)+).)))))***)*)+)*)+)*)+)*)+)*)0),)+)*)+)*,+,+).-,)0)*+,).)+)*)))))*)+)*,+)+)*,,+-),)+)*)+)*).).)***)+),)0)*)*)+).)+)*)***)+)*).)))))*)+).),),)+)*)+)*).).)+)*)+),),)+)*)+)*).)+)*)+)*)+)*).)*)+)+).),),)+)*,+-*)/++)+)*-+++)+)*-*)+)*)+)+++)/*))*)+)*,-)-+ħ)+)*)+)*)+)*)+)*-,*3*.)4)4)9)3*2)+)*)+)*)+)*)+).),),)0)-)))4)3)9)2)4)+)*)+)+))),))).)-)-)/)B++,,+,,+++-+,*)+)*)+),).).).).).)E)*)+)*)+)*)+)*)+)+)-)+)*)+)*)))))+)))-)-)/)/)-)B,*)+)*).)+)*-+).,+)))+*)**)+),),)0)0),)A)+)*)+)*)+)*)+)*)/)1),),)+)*)+),),-,*3*3-2,*,,+,,+,+).+ħ)0)0)*).)`)P)<).)`)P,++.+*)*)+).*))+,,++,,,*))*,,*,+)+)*)+)*)+)*)+)*)+)*)+),)0)*+,).)))))*)+)*)+)*)+)*)+)***)*)/)-)+)*)+)*)+)+)))+)+)*)+),)0)*)*)+).)))))*)+)*)+)*,,,*)/+,)-)+)*)+)*)+),)-,*)+),),)+)*)+)*).)+)*)+)*)+)*)2)*)2)+)*)*)+)+)))+)))))+)))/)*)+)*-+++)+)+++)+)*)+)+++)2)*).,-*,,,)-)))+)+)++ı)-)-)).).)-,).).)-)*)),)/)/)+))*).).).))/).).)--)-)-)Ƌ",
size: [5,7],
spacing: [2,2],
charsPerLine: 18,
}
}
////////////////////////////////////////////////////////////////
// Polygon Clipping utility code - Created by Reinder Nijhoff 2019
// https://turtletoy.net/turtle/a5befa1f8d
////////////////////////////////////////////////////////////////
function Polygons() {
const polygonList = [];
const Polygon = class {
constructor() {
this.cp = []; // clip path: array of [x,y] pairs
this.dp = []; // 2d lines [x0,y0],[x1,y1] to draw
this.aabb = []; // AABB bounding box
}
addPoints(...points) {
// add point to clip path and update bounding box
let xmin = 1e5, xmax = -1e5, ymin = 1e5, ymax = -1e5;
(this.cp = [...this.cp, ...points]).forEach( p => {
xmin = Math.min(xmin, p[0]), xmax = Math.max(xmax, p[0]);
ymin = Math.min(ymin, p[1]), ymax = Math.max(ymax, p[1]);
});
this.aabb = [(xmin+xmax)/2, (ymin+ymax)/2, (xmax-xmin)/2, (ymax-ymin)/2];
}
addSegments(...points) {
// add segments (each a pair of points)
points.forEach(p => this.dp.push(p));
}
addOutline() {
for (let i = 0, l = this.cp.length; i < l; i++) {
this.dp.push(this.cp[i], this.cp[(i + 1) % l]);
}
}
draw(t) {
for (let i = 0, l = this.dp.length; i < l; i+=2) {
t.jump(this.dp[i]), t.goto(this.dp[i + 1]);
}
}
addHatching(a, d) {
const tp = new Polygon();
tp.cp.push([-1e5,-1e5],[1e5,-1e5],[1e5,1e5],[-1e5,1e5]);
const dx = Math.sin(a) * d, dy = Math.cos(a) * d;
const cx = Math.sin(a) * 200, cy = Math.cos(a) * 200;
for (let i = 0.5; i < 150 / d; i++) {
tp.dp.push([dx * i + cy, dy * i - cx], [dx * i - cy, dy * i + cx]);
tp.dp.push([-dx * i + cy, -dy * i - cx], [-dx * i - cy, -dy * i + cx]);
}
tp.boolean(this, false);
this.dp = [...this.dp, ...tp.dp];
}
inside(p) {
let int = 0; // find number of i ntersection points from p to far away
for (let i = 0, l = this.cp.length; i < l; i++) {
if (this.segment_intersect(p, [0.1, -1000], this.cp[i], this.cp[(i + 1) % l])) {
int++;
}
}
return int & 1; // if even your outside
}
boolean(p, diff = true) {
// bouding box optimization by ge1doot.
if (Math.abs(this.aabb[0] - p.aabb[0]) - (p.aabb[2] + this.aabb[2]) >= 0 &&
Math.abs(this.aabb[1] - p.aabb[1]) - (p.aabb[3] + this.aabb[3]) >= 0) return this.dp.length > 0;
// polygon diff algorithm (narrow phase)
const ndp = [];
for (let i = 0, l = this.dp.length; i < l; i+=2) {
const ls0 = this.dp[i];
const ls1 = this.dp[i + 1];
// find all intersections with clip path
const int = [];
for (let j = 0, cl = p.cp.length; j < cl; j++) {
const pint = this.segment_intersect(ls0, ls1, p.cp[j], p.cp[(j + 1) % cl]);
if (pint !== false) {
int.push(pint);
}
}
if (int.length === 0) {
// 0 intersections, inside or outside?
if (diff === !p.inside(ls0)) {
ndp.push(ls0, ls1);
}
} else {
int.push(ls0, ls1);
// order intersection points on line ls.p1 to ls.p2
const cmpx = ls1[0] - ls0[0];
const cmpy = ls1[1] - ls0[1];
int.sort( (a,b) => (a[0] - ls0[0]) * cmpx + (a[1] - ls0[1]) * cmpy -
(b[0] - ls0[0]) * cmpx - (b[1] - ls0[1]) * cmpy);
for (let j = 0; j < int.length - 1; j++) {
if ((int[j][0] - int[j+1][0])**2 + (int[j][1] - int[j+1][1])**2 >= 0.001) {
if (diff === !p.inside([(int[j][0]+int[j+1][0])/2,(int[j][1]+int[j+1][1])/2])) {
ndp.push(int[j], int[j+1]);
}
}
}
}
}
return (this.dp = ndp).length > 0;
}
//port of http://paulbourke.net/geometry/pointlineplane/Helpers.cs
segment_intersect(l1p1, l1p2, l2p1, l2p2) {
const d = (l2p2[1] - l2p1[1]) * (l1p2[0] - l1p1[0]) - (l2p2[0] - l2p1[0]) * (l1p2[1] - l1p1[1]);
if (d === 0) return false;
const n_a = (l2p2[0] - l2p1[0]) * (l1p1[1] - l2p1[1]) - (l2p2[1] - l2p1[1]) * (l1p1[0] - l2p1[0]);
const n_b = (l1p2[0] - l1p1[0]) * (l1p1[1] - l2p1[1]) - (l1p2[1] - l1p1[1]) * (l1p1[0] - l2p1[0]);
const ua = n_a / d;
const ub = n_b / d;
if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
return [l1p1[0] + ua * (l1p2[0] - l1p1[0]), l1p1[1] + ua * (l1p2[1] - l1p1[1])];
}
return false;
}
};
return {
list: () => polygonList,
create: () => new Polygon(),
draw: (turtle, p, addToVisList=true) => {
for (let j = 0; j < polygonList.length && p.boolean(polygonList[j]); j++);
p.draw(turtle);
if (addToVisList) polygonList.push(p);
}
};
}
function Translate(x,y) { return p => [p[0]+x, p[1]+y]; }
function Rotate(a) { return p => [p[0]*Math.cos(a)+p[1]*Math.sin(a), p[1]*Math.cos(a)-p[0]*Math.sin(a)]; }
function Scale(s) { return p => [p[0]*s, p[1]*s]; }
////////////////////////////////////////////////////////////////
// Tortoise utility code (Minimal Turtle and Transforms)
// https://turtletoy.net/turtle/102cbd7c4d
////////////////////////////////////////////////////////////////
function Tortoise(x, y) {
class Tortoise extends Turtle {
constructor(x, y) {
super(x, y);
this.ps = Array.isArray(x) ? [...x] : [x || 0, y || 0];
this.transforms = [];
}
addTransform(t) {
this.transforms.push(t);
this.jump(this.ps);
return this;
}
applyTransforms(p) {
if (!this.transforms) return p;
let pt = [...p];
this.transforms.map(t => { pt = t(pt); });
return pt;
}
goto(x, y) {
const p = Array.isArray(x) ? [...x] : [x, y];
const pt = this.applyTransforms(p);
if (this.isdown() && (this.pt[0]-pt[0])**2 + (this.pt[1]-pt[1])**2 > 4) {
this.goto((this.ps[0]+p[0])/2, (this.ps[1]+p[1])/2);
this.goto(p);
} else {
super.goto(pt);
this.ps = p;
this.pt = pt;
}
}
position() { return this.ps; }
}
return new Tortoise(x,y);
}