Programming for Artists

1


Lesson1
Programming for Artists Beginning to program
2
Types of knowledge   Declarative What   Imperati
ve How (see the Babylonian Algorithm example,
2000 BCE approx). This class will be dealing
with imperative programming. We will be
designing algorithms. In other words, telling
the computer how to solve problems.  
3
Algorithms
An algorithm is a specific set of instructions
for carrying out a procedure or solving a
problem, usually with the requirement that the
procedure terminate at some point. The word
"algorithm" is a distortion of al-Khwarizmi, a
Persian mathematician who wrote an influential
treatise about algebraic methods. The process of
applying an algorithm to an input to obtain an
output is called a computation. Before the 1920s
'Computers' were predominantly women clerks
paid to compute calculations (see Katherine. N
Hayles 'My Mother was a Computer, Digital
Subjects and Literary Texts', 2005, University
of Chicago Press). Computing is a natural science
that underpins many other disciplines such as
biology, chemistry and physics. To study the
processes of computation we look at The process
of calculating or determining something through
logical, mathematical and interactive
methods. Computability - discovering what can or
cannot be computed - not everything can be
computed. Computing - studying natural or
artificial information processes MORE LATER
4
You will learn computational problem solving by
actually coding, by breaking problems down into
manageable units or modules. We'll start doing
that now..
5
First Processing is a 'Turing Complete' language

• There is no perfect, cure-all, programming
  language
• By learning Processing and Java you will gain
  insight into the essential building blocks of all
  the most commonly used languages, including PHP,
  C, Javascript, Actionscript, Perl etc etc.
• These classes are foundations for all the main
  languages you could use, there are only slight
  syntactical differences between most of them.
  Think of the structures, forms and processes you
  are learning more than the syntax involved in
  writing each line of code, these structures will
  help you write code in many, many languages. You
  may stick to Processing, (many projects for
  galleries, museums etc are done in Processing
  alone), but generally Each project you do will be
  suited to different configurations. But whatever
  language you use, learning these foundations will
  give you greater insight into working with code
  and computers.
• Turing Complete ' Some form of reading and
  writing memory (reading to/writing from the tape)
• Some form of branching (moving the machine
  to the forward along the tape, skipping over
  unwanted symbols)
• Some form of infinite looping capability,
  either through recursion or explicit loops
  (moving the machine back along the tape and
  restarting execution there)'
• http//www.quora.com/Programming-Languages/What
  -does-it-mean-to-say-that-a-programming-language-i
  s-Turing-Complete

6
Processing is a 'derived' language

• It is derived from Java
• We'll be looking at both languages
• Quick intro to the Processing IDE
• And BlueJ (an IDE for Java)
• IDE 'Integrated Development Environment'

7
  A very basic Processing program size(200,
200) background(255) noStroke() fill(255, 204,
0) rect(30, 20, 50, 50)
Exercise 1. Write the above code in the
Processing console and then press
8
The Processing IDE
run
run
9
The Processing console menu   RunCompiles the
code, opens a display window, and runs the
program inside.   StopTerminates a running
program, but does not close the display
window.   NewCreates a new sketch
(project).   OpenProvides a menu with options to
open files from the sketchbook, open an example,
or open a sketch from anywhere on your computer
or network.   SaveSaves the current sketch to
its current location. If you want to give the
sketch a different name, select Save As from
the File menu.   ExportExports the current
sketch as a Java Applet embedded in an HTML file.
The folder containing the files is opened. Click
on the index.html file to load the software in
the computer's default web browser.
You will need to do this with your first labs
(more about that later)
10
  If you get an Error message it will probably be
because you have missed out a comma, a bracket or
written something in the wrong case. The IDE will
try to identify the error, but it can only guess
go over your code very carefully to spot the
error and try to compile it again. Now add this
line print(hello world) Then this line of
code print(hello world again) Now add this
line println(hello world once more) What do
you observe?
11
Introducing the Zoog, a great example from Daniel
Shiffmans Learning Processing write this code,
add some colours! Change the background...
12
This is the proper way toorganise your code,
(well cover this, why, later)
13
Object oriented version of the bug program, we
will look at OOP a few slides on.
14
Algorithms/incremental development

• Before moving onto Object Oriented Programming,
  well briefly look at algorithms and the
  philosophy of incremental development, or
  breaking processes down into small parts, this
  applies to all OO languages. Break a problem down
  into small sections (the logically smallest
  sections) and approach slowly one by one, rather
  than trying to do everything all at once. This
  helps for debugging, refactoring, changing and
  developing your programs.
• REMINDER An algorithm is a sequential list of
  instructions for a computer to solve a problem, a
  bit like a recipe or directions, these
  instructions are often based on conditions if
  the road is clear of traffic cross it, else wait
  until the road is clear, we can also tell the
  program to repeat instructions or loop
• Walk forward, repeat for 50 metres.

15

• A simplified description of programming could be
• 1.Develop an idea
• 2.Break it down into manageable descriptions
  (could be described in simplified everyday
  language or pseudo code)
• 3.Write real code for those descriptions, in
  other words algorithms
• More complex concepts/steps
• 4. Make algorithms into classes (I.e make them
  object oriented)
• 5. Integrate them into one program or what we
  might think of as a large algorithm

16
    Object Oriented Programming  or OOPS run
example manyZoogs and example 9.1 in the IDE
By making the Zoog code object oriented I can
create hundreds of Zoogs without having to write
the same code hundreds of times I just re-use
it. So an object (or class) means I can
effortlessly re-use my code, and as we will see
later on in the course, through inheritance, I
can vary the code for new purposes very easily,
such as having a hairy Zoog, or a Zoog that moves
in a new way. I don't have to re-write the core
code over and over again.
17
    Object Oriented Programming  or OOPS
The previous code made the JitterBug and Zoog
into objects, but what Is an Object?   Objects
are key to understanding object-oriented
technology. Look around right now and you'll find
many examples of real-world objects your dog,
your desk, your television set, your bicycle.
Real-world objects share two characteristics
They all have state and behaviour. Dogs have
state (name, colour, breed, hungry) and behaviour
(barking, fetching, wagging tail). Bicycles
also have state (gear, speed, colour) and
behaviour (changing gear, changing speed).
Identifying the state and behaviour for
real-world objects is a great way to begin
thinking in terms of object-oriented programming.
   
18

• Take a minute right now to observe the
  real-world objects that are in your immediate
  area. For each object that you see, ask yourself
  two questions "What possible states can this
  object be in?" and "What possible behaviour can
  this object perform?".
• Make sure to write down your observations. As
  you do, you'll notice that real-world objects
  vary in complexity your desktop lamp may have
  only two possible states (on and off) and two
  possible behaviours (turn on, turn off), but your
  desktop radio might have additional states (on,
  off, current volume, current station) and
  behaviour (turn on, turn off, increase volume,
  decrease volume, seek, scan, and tune).
• You may also notice that some objects, in turn,
  will also contain other objects. These real-world
  observations all translate into the world of
  object-oriented programming.
•  

Fromhttp//java.sun.com/docs/books/tutorial/java/c
oncepts/object.html
19
Conceptual model of a software object  
Consider a bicycle, for example
0 mph!
Change speed
A bicycle modelled as a software object.
20
  By attributing state (current speed, colour,
current gear) and providing methods for changing
that state, the object remains in control of how
the outside world is allowed to use it. For
example, if the bicycle only has 6 gears, a
method to change gears could reject any value
that is less than 1 or greater than 6. Bundling
code into individual software objects provides a
number of benefits, including   Modularity The
source code for an object can be written and
maintained independently of the source code for
other objects. Once created, an object can be
easily passed around inside the system.   .  
.
21
Information-hiding By interacting only with an
object's methods, the details of its internal
implementation remain hidden from the outside
world.   Code re-use If an object already
exists (perhaps written by another software
developer), you can use that object in your
program. This allows specialists to
implement/test/debug complex, task-specific
objects, which you can then trust to run in your
own code
22
Pluggability and debugging ease If a particular
object turns out to be problematic, you can
simply remove it from your application and plug
in a different object as its replacement. This is
analogous to fixing mechanical problems in the
real world. If a bolt breaks, you replace it, not
the entire machine. .
23
What Is a Class?
In the real world, you'll often find many
individual objects all of the same kind. There
may be thousands of other bicycles in existence,
all of the same make and model. Each bicycle was
built from the same set of blueprints and
therefore contains the same components. In
object-oriented terms, we say that your bicycle
is an instance of the class of objects known as
bicycles. A class is the blueprint from which
individual objects are created.
 
The following Bicycle class is one possible
implementation of a bicycle
24
//simple example in PROCESSING of instantiating
objects from a Bicycle class void
setup() size(500, 500) background(255, 234,
23) void draw() Bicycle bike1 new
Bicycle()//instantiate a Bicycle object called
'bike1' // Bicycle bike2 new Bicycle()
bike1.drawBike(34, 34, 50, 255, 0, 0) //call or
invoke drawBike() method on bike1 object //
bike2.drawBike(154, 134, 150, 0, 230,
0) //here is a simple Bicycle class class
Bicycle / method to draw a bike, x
and y coordinates, siz diameter of wheels,
int c1, c2, c3 are parameters for the colours
in the RGB mode, ie red, green blue channels
/ void drawBike(int x, int y, int siz,
int c1, int c2, int c3) //colour of
wheels fill(c1, c2, c3) //location and
size of wheels ellipse(x, y, siz, siz)
/ Draw second wheel Here I have made sure
the second wheel is at a nice distance from the
first wheel ie the diameter of the first
wheel plus a twentieth of the diameter to make a
bit of a gap / ellipse(xsiz siz/20,
y, siz, siz) //end of drawBike()
method //end of Bicycle class
25
You can do a lot better than this!!! add more
bicyles of different sizes and at different
locations
26

• We will go back to these and other examples in
  detail next week

27
 


 
Lab 1 consists of two tasks a) Draw a
creature in Processing b) Create a data
visualisation (can be any type of data) Please
do both by next Tuesday Look back at all the
code examples discussed during the lecture,
including the last OOP examples. Typing these
yourself and making mistakes will teach you how
to use correct syntax and how to interpret error
messages from the IDE.   Draw a simple creature
in Processing. Explore the Processing sketches to
get different ideas. Get a screen shot (or look
up the save() method) of your finished
creature/visualisation into Photoshop (or Gimp)
and make it into a 150 pixel by 150 pixel gif
that we can upload onto the course web site. It
will be used as a link to all the work you do on
this module. For the second part of the lab
create a data visualisation in Processing, it can
be personal data or any other significant data,
also get a screen grab of this (150 pixels by
150) THIS LAB SHOULD BE DONE BY THE NEXT CLASS,
every week this term you will have a weekly lab
to do.
 
Export your work as Applets
28
Very Simple data visualisation example/
Simple example of visualising words - find their
lengths using .length() method then put that
value into various parameters. Next step
integrate with text input example so users can
easily choose words? Got to Processing reference
and find out about other parameters for Strings
such as finding initials etc ///declare and
assign value to two String variablesString str1
"Visualisation for artists "String str2
"Programming for Artists"void setup()
size(300, 300) background(255)void
draw() int l1 str1.length() //find the
length of the string l1 int l2
str2.length() strokeWeight(l2/2)//thickness
of stroke around shape stroke(l220, l220,
l2) //colour of that stroke //println(l1
"" l2) // Prints '46' fill(l110, l210,
l110)//colour to fill ellipse with
ellipse(width/2, height/2, l110, l110)//X, Y,
width, height
29
A stupidly complex data visualisation
example?!The code is on my memory stickIt
represents my name, age and height but changes
over time.Probably breaks all the reasonable
rules ofclear data visualisation!!
30
Use Processings reference pages to help
you,learning how to look up and use ready made
methods (as well as making your own) is a really
important skill in programming
31
Click on Extended (a-z)
32
In the reference look at these methodsthey will
help you with lab 1You can copy and paste the
code into Processing to see how it works

• ellipse()
• background()
• ellipseMode()
• rect()
• rectMode()
• line()
• point()
• fill()
• size()
• save()

33
Also look at the many good examples
34
Investigate Processings Coordinate system(we
will also go over it later)

• http//www.processing.org/learning/tutorials/basic
  s/

35
Each of you should publish your lab work every
week, I can show you how if you arent sure
36

• That way I can give you feedback
• And your work will also be accessible to the
  external examiners. The labs are marked at the
  end of term but Id like to give you feedback
  every week - I can only do this if you do the
  work every week and then send me a link to it
  when you have done it.

37

• Tutorials
• I am happy to be here for tutorials between 9 -10
  am on Saturday mornings. Let me know by email if
  you would like a tutorial then,

38
Next week more on OOP and Variables
39
http//www.doc.gold.ac.uk/ma501ed/resources.html
Find the ppts and more resources at this url
40
Things you should know
command line execution This is a way of running
code outside of an IDE In windows, go to start,
left click, then press run if it isnt there
already write cmd (for command), then press ok.
This brings up a command console. If your file
is in a folder called myJava in c you would
locate it by writing cd c\myJava then press
return, then write javac Hello.java this
will create the bytecode that the java virtual
machine can understand. A file called Hello.class
will appear in the folder, now we can run it By
writing java Hello
41
If it doesnt work, your computer probably
doesnt know the right classpath, try this Type
in java version
java -version tells you what version of java
you have, (maybe you dont have it installed, in
which case you have to go here and download the
latest version http//developers.sun.com/downlo
ads/ )
42
  NB Applets are compiled and ran in a different
way through the Command Line. To view applets you
first compile the applet , for example if my

applet was called SimpleApplet I would compile it
with this command
  javac SimpleApplet.java ie The same as an
application But then you need to write an html
page for it, for example Here is the HTML file
for SimpleApplet, lets call it simple.html
  To run the applet in the browser, you load the
HTML file. To run the applet in appletviewer with
an HTML file named for example, simple.html,
you would write this command appletviewer
simple.html
43
Problem Solving Some computer programming courses
deal with problem solving for weeks before any
coding is done. We haven't got time for that
approach, but there is a good reason for it. In
this class understanding a problem means turning
an ill-defined problem into a well-defined
problem stated clearly and unambiguously that's
what computers need in order to solve
problems. Before we do anything we need to
understand the Computability of a problem -
discovering what can or cannot be computed not
everything can be computed.
44

• Stages of Problem Solving the type of stuff you
  learn for A Level Computing/ first year BSC
  Computer Science
• Understand the problem.
• Knowing the level of thinking required to solving
  the problem and having an idea of a solution
  which is relevant to the problem.
• Define the problem given(s), goal, ownership,
  resources and constraints
• Given(s) the initial situation
• Goal Desired target situation
• Ownership who does what
• Resources and constraints tools, knowledge,
  skills, materials and rules, regulations,
  guidelines, boundaries, timings
• Define boundaries.
• Understanding the limits to coming up with a
  solution and knowing what can and cannot be done
  through lateral thinking. These boundaries may
  also be known as a type of contraint.
• Plan solution.
• From the knowledge you've gained about the goals
  and boundaries, come up with a well thought-out
  strategy to solving the problem using the
  resources that are available.
• Check solution.Checking whether the solution
  actually solves the given problem. If it does,
  how could this be useful in solving other
  problems? Otherwise, if the problem wasn't
  solved, go back to your definition of the problem
  or planned solution and analyse your steps. Is it
  possible that you just don't have the skill or
  resources to solve such a problem....

45
 A first Program in Java   BlueJ is an IDE for
writing and executing Java code. Having an IDE
makes writing code easier and provides debugging,
documentation and various other tools. Other Java
IDEs are Eclipse and JPadPro. BlueJ is designed
for teaching.
  YOUR FIRST JAVA PROGRAM  
 A timeless classic, the legendary Hello class
46
WRITE THE CODE  
  public class Hello public static void main
(String args) System.out.println("Hello
World")
47
COMPILING THE CODE
(making it into byte code instead of text)
Now you can compile your code, click on compile
and wait for the word done to appear at the
bottom left of the console.
48
Now it is ready to execute this means you can
actually RUN THE CODE   1. Right click on pink
hello box
2. left click on void main(Stringargs)
3. left click on ok
49
  The output of your code is displayed in the
BlueJ terminal window
Amazing or what?
50
This will make sense over the next few weeks
51

• A non-visual example of a bicycle class in pure
  Java
• (we'll do visual things in Java later on in the
  course)

52
(No Transcript)
53
The syntax of the Java programming language may
look new to you, but the design of this class is
based on the previous discussion of bicycle
objects. The fields speed, size and gear
represent the object's state, and the methods
speedUp(), changeGear(), changeColor()
applyBrakes() define its interaction with the
outside world.
You may have noticed that the Bicycle class does
not contain a main method. That's because it's
not a complete application it's just the
blueprint for bicycles that might be used in an
application. The responsibility of creating and
using new Bicycle objects belongs to some other
class in your application.
 
Here's a BicycleDemo class that creates two
separate Bicycle objects and invokes their
methods
54
(No Transcript)
55
My email address (Eleanor Dare)

• e.dare_at_gold.ac.uk
• Programming For Artists website
• http//www.doc.gold.ac.uk/ma501ed/pfa.html

56
(No Transcript)