-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
155 lines (147 loc) · 6.01 KB
/
test.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!--Update with your name-->
<title>Serena's Homepage</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<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=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<script src="background.js"></script>
<div>
<!--Update with your name-->
<h1>Serena Li</h1>
<p>Serena (Latin): Serene, but a little mischievous.</p>
<p>Loves analysing art and interpersonal relationships</p>
</div>
<div>
<h1>Presentation</h1>
<a
href="https://docs.google.com/presentation/d/1bcBCkPiQ7dzV0K62NEQNSOcF94gO0IXLlSh6NwTCZms/edit?usp=sharing"
>Pecha Kucha: Genuary</a
>
</div>
<div>
<h1>Projects</h1>
<h2>Project 1: Interactive Audio and Visual with p5.js</h2>
<a href="https://editor.p5js.org/Serena20003/full/gnxRiyB3B"
>Valentines</a
>
<p>
Express your feelings by saying "I love you" to the blue cold heart and
see fireworks go off! You can also set off more fireworks by clicking
your mouse when the heart goes BOOM BOOM! However, if you say "Sorry",
then the heart will become blue and cold again
</p>
<h2>Project 2: HyperNarrative</h2>
<a
href="https://www.figma.com/file/IWd8us3ojclDGKBFe94q7i/iml300-project-2?type=design&node-id=103%3A236&mode=design&t=01cGXKFF3jwEgD7f-1"
>Figma Concept for Fight Simulator</a
><br />
<a href="https://fight-simulator.glitch.me/">Fight Simulator</a>
<p>
<em>
I want to use this project to advocate for people to be more patient
with their family members, calm down and think before responding, and
love each other.
</em>
</p>
<p>
I am always intrigued by games that mislead the users into making
choices that might lead to a not-so-great ending (false ending). With
this idea and the want to do something related to family relations and
tensions, I wanted to create something that provokes reflection for the
users. The game starts with a tutorial that encourages fight and
portrays the family as a fighting arena. The user would be misled into
wanting to win the game by saying negative things towards the opponent.
They win the argument, but they will soon realize that they lost the
game because they hurt the family member. They will have to realize that
they need to wait for the timer to run out and a hidden option appears.
The option is a calmer response (physically not shaking when hovered).
That will unlock the good ending.
</p>
<h2>Project 3: Networked Care</h2>
<a href="https://www.figma.com/file/IWd8us3ojclDGKBFe94q7i/projects?type=design&node-id=278%3A79&mode=design&t=IWWZP0uvZCrzf8BD-1">Figma Concept for CyberLand</a>
<br />
<a href="https://cyberland.glitch.me">CyberLand</a>
<p>
This project is inspired by the booming of short form videos especially during Covid. The attntion span reduces significantly as the generations progress in society. As someone who is deeply affected by this issue, I really wanted to make a project that mimics the experience and make the audience realize how much time they ight be wasting on the day-to-day scrolling. I hope people will do more things out of the phone and truly experience life.
</p>
</div>
<div>
<h1>Exercises</h1>
<ul>
<li>
<a href="https://editor.p5js.org/Serena20003/sketches/Xr5K1kZVD"
>Human?</a
>
</li>
<iframe
src="https://editor.p5js.org/Serena20003/full/Xr5K1kZVD"
style="width: 400px; height: 450px"
></iframe>
<li>
<a href="https://editor.p5js.org/Serena20003/sketches/nj2OswhOx"
>Grow a tree</a
>
</li>
<iframe
src="https://editor.p5js.org/Serena20003/full/nj2OswhOx"
style="width: 500px; height: 450px"
></iframe>
<li>
<a href="https://editor.p5js.org/Serena20003/sketches/hIsrF7ybL"
>Stamp (msfq SPACEBAR)</a
>
</li>
<iframe
src="https://editor.p5js.org/Serena20003/full/hIsrF7ybL"
style="width: 600px; height: 650px"
></iframe>
<li>
<a href="https://editor.p5js.org/Serena20003/sketches/lWzM6gYiA"
>Static Playlit Cover</a
>
</li>
<iframe
src="https://editor.p5js.org/Serena20003/full/lWzM6gYiA"
style="width: 400px; height: 450px"
></iframe>
<li>
<a href="https://editor.p5js.org/Serena20003/sketches/T888ExOnA"
>Music Video for <em>The Night Is Faint</em></a
>
</li>
<iframe
src="https://editor.p5js.org/Serena20003/full/T888ExOnA"
style="width: 400px; height: 450px"
></iframe>
<li>
<a href="https://everythingevery.glitch.me/"
>Everything Everywhere All At Once</a
>
</li>
<iframe
src="https://everythingevery.glitch.me/"
style="width: 800px; height: 850px"
></iframe>
<li>
<a href="https://editor.p5js.org/Serena20003/sketches/ifNaP_T_A"
>Poem: When Love Arrives</a
>
</li>
<iframe
src="https://editor.p5js.org/Serena20003/full/ifNaP_T_A"
style="width: 800px; height: 850px"
></iframe>
</ul>
</div>
<footer>Spring, 2024.</footer>
</body>
</html>