Heart 3D

A solid 3D heart surface beating slowly with a lub-dub pulse, turning a little side to side as small hearts drift up behind it.

Solids64×3030 fps6.5 KB
Look

Use it

Paste two lines into any page, play it in a terminal, or put a GIF in a README. The code follows the look you pick above.

<script type="module" src="https://www.ascii-magic.com/ascii/ascii.js"></script>

<ascii-art piece="heart-3d"></ascii-art>

Export

Pause on the frame you like, pick a look, then download it at an exact size.

Source

MIT licensed. It imports one small helper file, kit.js.

/* heart-3d: a solid 3D heart surface beating slowly and turning a little side to side. */
import { Grid, palette, gradient, KEYS, rng } from "../lib/kit.js";

/* tiny 3D kit for this piece: view space has +z away from the viewer. */
const LIGHT = (() => { const v = [-0.72, 0.55, -0.42], l = Math.hypot(v[0], v[1], v[2]); return [v[0] / l, v[1] / l, v[2] / l]; })();
/** Lambert plus a specular glint, 0..1, for a unit view-space normal. */
function lightOf(n, amb = 0.1, spec = 0.55, pw = 18) {
  const d = n[0] * LIGHT[0] + n[1] * LIGHT[1] + n[2] * LIGHT[2];
  const rz = 2 * d * n[2] - LIGHT[2];
  const s = d > 0 && rz < 0 ? Math.pow(-rz, pw) : 0;
  return Math.min(1, amb + Math.max(0, d) * (1 - amb) * 0.78 + s * spec * 0.6);
}
/** Filled triangle in screen cells with a depth test; points are [x, y, depth], larger depth is nearer. */
function tri(g, a, b, c, ch, co) {
  const area = (b[0] - a[0]) * (c[1] - a[1]) - (b[1] - a[1]) * (c[0] - a[0]);
  if (Math.abs(area) < 1e-6) return;
  const x0 = Math.max(0, Math.floor(Math.min(a[0], b[0], c[0]))), x1 = Math.min(g.cols - 1, Math.ceil(Math.max(a[0], b[0], c[0])));
  const y0 = Math.max(0, Math.floor(Math.min(a[1], b[1], c[1]))), y1 = Math.min(g.rows - 1, Math.ceil(Math.max(a[1], b[1], c[1])));
  for (let y = y0; y <= y1; y++) for (let x = x0; x <= x1; x++) {
    const px = x + 0.5, py = y + 0.5;
    const w0 = ((b[0] - px) * (c[1] - py) - (b[1] - py) * (c[0] - px)) / area;
    const w1 = ((c[0] - px) * (a[1] - py) - (c[1] - py) * (a[0] - px)) / area;
    const w2 = 1 - w0 - w1;
    if (w0 < -0.02 || w1 < -0.02 || w2 < -0.02) continue;
    g.setZ(x, y, w0 * a[2] + w1 * b[2] + w2 * c[2], typeof ch === "function" ? ch(w0, w1, w2) : ch, co);
  }
}
/** A depth-tested line between projected points, nudged toward the viewer by bias. */
function seg(g, a, b, ch, co, bias = 0) {
  const n = Math.max(1, Math.ceil(Math.max(Math.abs(b[0] - a[0]), Math.abs(b[1] - a[1])) * 1.5));
  for (let i = 0; i <= n; i++) {
    const f = i / n;
    g.setZ(a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f, a[2] + (b[2] - a[2]) * f + bias, typeof ch === "function" ? ch(f) : ch, co);
  }
}
/** Character for a line drawn in screen direction dx, dy (tall cells). */
function slopeChar(dx, dy) {
  const a = Math.atan2(dy * 2, dx), s = Math.abs(Math.sin(a)), c = Math.abs(Math.cos(a));
  if (s < 0.38) return "─";
  if (c < 0.38) return "│";
  return (dx > 0) === (dy > 0) ? "╲" : "╱";
}
const rx = ([x, y, z], a) => { const c = Math.cos(a), s = Math.sin(a); return [x, y * c - z * s, y * s + z * c]; };
const ry = ([x, y, z], a) => { const c = Math.cos(a), s = Math.sin(a); return [x * c + z * s, y, -x * s + z * c]; };
const rz = ([x, y, z], a) => { const c = Math.cos(a), s = Math.sin(a); return [x * c - y * s, x * s + y * c, z]; };
const sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
const unit = (v) => { const l = Math.hypot(v[0], v[1], v[2]) || 1; return [v[0] / l, v[1] / l, v[2] / l]; };
/** Draw a mesh: V in view space, F as index lists (fans), each face lit flat. Normals face away from the origin when orient is set. */
function mesh(g, V, F, P, paint, edgeCo, orient = true) {
  const S = V.map(P);
  for (let f = 0; f < F.length; f++) {
    const idx = F[f];
    let n = unit(cross(sub(V[idx[1]], V[idx[0]]), sub(V[idx[2]], V[idx[0]])));
    const c = [0, 0, 0];
    for (const i of idx) { c[0] += V[i][0] / idx.length; c[1] += V[i][1] / idx.length; c[2] += V[i][2] / idx.length; }
    if (orient && n[0] * c[0] + n[1] * c[1] + n[2] * c[2] < 0) n = [-n[0], -n[1], -n[2]];
    const [ch, co] = paint(lightOf(n), f, n);
    for (let i = 1; i + 1 < idx.length; i++) tri(g, S[idx[0]], S[idx[i]], S[idx[i + 1]], ch, co);
    if (edgeCo) for (let i = 0; i < idx.length; i++) {
      const a = S[idx[i]], b = S[idx[(i + 1) % idx.length]];
      seg(g, a, b, slopeChar(b[0] - a[0], b[1] - a[1]), edgeCo, 0.012);
    }
  }
}

const RED = gradient(["#1f0306", "#5c0a14", "#a8142a", "#e8304a", "#ff8a9a", "#fff0f2"], 14);
export const meta = {
  slug: "heart-3d",
  name: "Heart 3D",
  category: "solids",
  note: "A solid 3D heart surface beating slowly with a lub-dub pulse, turning a little side to side as small hearts drift up behind it.",
  tags: ["3d", "heart", "love", "valentine", "hero"],
  cols: 64, rows: 30, fps: 30,
  palette: palette([...RED, "#3a0d18", "#5a1626"]),   // 0-d red, e f drifting hearts
};

const RAMP = ".:-=+*#%@";
// the classic heart surface; z is up, y is depth
const F = (x, y, z) => { const a = x * x + 2.25 * y * y + z * z - 1; return a * a * a - x * x * z * z * z - 0.1125 * y * y * z * z * z; };

export default function create() {
  const { cols, rows } = meta;
  const g = new Grid(cols, rows);
  const cx = cols / 2, cy = rows / 2 - 0.5, SY = 11.5, SX = SY * 2;
  const r = rng(5);
  const drift = Array.from({ length: 14 }, () => [r() * cols, r() * 10, 0.6 + r() * 0.8]);
  return (t) => {
    g.clear();
    for (const [x0, ph, sp] of drift) {
      const y = rows - ((t * sp * 2 + ph * 3) % (rows + 4));
      g.set(x0 + Math.sin(t + ph) * 2, y, "♥", sp > 1 ? "f" : "e");
    }
    const b = (t % 1.3);
    const pulse = Math.exp(-((b / 0.1) ** 2)) + 0.55 * Math.exp(-(((b - 0.28) / 0.09) ** 2));
    const s = 1 + 0.08 * pulse;
    const th = Math.sin(t * 0.55) * 0.75, c = Math.cos(th), sn = Math.sin(th);
    // object coords from view coords (X right, Y up, Z depth away)
    const f = (X, Y, Z) => { const ox = (X * c - Z * sn) / s, oy = (X * sn + Z * c) / s, oz = Y / s; return F(ox, oy, oz + 0.08); };
    for (let y = 0; y < rows; y++) {
      const Y = (cy - y - 0.5) / SY;
      if (Y < -1.25 || Y > 1.35) continue;
      for (let x = 0; x < cols; x++) {
        const X = (x + 0.5 - cx) / SX;
        if (Math.abs(X) > 1.35) continue;
        // march from the front until we enter the surface, then refine
        let z0 = -1.3, hit = false;
        for (let k = 0; k < 40; k++) {
          const z1 = z0 + 0.065;
          if (f(X, Y, z1) < 0) {
            let lo = z0, hi = z1;
            for (let m = 0; m < 6; m++) { const mid = (lo + hi) / 2; if (f(X, Y, mid) < 0) hi = mid; else lo = mid; }
            z0 = hi; hit = true; break;
          }
          z0 = z1;
        }
        if (!hit) continue;
        const e = 0.01, v = f(X, Y, z0);
        const n = unit([f(X + e, Y, z0) - v, f(X, Y + e, z0) - v, f(X, Y, z0 + e) - v]);
        const l = lightOf(n, 0.22, 0.9, 28);
        g.setZ(x, y, -z0, RAMP[Math.min(8, Math.floor((0.12 + l * 0.88) * 9))], KEYS[Math.min(13, Math.floor((0.1 + l * 0.9) * 14))]);
      }
    }
    return g.frame();
  };
}

← Heap Allocator MapHeart Blood Flow →

More solids

Rotating 3D forms, shaded in characters.

/YOUR OWN

Turn your own image or video into ASCII

The pieces here are hand-built animations. To turn your own photo, logo or video into animated ASCII, use the ASCII Magic editor.