Last active
May 20, 2016 18:45
-
-
Save raphaelschaad/825ebb5117a085618dd8 to your computer and use it in GitHub Desktop.
The MIT Press colophon machine, a hommage to Muriel Cooper
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
/* remove any browser margin around the p5js sketch */ | |
padding: 0; | |
margin: 0; | |
/* default text settings */ | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-size: 14px; | |
/* Type weight 100-900 in 100 increments; Medium is 500: http://www.webtype.com/info/articles/fonts-weights/ */ | |
font-weight: 500; | |
text-align: center; | |
} | |
canvas { | |
/* avoid slight vertical scroll if the canvas is full screen */ | |
vertical-align: top; | |
} | |
#textfield { | |
display: block; | |
margin: 80px auto 0 auto; | |
text-align: center; | |
font-size: 14px; | |
border: none; | |
background: transparent; | |
letter-spacing: 0.5px; | |
text-transform: lowercase; | |
} | |
input:focus { | |
outline: none; | |
} | |
#line1 { | |
font-size: 54px; | |
margin: 0; | |
} | |
#line2 { | |
font-size: 32px; | |
letter-spacing: 5px; | |
margin:8px auto 0 auto; | |
} | |
#footer { | |
opacity: 0.3; | |
position: fixed; | |
bottom: 0; | |
width: 100%; | |
margin: 0 auto 20px auto; | |
} | |
a:link, a:visited, a:hover, a:active { | |
color: white; | |
} | |
</style> | |
</head> | |
<body> | |
<input id="textfield" type="text" placeholder="…" autocomplete="off" spellcheck="false" translate="no" onpaste="return false" autofocus> | |
<div id="canvasContainer"></div> | |
<p id="line1">The MIT Press</p> | |
<p id="line2"> colophon machine</p> | |
<p id="footer">Legendary designer Muriel Cooper created <a href="https://mitpress.mit.edu/blog/university-press-week-throwback-thursday-featuring-muriel-cooper">the iconic form in 1963</a>, and now you can write in it.</p> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.min.js"></script> | |
<script> | |
// The MIT Press colophon machine, a hommage to Muriel Cooper | |
// Raphael Schaad, MIT Media Lab, 2016-03-24 | |
"use strict"; | |
// Stroke Types | |
// normal . | |
// up ) | |
// down , | |
// up&down | | |
var s = 1.0; // a scale factor | |
var dims = { | |
".": {"y": 30*s, "h": 95*s}, | |
")": {"y": 0*s, "h": 125*s}, | |
",": {"y": 30*s, "h": 130*s}, | |
"|": {"y": 0*s, "h": 160*s}, | |
"w": 10*s, | |
"gap": 5*s | |
}; | |
var margin = 30; | |
var abc = { | |
"a": "..", | |
"b": ").", | |
"c": ".", | |
"d": ".)", | |
"e": ".", | |
"f": "|", | |
"g": ".,", | |
"h": ").", | |
"i": ".", | |
"j": ",", | |
"k": ").", | |
"l": ")", | |
"m": "...", | |
"n": "..", | |
"o": "..", | |
"p": ",.", | |
"q": ".,", | |
"r": ".", | |
"s": ".", | |
"t": ")", | |
"u": "..", | |
"v": "..", | |
"w": "...", | |
"x": "..", | |
"y": ".,.", | |
"z": ".", | |
" ": "_" | |
}; | |
var placeholder = "mitp"; | |
var string = placeholder; | |
var maxlength = 42; | |
// 0 = background, 1 = foreground | |
var colors = [ | |
["Black", "White"], | |
["White", "Black"], | |
["Crimson", "White"], | |
["RoyalBlue", "White"], | |
["GoldenRod", "White"], | |
["SeaGreen", "White"], | |
["Black", "LightSeaGreen"], | |
["Black", "SkyBlue"], | |
["Black", "Plum"], | |
["White", "Purple"] | |
]; | |
var colorIndex = 0; | |
var inputOpacity = 0.3; | |
// TODO: filter out non [a-z ] characters | |
$(function() { | |
colorIndex = Math.floor(Math.random() * colors.length); | |
$("#textfield").prop("value", string) | |
.prop("maxLength", maxlength) | |
.prop("size", maxlength) | |
.on("change keyup", function() { | |
string = $(this).val(); | |
redraw(); | |
}) | |
// Prevent losing focus; only seems to work in Chrome | |
.blur(function() { | |
$(this).focus(); | |
}) | |
.css("color", colors[colorIndex][1]) | |
.css("opacity", inputOpacity) | |
; | |
$("a").css("color", colors[colorIndex][1]); | |
$("body").css("color", colors[colorIndex][1]) | |
.css("background-color", colors[colorIndex][0]) | |
; | |
// Vendor specific (can't combine selectors): Webkit, Firefox 18-, 19+, IE | |
$("<style>" + | |
"::-webkit-input-placeholder { color: " + colors[colorIndex][1] + "; }" + | |
":-moz-placeholder { color: " + colors[colorIndex][1] + "; }" + | |
"::-moz-placeholder { color: " + colors[colorIndex][1] + "; }" + | |
":-ms-input-placeholder { color: " + colors[colorIndex][1] + "; }" + | |
"</style>").appendTo("head"); | |
}); | |
function setup() { | |
createCanvas(windowWidth, dims["|"].h + 2 * margin).parent("canvasContainer"); | |
fill(colors[colorIndex][1]); | |
noStroke(); | |
noLoop(); | |
} | |
function draw() { | |
clear(); | |
var x = margin; | |
var rects = []; | |
for (var i in string) { | |
var c = string[i]; | |
var strokes = abc[c]; | |
if (strokes == "_") { | |
x += dims.w + dims.gap + dims.w; | |
} else if (strokes) { | |
for (var j in strokes) { | |
var stroke = strokes[j]; | |
var dim = dims[stroke]; | |
rects.push([x, margin + dim.y, dims.w, dim.h]); | |
x += dims.w + dims.gap; | |
} | |
} | |
} | |
var w = x - dims.gap + margin; | |
x = (windowWidth - w) / 2; | |
for (var i = 0; i < rects.length; i++) { | |
var r = rects[i]; | |
rect(x + r[0], r[1], r[2], r[3]); | |
} | |
} | |
function windowResized() { | |
resizeCanvas(windowWidth, height); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment