For this week’s assignment, our class was tasked with integrating sound into a p5 animation. This assignment was an interesting challenge, as I aimed to make a drum pad, usable both on a desktop and touch screen device, that played different lyric sections of Daft Punk’s Harder, Better, Faster, Stronger.
I tried three different methods to reach my end result, accessible in the buttons below.
Users may interact with my final sketch on touch screens using the preview link.
If I had more time I would have made a popup introductory epilepsy warning with the song’s chorus quietly playing in the background. The drum pad would be accessible once the user clicked the warning, which would be superimposed over the helmet of one of the members of Daft Punk’s members. I have stored all of these media files in my sketch, and intend to add this feature in the near future.
This week’s assignment was to create a sketch using pixelated images and describe it under specific parameters. I created a “Who’s That Pokemon” game with Neta Bomani – our description is as follows:
This week we were tasked with cleaning up the code from last week’s assignment. Frankly, I found that my code was clean and satisfactory, without redundancies, so I added an outro level to my animation exercise that prevented my users from surpassing 100 cat clicks.
The ease with which I was able to construct this level was surprisingly gratifying. Without assistance, and with minimal troubleshooting, I was able to execute a precise vision of what I wanted to create; I have come a long way. I find it both satisfying and funny that for each week, with each tool I’ve learned, I’ve come closer and closer to the game I wanted to create for my first ICM class. To that end, my increased comfortability with JavaScript has given me hope that I will, eventually, be able to approach and master (with time) higher-level programming concepts like machine learning, and addictive user interface development. To be clear, I am not interested in understanding these tools exclusively because I want to generate with these tools – I see danger in their overuse, but recognize that in order to contend with the dangers these tools present I must first understand them. In a funny way, my addition this week reflects my concern that technology grabs our attention to a toxic degree, and I am excited that I can push back against this trend at a level that reflects my (growing!) capability.
This week, our class was expected to create a sketch with constructor-based objects, and explain our sketch. I decided to continue on an original idea I had had, a balloon popping game, utilizing new and old skills from throughout my projects. I used arrays to generate my cats, and the transparent “button” ellipses that allowed my counter to increase, and the position of the cats to reset. I used for loops to populate my arrays, and move my cloud animations (as I had done in the past). I also uploaded a new font to match the 8-bit aesthetic of my animation, and a loading screen that reflected the same aesthetic
The only issue I ran into was when I tried to draw from a randomized “meow” array, which would play when I pressed my ellipse balloon buttons. I assume the issue came from the syntax I used after establishing the variable in the constructor, or the syntax I used when linking it to the event “clicked”.
This week, my class was expected to represent our comfort in defining our own functions and creating objects. After some practice, I felt very comfortable using these tools – and utilized some old code that I had used to make balloons float, to make a pattern of multiple bubbles floating. This was satisfying because I had initially struggled with making multiple balloons float, and I was able to overcome this obstacle and apply it in a new animation. I also learned how to add audio and gifs into my animation, I look forward to using these skills in future projects.
I ran into two interesting issues. First, for whatever reason, I could not get Adobe Photoshop to represent the color I had generated for my background in the background of my seaweed images. Second, I wanted to try and generate a realistic water ripple pattern and was not able to find any examples written in JavaScript. In the future, I’d like to see if there is a way I could interface different languages in a similar manner to p5.serialport.js (used to communicate with Arduino).
This week, my assignment was to present my competence using for loops. While thinking of projects I often came up with ideas that relied on more advanced concepts – specifically arrays and objects. Initially, I tried to create a yahtzee-esque game, which I intend to complete once I have a mastery of arrays, and particularly, the shuffle function. However, I ended up creating a grid of multiple faces to represent the range of emotions I could be feeling on a given day. As a cute added feature, I included a mouseIspressed function that printed “Lol don’t worry about me, life’s great rn”.
In the future, I believe I could use an array, and the shuffle function, to display a randomized grid of a greater variety of emotions – and would like to do so. Creating the for loops, and aligning these three images in the grid were relatively time-intensive, though creating this project has definitely given me greater insight into how to troubleshoot positioning issues in for loop generated grids.
Below is my code
const GRID_SIZE = 3;
let confused;
// function preload() {
// img = loadImage('confused.png');}
let frustrated;
// function preload() {
// img = loadImage('frustrated.png');}
let sleepy;
// function preload() {
// img = loadImage('sleepy.png');}
function setup() {
createCanvas(400, 400);
confused = loadImage('confused.png', img => {
image(img, 0, 0);
});
frustrated = loadImage('frustrated.png', img => {
image(img, 0, 0);
});
sleepy = loadImage('sleepy.png', img => {
image(img, 2, 2);
});
}
function draw() {
background(220);
textSize(16);
let rectSide = width / GRID_SIZE;
for (let x = 0; x < GRID_SIZE; x += 1) {
for (let y = 0; y < GRID_SIZE; y += 1) {
let xPos = x * rectSide;
let yPos = y * rectSide;
rect(xPos, yPos, rectSide, rectSide);
let circleSize = width / 3;
for (let i = 0; i < width; i += GRID_SIZE) {
image(confused, xPos + 35, height / 2.4, 80, 80);
}
for (let i = 0; i < width; i += GRID_SIZE) {
image(frustrated, xPos + 35, height / 9.7, 80, 80);
}
for (let i = 0; i < width; i += GRID_SIZE) {
image(sleepy, xPos + 38, height / 1.35, 83, 83);
}
}
if (mouseIsPressed){print ("Lol don't worry about me, life's great rn")}
}
}
This week my partner, Ashwita, and I expanded on my initial balloon popping game concept. We wanted to expand the concept by being able to generate multiple balloons, have those balloons change colors in a non-monochromatic range, have the balloons be pressable buttons (instead of relying on a general mouseClick function), and to incorporate a popping sound and pop counter.
We ran into the following problems. First, we could not figure out how to make a circular moving button (the balloon). We tried doing so by using the distance function and not having the balloons pop when clicked, but when the mouse hovered over the balloons instead. We also struggled with making each balloon, as individual objects, separate clickable entities.
Pending feedback we look forward to making different levels, turning this exercise into a game. Below is a video of our animation, with a final and test iteration of code.
let balloonColor;
let balloonPositionX;
let balloonPositionY;
let s = 'POP lol';
let r,g,b;
let imga, imgb;
function setup() {
createCanvas(800, 600);
balloonColor = random(255);
balloonPositionX = random(0,200);
balloonPositionY = 400;
}
function preload() {
// sound = loadSound('balloon-pop.mp3'); // balloon pop sound
imga = loadImage('balloon.png');
imgb = loadImage('balloon.png');
}
function draw() {
background(220);
image(imgb, balloonPositionX, balloonPositionY, 200, 200);
push();
pop();
fill(0);
// pin
ellipse(mouseX, mouseY, 5, 5);
line(mouseX, mouseY, mouseX + 20, mouseY - 10);
//floating balloon waver
balloonPositionX = balloonPositionX ;
balloonPositionY = balloonPositionY - 4;
if (balloonPositionY === 0) {
balloonPositionY = 600;
balloonPositionX = random(0,400);
balloonColor = random(255,0,0);
}
if (mouseIsPressed) {
// text(s, balloonPositionX , balloonPositionY, 80, 80)
balloonPositionY = 600;
balloonPositionX = random(0,800);
balloonColor = random(255);
}
}
Below is the code for one of our test iterations
let counter1 = 400; // counter for balloon 1
let counter2 = 600; // counter for balloon 2
let xpos1, xpos2; // the horizontal positions for the balloon 1 and 2
// let speed = 1;
let position;
let ypos;
var sound;
var imga, imgb;
let bx1, by1, bx2, by2;
function setup() {
createCanvas(400, 400);
xpos1 = random(0, 400); // setting a random position for balloon 1
xpos2 = random(0, 400); // setting a random position for balloon 2
ypos = random(0, 400); // setting up horizontal pos. differences between Balloon 1&2.
bx1 = random(0, 600);
bx2 = random(0, 600);
by1 = random(0, 400);
by2 = random(0, 400);
}
function preload() {
// sound = loadSound('balloon-pop.mp3'); // balloon pop sound
imga = loadImage('balloon.png');
imgb = loadImage('balloon.png');
}
function draw() {
background(255);
strokeWeight(1);
image(imga, xpos1, counter1, 200, 200);
// let ball1 = rect(xpos1,counter1,50, 50) // balloon 1 represented by a square
// to make the balloon float one after the other in a loop
if (counter1 <= -50 && counter2 <= -50) {
counter1 = 400;
counter2 = 600;
xpos1 = random(0, 400);
fill(255); // resets the color every loop
if (dist(mouseX, mouseY, xpos1, counter1) < 200 / 2 ||
dist(mouseX, mouseY, xpos2, counter2) < 200 / 2) {
background(0);
} else {
background(255);
}
// ellipse(bx1, by1, d, d);
// ellipse(bx2, by2, d, d);
}
image(imgb, xpos2, counter2, 200, 200);
// let ball2 = rect(xpos2,counter2,50, 50); // balloon 2 represented by a square
counter1 -= 1;
counter2 -= 1;
ellipse(mouseX, mouseY, 5, 5);
line(mouseX, mouseY, mouseX, mouseY - 15);
// // making the balloon pop sound
// if (mouseIsPressed) {
// // sound.play();
// fill(0,0,255);
// }
}
For this week I was tasked with animating a scenario where elements acted automatically and were interactive. I knew I wanted to animate a poppable balloon, however, my initial approach (which I, unfortunately, scrapped before I could document) left me more confused than inspired. After an insightful help session with my professor, I was put on the right track, and was able to animate the following work. Partly my issue stemmed from not knowing the material well enough, though I would say a larger issue I ran into was conceptualizing how best to plan and approach my design in individual steps.
Moving forward with this project, I’d like to be able to have the balloons generate in multi-color (non-monochrome). Furthermore, I would like to add a pop counter, and have multiple balloons generate, to turn this small project into a full game.
I see a practical application to creative computation in my work in Child Psychology research. Too often we fail to collect data from children because our studies’ “games” are excruciatingly boring, straining the attention spans of our subjects. I believe this issue extends to science education for children as well. I would like to build a more engaging synthetic face animation that could speak research prompts to children, to improve the efficacy of our data collection. I would also like to see more tactile early learning educational tools to teach scientific concepts – much like the Nervous System project listed in the ICM wiki page.
Part 2
I enjoyed the face making task, though at times I found the web editor tedious to work with. I struggled to interpret the directions for how to generate arcs – I mitigated this issue by googling other, more clear tutorials. I would say benefitted overall from drawing the components of my face out before programming it. However, I was not prepared for how much time generating and coloring each element of my face would take. Because creating each component of my face took so long, and even though I set the j5 visual preferences to night mode, I found the display made my eyes tired over time.
Steps of Face Documentation:
I sketched my face, marking which order I might make certain elements.
I created each element of my face without color.
I figured out which colors I wanted to use by using a droplet tool to identify color hex codes that best reflect my “bodily palette”. Unfortunately this progress was deleted.
