-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (116 loc) · 6.73 KB
/
index.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
131
132
133
134
135
136
<!-- Content -->
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./index.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<title>ReViz 3D</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-92670574-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-92670574-2');
</script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<!-- Content -->
<div class="before-video">
<div class="top-menu">
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/lucascassiano" data-size="large" data-show-count="true" aria-label="Follow @lucascassiano on GitHub">Follow @lucascassiano</a>
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/lucascassiano/reViz3d" data-icon="octicon-star" data-size="large" data-show-count="true"
aria-label="Star lucascassiano/reViz3d on GitHub">Star</a>
</div>
<div class="title">
<img src="./reviz3d.svg" />
<p> Prototype 3D Data Visualizations </p>
</div>
<div class="download-label">Download App </div>
<div class="download-container">
<div class="download">
<a href="https://github.com/lucascassiano/reViz3d/raw/master/releases/latest/reViz3d-mac.zip">
<i class="fab fa-apple big"></i>
</a>
<p>OSX</p>
</div>
<div class="download">
<a href="https://github.com/lucascassiano/reViz3d/raw/master/releases/latest/reViz3d-win.zip">
<i class="fab fa-windows big"></i>
</a>
<p>Windows</p>
</div>
</div>
<div class="get-started">
<a href="docs.html">Get Started</a>
</div>
<div class="see-github">
<a href="https://github.com/lucascassiano/reViz3d/">see project's github
<i class="fas fa-code-branch"></i>
</a>
</div>
<!-- <div class="download"><a href="https://github.com/lucascassiano/reViz3d/raw/master/releases/latest/reViz3d-linux.zip"><i class="fab fa-linux"></i> Download Linux </a></div>
<div class="download"></div>
<div class="download"><a href="https://github.com/lucascassiano/reViz3d/wiki">Wiki page</a></div>
--></div>
<div class="video-home-bg">
<video src="./home.mov" autoplay loop class="video-home" muted/>
</div>
<div class="after-video">
<div class="grid-content">
<img id="infographic0" src="./infographic_1.png" />
<div id="info0">
<h2>System Design</h2>
<p>
<strong> reViz3D</strong> combines real-time code updates, local and remote assets and data streams to create
real-time 3D data visualizations. These visualizations can be exported as React.js components. Created
in late 2017, this tool enables researchers/developers/data scientists to quickly create, combine or
share hardware prototype's visualizations. reViz3D main focus is on data that is better visualized at
a spatial context. This software has been developed and supported by MIT Media Lab Researchers, under
MIT Open Source License.
</p>
</div>
<div id="info1">
<h2>Motivation</h2>
<p>
When an artist finishes painting a canvas, often they look to it not only to admire their creation but to understand how
one can learn from each brush stroke, how the mixture of ink can reveal better tones, and improve the
artist creation methods and skills for the next piece. Prototyping and understanding the outcome data
of a prototype development is a process that as been done for centuries, Michelangelo used physical prototypes∫
to communicate construction details
<a href="http://www.sciencedirect.com/science/article/pii/S0142694X05000864">[1]</a> Henry Ford explored at least nineteen models (some of which were prototypes) before finalizing
the revolutionary model T design
<a href="https://www.amazon.com/Machine-That-Changed-World-Revolutionizing-ebook/dp/B001D1SRRS">[2]</a>.
<br/><br/>The current technological scenario made rapid hardware prototyping more accessible than ever before
<a href="https://www.cambridge.org/core/journals/design-science/article/design-prototyping-methods-state-of-the-art-in-strategies-techniques-and-guidelines/560B306A5E799AEE54D30E0D2C1B7063
">[3]</a>, this also reflects in the developer's communities, with movements like the maker movement, which
is an umbrella term encompassing the convergence of designer, artisan and hacker cultures
<a href="http://www.juniper-lang.org/publications/juniper_farm_preprint.pdf">[4]</a>. But what if designers, researchers, and engineers (i.e., makers) could develop customized visualizations
to understand the behavior of their prototypes at the same rate they create it. Moreover, if those visualizations
can be easily shared within the developers team and modular enough to be reused and incremented over
time, thus changing how hardware design decisions are made.
</p>
<img id="infographic0" src="./tarsila_image.png" />
<p>Tarsila do Amaral - exposition at MoMA | 2018</p>
</div>
</div>
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal();
sr.reveal('.download', { duration: 2000 });
sr.reveal('.get-started', { duration: 2000 });
sr.reveal('#info0', { duration: 2000 }, 50);
sr.reveal('#infographic0', { duration: 2000 }, 50);
sr.reveal('#info1', { duration: 2000 }, 50);
//window.sr = ScrollReveal({ reset: true });
// sr.reveal('.foo', { duration: 2000 });
</script>
</body>
</html>