For our week 2 assignment, we were instructed to make a sketch that included the following:
One element controlled by the mouse.
One element that changes over time, independently of the mouse.
One element that is different every time you run the sketch.
For my sketch, I wanted to try to make a small, javascript gardening game!
Image Description: a 120x92 pixel art garden plot. There are four vertically-oriented sections of dirt. There are five plants randomly placed along the sections.
Image Description: This is a cropped view of the gardening plot, featuring two plants, vertically oriented. The plant on top has two, bright red berries. The plant on the bottom has been picked, and has no berries, only six visible leaves.
I was envisioning berry plants across the garden. Using the mouse, the player can “pick” the berries. My randomized elements for the project are the location and number of plants to spawn in the garden. I designated twelve different plot points for the plants to appear.
Image Description: The same pixel art garden plot, however instead of featuring berries, there are twelve, bright-green squares representing plant spawn points. There are four vertically-oriented sections of dirt, each column containing three squares.
My vision was that there would be three different times of day: morning, afternoon, and night. I rendered three different colourways to represent the different times.
Image Description: Three different variations of the same garden plot. From top to bottom, the colour palette decreases in brightness, and goes from warmer to cooler hues. These variations represent the different times of day designated in the game: morning, afternoon, and night.
I initially used Discord to host my images online. Referencing the Load and Display image tutorial on the p5 js website, I tried to define and load my background images of the garden.
Image Description: A screenshot of the p5js editor. This shows a function for loading images. The image sources cited are discord links.
Unfortunately, this ended up not working! I assumed that it was a hosting issue, and my friend taught me how to create libraries to upload assets.
Image Description: A screenshot of the p5js editor. The sketch files are expanded on the left, showing the image files that were uploaded.
I initially assumed that when the tutorial talked about hosting images locally, it was referring to hosting it on my computer. I was worried that the image wouldn't show up for other people, but now I understand that it refers to the library of assets.
After making a series of declaration to define the times, I defined the time ranges in the draw function. This was so that the image could update in real time, if it changed from morning, afternoon, or night.
(comments are in blue)
function draw() {
//this chunk STARTING HERE can be moved from the draw function to the set up function to determine how it loads
//----------------------------
//this is to define the hour
let h = hour();
//this is to define hour ranges, because ranges arent directly expressed in javascript
is_morning = h > 6 && h < 12
is_afternoon = h > 11 && h < 21
is_night = (h > 20 && h < 24) || (h == 0) || (h > 0 && h < 7) Next, I decided to set up the code to search for the twelve areas where plants could be spawned.
My image for the morning has twelve discreet pixels that correspond to the 16x16 spawn points. The pixels were a color that was unique from all of the other pixel art palettes, so that it could be picked out. I changed the colour to a bright pink so that they could be identified more easily for this blog post.
Image Description: A pixel art garden plot with twelve equidistantly-placed pink dots. There are four columns and three rows.
I initially set it up to just change the colour of the dots. This is how I set up the function to "look" for the pixels.
// look at the image (morningwithdots.png) and find the pixels with the RGB values (228, 176, 92)
// this function asks, given an x/y coordinate, is this pixel this color?
function isColor(image, x, y, red, green, blue) {
let index = (x + y * image.width) * 4;
return image.pixels[index] == red &&
image.pixels[index + 1] == green &&
image.pixels[index + 2] == blue}
function writeColor(image, x, y, red, green, blue) {
let index = (x + y * image.width) * 4;
image.pixels[index] = red;
image.pixels[index + 1] = green;
image.pixels[index + 2] = blue
}
img_morning.loadPixels()I learned that the script searches pixels one-at-a-time, going from left-to-right across the row, and then down a column. This allows for the image to be translated from 2D, to a 1 dimensional series of arrays. These pixels are identified, not by their location (x,y values), but their RGBA values. So, the image.pixels index would look something like this, citiing every RGBA value for every pixel until the image was fully read.
[R,G,B,A, R,G,B,A, R,G,B,A, R,G,B,A,...]Being one dimensional, how does the code know when another row is starting? By stating the image.width; the code knows when another row starts!
The number '4' in this bit of code represents the four colour values, Red, Green, Blue, and Alpha. I don't have any transparent pixels to worry about so far, so I omitted 'alpha' from my code.
This is as far as I got with this assignment. I spent a lot of time trying to understand ways to get the code to search for the spawn points within the image I referenced! I learned a lot about how pixels function within code, and have a more comprehensive understanding of certain functions!