Week #6 Homework – Pure DOMagination

Come with me and you’ll be
In a world of pure DOMagination!
Take a look and you’ll see
Into my exasperation.

We’ll begin with a spin
Examine a sketch of my creation
What you’ll see will defy
Computation!

My sketch this week was an attempt to share with the class my experience of being sick and gross and rained on all weekend. It went… not great.

Here is the closest I could get to where I wanted to go:

I probably spent too much time on the rain thanks to this video from Shiffman.

I wanted the sketch to do the following at least:

1. Have the slider control the amount of rain.
2. Have the button either print the word “cough” on the screen and have the word grow, float to the top and then dissipate, OR have a recording me coughing play via p5.sound.

As you can see, I only got to the slider part after about 24 combined hours of mushy-brained work.

Eventually, I want to add all the following things:

• a wind button or slider that makes the drops fall at varying angles
• a tv/computer screen you can see through the window that you can change the channels of showing actual clips of Stranger Things, The Coding Train vids, Rick and Morty, The Muppet Movie, r/aww, and other things that make me feel better when I’m sick
• an input field that would allow the user to “send good vibes” that show on the screen and then disappear

I’ve linked all my sketches in my various attempts below with the commented notes intact so you can see (hopefully) the process I went through:

1. attempt 1 – https://alpha.editor.p5js.org/marynotari/sketches/BysqMGNCW
2. cough button 1 – https://alpha.editor.p5js.org/marynotari/sketches/B15AFXr0W
3. cough button 2 – http://alpha.editor.p5js.org/marynotari/sketches/HkqFimH0W
4. cough button 3 – http://alpha.editor.p5js.org/marynotari/sketches/ryy-xS8Ab
5. just the slider 1 – http://alpha.editor.p5js.org/marynotari/sketches/SJbWuEHCZ
6. just the slider 2 – http://alpha.editor.p5js.org/marynotari/sketches/ryf-p4rCb
7. just the slider 3 – http://alpha.editor.p5js.org/marynotari/sketches/HyrKpNrRb
8. It worked! just the slider 4 – http://alpha.editor.p5js.org/marynotari/sketches/SJIAeBHCZ
9. cough sound 1 – http://alpha.editor.p5js.org/marynotari/sketches/HymrrLH0W
10. cough button one last time – http://alpha.editor.p5js.org/marynotari/sketches/SJh_IV8Cb

Here are my main questions:

• What are the main, functional differences between Objects, Functions, and Classes and how do you decide when to use which one?
• How to I make words appear on the canvas without getting rid of the background and calling noLoop()? See here for an example of the difficulty I was having: https://alpha.editor.p5js.org/marynotari/sketches/B15AFXr0W
• How do you link to a new file created in the project folder? I wanted to put my classes and functions in separate files to clean up my sketch but it never worked for me.
• It took me waaaayyyyy too long to figure out how to get the slider value to correspond to the number of raindrops. Why does putting the slider value in setup() not work:

function setup(): {
    createCanvas(600, 400);

    sliderRain = createSlider(1, 1000, 1);
    if (sliderRain.value >= 1 && sliderRain.value <= 1000) {
        for (let i = 0; i < 1000; i++) {
        drops[i] = new rainDrop();
        }
    }
}
function draw() {
background(69, 100, 151);
for (let i = 0; i < drops.length; i++) {
drops[i].display();
drops[i].fall();

But putting it in the draw() does:

function setup() {
    createCanvas(600, 400);
    sliderRain = createSlider(1, 1000, 1);
    for (let i = 0; i < 1000; i++) {
        drops[i] = new rainDrop();
    }
}

function draw() {
    background(69, 100, 151);
    for (i = 0; i < sliderRain.value(); i ++) {
        drops[i].display();
        drops[i].fall();
    }
}