JavaScript loom

2015-03-21 05:07:49 +00:00 · 2015-03-21 05:07:49 +00:00 · 228ffc60c7
parent 0ddcb879bd
commit 228ffc60c7
1 changed files with 154 additions and 0 deletions
--- a/tartans/loom.html
+++ b/tartans/loom.html
@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>loom</title>
+		<script type="application/javascript">
+function Yarn(r, g, b) {
+	var rgb = [Math.round(r*255), Math.round(g*255), Math.round(b*255)]
+	return "rgb(" + rgb.join(",") + ")"
+}
+
+var colors = {
+	"R":   Yarn(0.50, 0.00, 0.00), // Red
+	"G":   Yarn(0.00, 0.40, 0.00), // Green
+	"B":   Yarn(0.00, 0.00, 0.50), // Blue
+	"C":   Yarn(0.00, 0.50, 0.50), // Cyan
+	"Y":   Yarn(0.80, 0.80, 0.00), // Yellow
+	"P":   Yarn(0.60, 0.00, 0.60), // Purple
+	"W":   Yarn(0.90, 0.90, 0.90), // White
+	"K":   Yarn(0.00, 0.00, 0.00), // Black
+	"BK":  Yarn(0.00, 0.00, 0.00), // Black
+	"GR":  Yarn(0.50, 0.50, 0.50), // Gray
+	"DB":  Yarn(0.00, 0.00, 0.30), // Dark Blue
+	"LB":  Yarn(0.00, 0.40, 0.90), // Light Blue
+	"LR":  Yarn(0.80, 0.00, 0.00), // Light Red
+	"LG":  Yarn(0.00, 0.60, 0.00), // Light Green
+	"LV":  Yarn(0.50, 0.25, 0.60), // Lavender
+	"BR":  Yarn(0.60, 0.40, 0.20), // Brown
+	"LGR": Yarn(0.60, 0.60, 0.60), // Light Gray
+	"LBR": Yarn(0.80, 0.70, 0.50), // Light Brown
+	"": ""
+}
+
+function Loom(ctx, warp) {
+	ctx.lineWidth = 3;
+	for (var x in warp) {
+		var yarn = warp[x];
+		ctx.strokeStyle = yarn;
+		ctx.beginPath();
+		ctx.moveTo(x*ctx.lineWidth, 0);
+		ctx.lineTo(x*ctx.lineWidth, 600);
+		ctx.stroke();
+	}
+	this.nrows = 0;
+	this.warp = warp;
+
+	this.weave = function(yarn, up, down, skip, repeat) {
+		up = up || 1
+		down = down || 1
+		skip = skip || 0
+		repeat = repeat || 0
+
+		ctx.strokeStyle = yarn;
+
+		var offset = (this.nrows / (repeat + 1)) * (skip + 1);
+		var harness = up + down;
+		var row = [];
+		for (var x = 0; x < this.warp.length; x += 1) {
+			var ox = (x + offset) % harness
+			if (ox < up) {
+				ctx.beginPath();
+				ctx.moveTo(x*ctx.lineWidth, this.nrows*ctx.lineWidth);
+				ctx.lineTo((x+1)*ctx.lineWidth, this.nrows*ctx.lineWidth);
+				ctx.stroke();
+			}
+		}
+
+		this.nrows += 1;
+	}
+
+	this.plainWeave = function(yarn) {
+		this.weave(yarn);
+	}
+
+	this.twill = function(yarn, width) {
+		this.weave(yarn, width || 2, width || 2);
+	}
+
+	this.satinWeave = function(yarn) {
+		// 1/16, skip 4
+		this.weave(yarn, 1, 16, 4);
+	}
+
+	this.basketWeave = function(yarn) {
+		// 2/2, skip 1, repeat 1
+		this.weave(yarn, 2, 2, 1, 1);
+	}
+
+	this.plaid = function() {
+		for (var i in this.warp) {
+			this.twill(this.warp[i]);
+		}
+	}
+}
+
+var sett_re = /([A-Za-z]{1,3}|\([A-Fa-f0-9]{3}\))(\d{1,3})/;
+
+function settOfString(str) {
+	var sett = []
+	
+	while (str.length > 0) {
+		var result = sett_re.exec(str);
+		if (result == null) {
+			break
+		}
+
+		var color;
+		var cs = result[1];
+		if (cs[0] == "(") {
+			color = "#" + cs.substr(1, cs.length-2);
+		} else {
+			color = colors[cs];
+		}
+
+		for (var i = 0; i < result[2]; i += 1) {
+			sett.push(color);
+		}
+
+		str = str.substr(result[0].length + result.index);
+	}
+
+	if (str[str.length - 1] == ".") {
+		var ttes = sett.reverse();
+		sett = sett.concat(ttes);
+	}
+
+	if (sett.length % 4 != 0) {
+		sett = sett.concat(sett);
+	}
+
+	return sett;
+}
+
+function weave(pattern) {
+	var canvas = document.getElementById("loom");
+	var ctx = canvas.getContext("2d");
+
+	var sett = settOfString(pattern);
+	var l = new Loom(ctx, sett);
+	l.plaid();
+}
+
+function krang() {
+	weave("LG8 LV32 R4 G32 LG32 Y4 LG4");
+}
+window.onload = krang;
+		</script>
+	</head>
+	<body>
+		<h1>Loom</h1>
+		<canvas id="loom" width="600" height="600">
+			Sorry, you need HTML5 and JavaScript for this.
+		</canvas>
+	</body>
+</html>