-
Notifications
You must be signed in to change notification settings - Fork 0
/
p7.html
107 lines (93 loc) · 7.25 KB
/
p7.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shayla Lee | Code 2 Portfolio</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css" />
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<!-- navigation menu -->
<div class="nav">
<h1><a href="index.html">Shayla Lee</a></h1>
<ul>
<li>Project <a href="p1.html">#1</a> Lost and Found</li>
<li>Project <a href="p2.html">#2</a> Face Generator</li>
<li>Project <a href="p3.html">#3</a> Experimental Clock</li>
<li>Project <a href="p4.html">#4</a> Exquisite Corpse</li>
<li>Project <a href="p5.html">#5</a> Optical Illusion</li>
<li>Project <a href="p6.html">#6</a> Data Portrait</li>
<li>Project <a href="p7.html">#7</a> Autobiographical Game</li>
<li>Project <a href="p8.html">#8</a> Experimental Camera</li>
<li>Project <a href="p9.html">#9</a> Consentful Interface</li>
<li>Project <a href="p10.html">#10</a> Sousveillance Tool</li>
</ul>
</div>
<!-- main content -->
<div class="content">
<h1>
The Evolution of Gregg
</h1>
<!-- 2. embed your p5 sketch -->
<div class="fullwidth">
<iframe
width="600px"
height="400px"
src="https://preview.p5js.org/lees846/embed/qP-d-eqni"></iframe>
<p>
<a href="https://editor.p5js.org/lees846/full/qP-d-eqni">Play in Full Screen!</a>
</p>
<p>
<a href="https://editor.p5js.org/lees846/sketches/qP-d-eqni">Link to Code Sketch</a>
</p>
<p>
ID: A video game start screen with a teal background and a silhouette of a floating Gregg reading "The Evolution of Gregg".
</p>
</div>
<!-- 3. write a short description to describe what the work is about -->
<h1>
Description
</h1>
<p>In this assignment, we were asked to develop and code a 3-scene video game that tells a part of our story.</p>
<h1>
Design Process
</h1>
<div>
<img src="https://cdn.glitch.me/e5a1683d-28e0-4118-b934-bc0d1e91445c%2FGregg.JPG?v=1635544618457" alt="An image of Gregg, a gray dolphin-like creature with a pronounced chin, wide nose, pouty lips, and pin hole eyes. He is sculpted out of kneaded eraser.">
<p>I decided to make my game about Gregg. Gregg is a kneaded eraser creature that I sculpted in 2018 that has become an iconic character between myself, my friends, and some of my teachers and professors. The goal for my game would be to cover the process of how I sculpted Gregg, and where he wove into my story after that (both in graduating high school and moving to New York City with me).</p>
<p>My plans for this game exceed the scope and timeframe of this project, however I still want to include my storyboard and script to demonstrate my initial plans. The game would be an interactive narrative about how Gregg was sculpted and evolved through each stage of his existence. The player will be prompted to use an art supply to sculpt Greggs face while the script plays across the bottom of each scene.</p>
</div>
<div>
<p>Here is my storyboard and script:</p>
<img src="https://cdn.glitch.me/e5a1683d-28e0-4118-b934-bc0d1e91445c%2FPage1.jpg?v=1636439224034" alt="A sketchbook page with a numbered script and some mind maps for my last idea.">
<img src="https://cdn.glitch.me/e5a1683d-28e0-4118-b934-bc0d1e91445c%2FPage2SB1.jpg?v=1635204467358" alt="A sketchbook page with the first part of the storyboard, it shows Gregg being sculpted by the player.">
<img src="https://cdn.glitch.me/e5a1683d-28e0-4118-b934-bc0d1e91445c%2FPage3SB2.jpg?v=1635204471208" alt="A sketchbook page with the second part of the storyboard, it shows Gregg doing some other things and the conclusion of the game.">
</div>
<div>
<p>The beginning is an introduction to the setting, the initial inspiration for Gregg, and the materials I had available for sculpting him. The middle of the game is about the actual sculpting part and how he evolved from an eraser blob into his final dolphin-esque form. The end scenes involve how Gregg has spent his life alongside me in my educational journey (ie. graduating high school, going to college, etc.), but this is something I simplified for my final game.</p>
<p>Here was my <a href="https://editor.p5js.org/lees846/sketches/6Iu3YmVWr ">Gray-boxing Version</a> of my game. It did not have all of the scenes drafted as I had to move along in the polishing process, but I got the main mechanics to function in this version.</p>
</div>
<div>
<p>When I moved on to polishing my game, I decided to create my game assets using colored pencil in order to refer back to the original inspiration for Gregg.</p>
<img src="https://cdn.glitch.me/e5a1683d-28e0-4118-b934-bc0d1e91445c%2FDrawnAssets.jpg?v=1636691228786" alt="Pencils, erasers, and a finger drawn realistically in color pencil with a blank background.">
</div>
<div>
<p>I also sourced my colors from this Tarot Card I made of him last year for a project:</p>
<img src="https://cdn.glitch.me/e5a1683d-28e0-4118-b934-bc0d1e91445c%2FgreggCard.jpg?v=1636691209879" alt="Gregg is floating on a teal background with a yellow halo around his head like a deity. His name appears in capital letters at the bottom of the card.">
</div>
<h1>
Reflection
</h1>
<p>This game was a journey and a half to create. I have almost 800 lines of code, definitely my longest piece, it has multiple scenes, uses objects, variables, functions, interaction, and probably everything else I’ve learned about coding in p5.js so far. This is definitely a benchmark project for me, and I’m really happy with the way the final aesthetic and functionality of it came together.</p>
<p>Originally I had planned to create a game about talking to your brain (maybe some other time), but I’m so glad that I switched my concept. This game was special to make, not only because Gregg is the best, but because I also got to integrate illustration. I have always loved drawing (I applied to almost all of my schools as an illustration major) and lately I’ve felt like I have distanced myself from it. By literally bringing myself back to the drawing board to create different assets for this game it made it that much more personal, and that much more important. I’m grateful for the opportunity to maintain my love for illustration even though I now spend most of my time coding.</p>
<h1>
Credits
</h1>
<p> I used <a href="https://svg2p5.com/">this SVG converter</a> to turn some Illustrator files into p5 vector-based code. I received a lot of help and feedback from Professor Xin Xin (see this <a href="https://editor.p5js.org/lees846/sketches/rAzbz2tAy">time stamp sketch</a>) and Professor Elizabeth Perez. I also checked in regularly with Preston Bourne, thank you all for your guidance and support :).</p>
</div>
</body>
</html>