155 lines
3.3 KiB
HTML
155 lines
3.3 KiB
HTML
<!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>
|