-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex的副本.html
151 lines (122 loc) · 7.57 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Matthew Bai | Critical Computation Portfolio</title>
<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=Roboto:ital,wght@0,100;1,100&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artist Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Matthew Bai</h1>
<p>Interactive artist@Pratt Institute</p>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<div class="container" id="about">
<h2>About Me</h2>
<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>
</div>
<div class="container" id="portfolio">
<h2>P5.js Portfolio</h2>
<div class="portfolio-item">
<h1>
<div class="fullwidth">
<!-- below width and height refers to the dimensions of your sketch-->
<iframe allow="camera"
style="width: 780px; height: 300px; overflow: hidden;"//设置
scrolling="no"
frameborder="0" src="https://editor.p5js.org/ybai34/full/wcLfqIIYG"></iframe>
</h1>
<p> A little blue flower</p>
<h2>
Description
</h2>
<p>
This is a small project about converting natural language into computer language. The natural language description of My partner Gracie is as follows. The image I converted into p5js is as shown.</p>
<p>1) create a 1x2 vertical yellow rectangle</p>
<p>2) create a 1x3 vertical blue rectangle above and below this</p>
<p>3) create 3 x 2 horizontal blue rectangle on the left and right of the yellow rectangle</p>
<p>4) create 2 x 2 squares in a lighter blue in between the horizontal and vertical rectangles</p>
<p>5) create a 1 x 7 horizontal rectangle below the shape in green
</p>
<h2>
Reflection
</h2>
<p>
Code is a kind of transition from languages to language. As I said in the first class: When I was young, my friend and I create a kind of "new" sign language. The aim of the this language is to decrease the time spent on our games. However, for people didn't know it, they need time to learn and use it. Code, from my prospective, is a specific and higher efficiency language on a specific flied.The advantage of natural language is that it is concise and easy to understand. But it requires a lot of acquired training to understand. For example, to draw a square, you must first learn what a square is. The language of p5js is a traditional computer language. It has its own set of rules. For example, to draw a square, you need to know its coordinates, length and width, and display it using the rect() method.
</p>
</div>
<div class="portfolio-item">
<iframe allow="camera"
style="width: 600px; height: 650px; overflow: hidden; align-items: center;"//设置
scrolling="no"
frameborder="0" src="https://editor.p5js.org/ybai34/full/8Fz7ykJlZ"></iframe>
<p> Finding a lost Teddy Bear</p>
<h2>
Description
</h2>
<p>
This is a small project about converting natural language into computer language. The natural language description of My partner Nicole is as follows.In this project Nicole describes a teddy bear she lost. I was tasked with redrawing this lost teddy bear based on his natural language description (images not allowed). The image I converted into p5js is as shown.</p>
<p>A grey teddy bear with a round head, two ears, and a pair of button eyes, wears a slight smile and has two arms, two legs, no fingers or toes, and a round torso. The bear is also wearing a white tshirt with the words "it's a girl!" written in pink. Under the text on the tshirt is a picture of a classic yellow teddy bear.
</p>
<h2>
Reflection
</h2>
<p>
This was a very interesting project after drawing the teddy bear based on Nicole's description. I found this project to be largely inconsistent with missing items due to the lack of real-time feedback and communication. I think the process is a bit like the current AI that has not been trained with the LLam language model. If you ask it a question, it will answer the question based on its own imagination LOL.
</p>
</div>
<div class="portfolio-item">
<iframe allow="camera"
style="width: 500px; height: 500px; overflow: hidden; align-items: center;"//设置
scrolling="no"
frameborder="0" src="https://editor.p5js.org/ybai34/full/J37cwiOi-"></iframe>
<p> Variable Serials One</p>
</div>
<div class="portfolio-item">
<iframe allow="camera"
style="width: 500px; height: 500px; overflow: hidden; align-items: center;"//设置
scrolling="no"
frameborder="0" src="https://editor.p5js.org/ybai34/full/yfXlCCBYS"></iframe>
<p> Variable Serials Two</p>
</div><div class="portfolio-item">
<iframe allow="camera"
style="width: 780px; height: 500px; overflow: hidden; align-items: center;"//设置
scrolling="no"
frameborder="0" src="https://editor.p5js.org/ybai34/full/VBIYfHamN"></iframe>
<p> Variable Serials Three</p>
</div>
<div class="portfolio-item">
<iframe allow="camera"
style="width: 600px; height: 650px; overflow: hidden; align-items: center;"//设置
scrolling="no"
frameborder="0" src="https://editor.p5js.org/ybai34/full/b4_o-fPyS"></iframe>
<p> One Minute World</p>
<h2>
Description
</h2>
<p>
The passage of time cannot be touched. For some people, it is not easy to detect. The purpose of a clock is to visually display the passage of time. I have thought a lot about the ways to display time, including the conversion of the concept of time, such as time is money; including the conversion of time-space (Light cone), such as: spacetime diagram; last bu not the least, the ancient people's view of the length of time Different segmentations, such as timing via water droplets. What these time concepts have in common after being converted by p5js is that they all require a for loop to loop, so setting the unit of time is particularly important. So, how are time units divided? One second, one minute, one hour, or one day? Or some other way of partitioning?</p>
<p>This time I chose an approach similar to "<a href="https://p5js.org/examples/simulate-game-of-life.html">game of life</a>" and randomly created a world that lasted only one minute. And can save screenshots of each world.
</p>
</div>
<div class="container" id="contact">
<h2>Contact</h2>
<p>[email protected]</p>
</div>
<footer>
<p>© 2023 Matthew Bai</p>
</footer>
</body>
</html>