4.5 - Flow Charts

Review

  • Let's take a look at the Course Calendar for the remainder of this quad

  • Planning your program before you code can be tedious and boring, but it is crucial to making the process easier and more efficient. One day of planning can prevent weeks of coding mishaps and oversights.

  • Storyboards allow us to visualize the scenes in our program. They're a great way to visualize how the user will interact with the program. But what about the actual algorithms behind the scenes?

4.5 - Flow Charts


A flowchart is just a sequence of steps to follow. Programmers use them to solve the problem BEFORE coding.


  • Understand and generate the logic of the issue

    • Each shape in a flowchart has a specific meaning

    • The "main" thread of the program gets a flowchart

    • Each function gets its own flowchart

    • You do not show the declaration of variables in a flowchart

    • If an algorithm requires math, you always show the math

    • Give each flowchart a title, so we know what they are showing


Let's take a look at examples and explanations from Technovation's awesome website.


In short:

  • Arrows show the flow of control and data

  • Ovals for "terminals" (start / stop)

  • Diamonds for decisions (true / false)

  • Rectangles for processes (alerts, maths, etc)

  • Parallelograms for inputs (from the user, files, other websites, etc)


Example: The Guessing Game

Similar to storyboarding the goal of the flowchart is to express the idea - a draft. It's an opportunity to discover bugs or realize the complexity of a problem.

Your turn!

When designing the logic behind RPSLS, understand that we will need to give each option a label - either a word, a character, or a number. A number is recommended (ie. Rock = 1, Paper = 2, etc)

Get together with your partner (if you have one) for the RPSLS game. Using diagrams.net (formerly draw.io), create a flowchart that describes the main game function (user selects an option to start the process, decide who wins).


RPSLS