Some questions we must ask from time to time..

(1)

An approach to introductory programming

Abhiram Ranade

April 21, 2014

(2)

What should you teach in an introductory programming course?

Some simple answers...

1. Teach programming language syntax 2. Teach how to design programs Is there more?

(3)

What should you teach in an introductory programming course?

1. Teach programming language syntax 2. Teach how to design programs

Is there more?

(4)

What should you teach in an introductory programming course?

1. Teach programming language syntax 2. Teach how to design programs Is there more?

(5)

Some questions we must ask from time to time..

I Is the nature of programming changing as a subject? Programming is becoming more pervasive. Phones, cars, vacuum cleaners, cameras, all contain processors

Computational ideas are appearing everywhere: biological evolution, social phenomenon, understanding text...

I Is the nature of students changing?

Students have many distractions: cellphones/media, finance jobs, IAS aspirations..

Attention span of students is small:

You have to work hard to get their attention, and work harder to hold it..

(6)

Some questions we must ask from time to time..

I Is the nature of programming changing as a subject?

Programming is becoming more pervasive. Phones, cars, vacuum cleaners, cameras, all contain processors

(7)

Some questions we must ask from time to time..

(8)

Some questions we must ask from time to time..

(9)

Some questions we must ask from time to time..

(10)

Some questions we must ask from time to time..

(11)

Some questions we must ask from time to time..

(12)

Some questions we must ask from time to time..

(13)

Some strategic measures

I Take programming examples from different domains: science, technology, art, ... to excite wider range of students

I Standard approach: programming examples drawn from basic numerical processing and text processing.

I May not interest all students, say those not majoring in CS.

I Use graphical input and output, not just text input output.

I Natural medium of communication, in the era of video games and touch screen based cell phones.

I Many interesting programming examples can be attempted, with very little effort.

Empowerment and excitement

(14)

Some strategic measures

(15)

Some strategic measures

(16)

Some strategic measures

(17)

Some strategic measures

(18)

Some strategic measures

(19)

Some strategic measures

(20)

Some strategic measures

(21)

Grab students’ attention on day 1 and hold it

I Grabbing attention:

I Honestly try to SELL computer programming as an exciting and important activity in the first lecture.

I Give demonstrations of good programs, especially the programs that students might be able to write by the end of the course.

I Holding attention:

I Arrange your material so that interesting exercises are possible from day 1. Do not lose the tempo!

(22)

Grab students’ attention on day 1 and hold it

(23)

Grab students’ attention on day 1 and hold it

(24)

Grab students’ attention on day 1 and hold it

(25)

Grab students’ attention on day 1 and hold it

(26)

Grab students’ attention on day 1 and hold it

(27)

The approach followed in the book

I Take programming examples from different areas: math, engineering, art, operations research, ...

I A teaching tool: Simplecpp

Main element of Simplecpp: 2D graphics library

I Turtlegraphics

I Coordinate based graphics

I Elementary animation

I Elementary graphical input

I Very easy to use; “alternative to<iostream>”

Additional elements

I “New statement”: main program

I “New statement”: repeat

I A general pedagogical principle: find and work out convincing real examples of anything you want to teach.

(28)

The approach followed in the book

I Turtlegraphics

Additional elements

(29)

The approach followed in the book

I Turtlegraphics

Additional elements

(30)

The approach followed in the book

I Turtlegraphics

Additional elements

(31)

The approach followed in the book

I Turtlegraphics

Additional elements

(32)

The approach followed in the book

I Turtlegraphics

Additional elements

(33)

The approach followed in the book

I Turtlegraphics

Additional elements

(34)

Outline

I Turtle graphics

I Introduced in lecture 1 of the course

I main programandrepeat

I Recursion using graphics

I Other issues

I Program design vis-a-vis algorithm design.

I Object oriented programming

I Software engineering

I Standard library

I Concluding remarks

I Demos

(35)

Turtle graphics

Invented in 1960s by Seymour Pappert, as part of the Logo programming language for teaching programming tochildren.

Turtle: a symbolic animal that lives on the screen. Moves as per commands issued by the program.

Has a pen, which draws on the screen as the turtle moves. Goal of turtle graphics: Draw interesting pictures on the screen.

(36)

Turtle graphics

Turtle: a symbolic animal that lives on the screen.

Moves as per commands issued by the program.

(37)

Turtle graphics

(38)

Turtle graphics

Has a pen, which draws on the screen as the turtle moves.

Goal of turtle graphics: Draw interesting pictures on the screen.

(39)

Turtle graphics

Has a pen, which draws on the screen as the turtle moves.

Goal of turtle graphics: Draw interesting pictures on the screen.

(40)

A simple program fragment

turtleSim(); // Start turtle graphics forward(100);

right(90);

forward(100);

right(90);

forward(100);

right(90);

forward(100);

What does this draw?

This program can be discussed in the first lecture.

(41)

A simple program fragment

right(90);

forward(100);

right(90);

forward(100);

right(90);

forward(100);

(42)

A simple program fragment

right(90);

forward(100);

right(90);

forward(100);

right(90);

forward(100);

(43)

The real day 1 program

#include <simplecpp>

main_program{

turtleSim();

forward(100); wait(0.5); right(90); wait(0.5);

forward(100);

wait(5);

}

I <simplecpp>: includes graphics functionality. Also includes

“using namespace std;”, and <iostream>.

I main program: No need to explainint main().

I Students must eventually understand namespaces, iostreams, int main, but not on day 1.

I main programis a C++ preprocessor macro, so it automatically gets translated to int main()

(44)

The real day 1 program

main_program{

turtleSim();

forward(100);

wait(5);

}

(45)

The real day 1 program

main_program{

turtleSim();

forward(100);

wait(5);

}

(46)

The real day 1 program

main_program{

turtleSim();

forward(100);

wait(5);

}

(47)

The real day 1 program

main_program{

turtleSim();

forward(100);

wait(5);

}

(48)

The second program for day 1

main_program{

turtleSim();

repeat(4){

forward(100); right(90);

} }

“New statement”: repeat

repeat (count) { statements to be repeated }

(49)

The second program for day 1

main_program{

turtleSim();

repeat(4){

} }

“New statement”: repeat

repeat (count) { statements to be repeated }

(50)

Another day 1 program

main_program{

turtleSim();

repeat(10){

repeat(4){

}

right(10);

}

wait(10);

}

“What do you think it does?”

This is what I ask students. Most figure it out! Why? Because it is an interesting challenge!

(51)

Another day 1 program

main_program{

turtleSim();

repeat(10){

repeat(4){

}

right(10);

}

wait(10);

}

This is what I ask students. Most figure it out! Why? Because it is an interesting challenge!

(52)

Another day 1 program

main_program{

turtleSim();

repeat(10){

repeat(4){

}

right(10);

}

wait(10);

}

This is what I ask students. Most figure it out!

Why? Because it is an interesting challenge!

(53)

Another day 1 program

main_program{

turtleSim();

repeat(10){

repeat(4){

}

right(10);

}

wait(10);

}

This is what I ask students. Most figure it out!

Why? Because it is an interesting challenge!

(54)

What have students learnt on day 1?

1. Control flow

2. Elementary iteration

3. Basic ideas of syntax, spaces, indentation

4. Importance of observing patterns in what is to be accomplished, and expressing them using repeat

You should not write 100 statements to draw a 100 sided program!

Very important activity while designing programs!

Homework on day 1: draw chessboard, draw circles (as limit of n sided polygon). Draw 5 sided star.

Need some high school geometry. However, most programming needs some domain knowledge.

Students are happy to do this because they can see interesting things happening.

(55)

What have students learnt on day 1?

1. Control flow

(56)

What have students learnt on day 1?

1. Control flow

(57)

What have students learnt on day 1?

1. Control flow

(58)

What have students learnt on day 1?

1. Control flow

(59)

What have students learnt on day 1?

1. Control flow

(60)

What have students learnt on day 1?

1. Control flow

(61)

What have students learnt on day 1?

1. Control flow

(62)

What have students learnt on day 1?

1. Control flow

(63)

What have students learnt on day 1?

1. Control flow

(64)

Not losing the tempo on day 2

Introduction must be followed by discussion of computer hardware. Then data types and variables.

Drill assignments are possible, but how to catch the imagination? main_program{

int i = 1; turtleSim(); repeat(10){

forward(i*10); right(90); forward(i*10); right(90); i = i + 1;

} }

“What does this do?”

Reassignment of variables is a difficult idea to understand. Students want to know why this program works, and so take the time to think about it.

(65)

Not losing the tempo on day 2

Introduction must be followed by discussion of computer hardware.

Then data types and variables.

Drill assignments are possible, but how to catch the imagination? main_program{

int i = 1; turtleSim(); repeat(10){

forward(i*10); right(90); forward(i*10); right(90); i = i + 1;

} }

(66)

Not losing the tempo on day 2

Drill assignments are possible, but how to catch the imagination?

main_program{

int i = 1;

turtleSim();

repeat(10){

forward(i*10); right(90);

i = i + 1;

} }

(67)

Not losing the tempo on day 2

main_program{

int i = 1;

turtleSim();

repeat(10){

i = i + 1;

} }

(68)

Not losing the tempo on day 2

main_program{

int i = 1;

turtleSim();

repeat(10){

i = i + 1;

} }

Reassignment of variables is a difficult idea to understand.

Students want to know why this program works, and so take the time to think about it.

(69)

Coordinate based graphics

Creating graphical objects Circle c1(200,225,25);

// c1 = circle at (200,225), r = 25 Rectangle r1(200,200,50,70);

// center coordinates, width, height Manipulating graphical objects

r1.right(45); // rotate 45 degrees

c1.move(10,20); // move by 10,20 in x,y directions Elementary graphical input

int z = getClick();

// z = 65536 * x coordinate of cursor + y coordinate Excitement value: Elementary animation can be done.

Educational goals acheived: Implicit introduction to constructor and member access syntax. Repetition will be needed to do interesting animations.

(70)

Coordinate based graphics

// center coordinates, width, height

Manipulating graphical objects

int z = getClick();

(71)

Coordinate based graphics

c1.move(10,20); // move by 10,20 in x,y directions

Elementary graphical input int z = getClick();

(72)

Coordinate based graphics

int z = getClick();

// z = 65536 * x coordinate of cursor + y coordinate

Excitement value: Elementary animation can be done.

(73)

Coordinate based graphics

int z = getClick();

(74)

Coordinate based graphics

int z = getClick();

(75)

Graphics using recursion

Drawing a mathematical tree

I Recursion is “visible” Drawing of a realistic tree

I Perhaps recursion is more applicable than we thought?

(76)

Graphics using recursion

I Recursion is “visible” Drawing of a realistic tree

(77)

Graphics using recursion

I Recursion is “visible”

Drawing of a realistic tree

(78)

Graphics using recursion

(79)

Graphics using recursion

(80)

Graphics as example of inheritance

Sprite: Class of all graphics objects

Rectangle, Circle, Polygon,...: Subclasses of Sprite. Turtle: Subclass of Polygon.

Sprite holds attributes common to all graphics objects.

I Data members: on-screen position coordinates. Orientation. Colour...

I Function members: move, right, left Rectangle class holds

I Data members: width and height

I Function member: function that actually draws the rectangle on the screen.

(81)

Graphics as example of inheritance

Rectangle, Circle, Polygon,...: Subclasses of Sprite. Turtle: Subclass of Polygon.

(82)

Graphics as example of inheritance

Rectangle, Circle, Polygon,...: Subclasses of Sprite.

Turtle: Subclass of Polygon.

(83)

Graphics as example of inheritance

(84)

Graphics as example of inheritance

(85)

Graphics as example of inheritance

I Data members: on-screen position coordinates. Orientation.

Colour...

(86)

Graphics as example of inheritance

Colour...

I Function members: move, right, left

Rectangle class holds

(87)

Graphics as example of inheritance

Colour...

(88)

Graphics as example of inheritance

Colour...

(89)

Graphics as example of inheritance

Colour...

(90)

Other uses of graphics

I Interesting new applications. Formula layout. Example of structural recursion.

I Visualizing output of programs. N-body simulation, Gravitational simulation.

I Visualization is important also because it can help discover programming errors more quickly.

(91)

Other uses of graphics

(92)

Other uses of graphics

(93)

Other uses of graphics

(94)

Some traditional issues in introductory programming

I Program design vs. algorithm design

I How much software engineering should you teach?

I How much methodology/OOP?

I How much history of computing?

I How much hardware?

I How much of STL?

(95)

Some traditional issues in introductory programming

I Program design vs. algorithm design

I How much software engineering should you teach?

I How much methodology/OOP?

I How much history of computing?

I How much hardware?

I How much of STL?

(96)

Program design vs. Algorithm design

Program design: Writing a program when you know how to solve the problem using paper and pencil.

Algorithm design: Deciding what to calculate to solve a problem. Main focus: Program design

However,Recursion is covered well. Many good algorithms are described

I Root finding, curve fitting

I Sorting including mergesort

I Solving linear systems of equations

I Gravitational simulation

I Backtracking, e.g. 8 queens.

I A few advanced algorithms to pique the interest for projects, further study.

Coding some of these is left for exercises.

(97)

Program design vs. Algorithm design

Algorithm design: Deciding what to calculate to solve a problem. Main focus: Program design

(98)

Program design vs. Algorithm design

Algorithm design: Deciding what to calculate to solve a problem.

Main focus: Program design However,Recursion is covered well. Many good algorithms are described

(99)

Program design vs. Algorithm design

Main focus: Program design

(100)

Program design vs. Algorithm design

Main focus: Program design However,Recursion is covered well.

Many good algorithms are described

(101)

Program design vs. Algorithm design

(102)

Program design vs. Algorithm design

(103)

Program design vs. Algorithm design

(104)

Program design vs. Algorithm design

(105)

Program design vs. Algorithm design

(106)

Program design vs. Algorithm design

(107)

Program design vs. Algorithm design

(108)

Program design vs. Algorithm design

(109)

Programming methodologies

Some introductory programming courses teach OOP on day 1. My strategy: Pose progressively harder programming problems to the student, and teach whatever is needed to solve those.

Need for OOP can be made to evolve. The book has substantial discussion, but not at the beginning.

Chapter on “inheritance based design”.

I A substantial application developed earlier without inheritance is rewritten with inheritance.

I New implementation is easier to extend. A non-trivial extension is carried out.

(110)

Programming methodologies

Some introductory programming courses teach OOP on day 1.

My strategy: Pose progressively harder programming problems to the student, and teach whatever is needed to solve those.

(111)

Programming methodologies

(112)