-
Notifications
You must be signed in to change notification settings - Fork 0
/
making.html
117 lines (107 loc) · 10.5 KB
/
making.html
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Making Journal</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" />
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="fonts.css">
<style>
body {
font-family: 'FELight', sans-serif; font-size:15px; letter-spacing: .5px; line-height: 1.3em;
background-color: whitesmoke; color: indigo ;
max-width:50vw;
margin:0.5em auto 2em auto;
}
nav {z-index:3;position:fixed;background-color:beige; border:0.5px darkmagenta dotted;padding:0.5em}
nav details ol {border-top:0.5px darkmagenta dotted;}
nav details li {border-bottom:0.5px darkmagenta dotted;padding:0.25em 0 0 0}
nav details li:last-child {border-bottom:none}
main {display:grid;grid-template-columns:1fr 20fr}
img {display:block;width:50vw}
h1,h2 { font-size: 1em; font-weight:normal}
h1 {text-align:center;position: sticky;top: 1em;font-family:FEReg;text-decoration: 1px solid indigo underline}
h2 {font-weight:normal;margin-bottom:2em;padding-top:3em;text-align:center;top:3em;background-color:rgba(245, 245, 245, 0.75)}
a {color:indigo;text-decoration:1px indigo dotted underline}
a:hover {font-style:italic;text-decoration:none;}
img {display:block;margin:1em auto;}
article {border-top:30px thistle solid}
span.highlight {background-color:palegoldenrod}
@media (max-width:1000px) {
body {max-width:100%;margin:1em}
img {display:block;width:100%}
nav {position:sticky;top:0}
h1 {top:4em}
h2 {top:6em}
}
</style>
</head>
<nav>
Return to <a href="index.html">Index</a> / <a href="#top">Top</a>
<details>
<summary>Contents</summary>
<ol>
<li><a href="#td-1">Scrappy Collage</a></li>
<li><a href="#rgb-led">RGB Sliding</a></li>
<li><a href="#tray">UGTVWMWZ</a></li>
<li><a href="#data-entanglement">Data Entanglement</a></li>
<li><a href="#shape-grammar">Shape Grammar</a></li>
</ol>
</details>
</nav>
<body>
<h1 style="z-index:2">Making Journal</h1>
<p style="padding-top:3em" id="top">
I am pursuing a Master’s degree in <a href="https://www.architecture.cmu.edu/computational-design">Computational Design</a> — let this log serve as a diary for things I’ve made and ideas I’ve taken on.
</p>
<p>What is computational design? I’ve come into this program thinking it had something to do with generative, programmatic design workflows...
as I write this in December 2024 at the close of the first semester, I’m starting to think of the degree as a mode in which
I can work to engage with <span class="highlight">sociotechnical systems</span> more meaningfully.
</p>
<article>
<h2 id="td-1">—— TouchDesigner Collage (I) ——</h2>
<div style="padding:55.58% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1043078280?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="TD 1"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p>Getting to know TouchDesigner as a video editing tool... music is <a href="https://ashleyhelal.bandcamp.com/album/swimming"><em>Glade Springs</em> by Ashley Helal</a>.</p>
</article>
<article>
<h2 id="rgb-led">—— RGB Sliding ——</h2>
<div style="padding:75% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1043075097?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="RGB LED 1"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<br>
<div style="padding:79.81% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1043075108?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="RGB LED 2"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p>A quick exercise to get a bit familiarized with electronics:
replicating the skeuomorph/interface metaphor of the digital RGB
slider/controller. I’m interested in the potential of these input sources as
instruments and sites of more ambiguous encounters in their own right.
</p>
</article>
<article>
<h2 id="tray">—— UGTVWMWZ 2-Piece Silverware Flatware Set, Silicone Dishware Safe (City Chic) Adult Diet Tableware, Includes 1 Fork 1 Plate, Modular Configurable for Mealtime Relaxation, Destress Set for Teens Adults Halloween Christmas Gift ——</h2>
<div style="padding:78.69% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1043073561?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="UGTVWMWZ 1"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p> Investigating the role mealtime videos choreograph expectations around dining,
UGTVWMWZ is a tray with embedded screens (roughly demonstrated above) that maximizes
media absorption. Instead of assigning mealtime videos any moral judgment,
the tray seeks to fuse media and dietary absorption, such that eating and interacting
with food is situated as a means to an end — near-constant immersion into frenetic,
serialized, always-on media. In this clip, the user launches pieces of food at
respective compartments to scroll through media.
</p>
</article>
<article>
<h2 id="data-entanglement">—— Data Entanglement ——</h2>
<img src="https://d2w9rnfcy7mm78.cloudfront.net/32393145/original_a9798faa798d923c26778114d71b684c.png?1732150669?bc=0" alt="Photo from front of a small, long rectangular LCD display reading 'Cloudflare, New Jersey, Sunny', positioned atop a small LEGO structure. Wires and cables peek from the back. The background is a green paper.">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/32393144/original_0a75fee5e1c9accb0da357aa4acf2191.png?1732150669?bc=0" alt="Overhead photo of a LCD display hooked up to a microcontroller, wires, rotating knob, and breadboard, all atop a LEGO structure. The paper in the background on which all is set atop is a saturated green color. A light blue, opaque piece of plastic curves around, above the breadboard, diffusing the bright red light of the electronics underneath.">
<div style="padding:125% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1025476272?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Data Entanglement"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p>A reflection on how the data I produce flows through my local internet of things: particularly interested in the materiality of the internet (specifically, my router data), I found a 2021 <a href="https://www.ftc.gov/system/files/documents/reports/look-what-isps-know-about-you-examining-privacy-practices-six-major-internet-service-providers/p195402_isp_6b_staff_report.pdf">Federal Trade Commission report</a> examining how six major internet service providers (mine included) “amass large pools of sensitive data, and that their uses of such data could lead to significant harms, particularly when consumers are classified by demographic characteristics.”</p>
<p>Rotating the knob/dial refreshes server locations between which data packets travel: this includes the hosting service, state, and local weather.</p>
</article>
<article>
<h2 id="shape-grammar">—— Shape Grammar ——</h2>
<img src="https://d2w9rnfcy7mm78.cloudfront.net/32393143/original_e50165e521d9d90bfb3fdf65320d059e.png?1732150670?bc=0" alt="Black text on white background of a flowchart diagram specifying the combination of a set of calligraphic strokes.">
<div style="padding:72.65% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1025495834?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="SG 1"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p>A shape grammar I developed from this thread about the relationship between writing and drawing. Has absurd beginnings from a clip of <em>Nathan For You</em> with the caricature artist, I was taken by the way east Asian scripts are generally represented by those who aren’t familiar with it: see wonton fonts and yellow peril propaganda.</p>
<p>I adapted it as a shakily composed entry for <a href="https://radicalcharacters.org/radical-return">Radical Characters’ <em>Radical Return</em></a>. There was something in it about this question of <em><a href="https://www.are.na/block/13087100">how can I take advantage of my ignorance?</a></em></p>
<p>With influences from asemic writing and botched tattoos of Chinese text, I suppose I am trying to ask, <em>What does it mean when a script, a hand, a calligraphic style becomes adornment for Latin letterforms, positioned as a signifier of some sort of exoticism, edginess, or allure?</em></p>
</article>
</body>
</html>