screenbasedimages/layers.html at main · atorresen/screenbasedimages · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>layers</title>
  <link rel="icon" href="images/icon.ico">
  <link rel="stylesheet" href="styles.css">

  <!-- Google fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet">
</head>

<body>
  <a href="index.html"><button class="navbutton"><</button></a>

  <br>
  <img src="images/layers_three.png" alt="layers_three.png">
  <br>
  <img src="images/layers_all.png" alt="layers_all.png">
  <br>
  <p>pen plotter and screenprint, 3 editions of 7</p>

  <br>
  <hr>
  <br>
  <h2 class="plainFont" style="width: 90%;">"[Multiple] representations were derived from exactly the same dataset, the same set of pixels, but as a result of the choices of the image processor, a different set of features is revealed or subdued each time."</h2>
  <h4>- janet vertesi, <em>seeing like a rover</em>, 2015</h4>
  <br>
  <h2 class="plainFont" style="width: 90%;">"Cake! Everybody loves cake! Cakes have layers!"</h2>
  <h4>- donkey, <em>shrek</em>, 2001</h4>
  <br>
  <hr>
  <br>

  <table>
    <tr>
      <td><img src="images/layers_penplot.png" alt="layers_penplot.png"></td>
      <td><img src="images/layers_screenprint.png" alt="layers_screenprint.png"></td>
      <td><img src="images/layers_edition.png" alt="layers_edition.png"></td>
    </tr>
  </table>

  <br><br><br><br>
  <a href="https://www.wolframcloud.com/obj/4ad1c65b-6669-4c06-be59-432a8e916bdc"><button class="navbutton">code</button></a>
  <br><br><br><br><br>
  <img src="images/layers_masked.png" alt="layers_masked.png">
  <img src="images/layers_masks.png" alt="layers_masks.png">
  <img src="images/layers_paths.png" alt="layers_paths.png">

  <br><br>
  <div class="reflection">
    <p>"Images! Everybody loves images! Images have layers!"</p>

    <p>
      Inspired by the "Image Processing" chapter of Janet Vertesi's <a href="https://press.uchicago.edu/ucp/books/book/chicago/S/bo18295743.html">Seeing Like A Rover</a>, I wanted to play with the idea of separating an image into layers that each contain some type of numerical information.
      I separated the image of a layer cake into a grid, then revealed or masked the parts of the image within each grid box based on whether its row and column indexes were prime, even, or had an even number of prime factors.
    </p>

    <p>"Prints! Everybody loves prints! Prints have layers!"</p>
    <p>
      Layers lend themselves well to the medium of printmaking, for which inks of different colors are laid down in overlapping layers.
      While, conventionally, converting an image to a screenprint involves separating the image into layers based on colors, for this project I separated the image into layers based on number theoretic properties as described above.
      Then, I also played with permuting the order of the layers during the screenprinting process: in each of the three versions of the print, a different part of the image constitutes each layer (blue, red, yellow).
    </p>

    <p>"Gifts! Everybody loves gifts! Gifts have layers!"</p>
    <p>
      Finally, to add another layer to this overdetermined project on layers, I gifted the prints to my classmates during our class critique.
    </p>
  </div>
</body>

</html>