raphaelschaad/mitpress.html

## mitpress.html
<!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>
	<!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": 30s, "h": 95s},
	")": {"y": 0s, "h": 125s},
	",": {"y": 30s, "h": 130s},
	"\|": {"y": 0s, "h": 160s},
	"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>