Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Participants: Hannah Ackermans * Julianne Aguilar * Bo An * Katie Anagnostou * Joanne Armitage * Lucas Bang * Alanna Bartolini * David M. Berry * Lillian-Yvonne Bertram * Elisa Beshero-Bondar * Briana Bettin * Sayan Bhattacharyya * Avery Blankenship * Gregory Bringman * Tatiana Bryant * Zara Burton * Evan Buswell * Ashleigh Cassemere-Stanfield * Angela Chang * Prashant Chauhan * Lia Coleman * Chris Coleman * Bill Condee * Nicole Cote * Christina Cuneo * Pierre Depaz * Ranjodh Dhaliwal * Samuel DiBella * Quinn Dombrowski * Kevin Driscoll * Brandee Easter * Jeffrey Edgington * Zoelle Egner * Tristan Espinoza * Teodora Sinziana Fartan * Meredith finkelstein * luke fischbeck * Cyril Focht * Cassidy Fuller * Erika Fülöp * gripp gillson * Alice Goldfarb * Jan Grant * Sarah Groff Hennigh-Palermo * Saksham Gupta * MARIO GUZMAN * Gottfried Haider * Rob Hammond * Nabil Hassein * Diogo Henriques * Gui Heurich * Kate Hollenbach * Stefka Hristova * Bryce Jackson * Dennis Jerz * Joey Jones * Amy Kintner * Corinna Kirsch * Harris Kornstein * Julia Kott * Rishav Kundu * Karios Kurav * Cherrie Kwok * Sarah Laiola * RYAN LEACH * Rachael Lee * Kristen Lillvis * Elizabeth Losh * Jiaqi LU * Megan Ma * Emily Maemura * ASHIK MAHMUD * Felipe Mammoli * Mariana Marangoni * Terhi Marttila * Daniel McCafferty * Christopher McGuinness * Alex McLean * Chandler McWilliams * Todd Millstein * Achala Mishra * Mami Mizushina * Nick Montfort * Molly Morin * Gutierrez Nicholaus * Matt Nish-Lapidus * Michael Nixon * Mace Ojala * Steven Oscherwitz * Delfina Pandiani * Stefano Penge * Megan Perram * Gesina Phillips * Tanner Poling * Julia Polyck-O’Neill * Ben Potter * Amit Ray * Katrina Rbeiz * Jake Reber * Thorsten Ries * Giulia Carla Rossi * Barry Rountree * Warren Sack * samara sallam * Mark Sample * Perla Sasson-Henry * zehra sayed * Carly Schnitzler * Ushnish Sengupta * Lyle Skains * Andrew Smith * Rory Solomon * S. Hayley Steele * Samara Steele * Nikki Stevens * Daniel Temkin * Anna Tito * Lesia Tkacz * Fereshteh Toosi * Nicholas Travaglini * Paige Treebridge * Paige Treebridge * Álvaro Triana Sánchez * Lee Tusman * Natalia + Meow Tyshkevich + Kilo * Annette Vee * Malena Velarde * Dan Verständig * Yohanna Waliya * Samantha Walkow * Josephine Walwema * Shu Wan * Biyi Wen * Zach Whalen * Mark Wolff * Christine Woody * kathy wu * Katherine Yang * Shuyi Yin * Nikoleta Zampaki * Hongwei Zhou
Coordinated by Mark Marino (USC), Jeremy Douglass (UCSB), Sarah Ciston (USC), and Zach Mann (USC). Sponsored by the Humanities and Critical Code Studies Lab (USC), and the Digital Arts and Humanities Commons (UCSB).

Arf Magna (2022 Code Critique) by Nick Montfort

edited January 2022 in 2022 Code Critiques

Arf Magna

Nick Montfort

HTML with CSS and JavaScript


Platform: Recent version of a major Web browser (Chrome, Chromium, Firefox, Safari, Edge)

Live Version:

Possible discussion questions

  1. To what genre or form would you say “Arf Magna” belongs?
  2. “Arf Magna” declares that it is “after” Ramón Llull; how exactly do you understand the relationship of “Arf Magna” to the work and ideas of Llull?
  3. Do you see any importance to line 10 (the license) and the easily accessed source, and if so, what is it? How does it relate to the answer to (2)?

A Note from the Author/Programmer

Obviously I have some thoughts about these questions myself — I’m glad to discuss them, too. However, by asking for your thoughts I don’t mean to quiz you and see if you get the right answers to “Arf Magna.” I consider this an open work, with your interpretation of it as valid as mine.

<!doctype html>

  <meta charset="utf-8">
  <title>Arf Magna</title>

  <!-- © 2021 Nick Montfort

Copying and distribution of this file, with or without modification, are permitted in any medium without royalty provided the copyright notice and this notice are preserved. This file is offered as-is, without any warranty.

    body {
      margin: 0;
      overflow: hidden

    #outer {
      height: 100vh;
      width: 100vw;
      background: #000

    a {
      color: #fff

    p {
      margin: 10px;
      font-size: 16px;
      text-align: right;
      font-family: monospace

    #proposition {
      text-align: center;
      margin-top: 45vh;
      font-size: 7vh;
      font-weight: bold;
      color: #fff

  <div id="outer">
      <p><span id="label">ARF MAGNA 
          after <a href="" target="_blank">Ramón Llull</a> 
          by <a href="" target="_blank">Nick Montfort</a> 
          in memoriam <a href="" target="_blank">Pepys</a></span> 
        <span onclick="toggleFull()">⛶</span>
    <div id="proposition">(click to begin)</div>
    const a = 'delightful,playful,close,kind,loyal,cute,good,willful,warm,joyful,inquisitive,eager,attentive,cheerful,soft,love'.split(',');
    const b = '_,_,_,_,ty,_,_,_,th,_,_,_,_,_,_,'.replace(/_/g, 'ness').split(',');
    const freqs = [261.6, 293.7, 329.6, 392, 440, 523.3, 587.3, 659.7];
    var ac, oscNodes = [], gainNodes = [];
    var bell = 0, i = 0, j = 0, last = j;
    function toggleFull() {
      if (1 >= outerHeight - innerHeight) {
        let leave = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullscreen || document.msExitFullscreen;;
      } else {
        let enter = outer.requestFullscreen || outer.webkitRequestFullscreen || outer.mozRequestFullscreen || outer.msRequestFullscreen;;
    function checkLabel() {
      if (1 >= outerHeight - innerHeight) {
 = "hidden";
        } else {
 = "visible";
    function note(freq) {
      oscNodes[bell].frequency.value = freq;
      for ([volume, time] of [[.2, 1], [0, 8]]) {
        gainNodes[bell].gain.linearRampToValueAtTime(volume, ac.currentTime + time);
      bell = (bell + 1) % 8;
    function start() {
      outer.removeEventListener('click', start);
      ac = new (window.AudioContext || window.webkitAudioContext);
      for (let n = 0; n < 8; n = n + 1) {
        oscNodes[n] = ac.createOscillator();
        oscNodes[n].frequency.value = 440;
        gainNodes[n] = ac.createGain();
        gainNodes[n].gain.value = 0;
      document.addEventListener('mousemove', e => {
        i = ~~(16 * e.pageX / window.innerWidth);
        j = ~~(16 * e.pageY / window.innerHeight);
        if (j !== last) {
          note(freqs[j % 8]);
        proposition.innerText = 'dog’s ' + a[i] + b[i] + ' is ' + a[j]; = "#" + (4194304 + ~~(16777216 / i + 1)).toString(16);
        previous = j;
      document.dispatchEvent(new Event('mousemove'));
      setInterval(checkLabel, 500);
    outer.addEventListener('click', start);



  • I cannot speak confidently about Llull rings, but I get the sense that they aim to generate claims of universal truths by stringing together aphorisms… so you can make new “truths” based on formulae, like that joke: if the love of money is the root of all evil, and if time equals money, then loving time is the root of all evil.

    Arf Magna does something similar, taking things we all know to be unimpeachable truths (e.g., that a/this dog is cute) and recombines them to form new ones: if the dog is cute and the dog is loyal, then surely the dog’s cuteness is loyal ('dog’s ' + a[i] + b[i] + ' is ' + a[j]).

    It works on a couple other levels, too… for one, it’s like the bumper sticker “Dog is my co-pilot” insomuch as it takes Llull’s centering of God and God’s “Dignities” (and keeps the lack of an article “the”) to instead recombine Dog’s positive qualities (“const a”): rather than Goodness, Wisdom, Glory, Simplicity, Greatness, Will, Perfection, Nobility, Eternity, Virtue, Justice, Mercy, Power, Truth, Generosity, and Dominion, it is delightful, playful, close, kind, loyal, cute, good, willful, warm, joyful, inquisitive, eager, attentive, cheerful, soft, and love. (I suppose the Ars Magna was sort of an ancient bumper sticker generator.)

    I am unclear on how Llull rings articulate (each ring in a disc can rotate separately?), or how mouse movement analogizes to that… or why a “mousemove” would recombine a dog's (positive) qualities, aside from maybe “inquisitive” and “playful.” But certainly, I can agree that dogs are divine.

    Some questions:
    Do the colors and tones articulate randomly or is there a pattern I am missing?
    Why the adjectives/dignities “close” and “soft”?

  • To confirm, Raymond Llull's wheels are supposed to generate universal truths via combination. They often used letters that were abbreviations for particular virtues (or in some case vices). They, along with many spatial mnemonics, were ways for scholars and preachers (particularly Dominican monks) to generate new arguments and religious theses. If anyone would like to read more about these small-scale medieval technologies, Francis Yates' The Art of Memory is a good starting place.

    I also want to point out that "Arf Magna" is a lovely typographic pun. The "long s" is often visually confused with an 'f'.

  • Silk browser plays it perfectly!

  • edited January 2022

    I was surprised how deterministic Arf Magna appeared in repeatedly loadings (using Safari browser) as it always started with the same string of words. I assume Llull's wheels would have been used from a random starting place, but perhaps Llull would have reset them at a specific starting point? And from then on there is a combinatorial element?

    I also wondered about the use of the x and y coordinates to set the different words and the relationship of that to Llull? So I echo @Zach_Mann questions above.

    I was also wondering about the generated sounds, which seems very anti-Llull in many ways. :smile:

  • @Zach_Mann:

    Do the colors and tones articulate randomly or is there a pattern I am missing?

    Seems (mostly) tied to the y coordinate of the cursor, the tones in a pentatonic scale. I found myself seeking out melodies in it, which guided which phrases would pop up. But also, in Firefox at least, if you move the cursor quickly out of the main browser window, you get seemingly random chords.

  • I showed this to a colleague on Friday who said “so, this is sacrilegious?” I’m curious to know if anyone else had the same sort of response.

  • I launched the live version without even looking at the code. Funnily enough, as soon as I clicked to start it, my dog (who was previously sleeping) starting wondering what the heck was happening! Her ears were swiveling like crazy and she kept tilting her head from side to side.

    Personally, I thought it was soothing, but my friend sitting next to me said her ears were hurting and told me to turn it off.

Sign In or Register to comment.