ICM-Lutan Jiang
WEEK1
I first brought my photo into Photoshop so I could use the Mesh tool to get the coordinates of any point.
My main challenge was choosing which function to use to draw my image.
I initially used Bezier curves, but I found their two control points too abstract and difficult to manipulate.
I then tried curves, but again, I struggled to accurately control the curve's shape using the control points.
Finally, I settled on the beginShape and endShape functions, which allow me to draw irregular shapes using precise point coordinates, which perfectly met my needs.
P5JS LINK：https://editor.p5js.org/lj2675/sketches/Nar0prKQb
WEEK2
https://editor.p5js.org/lj2675/sketches/juyNCm4h4
The two opposites I chose were empty and full.
What I wanted to achieve was that as I moved the mouse, the pattern would disappear within the circular area around the cursor.
First, I used a grid and a for loop to draw the pattern across the entire screen. Then, to determine whether a portion of the pattern was within the circle around the mouse cursor, I used the Pythagorean theorem to calculate the distance between the points (x, y) and (mouseX, mouseY) and used an if statement. If the distance was less than the set radius, that portion of the pattern disappeared; otherwise, it remained visible.
Source: https://www.pattvira.com/intro-to-creative-coding/conditionals-if-else-if-else
I also learned about for loops and grid creation by watching other videos.
I really wanted to achieve a gradual fading effect, so I declared three variables: fadespeed, recoverspeed, and alpha (for transparency). However, I wasn't able to achieve this.
WEEK3
I built the code for different pages using functions and controlled the page transitions using a variable representing the current state.
This way, I only need to control the value of the state variable to switch pages. This is a method I learned through self-research.
I separated the choices into two colors: yellow and blue. When you click, you'll see that your choice is the color itself. After selecting both left and right, if you return to the home page, a sentence will appear, which is exactly what I wanted to express.
There is no right or wrong in choices; choose according to your preferences and follow your heart.
WEEK4
My homework assignment was similar to the requirements for Extra 2 in the worksheet, so I submitted it directly.
Something went wrong in the determination of the column where i=0, making the pattern not a perfect grid. I spent over an hour troubleshooting and even asked AI for help, but it couldn't help me. I couldn't figure out what the problem was.
I originally wanted to create a Fibonacci curve, a ball moving along it, but after two or three hours of trying, I couldn't get it right. There were too many variables and conditions involved. For one thing, there were four possible directions of motion. Another was that I didn't know how to determine if the ball had reached a turning point, which involved calculating distance and comparing it to its initial position... There were simply too many things I didn't know how to do. There were some imperfect methods, like using specific numerical values to determine the ball's motion state, but those were too imperfect and I didn't want to do that.
To be honest, I didn't do well on my homework this week. I feel a little frustrated and sorry.
WEEK 5
Keep clicking the mouse, and it will rain, and the water level will gradually rise.
During the creation process, I first used a class to create the basic properties of the ball, along with several functions, such as free-fall acceleration and movement, and most importantly, the display. Then, I linked the creation of the ball to the mouse click action and placed all the generated balls in an array for easy retrieval.
Finally, I iterated through the array, assigning each ball its own function. My thinking gradually became clearer as I progressed.
WEEK6 & MIDTERM
This exercise was incredibly rewarding. It was the first time I'd dedicated myself so deeply to an assignment, and I completed it in nine straight hours. I used AI to assist me with this assignment, but I didn't let it write the code for me. Instead, I encountered several bugs that I couldn't figure out after troubleshooting for a long time. So, I had to ask the AI for help. I let it point out the issues but didn't fix them. Instead, I figured out the causes and fixed them myself. These bugs were the biggest learning points from this exercise, and I'll discuss them later.
This is a minimalist version of a flight shooting game. After learning about classes and collision detection, the idea suddenly struck me: "Could I simulate a shooting game?" I was so excited.
The first and most enjoyable thing I learned was that I gained a clear understanding of the code writing process. First, I listed the components my code needed to generate and the logical relationships between them—a navigation diagram. Then, I gradually filled in the entire framework, following the order of creation, movement, and interaction. This allowed me to run the code in real time to observe the effects and make changes. I also became much more proficient in using classes. Basically, I assigned each class a function to generate it.
I'm particularly pleased with the bullet trails and splash effects I created upon impact.
The first major bug I encountered was an array out-of-bounds issue. Because the game involves despawning and spawning bullets and enemies, the length of the arrays storing them constantly fluctuates, sometimes even reaching zero. This caused significant problems when checking for collisions, as I had to use two nested for loops to iterate over each element in both arrays and perform calculations. As a result, console often complained about receiving an undefined value. This was usually because the bullet arrays were already zero, but the loops and calculations were still continuing. I used numerous if statements to check the array lengths in real time to prevent out-of-bounds effects.
The second bug that plagued me for a long time was creating the splash effects on impact. I placed the effect generation check and the call to the generation function within the same if statement within the collision detection function. This caused the check and generation to repeat every frame, resulting in a flickering display instead of a correct display.
I have many more ideas for future improvements. Starting with classes and collision detection, I think I could add some item classes that would have special effects when picked up.
WEEK7
For this assignment, I optimized my midterm work, mainly improving the gaming experience and enhancing the sense of attack and gaming atmosphere.
I first added a collision jitter effect to the game.I first declared the dither intensity, dither count and dither time at the very beginning.
Through calculation, the jitter amplitude decreases as the number of remaining jitters decreases. Finally, the translate function is used to offset the entire coordinate system to create the jitter effect.
Finally, the jitter is triggered when the bullet and the enemy collide (the Boolean value becomes positive).
I modified some of the collision detection logic of the original code. The previous code could only detect the collision between the bullet on the right and the enemy, but could not detect whether the bullet on the left hit the enemy.
At the same time, I increased the size of the collision particle effect to make the impact more obvious.
I also used the location.reload function on the final victory and defeat pages so that players can directly click the mouse to restart the game without having to rerun the program.
I also added sound effects for bullet firing, explosions upon impact, and victory and defeat.
I had also carefully selected a background music track, but I learned that web pages might have limited audio processing capabilities. In practice, all sounds would be lost and the program would freeze, so I had to abandon the background music.
WEEK8
When writing this function, I kept reinforcing my awareness of "object". I kept forgetting the fixed combination of "variable name + '.' + function", which caused the console to always report an error that an empty value or undefined was passed (because I always forgot to add the variable name).
The first part of the capture function is straightforward; it simply segments the captured image according to the number of rows and columns I pre-defined, as well as the dimensions of each grid cell. Finally, each segment is pushed into an array.
The first problem was that `reset[index]` was consistently reported as undefined. It took me a long time to figure out that my previous code was `let index = random(0, reset.length);`, where `random` is a floating-point number, while `index` can only accept integers, leading to the undefined value. Therefore, I used `Math.floor` to force rounding.
for(let i=0;i<reset.length;i++){
let index= Math.floor(random(0, reset.length))
image(reset[index],i*gridwidth,y*gridheight,gridwidth,gridheight)
reset.splice(index,1);
if(i!=0 && i%column==0){
y++;
}
}
The second question is, how to add a line break.This is my initial line break code. I don't know why, but it only draws on the first line and doesn't wrap to the next line.
So I continued to use the feature of "Math.floor" that only takes the integer part, which is really useful.
That said, I still think the if statement's logic is correct. I suspect the problem lies in "reset.splice(index,1);", where an array out-of-bounds error is causing the subsequent graphs to not be drawn correctly. This is the third issue I wanted to address.
So I continued to use the feature of "Math.floor" that only takes the integer part, which is really useful.
That said, I still think the if statement's logic is correct. I suspect the problem lies in "reset.splice(index,1);", where an array out-of-bounds error is causing the subsequent graphs to not be drawn correctly. This is the third issue I wanted to address.
for(let i=0;i<reset.length;i++){
......
reset.splice(index,1);
The third issue is the array length. Initially, I wanted each pixel to be drawn only once, and then deleted after the data was used. After all the pixels were drawn, the array within the array would also be deleted.
I believe the problem is that the array length gradually decreases, while `i` gradually increases. Since they change one at a time, they should meet at the position `array.length * 0.5`, which is `i = 0.5 * array.length`. After this, the loop cannot continue because `i` will then be greater than the array length, resulting in the remaining half of the pixel blocks not being drawn.
However, in actual code execution, the drawn area is much smaller than half the screen.
This might also be related to my using `random` to select random index values? I feel like my brain just can't process it. I have a feeling the array is completely messed up.
So, in the end, I decided to ignore how to delete elements from the array for now and simply reset and clear the array on the next call.
It's not perfect, because I'm always worried that some pixels will be drawn repeatedly.
WEEK10
My final project requires machine learning to determine the type of action, so I hope the teacher will forgive me for not completing a specific assignment using ml5js control code. However, my final project will certainly use a lot of ml5js content. I think it is more important to solve the pose recognition problem first, so my work this week mainly focuses on training my own pose recognition model and learning how to call it.
Its recognition isn't very accurate; it can only be highly accurate in certain specific situations. I didn't know why at first, but I found out later.
I used AI to help with this part of the code.
This article was very enlightening for me. I realized the problem: my sample size was not large enough, which resulted in insufficient judgment of the model.
Next, I will collect a large amount of data to train the model. I will also finish watching the tutorial on pose classifiers using PoseNet and ml5.neuralNetwork() before class tomorrow.
I am very interested in computer vision, but I probably won't have much time to study it this semester. I hope to study and apply it more deeply next semester.
WEEK10
The biggest takeaway from this experience was learning how to use the `millis` function. This allows me to trigger statements at desired intervals, a problem I'd encountered many times before, such as the frequent triggering issues that often occurred in the `mousePressed` function. This time, I finally found a good solution.
By the way, the left and right audio channels are really fun (pan function).
final
final job(but not the final version)
STATEMENT: no plagiarism. The concept, design, etc. are totallyoriginal by myself. Some of the coding part use assistance from AI(chatgpt, gemini, claude)
Comments
Post a Comment