-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
190 lines (149 loc) · 6.49 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
<title>GENERATIVE TAROT</title>
</head>
<body onload="loader();">
<div id="fake-body">
<center>
<h1 id="h1-big">Generative Tarot</h1>
<div id="top-buttons">
<a id="scrollLink">About</a><a href="">Pull Again</a>
</div>
<img id="loader" src="assets/tarot-v2-sm.gif">
</center>
<div id="pulled-cards">
<div class="tarot-container">
<div class="iframe-container">
<iframe id="one" src="" scrolling="no">
</iframe>
</div>
<div class="info">
<p class="interaction">
<span id="interaction-1"></span>
<span class='tooltiptext' id="interactionText-1"></span>
</p>
<a class="title-link" id="title-1" target="_blank">TEST</a>
<br>
<a class="code-link" id="code-1" target="_blank">code</a>
</div>
</div>
<div class="tarot-container">
<div class="iframe-container">
<iframe id="two" src="" scrolling="no">
</iframe>
</div>
<div class="info">
<p class="interaction">
<span id="interaction-2"></span>
<span class='tooltiptext' id="interactionText-2"></span>
</p>
<a class="title-link" id="title-2" target="_blank">TEST</a>
<br>
<a class="code-link" id="code-2" target="_blank">code</a>
</div>
</div>
<div class="tarot-container">
<div class="iframe-container">
<iframe id="three" src="" scrolling="no">
</iframe>
</div>
<div class="info">
<p class="interaction">
<span id="interaction-3"></span>
<span class='tooltiptext' id="interactionText-3"></span>
</p>
<a class="title-link" id="title-3" target="_blank">TEST</a>
<br>
<a class="code-link" id="code-3" target="_blank">code</a>
</div>
</div>
</div>
<!-- </div> -->
<div id="bottom-container">
<div id="info-about" class="info-container">
<div class="info-title">About</div>
<div class="info-content">
<div class="info-actualtext">
This is an interactive three-card spread that pulls randomly from the 22 Major Arcana cards.
<br><br>
<b>Generative Tarot</b> was created using <a href="https://p5js.org/" target="_blank">p5.js</a> by the class of Design 2B at Rutgers Mason Gross School of the Arts.
<br><br>Taught by <a href="https://melanie-hoff.com/" target="_blank">Melanie Hoff</a>.
</div>
</div>
</div>
<div id="info-exercise" class="info-container">
<div class="info-title">Exercise</div>
<div class="info-content">
<div class="info-note">Rutgers Mason Gross School of the Arts<br> Design 2B: Experimental Computation<br> Spring 2019
</div>
<div class="info-actualtext">
<h2 class="bottom-header-x">Overview</h2>
<p class="p-x">Tarot is a divination system that uses a set of cards to gain insight and guidance over varied aspects of life.<br> Together we will create an interactive tarot deck of the 22 Major Arcana cards using <a href="https://p5js.org/" target="_blank">p5.js</a> that will be part of an online reader.
</p>
<h2 class="bottom-header-x">Instructions</h2>
<p class="p-x">
Select one of the <a href="https://en.wikipedia.org/wiki/Major_Arcana" target="_blank">22 Major Arcana cards</a> to redesign
<br><br> Create a Tarot Card generator that generates a new result every time you run it, or is constantly in flux
<br><br> Consider the meaning of your Tarot card and how it translates to the design choices of your generator. What kind of parameters will be in place to define the results? How much variation are you hoping to achieve? How will the generator
change? Will your card be responsive to time or generate a new result every time you refresh the page? Maybe your card will shift with the movement of the mouse, by clicking, or pressing keys.
<h4>Card Generator</h4>
<ul>
<li>
Make using the <a href="https://editor.p5js.org/" target="_blank">p5.js online editor</a>
</li>
<li>
Include the name of your card in your design
</li>
<li>
Canvas size of 800 x 1245
</li>
</ul>
</p>
<h4>Tarot Website</h4> A simple website to to showcase your card design that includes:
<ul>
<li>
A description of what your card signifies and how your design relates to it's meaning.
</li>
<li>
Displays 6 screenshots of your generated tarot card in 6 different variations of the design.
</li>
<li>
A link to your p5 generator code on the online p5.js editor
</li>
</ul>
<br>
<!-- <div class="students-resources"> -->
<h2 class="bottom-header-x">Resources</h2>
<h4>Tools</h4>
<a href="https://github.com/melaniehoff/generative-tarot" target="_blank">Code for the online tarot reader</a> on Github
<br>
<a href="https://www.are.na/art-deli-corp/tarot-design" target="_blank">Are.na Channel</a> of Tarot design research
<br>
<h4>Reading</h4>
<a href="http://word-game-workshop.decontextualize.com/tarot" target="_blank"><i>Tarot as Collaborative Storytelling</i></a> by Allison Parrish <i>(Recommended!)</i>
<br>
<a href="https://marykgreer.com/2008/04/01/origins-of-divination-with-playing-cards/" target="_blank"><i>Origins of Cartomancy</i></a> by Mary K. Greer<br>
<a href="https://marykgreer.com/2008/10/23/three-card-spreads-the-essentials/" target="_blank"><i>Three-Card Spreads: The Essentials</i></a> by Mary K. Greer<br>
</div>
</div>
</div>
<div id="info-ty" class="info-container">
<div class="info-content">
<div class="info-actualtext">
<i>Special thanks to <a href="https://fsfeng.github.io/academic/" target="_blank">Fiona Feng</a>, <a href="https://www.decontextualize.com/" target="_blank">Allison Parrish</a>, <a href="http://dantaeyoung.com/" target="_blank">Dan Taeyoung</a>, <a href="http://hxrts.com/" target="_blank">Sam Hart</a></i>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.0.min.js'></script>
<script src="main.js"></script>
</div>
</body>
</html>