Link to knitscape page from main page and add blended primitives proj…

…ect folder
machineagency · Jul 25, 2024 · 7dcee2b · 7dcee2b
1 parent 9079765
commit 7dcee2b
Show file tree

Hide file tree

Showing 7 changed files with 1,068 additions and 704 deletions.
diff --git a/index.html b/index.html
diff --git a/projects/blended-primitives/index.html b/projects/blended-primitives/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>What's in a cable?</title>
+    <link rel="stylesheet" href="../projects.css" />
+    <link rel="icon" href="../../assets/img/favicon.ico" type="image/x-icon" />
+  </head>
+  <body>
+    <a class="home" href="../../">back to home</a>
+    <section class="margin-section">
+      <div style="height: 3em"></div>
+      <div class="header">
+        <span class="project-title">What’s in a cable?</span>
+        <span class="project-subtitle">
+          Abstracting Knitting Design Elements with Blended Raster/Vector
+          Primitives
+        </span>
+        <span class="author-names">
+          Hannah Twigg-Smith, Yuecheng Peng, Emily Whiting, and Nadya Peek
+        </span>
+        <!-- <div class="links">
+          <a
+            href="https://knitscape.net/"
+            target="_blank"
+            rel="noopener noreferrer">
+            Live Site
+          </a>
+          <a
+            href="https://github.com/machineagency/knitscape"
+            target="_blank"
+            rel="noopener noreferrer">
+            Source Code Repository
+          </a>
+        </div> -->
+      </div>
+    </section>
+    <section class="no-margin-section">
+      <img class="teaser" src="teaser.png" />
+    </section>
+    <section class="margin-section">
+      <div class="teaser-caption">
+        In our design environment for editing knitting charts with blended
+        primitives, a chart of knitting instructions is rasterized from layered
+        vector boundaries and paths with associated raster stitch and yarn
+        blocks. These cabled twist and braid patterns are designed using stitch
+        paths we defined to encode a “right-leaning twist” (A) and a
+        “left-leaning twist” (B). By placing the right twist along a stitch path
+        that defines a purl border (C), we can produce a twist texture (D). By
+        staggering both the left and right twists (E), we can produce a braid
+        texture (F)
+      </div>
+
+      <h3 class="section-title">Abstract</h3>
+      <p class="abstract">
+        In chart-based programming environments for machine knitting, patterns
+        are specified at a low level by placing operations on a grid. This
+        highly manual workflow makes it challenging to iterate on design
+        elements such as cables, colorwork, and texture. While vector-based
+        abstractions for knitting design elements may facili- tate higher-level
+        manipulation, they often include interdependen- cies which require
+        stitch-level reconciliation. To address this, we contribute a new way of
+        specifying knits with blended vector and raster primitives. Our
+        abstraction supports the design of interdepen- dent elements like
+        colorwork and texture. We have implemented our blended raster/vector
+        specification in a direct manipulation design tool where primitives are
+        layered and rasterized, allowing for simulation of the resulting knit
+        structure and generation of ma- chine instructions. Through examples, we
+        show how our approach enables higher-level manipulation of various
+        knitting techniques, including intarsia colorwork, short rows, and
+        cables. Specifically, we show how our tool supports the design of
+        complex patterns including origami pleat patterns and capacitive sensor
+        patches.
+      </p>
+    </section>
+  </body>
+</html>
diff --git a/projects/blended-primitives/teaser.png b/projects/blended-primitives/teaser.png
diff --git a/projects/blended-primitives/thumbnail.png b/projects/blended-primitives/thumbnail.png
diff --git a/projects/knitscape/index.html b/projects/knitscape/index.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>KnitScape</title>
     <link rel="stylesheet" href="../projects.css" />
-    <link rel="icon" href="../../assets/img/favicon.ico" type="image/x-icon">
-
+    <link rel="icon" href="../../assets/img/favicon.ico" type="image/x-icon" />
   </head>
   <body>
     <a class="home" href="../../">back to home</a>
@@ -18,12 +17,26 @@
       <div class="header">
         <span class="project-title">KnitScape</span>
         <span class="project-subtitle">
-          Computational Design and Yarn-level Simulation of Slip and Tuck Colorwork Knitting Patterns
+          Computational Design and Yarn-level Simulation of Slip and Tuck
+          Colorwork Knitting Patterns
         </span>
         <span class="author-names">
           Hannah Twigg-Smith, Emily Whiting, and Nadya Peek
         </span>
         <div class="links">
+          <span>Published at CHI 2024.</span>
+          <a
+            href="https://dl.acm.org/doi/pdf/10.1145/3613904.3642799"
+            target="_blank"
+            rel="noopener noreferrer">
+            Paper PDF
+          </a>
+          <a
+            href="https://dl.acm.org/doi/10.1145/3613904.3642799"
+            target="_blank"
+            rel="noopener noreferrer">
+            ACM DL
+          </a>
           <a
             href="https://knitscape.net/"
             target="_blank"
@@ -34,23 +47,48 @@
             href="https://github.com/machineagency/knitscape"
             target="_blank"
             rel="noopener noreferrer">
-            Source Code
+            Source Code Repository
           </a>
         </div>
       </div>
 
       <h3 class="section-title">Abstract</h3>
       <p class="abstract">
-        Slipped and tucked stitches introduce small areas of deformation that compound and result in emergent textures on knitted fabrics.
-        When used together with color changes and ladders, these can also produce dramatic colorwork and openwork effects.
-        However, designing slip and tuck colorwork patterns is challenging due to the complex interactions between operations, yarns, and deformations.
-        We present KnitScape, a browser-based tool for design and simulation of stitch patterns for knitting.
-        KnitScape provides a design interface to specify 1) operation repeats, 2) color changes, and 3) needle positions.
-        These inputs are used to build a graph of yarn topology and run a yarn-level spring simulation.
-        This enables visualization of the deformation that arises from slip and tuck operations.
-        Through its design tool and simulation, KnitScape enables rapid exploration of a complex colorwork design space.
+        Slipped and tucked stitches introduce small areas of deformation that
+        compound and result in emergent textures on knitted fabrics. When used
+        together with color changes and ladders, these can also produce dramatic
+        colorwork and openwork effects. However, designing slip and tuck
+        colorwork patterns is challenging due to the complex interactions
+        between operations, yarns, and deformations. We present KnitScape, a
+        browser-based tool for design and simulation of stitch patterns for
+        knitting. KnitScape provides a design interface to specify 1) operation
+        repeats, 2) color changes, and 3) needle positions. These inputs are
+        used to build a graph of yarn topology and run a yarn-level spring
+        simulation. This enables visualization of the deformation that arises
+        from slip and tuck operations. Through its design tool and simulation,
+        KnitScape enables rapid exploration of a complex colorwork design space.
         We demonstrate KnitScape with a series of example swatches.
       </p>
     </section>
+    <iframe
+      class="no-margin-section video-iframe"
+      src="https://www.youtube.com/embed/rtc72bLLm6w?si=xRrUramMAM_wudpO"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowfullscreen>
+    </iframe>
+    <section class="margin-section">
+      <h3 class="section-title">Bibtex</h3>
+      <pre class="bibtex">
+@inproceedings{twigg2024knitscape,
+  title={KnitScape: Computational Design and Yarn-Level Simulation of Slip and Tuck Colorwork Knitting Patterns},
+  author={Twigg-Smith, Hannah and Whiting, Emily and Peek, Nadya},
+  booktitle={Proceedings of the 2024 CHI Conference on Human Factors in Computing Systems},
+  pages={1--20},
+  year={2024}
+}
+</pre
+      >
+    </section>
   </body>
 </html>
diff --git a/projects/knitscape/thumbnail.png b/projects/knitscape/thumbnail.png
diff --git a/projects/projects.css b/projects/projects.css
@@ -78,6 +78,14 @@ a {
   width: 100%;
 }
 
+.teaser-caption {
+  font-size: small;
+  line-height: 1;
+  margin-top: 0.5rem;
+  color: #cccccc;
+  font-style: italic;
+}
+
 .header {
   display: flex;
   flex-direction: column;