Insecurity: Hours 8–12

This is the 3rd post of a series documenting a project from inception, through execution, to completion (or sad abandonment). Start from the beginning.

Hello, again.

It’s been two months, two major holidays, one shocking American election, and one flight over the Atlantic Ocean, but I finally got a chance (read: small burst of motivation and self-discipline) to work on this again. Hours 8–9 were completed back in October, so the details are a bit fuzzy.

Hours 8–9

After completing the tutorial I spent some time thinking about what I needed to do: change the questions to be qualitative, update the code to handle string values instead of integers, figure out how the collage would be randomized, integrate p5.js.

Figuring out the random collage variables and how they would be calculated.

The easiest part was updating the questions to be qualitative and changing the code to deal with strings. The not so easy part was trying to work on incorporating all the random variables. Remember last time when I said that thing about starting with easy wins? Well, it turns out easy wins are nice when you’re in the middle of things, too. I was getting frustrated with trying to conceptualize and understand and incorporate so many variables, so I simplified and worked with one question and one randomized collage property. That was easy enough that I got it working (sort of).

One question quiz with its resulting “collage”.

The medium easy part was integrating p5.js. I created a new component (Collage), installed the npm library p5, and for some reason decided to use “instance mode” (rather than having the sketch be global) and basically copy pasted the example from their docs. The only thing I changed was the square’s x value: I used the data from the user’s input instead of a hard-coded value. I’m not sure why I wanted to use instance mode, but I’m wondering if it will be useful when making the different layers of the collage. Note to self: instead of building the entire collage in one sketch, I could do each layer of the collage as a sketch.

Hours 10–11

There’s something about being on vacation that makes you want to work. Wait. That doesn’t sound right. But really, after safari-ing and shopping in Masai Markets, and marathoning the Ocean 11 series, a work session felt good. I was supposed to be doing work work, but the wireless at the coffee shop (which felt more like a restaurant) wasn’t so great. But that worked out for this project since everything runs locally.

View from the non-office (ArtCaffe in Nairobi, Kenya); gif made using Giphy Cam

After reacquainting myself with the code (it had been nearly two months after all), I decided to work on adding in another question and random collage variable. Re-adding the second question was as easy as CTRL + / (uncommenting a line). The furrowed brow appeared when I was working on adding another function to evaluate the user’s input and return a random collage variable (speaking of variables, that is getting tedious to type; var randColVar = “random collage variable”). The first randColVar function I created was incredibly simple: it returned the number of characters in the string. When working to add a second one I started to question where these functions should go.

Should they go in the Collage component? or stay in the App component? Ultimately, I decided to embrace the whole you should be embarrassed of your first release philosophy, admit I have no idea, and just keep everything in App.js for now. When things are working I’ll seek guidance and help refactoring. Why not now? Because the internet can be an overwhelming place sometimes, like when trying to understand best practices for building an app. To the point where you spend more time thinking and wondering and questioning and searching than you do creating, making, learning. I think making something crappy then learning why it’s crappy is a pretty solid way to learn. Side note: a part of me thinks App is the correct place; it deals with and has access to all aspects of the quiz: question, answer, collage. Whereas Collage only has access to whatever data you give it via App. Or maybe these functions should be pulled out of App.js and into their own little module or library? Not sure.

Y’all sharing code is scary. (Or is it just me?)

To keep with the theme of embarrassment: here’s a function I wrote which I am embarrassingly proud of. There’s probably a better solution for what I was doing, but I was proud because the solution I ended up with is way better than what I was originally trying to do. The function calcSymm determines what type of symmetry the collage will have based on which letter appears the most in the user’s answer: e, o, or i. At first I was storing the number of times each letter appeared in an object with the letters as keys, and trying to iterate over that to find which one was highest, but when I realized I only need to know which letter appears the most, I decided to just store the highest number and its corresponding letter in variables and replace if them if they were overtaken.

I also finalized the decision for which quiz questions would determine which randColVar: first question = max number of colors; second = type of symmetry of the collage; third through seventh = each one will determine multiple properties for one layer of the collage. I also decided to make the number of layers variable by making opacity a randColVar. I may want to add the possibility for more layers, but I think a max of 5 works for now.

Hour 12

Wrote this. ✍ Questioned if what I wrote makes any sense. Shrugged it off and told myself shitty work is better than non-existent work and that I’ll get better/faster/stronger in time. Also told myself I won’t stay away for two freakin’ months. 😅

PS. Here are the randColVar + “s”:


  • total number of colors
  • symmetry (radial, asymmetric, symmetric)

Per layer:

  • color
  • texture
  • shape
  • interactive or not
  • behavior
  • placement pattern
  • opacity (opaque, transparent, non-existent)

Thanks for reading! & Follow along if you love watching people embarrass themselves. PREVIOUS— Read about the previous chunk of hours: Hours 3–7