Skip to content

Commit 7dcee2b

Browse files
branchwelderbranchwelder
committedJul 25, 2024·
Link to knitscape page from main page and add blended primitives project folder
1 parent 9079765 commit 7dcee2b

File tree

7 files changed

+1068
-704
lines changed

7 files changed

+1068
-704
lines changed
 

‎index.html

+932-692
Large diffs are not rendered by default.

‎projects/blended-primitives/index.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>What's in a cable?</title>
7+
<link rel="stylesheet" href="../projects.css" />
8+
<link rel="icon" href="../../assets/img/favicon.ico" type="image/x-icon" />
9+
</head>
10+
<body>
11+
<a class="home" href="../../">back to home</a>
12+
<section class="margin-section">
13+
<div style="height: 3em"></div>
14+
<div class="header">
15+
<span class="project-title">What’s in a cable?</span>
16+
<span class="project-subtitle">
17+
Abstracting Knitting Design Elements with Blended Raster/Vector
18+
Primitives
19+
</span>
20+
<span class="author-names">
21+
Hannah Twigg-Smith, Yuecheng Peng, Emily Whiting, and Nadya Peek
22+
</span>
23+
<!-- <div class="links">
24+
<a
25+
href="https://knitscape.net/"
26+
target="_blank"
27+
rel="noopener noreferrer">
28+
Live Site
29+
</a>
30+
<a
31+
href="https://github.com/machineagency/knitscape"
32+
target="_blank"
33+
rel="noopener noreferrer">
34+
Source Code Repository
35+
</a>
36+
</div> -->
37+
</div>
38+
</section>
39+
<section class="no-margin-section">
40+
<img class="teaser" src="teaser.png" />
41+
</section>
42+
<section class="margin-section">
43+
<div class="teaser-caption">
44+
In our design environment for editing knitting charts with blended
45+
primitives, a chart of knitting instructions is rasterized from layered
46+
vector boundaries and paths with associated raster stitch and yarn
47+
blocks. These cabled twist and braid patterns are designed using stitch
48+
paths we defined to encode a “right-leaning twist” (A) and a
49+
“left-leaning twist” (B). By placing the right twist along a stitch path
50+
that defines a purl border (C), we can produce a twist texture (D). By
51+
staggering both the left and right twists (E), we can produce a braid
52+
texture (F)
53+
</div>
54+
55+
<h3 class="section-title">Abstract</h3>
56+
<p class="abstract">
57+
In chart-based programming environments for machine knitting, patterns
58+
are specified at a low level by placing operations on a grid. This
59+
highly manual workflow makes it challenging to iterate on design
60+
elements such as cables, colorwork, and texture. While vector-based
61+
abstractions for knitting design elements may facili- tate higher-level
62+
manipulation, they often include interdependen- cies which require
63+
stitch-level reconciliation. To address this, we contribute a new way of
64+
specifying knits with blended vector and raster primitives. Our
65+
abstraction supports the design of interdepen- dent elements like
66+
colorwork and texture. We have implemented our blended raster/vector
67+
specification in a direct manipulation design tool where primitives are
68+
layered and rasterized, allowing for simulation of the resulting knit
69+
structure and generation of ma- chine instructions. Through examples, we
70+
show how our approach enables higher-level manipulation of various
71+
knitting techniques, including intarsia colorwork, short rows, and
72+
cables. Specifically, we show how our tool supports the design of
73+
complex patterns including origami pleat patterns and capacitive sensor
74+
patches.
75+
</p>
76+
</section>
77+
</body>
78+
</html>

‎projects/blended-primitives/teaser.png

3.06 MB
Loading

‎projects/blended-primitives/thumbnail.png

376 KB
Loading

‎projects/knitscape/index.html

+50-12
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>KnitScape</title>
77
<link rel="stylesheet" href="../projects.css" />
8-
<link rel="icon" href="../../assets/img/favicon.ico" type="image/x-icon">
9-
8+
<link rel="icon" href="../../assets/img/favicon.ico" type="image/x-icon" />
109
</head>
1110
<body>
1211
<a class="home" href="../../">back to home</a>
@@ -18,12 +17,26 @@
1817
<div class="header">
1918
<span class="project-title">KnitScape</span>
2019
<span class="project-subtitle">
21-
Computational Design and Yarn-level Simulation of Slip and Tuck Colorwork Knitting Patterns
20+
Computational Design and Yarn-level Simulation of Slip and Tuck
21+
Colorwork Knitting Patterns
2222
</span>
2323
<span class="author-names">
2424
Hannah Twigg-Smith, Emily Whiting, and Nadya Peek
2525
</span>
2626
<div class="links">
27+
<span>Published at CHI 2024.</span>
28+
<a
29+
href="https://dl.acm.org/doi/pdf/10.1145/3613904.3642799"
30+
target="_blank"
31+
rel="noopener noreferrer">
32+
Paper PDF
33+
</a>
34+
<a
35+
href="https://dl.acm.org/doi/10.1145/3613904.3642799"
36+
target="_blank"
37+
rel="noopener noreferrer">
38+
ACM DL
39+
</a>
2740
<a
2841
href="https://knitscape.net/"
2942
target="_blank"
@@ -34,23 +47,48 @@
3447
href="https://github.com/machineagency/knitscape"
3548
target="_blank"
3649
rel="noopener noreferrer">
37-
Source Code
50+
Source Code Repository
3851
</a>
3952
</div>
4053
</div>
4154

4255
<h3 class="section-title">Abstract</h3>
4356
<p class="abstract">
44-
Slipped and tucked stitches introduce small areas of deformation that compound and result in emergent textures on knitted fabrics.
45-
When used together with color changes and ladders, these can also produce dramatic colorwork and openwork effects.
46-
However, designing slip and tuck colorwork patterns is challenging due to the complex interactions between operations, yarns, and deformations.
47-
We present KnitScape, a browser-based tool for design and simulation of stitch patterns for knitting.
48-
KnitScape provides a design interface to specify 1) operation repeats, 2) color changes, and 3) needle positions.
49-
These inputs are used to build a graph of yarn topology and run a yarn-level spring simulation.
50-
This enables visualization of the deformation that arises from slip and tuck operations.
51-
Through its design tool and simulation, KnitScape enables rapid exploration of a complex colorwork design space.
57+
Slipped and tucked stitches introduce small areas of deformation that
58+
compound and result in emergent textures on knitted fabrics. When used
59+
together with color changes and ladders, these can also produce dramatic
60+
colorwork and openwork effects. However, designing slip and tuck
61+
colorwork patterns is challenging due to the complex interactions
62+
between operations, yarns, and deformations. We present KnitScape, a
63+
browser-based tool for design and simulation of stitch patterns for
64+
knitting. KnitScape provides a design interface to specify 1) operation
65+
repeats, 2) color changes, and 3) needle positions. These inputs are
66+
used to build a graph of yarn topology and run a yarn-level spring
67+
simulation. This enables visualization of the deformation that arises
68+
from slip and tuck operations. Through its design tool and simulation,
69+
KnitScape enables rapid exploration of a complex colorwork design space.
5270
We demonstrate KnitScape with a series of example swatches.
5371
</p>
5472
</section>
73+
<iframe
74+
class="no-margin-section video-iframe"
75+
src="https://www.youtube.com/embed/rtc72bLLm6w?si=xRrUramMAM_wudpO"
76+
frameborder="0"
77+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
78+
allowfullscreen>
79+
</iframe>
80+
<section class="margin-section">
81+
<h3 class="section-title">Bibtex</h3>
82+
<pre class="bibtex">
83+
@inproceedings{twigg2024knitscape,
84+
title={KnitScape: Computational Design and Yarn-Level Simulation of Slip and Tuck Colorwork Knitting Patterns},
85+
author={Twigg-Smith, Hannah and Whiting, Emily and Peek, Nadya},
86+
booktitle={Proceedings of the 2024 CHI Conference on Human Factors in Computing Systems},
87+
pages={1--20},
88+
year={2024}
89+
}
90+
</pre
91+
>
92+
</section>
5593
</body>
5694
</html>

‎projects/knitscape/thumbnail.png

517 KB
Loading

‎projects/projects.css

+8
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,14 @@ a {
7878
width: 100%;
7979
}
8080

81+
.teaser-caption {
82+
font-size: small;
83+
line-height: 1;
84+
margin-top: 0.5rem;
85+
color: #cccccc;
86+
font-style: italic;
87+
}
88+
8189
.header {
8290
display: flex;
8391
flex-direction: column;

0 commit comments

Comments
 (0)
Please sign in to comment.