neige d'aoust

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== unknown pleasures ======

//main page: [[:unknownpleasures]]//

Of course, the first thing I thought when I found [[https://dy.github.io/linefont/|this font]] for making graphs is "let's remake Joy Division's Unknown Pleasures album cover"

Let's do exactly that, shall we?

The album cover is pretty much a copy of a graph found in some paper concerning the first quasar ever discovered, [[wp>PSR B1919+21]], surely the data for it can be found somewhere on the Internet in a easily parseable format, isn't it?

[[https://gist.github.com/borgar/31c1e476b8e92a11d7e9|Why yes someone made it in a SVG and 3D printed it and stuff]]

According to the font docs I just have to translate the data in the ''U+0100-017F'' range and that's it:

<code javascript unknownpleasures.js>
function n(val, smin, smax, dmin, dmax)
{
    return Math.floor((val - smin)/(smax - smin)*(dmax - dmin) + dmin);
}

fetch("https://gist.githubusercontent.com/borgar/31c1e476b8e92a11d7e9/raw/0fae97dab6830ecee185a63c1cee0008f6778ff6/pulsar.csv")
.then(r=>r.text())
.then(r=>{
    a = r.split("\n").map(v=>v.split(",").map(w=>parseFloat(w)));
    max = Math.max(...a.map(v=>Math.max(...v)));
    min = Math.min(...a.map(v=>Math.min(...v)));
    s = a.map(v=>v.map(w=>String.fromCodePoint(n(w, min, max, 0x100, 0x17f))).join("")).join("\\\\\n");
    console.log(s);
})
</code>

Now let's add some CSS:

<code css unknownpleasures.css>
.page
{
  font-family: "Linefont", system-ui;
  font-optical-sizing: auto;
  font-weight: 75;
  font-style: normal;
  font-variation-settings: "wdth" 25;
  font-size: 64px;
  line-height: 0.12;
}
</code>

And there you go, a text version of Unknown Pleasures, have fun
neige d'aoust

User Tools

Site Tools

Page Tools
