-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprocess.html
130 lines (111 loc) · 9.19 KB
/
process.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE HTML>
<!--
Industrious by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Cabintine</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="templated-industrious/assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<a class="logo" href="index.html">Cabintine</a>
<nav>
<a href="#menu">Menu</a>
</nav>
</header>
<!-- Nav -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="process.html">Process</a></li>
<li><a href="deliverables.html">Deliverables</a></li>
</ul>
</nav>
<!-- Heading -->
<div id="heading" >
<h1>Cabintine</h1>
</div>
<!-- Main -->
<section id="main" class="wrapper">
<div class="inner">
<div class="content">
<header>
<h2>Process</h2>
</header>
<p>This page details the process of creating Cabintine from the intial data processing through the fabrication and building of the acutal project.</p>
<!-- <hr /> -->
<h3>Data Collection and Processing</h3>
<p>The original dataset was written as journal entries in a physical notebook, starting with Day 1 on March 16th, when people first arrived at the cabin. Thus, the first step I took when starting this project was to photograph and digitize the data. I did not make an exact digital replica but focused instead on the elements I was most interested to explore in my project, including the mental states, people's descriptive words, day titles, and notable daily events. I began this process on Day 24 and started analyzing the data on Day 25, so I stopped digitizing the data after that point to avoid skewing future results. All members of the cabin consented to this data being used for my project, but for privacy reasons, I anonymized the data, labelling each person as a “Comrade” numbered 1-11. Comrades are only included in the log entry if they are physically present at the cabin that day, and thus there are no entries for a person before they arrive at the cabin. Initial exploration of the data was done in Tableau, and I became interested in exploring the individual and group trends of the mental states throughout the time in quarantine. Processing to compute the daily average mental states and overall average was also done in Tableau. </p>
<hr />
<h3>Fabrication Process</h3>
<p>I first modeled the basic concept for a 3D bar chart of mental states in Rhinoceros with the people on one axis, the days on another, and the z axis encoding the value of the mental state.</p>
<p>Most physicalizations rely on modern fabrication techniques, like laser cutting and 3D printing. In the cabin, however, I did not have access to those tools, and thus, all elements of this project were constructed by hand from cereal and snack boxes. The materials used and quantities of each can be seen in the image below.</p>
<div class="image">
<img src="images/materials.jpg" alt="Materials used." width="40%" height="auto">
</div>
<p>Each mental state was represented as a 0.5”x0.5”x(value of mental state)" sized bar that had to be measured, cut, scored, glued, and painted. The bars were constructed such that they were open and hollow on one end but closed on top. There were a total of 200 mental states logged in the first 25 days across the 11 cabin members, meaning this construction process was repeated 200 times. All bars were made from the materials pictured above, and I used a ruler, scissors, a craft knife, and Elmer's Glue for this process.</p>
<div class="images">
<img src="images/measure.jpg" alt="Measure bars." width="35%" height="auto">
<img src="images/steps.jpg" alt="Four steps of construction." width="30%" height="auto">
<img src="images/glue.jpg" alt="Glue bars." width="32%" height="auto">
</div>
<p>Eleven paint colors were chosen (one for each cabin member) from my set of 48 Basics acrylic paints such that there was sufficient differentiation between people. The bars were sorted by comrade and painted accordingly.</p>
<div class="images_two">
<img src="images/painted_p.jpg" alt="Painting one set of bars." width="45%" height="auto">
<img src="images/painted_bars.jpg" alt="Many painted sets of bars." width="35%" height="auto">
</div>
<p>I was fortunate that another cabin member received numerous large shipments of materials for a class, and I used their cardboard boxes as the base and backboard of my piece. I left the base (an approximaly 40"x25"x15" double thickness cardboard box) mostly as is but cut the backboard piece of cardboard down to match the width and used the craft knife to cut the line chart into the top edge.</p>
<p>I wanted to make the bars of the chart removable, so I cut scraps of wood down to 1.5" high pegs with a length and width slightly smaller than the inside of the bars, allowing the bars to fit snugly when slid over the wood pieces. I was fortunate enough to be home at this point and had access to table and chop saws for this process. I next measured and gridded the top surface of the base and glued all 200 pegs into place. Then, the base, pegs, and backboard were spray painted white. </p>
<div class="images">
<img src="images/sanding.jpg" alt="sanding wood pieces." width="20%" height="auto">
<img src="images/gridded_wood.jpg" alt="Gridded and glued." width="38%" height="auto">
<img src="images/spraypaint.jpg" alt="Spray painted base." width="38%" height="auto">
</div>
<p>The next part of assembly involved painting all of the details, including black lines on the backboard for the daily and overall average mental state trends and all of the labels — comrades, days, numeric values on the line chart, the chart title, and a description of mental states. Finally, I made little icons along the backboard as a timeline of some fun events.</p>
<div class="images_two">
<img src="images/timeline.jpg" alt="Line graph and icons on backboard." width="48%" height="auto">
<img src="images/painted_comrades.jpg" alt="Comrade labels painted." width="20%" height="auto" >
<img src="images/no_internet.jpg" alt="No internet icon." width="27%" height="auto">
</div>
<p>The final piece of the project was the electronic components. I had a spare Arduino, joystick, and a liquid crystal display (LCD) from other classes or previous kits, and I used these pieces to explore more of the textual data. I coded the Ardunio with a large matrix of strings for each person's daily word and the day titles. For days without entries for a comrade, I put "Arrives on day X" to indicate when they came to the cabin. The joystick, which can register movement in the x and y axises, is used to click through this digital matrix, which lines up with the physical bar matrix of mental states such that each bar has a corresponding word associated with it. The text then displays on the LCD.</p>
<div class="image">
<img src="images/joystick_lcd.jpg" alt="LCD and joystick." width="35%" height="auto">
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<div class="content">
<section>
<h3>Cabintine</h3>
</section>
<section>
<h4>6.894 Final Project</h4>
</section>
<section>
<h4>May 2020</h4>
</section>
</div>
<div class="copyright">
Project by Katie Bacher, contact at [email protected]</a>.
</div>
</div>
</footer>
<!-- Scripts -->
<script src="templated-industrious/assets/js/jquery.min.js"></script>
<script src="templated-industrious/assets/js/browser.min.js"></script>
<script src="templated-industrious/assets/js/breakpoints.min.js"></script>
<script src="templated-industrious/assets/js/util.js"></script>
<script src="templated-industrious/assets/js/main.js"></script>
</body>
</html>