Objectives

• [x] use conditionals to control flow of programs
• [x] practice coding collaboratively

Work Log

Use conditional statements to control the flow of your programs. Create a sketch that asks people to make difficult choices that have surprising consequences.

• Which choices are easier, harder? Which choices are false choices?
• What internal or external factors influence the choice? How do others’ choices affect your choices?
• What choices surprise you with unexpected outcomes?
• Can you combine choices to create hard-to-predict results? (Hint: Use && and ||)
• Work in Pairs Can you divide an idea into two parts and combine those parts? (e.g. One of you codes the input behaviors (if statement) and the other one codes the output behaviors (what to do if it’s true.) Can you swap sketches and riff off of your partner's work? Provide 1 sketch link per pair, however clearly describe who did what in the code.

1. Ideation
   1. Chris raised the idea that an iconic representation of ‘choice making’ would be the red pill/blue pill from [The Matrix(1999)] - making choices that are binary and difficult to know the consequences of.
   2. I came up with the reference of [Turtles Are Surprisingly Fast Swimmers(2005)], where a common housewife is challenged to make the right decisions to become a spy. I thought this premise was funny and would fit our frame of the assignment well.
2. Making

   1. building the central logic

      1. We needed a ‘storyline’ of this little game. Since Chris and I both share a passion in spreadsheets, we communicated through this tool. After some discussion, we agreed on the overall storyline and options/choices to make.

         

   2. Building the code logic

      1. We need 4 queries - each with two choices; one fail screen that has a restart option; one success screen
         • As you can see from the sketch, we wanted different fail screens for each query, but that would complicate things too much so we narrowed it down to one.
      2. We split up and each came up with the best ways to make this structure possible.
         • Because it gets confusing with the details of each prompt, I simplified the screens into the same layout and color coded them for differentiation to build ‘a skeleton’ of the code.
         • At first, I nested 4 if statements.
           • https://editor.p5js.org/jinnie75/sketches/hz1LRdgWP: in this draft the choice made in the first query is stored and the second query is bypassed, since it has the same if condition as the first query.
           • Since the choice the user makes in one query is independent from a choice made in a different query, I figured I’ll need a choice variable indicating which of the options were selected to be initialized at each query, and a qnum variable to mark which query the user is at.
         • I also declared a state variable - if you stay alive you continue on to the next query; otherwise you escape the cascade.
           • Then I struggled with the issue of not getting past one decision: https://editor.p5js.org/jinnie75/sketches/2MTxhO7jO
           • with some help from chatGPT I found out it had to do with where the choice is initialized. https://editor.p5js.org/jinnie75/sketches/6w87WIFEk
      3. When we regrouped we decided to go on with this structure. We split our workload - Chris was responsible for visualization of the actual screens and I worked on developing the restart logic of our fail screen.
      4. The final output: https://editor.p5js.org/Chris-ITP/sketches/7e5UzxDys
      5. Work process: Collaborating remotely worked well for us. Our schedules were difficult to arrange for the same location and the same time, and we each needed some alone time to figure out how to write the code. We paid extra attention on writing readable code and commenting, so that we could understand each others’ work. Our discussions were short and sweet, talking about why we coded in such a way and what should be done next.
         • some of our conversations on the spreadsheet..
         • comments made it easy to understand what each code block was for, to pick up and modify from each others’ work
3. Thoughts
   1. We could make the choice structure much more complicated - such as creating choices where it doesn’t matter if you choose either option; where results aren’t just limited to your success in becoming a spy but has consequences on other aspects like your relationships and so on.
      1. when we do, I wonder if there could be a more effective code structure.
   2. Also, we intended to have different looking fail screens but that would make the code much too complicated so we compromised with a common fail screen. I wonder if a more effective code structure could enable that as well.
   3. I wonder if nesting conditionals (as opposed to my current structure of 4 lateral conditionals) is a better structure.

Learning Materials

• Videos 4.1-4.2(~25min) in the learning p5.js series. | Code
• Chapter 4.5-4.13 of Getting Started with p5.js book | Ebook (free with NYU Library login) | Code

Questions

• [ ] declaring, initializing with var and using/updating later on vs declaring with let and initializing in setup using/updating later on
• [ ] I didn’t completely understand why making the initialization happen somewhere else fixed the problem.