Visual Programming

Introduction to Module.
Algorithms and sequence
Flowcharts. Pseudocode
Agenda
• Module Logistics
• Syllabus
• Assessment
• Intro to Visual Programming
• History of Programming
• Algorithms
• Pseudocode
• Flowcharts
Learning outcomes
• Familiarize yourself with history of visual programming
• Know problem solving process/pipeline
• Draw flowcharts for particular solutions
• Write pseudocode for particular solutions.
12 Teaching week calendar
Teaching Lecture
week

TW1. Introduction to Module. Algorithms and

sequence Flowcharts. Pseudocode

Unity
TW2. Introduction to Unity DE. Game objects and
materials. Basic concepts

TW3. Types and variables. Scope. Graphs,

Machines and Macros

TW4. Control elements.

TW 5.
UI elements
TW 6.
Instantiating objects
TW 7. Adding Audio. Clip, Source, Listener

TW 8. State graphs

TW 9. Into MIT app inventor. UI elements. Layout MIT AppInventor

TW 10. Media elements and charts

TW 11.
Programming sensors
TW 12. Storages, connectivity.
Assessment
• Coursework – 60%
• PC lab in-class test – 40% - time constraint test
• Quizzes
What is Programming
• Programming
• Process of telling computer what to do
• Program
• a set of instructions
• Algorithm
• Sequence or order of instructions matters
• There is no right or wrong way, as long as it solves the problem
• Difference in factors, time and resources
• Sequence
• the first programming construct. In programming, statements are executed one after
another. Sequence is the order in which the statements are executed. The sequence of a
program is extremely important as carrying out instructions in the wrong order leads to a
program performing incorrectly.
Programming languages
• 5 generations

Programming languages

Low level High Level

1st gen 2nd gen 3rd gen 4th gen 5th gen
1st generation
• Machine code
• 01010010101 - represents data and program instructions as 1s and 0s;
• Each instruction causes CPU to perform a very specific task;
• Different machine code is used by different CPU architecture;
• All programs are to be converted (compiled) into machine code to be
executed;
• Error-prone, tedious, and time-consuming
2nd generation
• Assembly language (first in1947)
• Indented to communicate directly with computer hardware or to address
critical performance issues;
• use mnemonic codes;
• requires a translator (assembler) to convert the assembly language program
into machine language;
• language is detailed in the extreme
Jessie White. An Introduction to Assembly Language
https://medium.com/@jleveewhite/an-introduction-to-
assembly-language-8144ce1dfb0e
3rd generation
• High level
• starting from 1960s
• COBOL, BASIC, FORTRAN, Python, JS, C#, Perl, PHP, Ruby, Java, etc.
• strong abstraction from the details of the computer (variables, arrays,
objects, loops, threads, functions, etc. rather than registers, memory
addresses and call-stacks)
• making the process of developing a program simpler and more
understandable
• compiled or interpreted
4th generation
• Very high level
• designed to reduce the complexity (and time, effort and cost) and amount of
source code required to create a program
• non-procedural, results-oriented, about 10 times more productive than
3GLs, easy to read and change, min training,
• SQL
5th generation
• Natural languages
• based on solving using constraints given to the program rather than using
an algorithm written
• Ill-defined, sometimes referred to as knowledge-based languages, because
natural languages are used to interact with a base of knowledge on some
subject
• Mercury, Prolog, OPS5
History of visual programming
1921 Introduction of flow process chart Adapted from:
https://www.outsystems.com/blog/posts/what-is-
visual-programming/

Goldstein and Von Neuman apply flowcharts to describe

1949 computer programs

Sutherland creates Sketchpad to show that computers can model objects

1960 with physical characteristics that interact with each other

Smith creates Pygmalion visual PL to bridge the difference between a

1975 human’s mental model of a problem and the computer’s state
PC arrives and computing becomes mainstream
Acadia Uni notes that diagrams describing the flow of a comp program is clearer to
1980
read than the code itself
Prograph visual language becomes available for Apple Mac
Several visual programming experiments: CanDo for Amiga and HyperCard for Mac
Software solves ever more complex problems
Application become too complex to be represented visually
1990s Visual programming splits into branches:
• Games and education
• Multimedia
• business
Visual Programming
• lets users create programs by manipulating program elements graphically rather than by specifying them
textually (4)
• Very many platforms. Wikipedia has a list of:
Low code paradigm
• Development platforms or applications which provide GUI for programming
• Fast and minimized hand-coding efforts
• Drag-and-drop interface
• Low code development platforms contain the features of visual modeling, drag-
and-drop interfaces, mobility, security, and scalability
• Often used by professional developers within an enterprise IT department
No-code or zero-code
• Requires few, if any, programming skills to quickly build an application
• Offers an abstraction layer over code
• Drawbacks:
• Application integration
• The tradeoff for simplicity and ease of use
• When to use:
• Business process automation (HR, Workfrow, KPI, etc.)
• Web apps
• Mobile apps
Programming Process
• Problem statement
• Planning the solution
• Code the program
• Test and debug the program
• Document the program
Pseudocode
• Language agnostic
• English-like nonstandard language that lets you state your solution with more
precision than you can in plain English but with less precision than is required
when using a formal programming language
• permits you to focus on the program logic without having to be concerned just
yet about the precise syntax of a particular programming language
• pseudocode is not executable on the computer

• When and where to use?

Tips
• Sequence: we assume that computer executes a program from top to bottom
(statement by statement)

• Selection: if statement, a question – because more than one option available

• Iteration: repeating steps

• All statements showing "dependency" are to be indented. These include while,

do, for, if, switch.
Sequence example
START
OPEN fridge
TAKE 2 eggs
PUT frying pan on the stove
TURN on the stove
POUR oil on to pan
BREAK 1 egg on the pan
BREAK 1 egg on the pan
FRY until done
TAKE a plate
PUT eggs on the plate
ENJOY
END
Selection example
START
DECLARE n
INPUT n
IF n>0 THEN
OUTPUT n & “is positive”
ELSEIF n==0 THEN
OUTPUT n & “is equal to 0”
ELSE
OUTPUT n & “is negative”
END
Iteration
START
DECLARE n, m, i, sum
INPUT n
ASSIGN sum=0
FOR 1 to n
INPUT m
ASSIGN sum=sum + m
ENDFOR
OUTPUT “sum of “ & n & “ entered numbers equals to “ & sum
END
Flowchart
• pictorial representation of a step-by-step solution to a problem
• arrows representing the direction the program takes
• boxes and other symbols representing actions
• generally, flowcharts flow from top to bottom and left to right
• the current standard, ISO 5807, was revised in 1985

• When and where to use?

From:
https://9gag.com/gag/amXAzv6
Common symbols
• Arrow: process order
• Terminator: Elongated circles, which
signify the start or end of a process.
• Process: A rectangular flow chart shape
indicating a normal process flow step
(instructions or actions).
• Decision: A diamond flow chart shape
indication a branch in the process flow.
decisions that must be made
• Connector: A small, labeled, circular flow
chart shape used to indicate a jump in the
process flow.
• Data: A parallelogram that indicates data
input or output (I/O) for a process.
• Preparation: for iterative process

• Function: predefined function or

subprogram
Online tools
Lucidchart.com Diagrams.net
Software tools
MS office programs 🡪 Insert🡪Shapes🡪Flowchart Flowgorithm
Example 1

Define if number is positive or

negative.
Example 2
Eligibility to study on CIFS
Example 3

Calculate sum of n numbers

Example 4

Guess the number

References
1. https://medium.com/@jleveewhite/an-introduction-to-assembly-language-8144ce1dfb0e
2. https://www.techopedia.com/definition/9918/very-high-level-language-vhll
3. https://www.mylearningmania.com/2018/06/fifth-generation-language-5gl.html
4. Jost, Beate; Ketterl, Markus; Budde, Reinhard; Leimbach, Thorsten (2014). "Graphical Programming Environments for Educational
Robots: Open Roberta - Yet Another One?". 2014 IEEE International Symposium on Multimedia. pp. 381–386. doi:
10.1109/ISM.2014.24. ISBN 978-1-4799-4311-1.

5. https://www.techtarget.com/searchsoftwarequality/definition/no-code
6. https://homepage.cs.uri.edu/faculty/wolfe/book/Readings/Reading13.htm
7. https://www.bbc.co.uk/bitesize/guides/z3bq7ty/revision/1
8. https://www.youtube.com/watch?v=xdzN_dGaehw
9. https://warren2lynch.medium.com/a-comprehensive-guide-for-flowchart-over-50-examples-785d6dfdc380
10. https://www.outsystems.com/blog/posts/what-is-visual-programming/
11. https://www.outsystems.com/blog/posts/low-code-vs-no-code/
12. https://docs.unity3d.com/bolt/1.4/manual/bolt-states.html
13. https://creately.com/blog/diagrams/part-1-15-mistakes-you-would-unintentionally-make-with-flowcharts/