This time’s final assignment for Blender was a mix of sadness and joy. The sadness came from taking some wrong turns during the production process and feeling dissatisfied with the final work. However, the joy was in learning about a currently popular technology and hands-on experience in creating a model. I think this experience was quite good.
Initially, the model started as a rectangle. After briefly checking the proportions of an Among Us character, I thought it best to use a rectangle for the body, then shape it with loop cuts and subdivision to give it an oval-like appearance, which I did.
But in this process, I realized that my character was crooked. After working on it for a long time, the angle wasn’t right, and the more I tried to adjust it, the more chaotic it became, so I had to start over with a new file.
After shaping the oval body, I extruded two legs from the bottom to save time. Another round of loop cuts and subdivision made it look like a pretty good and accurate model.
However, when I tried the same shortcut method for the goggles, it didn’t work well, giving a stuck-together look.
This failure made me more careful with the backpack. Although a single layer model would have sufficed, I made it with two layers for a more layered backpack feel. Finally, it was time for coloring, and then it was done.
The overall process of this final project might best be described as bittersweet. Despite a challenging journey and a less-than-ideal presentation outcome, I personally find it somewhat acceptable. Let’s start with the guidelines:
– Research online about inspiring projects that are relevant to the visuals, concepts and techniques of your project.
Initially, I hadn’t even considered using Tarot cards as my theme. My first thought was to create something akin to a fighting game experience, where players’ movements would change the model’s actions. However, I quickly realized the complexity and the technical demands of such a project. To someone more experienced in the field, this might not seem challenging, but for me, it was an entirely foreign concept. At this stage, all the materials and references I found were filled with programming aspects I couldn’t comprehend, leading to continuous setbacks.
Under the pressure of other projects and finals, I decided to take a step back to relax. Straining under high pressure wouldn’t yield any positive results for me. During this break, I revisited ‘The Binding of Isaac,’ a game I hadn’t played in a while. After struggling initially, I made a comeback and easily completed the game, thanks to strategic use of Tarot cards and a bit of luck. This experience sparked the idea of focusing on Tarot cards.
– Brainstorm a space, real or imagined, and think about the atmosphere and objects that create your imaginary environment.
If I were to focus on Tarot cards, what kind of environment should I display them in? A full Tarot deck consists of 22 Major Arcana and 56 Minor Arcana cards. Displaying all of them seemed excessive. Since the game itself used only the 22 Major Arcana, I decided to showcase these. Even so, fitting 22 cards into a space wasn’t a trivial task, and I was unsure how to present them effectively. I then recalled the ambiance of art exhibitions, where paintings are hung on walls for viewers to admire, and decided this would be a fitting approach.
– Build a webpage that allows the viewers to interact with your space, creating a unique experience for them.
– Develop a space that consists of artificial 3D objects (and sounds).
然后就是这个building process，这个过程对我来说真是充满了折磨。
The above two videos were my primary references for maneuvering the GLTF models within my 3D environment. Moving GLTF models was a novel experience for me; previously, I had only learned to load a model and a texture, but moving them was an entirely different matter. Fortunately, after much effort, I managed to do it.
Then, I embarked on an ambitious and somewhat pointless experiment.
I attempted to use Teachable Machine to read hand movements and control GLTF model movement in a WSAD-like fashion.
Unfortunately, it failed.
The failure had two parts.
First, the accuracy of Teachable Machine wasn’t sufficient to distinguish between eight models based solely on hand movements. Despite training each model with about 500 images, the accuracy remained low, often misinterpreting my upward hand movement as left, right, or even down.
Second, integrating Teachable Machine into my code didn’t work further.
For reasons I dont know, the Teachable Machine code couldn’t initiate my webcam. I thought it might be a lack of HTTP and tried self-signing certificates with a plugin, but it was to no avail. After a fruitless day of exploration and wasted effort, I decided to abandon this approach.
Reverting to the WASD control method, I began constructing my scene.
At least for now, I find this scene satisfactory. Had I considered other project ideas at this point, perhaps my presentation wouldn’t have been so awful. Storytelling doesn’t suit my presentation style; there was simply no time for me to introduce the story in the duration of the presentation, it doesn’t even fit the style.
Then came the wall building, which I decided to handle simply, using box-shaped walls. There was no need or desire for the operator to go outside.
This led to another problem.
For unknown reasons, the textures for my walls wouldn’t load properly. I initially thought it was an issue with the images, but changing them didn’t help. Eventually, I had to conclude that there might be an issue with the texture loader in my code, but I couldn’t find the source of the problem.
I ended up changing the skybox image, which mitigated the sense of dissonance.
By the way, speaking of dissonance, I really wanted to change this model. I searched for many free models online, human or animal, with walking animations, but found none. I even downloaded an Iron Man model and struggled to use the OBJ file, but the results were unsatisfactory. The model was too large, and only then did I realize the difference between models with and without walking animations.
Next were the Tarot card paintings. In an exhibition hall, there naturally would be paintings to display. I hung them on the walls and added click events, so a larger image of the Tarot card would pop up when clicked.
In hindsight, if I were to work on this assignment now, the first thing I’d do to refine the project wouldn’t be researching better and more interesting interaction methods. Instead, I would create a separate HTML for each Major Arcana card to explain its meaning, then focus on making a painting frame, and only then consider interactions.
Then, after placing these paintings on the walls, I left one wall empty intentionally. I thought a mere exhibition would be uninteresting, so I decided to indulge a personal hobby by writing a short story. This led to the project’s title: ‘Journey of the Fool.’ I wrote a story from ‘the Fool’ to ‘the World.’ It may seem boring and hadn’t been considered for its impact on the final presentation (which was indeed poor), but I enjoyed writing it. Each card had about three paragraphs of text, which was no small task. If possible, I would also appreciate some praise for this effort.
Finally, it dawned on me, or rather, I realized,
clicking on the mouse to interact with objects is not at all interactive, it’s quite boring.
This assignment is interesting and yet difficuit at the same time, luckly I was able to find lots of videos and examples online to help me.
However, because I was a bit too anxious when working on the assignment, I fail to take images of my working process ontime, in the end when I remember I should do so, it was already over half way done.
Starting with Teachable Machine’s training,
I did two sets of training, clap and snap, with 10 samples originally, considering the later-on testing failures with its inability to distinguish between snap and clap, I increased the sample pool to 25 samples, which significantly helped to distinguish between the two.
Then it is the coding, I wish to have the effect of the fireworks. After several attempts of my own, and lets just be honest, it looks ugly.I realized that it is much wiser to learn from examples online.
This youtube video is where I get most of my firework codes from: https://www.youtube.com/watch?v=CKeyIbT3vXI, the following video is the effect that I have when combine this with the clap/snap trainning
Then I realized, randomly assign two variations for training just dig a hole for myself, having both clap and snap calling for the same firework is a bit boring, and so that I add in variations in firework.
In fact, when following the coding process from the youtube video, I have mistakenly type the constructor wrong by typing this.particles = [] instead of this.fireworks, and that actually creates a bit different effect, so I expend a little more on that, resulting in the following images and video.
the following is the code:
https://glitch.com/edit/#!/dynamic-ninth-tsunami
Among these readings, one is struck by the profound implications of virtual reality (VR) on our perception of self, others, and the environment around us. Each article delves into different facets of VR, yet together they paint a complex picture of how VR reshapes our experiences and understandings.
In “The Virtual and the Real,” itsuggests that the virtual world is as real as the physical world. This idea challenges our traditional notions of reality, compelling us to reconsider our definitions of what is real. Chalmers’ argument that virtual experiences can be meaningful and authentic resonates deeply, especially in an era where digital interactions are increasingly central to our lives.
In “The Ambiguity of Self: Living in a Variable Reality”, it takes a step further by examining the fluidity of self in virtual spaces. The author’s insights into how VR allows for the exploration and expression of multiple selves are fascinating. It suggests a realm where identity is not fixed but is an evolving construct, influenced by the limitless possibilities of virtual environments.
In “When Does Virtual Embodiment Change Our Minds?”, it highlights the psychological impacts of virtual embodiment. The idea that seeing oneself in a virtual body can lead to adopting some of its features is a compelling commentary on the power of VR in shaping self-perception and behavior.
In “The Virtual Other: Empathy in the Age of Virtuality,” it offers a critical perspective on the role of empathy in virtual interactions. The author’s exploration of how VR can both enhance and diminish empathetic connections raises important questions about the nature of social interaction and emotional understanding in virtual spaces.
And Finally, in “Virtual Space”, the author adds a unique dimension to the discourse by focusing on the environmental aspect of VR. Davies’ work invites us to consider how virtual environments can alter our perception of space and our relationship with the natural world.
Together, these readings underscore the transformative potential of VR in redefining our experiences and interactions. They highlight the complexities of navigating a world where the boundaries between the virtual and the real are increasingly blurred, revealing both the opportunities and challenges of this evolving landscape.
Now when researching for the inspirations of such ideas in the virtual world, I find it quite difficult to have something that represents myself, or some that are overly profound which makes me ashamed to make a connection with.
Then I moved my vision to the anime field, I surprisingly found that there may be some that are relatable. For example, the stand in Jojo’s bizarre adventure, and the personas from the Persona series. Both introduce the idea of virtual representatives of one’s spirit or one’s will power. Perhaps I could do something relatable to that, I am not sure, but come to think of them, they do show lots of similarities to the idea of virtual self, so I will probably try to get close to those ideas.
The assignment allows me to use my midterm project, so I will do that instead of starting a new project, which is nice because just a couple days ago I was still thinking on how to improve this project and had some idea.
First start, nothing special,
I added a line of code for GUI to see the effect of controlling the Z value of the camera, and that was, okay, but it is overly simple too.
adding the damping value to have the camera move smoothly, the difference is pretty huge compared to before and afters.
Then I tried the camera auto moving for x and z, turns out that moving on Z value looks nicer to me.
After that, I decided to try out the method of using keys to control camera views, turns out okay, just the tiny flaw on misunderstanding the codes,
I was confused on why all the other keys all work well but only the down arrow key is not working, turns out, I should use BOTTOM instead.
Also, there is a strange problem that comes out of nowhere. By adding this control method, the canvas suddenly moves down to the bottom of the screen and had an awkward blank black screen left on the top, I had to scroll down to see my scene everytime.
As you can see, this is an awkward state, so I had to find out how to solve this, and luckly it is not hard
Additionally, after playing around on the new project for a bit, I noticed that after several attemps of trying out the arrow keys, the camera position will just be in a weird place and it is hard to let it return to the original origin, so I added some line of code to have a key incharge of doing that, reseting the camera position.
Noticing that there is abosolutely nothing in my GUI for my project from the start until this point, I figure it would be nice to have a button in the gui to be pressed and does the samething swould at least make the GUI function useful in my project.
Then this happened, for some reason, the strange overlay problem happened and let the reset button be blocked by the GUI’s UI, and I was confused on why this happened, after attempting to move the GUI position around I noticed that this is not a positioning issue.
In the end the problem was solved by change the position to abosolute.
This project so far has been challenging and at the same time fun, as solving each problem one by one is like solving a puzzle.
Now, lets be clear that I am not the full creator of my code, for many parts of my code, I had to find methods and tutorials online.
Here is the big credit: https://www.youtube.com/watch?v=_RASm_aOfrE
From the beginning, using the empty project template, a lot of things are already set, so the ground is already set, the only thing now is to set the environment.
I was planning my project Eye Among the Stars, and so of course, there should be an eye, and there should be stars.
With the help of Professor Moon, I have a grounding set for the eye. <iframe src=”https://drive.google.com/file/d/1m8S3qWph_Jn-ZPaxQAHIE3JTdW7LSsrY/preview” width=”640″ height=”480″ allow=”autoplay”></iframe>
However, the eye is quite simple, so for now I have substituted it with a sphere.
and there comes the first problem that I am facing and remains unsolve at this current point, and that is due to the UV properties, the image that I have found to be covered upon the sphere, for letting it to look like an eye, is not placed properly.
But at least there is something complete, the eye is not done, and quite far away from what I wanted to look like, but it looks okay.
Then there is the stars, I originally think to let it do similar job of what I had on P5js, which is to have it scale bigger and then smaller to make it looks like it is shining, but then I encountered problem, in the end it didn’t really work, so I had to comment it and think to prepare it for later.
Stars did come out okay, but there is also some thing I must complaint.
I thought my star image was not transparent, and I spend a lot of time doing photoshop to create an transparent background image for it, but, in the end I found out, that it didn’t help.
In the end it would still have an oddly looking white background, perhaps I should use an 3D model for stars?
Similar things for the planet idea that I had, but there is the problem of setting it up on glitch, and I been looking for models, methods to work on glitch, I had spend a lot of time looking for it, and now that I think about it, why? WHY DIDN’T I JUST MOVE MY CODE AND WORK ON IT LOCALLY?????
This is the reason why the project didn’t look much different from the presentation, I have been doing worthless efforts, and problems that could be easily solved if turned mindsets around.
I have realized that I forgot to submit the part of the project that is due on the 27th. Although this is obviously unacceptable, I think I could be slightly excused since the project news is posted on the 26th and the due date is on the 27th.
Although the project is not at all difficult or worth mentioning in experts’ eyes, to me it is something that is close to be finished, so please bare with me if I explain something that is completely not worth mentioning.
I have found some quite interesting observations from the game Tower of Babel but in the end, I did not find a way to blend this into a project, so in the end I decided to take on the more approachable method, which is to rotationally view the cube figure.
I understand that this may not be creative at all, but I am not very creative to begin with, since the project wants the student to demonstrate an understanding on OOP and three.js, it may be better for me to submit a boring but at least somewhat completed project than a crazy, wildly interesting, but low on completeness project.
Firstly with a single block, testing the basics while adding the rotational camera, it took me quite a while to figure everything and debug here and there, good thing I could refer back to the assignments and in class practices for help, but in the end I guess I should be glad at most of this is not an quiz or test with time limit.
Now that I think about it, I have possibly understood the requirement of class and particle wrong.
After completing this I think I have leaped over a giant gap, because I had some trouble that stuck me for quite a while when doing multiple cubes, for some reason the cube would not render if I decided to have multiple boxes.
Then it adds light and shadow, and also the spinning effect, here is the final product.
I could not give credit/reference to this part of the code that uses a variable to call for lerp to change the cube’s motion, I have seen this somewhere on the web but I could not recall it on the history, it is the part in charge of the spinning portion that is likely to be considered as not written by myself.
To be honest, I feel lost during this assignment.
With pressure on both the time limit, which the assignment comes in Mondady, and has to be turn in by Wednesday, and also the complete unfamilarity in Three.js.
This assignment, I do have to admit, is nothing but a merely repica of what we have did in the class.
I feel like I did not get the gest of working with three.js, and in the end I had to look back to the code I copied during the lecture when Professor Moon is introducing us the functions of Three.js.
First with injecting Three.js to vscode.
I did not use the way that Professor shown us during the lecture as I worked this assignemtn on my desktop, which did not download the zipfile for Three.js, in the end I decided to do this using online libary access.
There is nothing new in these codes, as they have been taught during the lecture, and it is the basic elements in need for setting up the scene, camera, and renderer.
Then there is the code for creating the cube mesh, as required it needs a geometry variable and material which is the color.
At this point there is nothing activated, as on the html there is nothing but only empty screen.
However, but just adding the magic line of “Animate()”, the code initiated.
Yet there is no code moving the cube, and I am not sure what to do at all at this point, in the end I decided to just do simple camera rotations.
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
That is all.
I started off thinking it would be nice to create a scene of windy day, with leaves falling down. By setting the variables and creating the list I begun the assignment.
I created the class in another js file. I originally think that the class should probably have some variables in the constructor, but I then realized that I don’t need any, speacially when I want to have random variations in its speed/size, then there is the classic functions of update/display.
Moving on to the main sketch, by calling the functions I encounter error. I understand that this may look like I did not call the class’s js file, but I did have it set in the index.html file, so that was not the case.
Then I came to realized after some reasearch, to call functions in objects in a list, there requires a specific way of writing the code, which is like this.
At this point I just use ellipse as a substitute for leaf.
I quickly realized that the ellipse flee out of the screen in a blink of the eye, and it leaves an empty screen for the rest of the time, this is not acceptable, so I decided to add another function call checkEdges, which let the leaf’s position be reseted in a random place on the x axis, and some pixels above the canvas which cannot be seen on the y axis.
This did not come to work at first. The leaf never re-enter the canvas. Then I realizedd that this is the problem of speed. The leaf did have its position be reseted above the canvas, but it never fall down, so I added a line to mult(0) in the update function.
Then I realized, I didn’t code in the required ES6 format, so I changed some of my codes.
In the end, I find a transparent image of leaf and import it on p5 editor, here is the end product.
For this assignment I would say that it was really a challenge.
To be fairly honest I have been using P5 for many classes in IMA, but such usage rarely connects with vector and any higher level functions, so this is new stuff for me.
This assignment starts out in a struggle.
I originally thinks to create something completely out of nowhere in my brain, somehow worked, somehow not, and in the end I decided to revamp it, and at that moment I came to realized, I been coding on guest accont, and all the codes I have done had not been saved.
Thus there is no screenshot for that, my apologies.
For the second attempt, this time I stared with looking at videos from references. It went ok, here is the first image.
These are minor errors that later came to the fix, but there is one that I found most interesting, and that is when I had the two parts of the code working but not as intended. The ellpise are working properly but the line does know follow my mose cursor, it seems really dull to the mouse movements, are not as reactive.
I later realized that it was because I translate the origin to the center of the canvas, so that the line reads my mouse cursor and movements in a awkward manner.
https://drive.google.com/file/d/1qM11S8yQS4ChGWklVrbQgZNCiZntFoiw/view?usp=sharing
With that being fixed I later added some more codes to fit the assignemnt requirements, but some I just don’t find a chance to add in, in the end the code results like this.
https://drive.google.com/file/d/1YQ0uFbrursmF59d9vEDHudFj-fOu371k/view?usp=sharing
Here is the code on P5.
https://editor.p5js.org/hz2504/sketches/T6nPhbacr