First and foremost, I finally figured out how to embed .p5js sketches into my Squarespace site. So, special thanks to Timothy B. at Squarespace customer service, and also to Prof. Luca Damasco at Carnegie Mellon University School of Art for sharing some of their insight online as well. Here is a link on how to do it for anyone else who needs it.
Hopefully you’ve clicked the button by now and reveled in its functionality. Nick Grant and I collaborated on this one. We wanted to make a button that would generate a number of different scenarios, but randomly. So we made the button generate a random value and used the “int” conversion to make those random values into integers. By doing this we were able to map different scenarios to an integer value, meaning if random came back as three, execute scenario three.
Here is a link to the sketch in the p5 web editor.
Another thing I did that I thought was cool: I took the random RGB values that were generating the colored backgrounds and multiplied them by two for the text colors. By doing this, the text will always (even thought the colors are random) be brighter than the background, giving the text more contrast. The only except is if the backgrounds values are already at 255, which is why I put a small stroke on the text as well.
It was interesting collaborating on a program, because coding is sort of inherently solitary. We spent some time coding together, trying to figure out this random scenario functionality. We almost had it when we ran into a block. And then Skylar (whose last name I don’t know at the moment) pointed out that we weren’t using a boolean expression in a boolean situation (we were using = instead of ==…. duh… obvs….). Then everything fell into place. After that, all we had to do was make our own cat scenarios and plug them into the infrastructure we had built together. And now the world has this cat button. You’re welcome.
Oh, the cat imagery. We pulled all these images from free stock websites. We thought about using pictures of our own cats, but that would’ve been a lot of extra work silhouetting them out in Photoshop. I got mine from hiclipart.com. I’m not sure where Nick got his, but they were also fair use images, as well as the meow .mp3 file.
Hugs,
Zach
P.S. Here is a picture of my cat.
