Nature of Computing

 

CSCI 104 (Section 04), spring 2018

 

 

To the Bottom of the Page

 

Instructor:     Dr. Shieu-Hong Lin

Email: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: Description: LinEmail

 

Class:              Wednesday 1:30-3:20PM at Busn 210

 

Dr Lin’s Office Hours: Math & CS department at Lim 137.

·         Contact Dr. Lin in advance to set up an appointment by email.

·         M T Th 9:00-10:30am 1:30-3:00pm.

 

Syllabus: Full version

 

Approach: As the key component of the class, we'll conduct a light-weight exploration of the "nature of computing" using simple programming experiments for generating animation and visual beauty. In that regard, we'll learn the basics of Processing, a simple programming language widely used by visual artists, through lectures and supplementary stuff available online.

 

*****************************************************************

 

Week 1: Overview and Introduction 

 

Reading for Week #1: Processing Overview on processing.org

 

            Showcases on the nature of computing: programming AI applications

·         Artificial creatures and robotic zoo: 1, 2, 3

·         IBM Watson in the Jeopardy show: 1

·         Automatic recognition of facial expressions: 1, 2 

 

 

Class activities:

·         Copy and paste the code in this Mouse and Lines program into the Processing environment to create and run your first interactive Processing program.

·         Read the descriptions about line( ), stroke( ), and background( )  to understand how they are used in the Mouse and Lines program. Modify the parameter values used where line( ), stroke( ), and background( ) in the program in different ways and run the program as experiments to see the effects.

·         Read the descriptions about rect( ), fill( ), and background( ) to understand how to draw rectangles. Instead of drawing lines in the Mouse and Lines program, modify the program to draw rectangles instead as experiments to see the effects.

·         Play with simple Processing examples such as: Continuous Lines, Bouncing Ball, and more.

·         Work on a program to draw the rows and columns of the board for tic-tac-toe (i.e. to create 3 rows and 3 columns) on a 900 by 900 canvas window by using 2D primitive functions such as rect( ), fill( ), and background( ). Alternatively you may also use line( ), stroke( ), and background( ) to accomplish the task.

 

 

Attendance Report #1 Due: Wednesday, Jan. 10

·         Download and fill out this attendance report. Submit your report under Canvas.

 

Lab assignment #1 Due: Wednesday, Jan. 17

·         Download and install Processing on your own computer: check it out from processing.org.

·         Based on what you have learned in the class, write a program to draw the rows and columns of the board for tic-tac-toe (i.e. to create 3 rows and 3 columns) on a 900 by 900 canvas window by using 2D primitive functions such as rect( ), fill( ), and background( ). Alternatively you may also use line( ), stroke( ), and background( ) to accomplish the task.

·         Submit your program on Canvas: Copy and paste your program into the text pane for this assignment under Canvas.

 

*************************************************************************************************

 

Week 2: Overview and Introduction 

 

Reading for Week #2: Tutorial on the coordinate system and basic shapes on processing.org

 

 

Concepts explored and revisited in the class

·         Program: a collection of instructions (Statements and comments) for the computer to behave

·         Function: a module in a program that can be called as needed for accomplishing some specific task

·         Predefined function: a function that is predefined and provided by Processing, e.g. point( ), line( ), rect( ), ellipse( ),   size( ), stroke( ), background( ), println( )

·         User-defined functions: Programmers can define their own functions. For example, you can define two fundamental functions setup( ) and  draw( ) to create interactive Processing programs.

·         Variables for the memory of information: Variables are symbolic names to refer to memory storage of information. For example, mouseX and mouseY are two predefined variables that keep track of the coordinates of the mouse position.

·         The coordinate system and basic shapes in Processing: Read and learn more from this tutorial.

 

New concepts to explore in the class

·         Predefined variables: They are names predefined by Processing to refer to memory storage of important information. For example, mouseX and mouseY are two predefined variables that keep track of the coordinates of the mouse position, and the information in these two variables allow your program to interact with use based where the user places the mouse on the canvas.

·         User-defined variables: You can also create your own user-defined variables to store information you want to keep track of. To define a variable of your own, you need to declare the “type” of the variable. Examine the float type and see the examples there regarding how you may define your own variables.

·         Arithmetic Operators: You can have the computer calculate new information by applying numerical operations (such as +, , *, / ) to the information stored in variables and numbers. The computer can calculate the result of any arithmetic expressions composed of numerical operators (such as +, -, *, / ) and numerical operand (such as numerical variables and numbers). For example,

400+0.01*( mouseX – mouseY)

is an arithmetic expression involving the operators: +, , * and the  operands: 400, 0.01, mouseX, and mouseY.

·         Storing information into user-defined variables: You can use the assignment operator =  to change the information stored in user-defined variables. On the right hand side of the assignment operator =, you need to provide an arithmetic expression as a formula. On the left hand side of the assignment operator = , you need to specify a variable as the destination for storing the result. The computer will then calculate the result of the formula and store it into the variable. For example, following the statement

y_Blue_Rect  = y_Blue_Rect +5;

the computer will calculate the result of y_Blue_Rect +5 first and then store the result into y_Blue_Rect to update the contents of y_Blue_Rect.

 

·         Relational Operators: You can have the computer test the information stored in variables, numbers, and arithmetic expressions using relational operators such as != (inequality) , < (less than) , <= (less than or equal to) , == (equality) , > (greater than) , >= (greater than or equal to) and get an answer of true or false.

·         if and else statements: You can use if and else statements to have the computer behave differently according to whether the test result of a relational operator is true or false.

 

 

Class activities:

·         Copy and paste the code in the following sample programs 1, 2, 3 one by one into the Processing environment and run them to see the dynamics created.

·         Go through each of the program to understand the concepts of variables, assignment operation, and if statements.

·         Work on a program to have two rectangles bouncing back and forth left to right and right to left in different speeds.

 

 

Attendance Report #2 Due: Wednesday, Jan. 17

·         Download and fill out this attendance report. Submit your report under Canvas.

 

Lab assignment #2 Due: Wednesday, Jan. 24

·         Based on what you have learned in the class , write a program to have two rectangles bouncing back and forth left to right and right to left in different speeds.

·         Submit your program on Canvas: Copy and paste your program into the text pane for this assignment under Canvas.

 

 

To the Top of the Page