We had an introduction to 'for loops' this week for Introduction to Computational Media! Our homework was to create an interactive artwork that implements the concept of repetition with variation and to use at least one 'for loop'.
I decided to make a random burger generator, called 'The Burgerizer'! The Burgerizer assembles nine different burgers by randomly selecting six layers worth of ingredient! You can check out my sketch here! https://editor.p5js.org/mnk2970/sketches/LmytK4DdE
image description: A screenshot of The Burgerizer in all of their glory. Rendered entirely as pixel art, it features a top-view perspective to nine different plates, resting in a 3x3 grid on a light blue background. Resting on each plate is a randomly assembled burger, each burger features six different layers of ingredients, although some of these ingredients are obscured by the layer on top of them. Not all of these "burgers" look like appropriate burgers. As they are assembled randomly, some of them are missing key ingredients of a burger or are assembled in the wrong order. Several burgers have a bottom bun featured as their top bun. One burger is just three leaves of lettuce, a tomato, and onions resting on top of a bun.
NICE NICE NICE NIC EI EI NCIE NICE NICE NIC EINCENIE
I wanted to use this assignment as an opportunity to revisit my 'for loop' function from my gardening sketch! The for loop function from my garden game displayed an image after searching the background image for a pixel with a specific rgb value. It wasn't able to work last time because I didn't understand how images loaded in p5js (since then, I've learned the value of the preload function). You can check out my javascript gardening game here! https://www.moaw.art/post/variables-and-garden-varieties
I typically start all of my projects by going straight to rendering pixel art assets (drawing food,,, gooD). I made several different ingredients, stacking them to make the Ideal Burger. This burger would be the blueprint for all the burgers that the Burgerizer would conceive.
image description: A pixel art rendering of a burger and various burger ingredients. Seven different burger ingredients are featured on the left of the image: onions, cheese, hamburger patty, bottom bun, top bun, lettuce, and tomato. The fully assembled burger, which utilizes all of the ingredient assets featured on the left, is shown on the right.
I decided that the Burgerizer would render six different layers of ingredients and that there would be three different ingredients to pick from. I made one image file for each ingredient and its respective layer, resulting in eighteen image files.
My background featured nine different plates for the burgers to sit on. Each plate has a secret pixel hidden, to tell my code where to generate each burger. These pixels have a unique RGB value that the program can identify.
image description: The Burgerizer background! Nine plates rest on a light blue background in a 3x3 grid. At the bottom, below all of the plates, is the Burgerize button.
DINNER IS READY AND IT'S TIME TO CODE
I started by typing a list of my coding objectives! I learned that typing things out the language I understand the best makes programming a lot easier (comments are in blue).
// this is my BURGERIZER! It'll create random burgers with 6 different layers of ingredients!
// Each layer will have an array for each ingredient
// I will have six functions, one for each layer, to randomly pick an ingredient (represented by a value in an array)
// i will use a for loop to search for a secret pixel in the image
// i will have a function that will use the x,y coordinates to load a random image from the previous function
// the images will load in order, from the bottom-most layer to the topAfter uploading all of my images and declaring my burger layers and ingredients, I made arrays for each burger layer! I learned a valuable lesson from my previous project, and knew to define the arrays after populating my variables with images. This is all happening in my preload function!
Burg1 = [burg1bun, burg1bun2, burg1patty];
let Burg1Picker = random(Burg1);
Burg2 = [burg2patty, burg2cheese, burg2lettuce];
let Burg2Picker = random(Burg2);
Burg3 = [burg3patty, burg3cheese, burg3onion];
let Burg3Picker = random(Burg3);
Burg4 = [burg4bun2, burg4onion, burg4tomato];
let = Burg4Picker = random(Burg4);
Burg5 = [burg5tomato, burg5lettuce, burg5patty];
let Burg5Picker = random(Burg5);
Burg6 = [burg6bun2, burg6lettuce, burg6bun];
let Burg6Picker = random(Burg6);Just to test it out, a typed "image(Burg1Picker, 49, 193);" in my draw function, but the random function "Burg1Picker" wasn't defined! I moved the BurgPicker random functions to my draw functions, and that ended up working a lot better.
In my setup function, I copied and pasted the search x y function from my garden game and modified it a bit for my Burgerizer. Just to test it out, I had it color the entire image red if it was able to find my secret pixels. The problem last time was that the image wasn't loaded for the function to search the image. I was hoping that because I put my image file in a preload function, it would work this time!
// this function asks, given x/y coordinate, is this pixel this specified color?
function isColor (image, x, y, red, green, blue) {
let index = ( x + y * image.width) *4;
return image.pixels [indexx] == 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;
}
bg.loadPixels() // this allows me to use the data from the pixels array
// this function searches rows and columbs for the specific colored pixels
let x, y;
for (y = 0; y < bg.height; y++){
for (x = 0; x < bg.width; x ++) {
// this tells the script to load a thing. If the previous function finds the specific pixels, it will load the image? hopefully???
if (true || isColor (bg, x, y, 252, 254, 255)) {
writeColor(bg, x, y, 255,0,0);
}
}VICTORY! It painted the whole thing red (ha)!
Now it was time to figure out how to make the function display an image. I started with just changing the bit of the statement that colored the whole thing red with a display image! This did NOT work! I ended up receiving help my friend, who stated that it might be easier if I changed the IsColor function to a true/false statement and to move the entire thing down to the draw function.
We used the console.log to test this out!
function draw() {
function isColor (image, x, y, red, green, blue) {
let index = ( x + y * image.width) *4;
if(image.pixels [index] == red &&
image.pixels [index + 1] == green &&
image.pixels [index + 2] == blue ){
return true
}else return false
}
background(bg); // this is our background
bg.loadPixels() // this allows me to use the data from the pixels array
bg.updatePixels() // this updates the window with data from the pixels array
//double for loop checks color of each pixel
let x, y;
for (y = 0; y < bg.height; y++){
for (x = 0; x < bg.width; x ++) {
if (isColor (bg, x, y, 252, 254, 255)) {
console.log("hello world");
}
The console displayed the text, "hello world" nine times, one time for each of my hidden pixels!
I then got to work on trying to get my burger picker to work. I ended up making a drawBurg function to randomly select an ingredient from each layer. Instead of using the random function, I tried using a random integer, in hopes that it might make coding other things a bit easier. (BurgX represents each one of my layers/arrays). I typed all of this after my double for loops!
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function drawBurg(x,y){
image(Burg1[getRandomInt(3)],x,y);
image(Burg2[getRandomInt(3)],x,y);
image(Burg3[getRandomInt(3)],x,y);
image(Burg4[getRandomInt(3)],x,y);
image(Burg5[getRandomInt(3)],x,y);
image(Burg6[getRandomInt(3)],x,y);
}I then replaced my console.log with my drawBurg function! And the Burgerizer was working perfectly!
Kind of!
It was randomly assembling burgers for each frame, so like, 270 burgers a second possibly.
I tried to make a button for the Burgerizer to assemble, but I struggled a bit with making that happen. Instead, I just decided to slow the frame rate down. I did this by selecting the frame rate under function setup.
My goals for the next assignment are to find a way to get a button to work with the for loop!!! We'll see!!! next time!!!!!!!! burger!!!!!!!!!