-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrobot_NuNuAndIt‘sExquisiteCorpse.html
81 lines (75 loc) · 4.31 KB
/
robot_NuNuAndIt‘sExquisiteCorpse.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Matthew Bai | Portfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="menu-icon" onclick="toggleSidebar()">
<div></div>
<div></div>
<div></div>
</div>
<h1>Matthew Bai's Portfolio</h1>
</header>
</header>
<!-- 侧边栏菜单开始 -->
<nav class="sidebar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aLittleBlueFlower.html">A little blue flower</a></li>
<li><a href="findingALostTeddyBear.html">Finding a lost Teddy Bear</a></li>
<li><a href="oneMinuteWorld.html">One Minute World</a></li>
<li><a href="variableSerialsOne.html">Variable Serials One</a></li>
<li><a href="variableSerialsTwo.html">Variable Serials Two</a></li>
<li><a href="variableSerialsThree.html">Variable Serials Three</a></li>
<li><a href="robot_NuNuAndIt‘sExquisiteCorpse.html">Robot：NuNu &&It‘s Exquisite Corpse</a></li>
<li><a href="opticalIllusions.html">Optical Illusions</a></li>
<li><a href="dataPortrait.html">Data Portrait</a></li>
<li><a href="jumpingEyes.html">Jumping Eyes</a></li>
<!-- 更多项目链接 -->
</ul>
</nav>
<!-- 侧边栏菜单结束 -->
<div class="container">
<!-- Project iframe -->
<h2>Robot：NuNu &&It‘s Exquisite Corpse</h2>
<div style="overflow: hidden; width: 400px; height: 650px; resize: none;">
<iframe src="https://editor.p5js.org/ybai34/full/GNMKj2Z8z" style="border: none; width: 100%; height: 100%;"></iframe>
</div>
<div style="overflow: hidden; width: 400px; height: 650px; resize: none;">
<iframe src="https://editor.p5js.org/ybai34/full/YCx9FyHyz" style="border: none; width: 100%; height: 100%;"></iframe>
</div>
<article>
<h2>Description</h2>
<p>
"Robot：NuNu &&It‘s Exquisite Corpse" is a robot illustration created by three artists. In this work, each artist is responsible for a different part of the robot: Matthew is responsible for the design of the head, Yu is responsible for the body, and Mallory is responsible for the legs. The robot's head is composed of delicate lines and geometric shapes paired with expressive colors. Yu's body adopts more abstract and smooth lines, adding to the sense of movement. Mallory's leg design emphasizes mechanical and dynamic characteristics. Overall, this work blends different styles of artistic elements together to create a visual experience that is both witty and layered.
</p>
<h2>Reflection</h2>
<p>
This collaborative project demonstrates the importance of teamwork in artistic creation. Each artist brings a unique style and technique, incorporating their own creative and visual concepts into the corresponding parts of the robot. This cross-disciplinary collaboration highlights the combined effect of collaboration, how different artistic styles and technical means can work together to create a surprising and engaging work. In addition, interactive elements within the project, such as color changes, increase the participatory nature of the work, allowing viewers to interact with the work, thereby enhancing the overall experience.
</p>
</article>
<!-- Portfolio content -->
</div>
<footer>
<p>Matthew's artwork takes a critical view of social, political, and cultural issues. Matthew references public issues, exploring the contradictions between humanity, nature, and science.</p>
<p>
[email protected]© 2023 Matthew Bai</p>
</footer>
<script>
// JavaScript for the sidebar
const sidebar = document.querySelector('.sidebar');
document.addEventListener('mousemove', (e) => {
if (e.pageX < 250) { // If mouse is within 50px of the left edge
sidebar.style.left = '0';
} else {
sidebar.style.left = '-250px'; // Adjust as per sidebar width
}
});
</script>
</body>
</html>