neale/homepage
neale
/
homepage
1
0
Fork 0
Code Pull Requests Actions Activity

Make tartan weaver do a tilable image

This commit is contained in:
Neale Pickett 2015-03-25 20:40:26 +00:00
parent 7438074515
commit 9efcff9445
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
tartans/index.mdwn
View File

@ -2,7 +2,7 @@ Title: Tartans
Header: <script src="weave.js"></script> Header: <script src="weave.js"></script>
Header: <script src="presets.js"></script> Header: <script src="presets.js"></script>
<canvas id="loom" width="800" height="600" style="width: 100%; background: #444;"> <canvas id="loom" width="800" height="800" style="width: 100%; background: #444;">
Sorry, you need HTML5 and JavaScript for this. Sorry, you need HTML5 and JavaScript for this.
<img src="nmloe.png"> <img src="nmloe.png">
</canvas> </canvas>
@ -11,7 +11,6 @@ Header: <script src="presets.js"></script>
<select id="preset"><option>Presets:</option></select> <select id="preset"><option>Presets:</option></select>
<input id="sett" size="30"> <input id="sett" size="30">
<span style="white-space: nowrap;"> <span style="white-space: nowrap;">
Zoom: <select id="thick"><option>0.8</option><option>1</option><option selected>2</option><option>3</option></select>
</span> </span>
</div> </div>

19
tartans/weave.js
View File

@ -20,6 +20,7 @@
// //
var maxSaturation = 200; var maxSaturation = 200;
var yarnWeight = 3;
function Yarn(r, g, b) { function Yarn(r, g, b) {
var rgb = [Math.round(r*maxSaturation), Math.round(g*maxSaturation), Math.round(b*maxSaturation)] var rgb = [Math.round(r*maxSaturation), Math.round(g*maxSaturation), Math.round(b*maxSaturation)]
@ -54,7 +55,7 @@ function Loom(ctx, warp, threadwidth) {
var width = ctx.canvas.width; var width = ctx.canvas.width;
var height = ctx.canvas.height; var height = ctx.canvas.height;
ctx.lineWidth = Number(threadwidth || 2); ctx.lineWidth = Number(threadwidth || yarnWeight);
// Avoid infinite loop // Avoid infinite loop
if (warp.length == 0) { if (warp.length == 0) {
@ -62,7 +63,7 @@ function Loom(ctx, warp, threadwidth) {
} }
// Draw the weft // Draw the weft
for (var x = 0; x < width; ) { for (var x = 0; x <= width; ) {
for (var i in warp) { for (var i in warp) {
ctx.strokeStyle = warp[i]; ctx.strokeStyle = warp[i];
ctx.beginPath(); ctx.beginPath();
@ -173,18 +174,22 @@ function weave(pattern, width) {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
var sett = settOfString(pattern); var sett = settOfString(pattern);
var x = width * sett.length * 2;
canvas.width = x;
canvas.height = x;
var l = new Loom(ctx, sett, width); var l = new Loom(ctx, sett, width);
l.plaid(); l.plaid();
} }
function update(reset) { function update(reset) {
var settInput = document.getElementById("sett"); var settInput = document.getElementById("sett");
var thickInput = document.getElementById("thick"); weave(settInput.value, yarnWeight);
weave(settInput.value, thick.value);
if (reset) { if (reset) {
var s = encodeURIComponent(settInput.value).replace(/%20/g, "+"); var s = encodeURIComponent(settInput.value).replace(/%20/g, "+");
window.location.hash = "s=" + s + "&w=" + thickInput.value; window.location.hash = "s=" + s;
document.getElementById("preset").value = "Presets:"; document.getElementById("preset").value = "Presets:";
document.getElementById("desc").innerText = ""; document.getElementById("desc").innerText = "";
@ -224,15 +229,11 @@ if (window.location.hash) {
function init() { function init() {
document.getElementById("sett").addEventListener("input", update); document.getElementById("sett").addEventListener("input", update);
document.getElementById("thick").addEventListener("input", update);
if (qs["s"]) { if (qs["s"]) {
document.getElementById("sett").value = qs["s"]; document.getElementById("sett").value = qs["s"];
} }
if (qs["w"]) {
document.getElementById("thick").value = qs["w"];
}
var presetName = qs["p"]; var presetName = qs["p"];
var presetInput = document.getElementById("preset") var presetInput = document.getElementById("preset")