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!

ta daaaaaa

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.

Well, would you?

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.

You lose! Good day, sir!

Eventually, I want to add all the following things:

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:

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();
    }
}

October 31, 2017