Kojo Programming Quick-Ref: Lalit Pant
Kojo Programming Quick-Ref: Lalit Pant
Kojo Programming Quick-Ref: Lalit Pant
Lalit Pant
Kojo Programming Quick-Ref
For use with Kojo Version 2.4.03 or later
Lalit Pant
1 Introduction 3
1.1 Program building blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Fundamental Ideas in Programming . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3 Types, Objects, and Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2 Primitives 9
2.1 Turtle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2 Picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2.1 Picture Creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2.2 Picture Transformations . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2.3 Picture Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2.4 Picture Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.2.5 Picture game example . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.2.6 Picture based widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.3 Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.4 Collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.4.1 Seq . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.4.2 Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.4.3 Set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.4.4 Stack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.4.5 Queue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.5 Utility commands and functions . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3 Composition 25
3.1 Command composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.2 Function composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.3 Data composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
4 Abstraction 29
5 Selection 31
6 Conclusion 32
2
1 Introduction
This book is meant for a couple of different audiences:
• Children who have been using Kojo for a while, and want a concise reference to the
ideas, terminology, and useful features of Kojo.
• Adults who are familiar with programming, and want a quick way to get productive with
Kojo.
This book has many code listings. At the bottom of each listing, you will find a couple of links
– one to “Run code online” for that listing, and the other one to “View code online”. You
are encouraged to run the code for the listings to get the most out of the book. To do this
effectively, start up Kojo-Web as you start reading the book. From then on, every time you
click on a “Run code online” link for a listing, Kojo will quickly pop-up to the front, load the
code for the listing, and run it. You can then study the code and play with it inside Kojo. If
you are unable to run Kojo-Web for any reason, you can start up Kojo-Desktop, and make
use of the “View code online” links to easily copy and paste the code for the listings into Kojo.
If you are not online you can, of course, copy and paste the code directly from the book into
Kojo.
Commands, which let you take actions (like moving the turtle forward) or indirectly affect
future actions (like setting the pen color).
Actions are effects produced by your program that you can see, hear, etc. They result
in outputs from your program.
3
1.1. PROGRAM BUILDING BLOCKS CHAPTER 1. INTRODUCTION
Functions, which covert (or map) inputs to outputs – a function takes some values as
inputs and computes or returns an output value based on the inputs, e.g., sum(5,
7), and multiply(2, 9). Note that a command can also take inputs, but (unlike a
function) it does not return an output value that can be used within your program.
Instead, a command results in an action or an indirect affect on future actions – it
has a side-effect.
You invoke or call commands and functions to make use of them.
Operators, which are functions with names made up of special characters like +, *,
and !, e.g., 5 + 7, 2 * 9.
5 + 7
2 * 9
math.max(5, 10)
math.abs(-30)
Keyword-instructions, which help you to structure your program, e.g., by letting you com-
bine your commands, functions, and data values into higher level building blocks that
you can use in your programs (more on this in the next section). A keyword instruction
ultimately behaves like a command or an expression.
4
1.2. FUNDAMENTAL IDEAS IN PROGRAMMING CHAPTER 1. INTRODUCTION
multiply(2, 9)
// create instances of the new class
// and add them using the '+' function from the class
Rational(2, 3) + Rational(4, 5)
Impure-functions and queries, which are instructions that do not fit into the command or
expression mold:
Impure-functions are instructions that have a side-effect (like a command) and also
return a value (like a function), e.g., an instruction that draws a shape and also
returns it. You should avoid impure functions if you can.
Queries are functions that can return different values on different calls, e.g., turtle.position.
cleari()
// use the impure function
val pic = impure(40, 60)
Primitives, which are the building-blocks (commands and functions) already provided by
the environment. For example:
Commands – forward, right, setPenColor, etc.
Functions – Picture, trans, rot, scale, etc.
5
1.2. FUNDAMENTAL IDEAS IN PROGRAMMING CHAPTER 1. INTRODUCTION
// command looping
repeat(4) {
forward(10)
}
// function nesting
math.abs(math.min(20, -30))
Abstraction, which allows you to give names to your compositions, so that they become
available as bigger building-blocks (which can take part in further composition). Hid-
ing of internal (implementation) details is an important aspect of abstraction.
6
1.3. TYPES, OBJECTS, AND CLASSES CHAPTER 1. INTRODUCTION
multiply(2, 9)
Rational(2, 3) + Rational(4, 5)
Selection, which allows you to choose from a series of building blocks during the process of
composition.
7
1.3. TYPES, OBJECTS, AND CLASSES CHAPTER 1. INTRODUCTION
clear()
square(sum(40, 60))
Every data value in Kojo is an object. What’s an object? It’s a data value with commands
and functions attached to it. These commands and functions are called methods. You call
a method on an object like this – object.method(inputs). So, if you have a picture called
pic, you can call the translate method on it like this – pic.translate(10, 20). The methods
available on an object are determined by the type of the object; a method on an object works
within the context of that object.
Kojo has a lot of predefined types (some of these are described in Section 2.3 on page 18).
You can create new types using the class keyword (as you saw in Listing 1.6 on page 6).
8
2 Primitives
Note that Kojo includes the Java and Scala runtime environments. Anything
that is part of these environments is available out of the box in Kojo.
2.1 Turtle
Command Description
clear() Clears the turtle canvas, and brings the turtle to the center of
the canvas.
right(angle) Turns the turtle right (clockwise) through the given angle in
degrees.
right(angle, radius) Turns the turtle right (clockwise) through the given angle in
degrees, along the arc of a circle with the given radius.
setPosition(x, y) Places the turtle at the point (x, y) without drawing a line. The
turtle’s heading is not changed.
setAnimationDelay(delay) Sets the turtle’s speed. The specified delay is the amount of time
(in milliseconds) taken by the turtle to move through a distance
of one hundred steps. The default delay is 1000 milliseconds (or
1 second).
setPenColor(color) Specifies the color of the pen that the turtle draws with.
9
2.1. TURTLE CHAPTER 2. PRIMITIVES
Command Description
setPenThickness(size) Specifies the width of the pen that the turtle draws with.
setFillColor(color) Specifies the fill color of the figures drawn by the turtle.
setBackground(color) Sets the canvas background to the specified color. You can use
predefined colors for setting the background, or you can create
your own colors using the Color, ColorHSB, and ColorG
functions.
penUp() Pulls the turtle’s pen up, and prevents it from drawing lines as it
moves.
penDown() Pushes the turtle’s pen down, and makes it draw lines as it
moves. The turtle’s pen is down by default.
hop(steps) Moves the turtle forward by the given number of steps with the
pen up, so that no line is drawn. The pen is put down after the
hop.
cleari() Clears the turtle canvas and makes the turtle invisible.
savePosHe() Saves the turtle’s current position and heading, so that they can
easily be restored later with a restorePosHe().
saveStyle() Saves the turtle’s current style, so that it can easily be restored
later with restoreStyle() . The turtle’s style includes: pen
color, pen thickness, fill color, pen font, and pen up/down state
write(obj) Makes the turtle write the specified object as a string at its
current location.
setPenFontSize(n) Specifies the font size of the pen that the turtle writes with.
10
2.2. PICTURE CHAPTER 2. PRIMITIVES
2.2 Picture
2.2.1 Picture Creation
These functions create a picture. The created picture needs to be drawn (via the draw(picture)
command) for it to become visible in the canvas.
Function Description
Picture { drawingCode } Makes a picture out of the given turtle drawing code.
PicShape.rect(height, Creates a picture of a rectangle with the given height and width.
width)
PicShape.arc(radius) Creates a picture of an arc with the given radius and angle.
PicShape.text(content, Creates a picture out of the given text with the given font-size.
size)
PicShape.image(fileName) Creates a picture out of an image from the file with the given
name.
11
2.2. PICTURE CHAPTER 2. PRIMITIVES
Function Description
trans(x, y) -> picture Creates a new picture by translating the given picture by the
given x and y values.
offset(x, y) -> picture Creates a new picture by offsetting the given picture by the
given x and y values with respect to the global (canvas)
coordinate system.
rot(angle) -> picture Creates a new picture by rotating the given picture by the given
angle.
scale(factor) -> Creates a new picture by scaling the given picture by the given
picture scaling factor(s).
scale(xf, yf) -> picture
penColor(color) -> Creates a new picture by setting the pen color for the given
picture picture to the given color.
fillColor(color) -> Creates a new picture by filling the given picture with the given
picture color.
penWidth(thickness) -> Creates a new picture by setting the pen width for the given
picture picture to the given thickness.
hue(factor) -> picture Creates a new picture by changing the hue of the given picture’s
fill color by the given factor. The factor needs to be between -1
and 1.
sat(factor) -> picture Creates a new picture by changing the saturation of the given
picture’s fill color by the given factor. The factor needs to be
between -1 and 1.
brit(factor) -> picture Creates a new picture by changing the brightness of the given
picture’s fill color by the given factor. The factor needs to be
between -1 and 1.
opac(factor) -> picture Creates a new picture by changing the opacity of the given
picture by the given factor.
axes -> picture Creates a new picture by turning on the local axes for the given
picture (to help during picture construction).
12
2.2. PICTURE CHAPTER 2. PRIMITIVES
Method Description
picture.offset(x, y) Offsets the given picture by the given x and y values with
respect to its current position in the global (canvas)
coordinate system.
picture.setPosition(x, y) Sets the absolute position of the given picture with respect
to the global (canvas) coordinate system to the given x and
y values.
picture.rotate(angle) Rotates the given picture by the given angle in its local
coordinate system.
picture.setHeading(angle) Sets the absolute rotation of the given picture with respect
to the global (canvas) coordinate system to the given angle.
picture.scale(factor) Scales the given picture by the given factor(s) in its local
picture.scale(xf, yf) coordinate system.
picture.setScaleFactor(xf, Sets the absolute scale of the given picture with respect to
yf) the global (canvas) coordinate system to the given xf and yf
values.
picture.setPenColor(color) Sets the pen color of the given picture to the given color.
picture.setFillColor(color) Sets the fill color of the given picture to the given color.
picture.setPenThickness(t) Sets the pen thickness of the given picture to the given
thickness.
picture.hueMod(factor) Modifies the hue of the given picture’s fill color by the given
factor. The factor needs to be between -1 and 1.
13
2.2. PICTURE CHAPTER 2. PRIMITIVES
Method Description
picture.setOpacity(o) Sets the opacity of the given picture to the given value.
picture.erase() Erases the given picture and removes it from the canvas.
picture.collisions(others) Returns the set of pictures from the supplied set of other
pictures with which the given picture is in collision.
14
2.2. PICTURE CHAPTER 2. PRIMITIVES
Command Description
picture.react { self => The code supplied to react is called many times per second
// reaction code to allow the picture to take part in an animation. The code
} can use the isKeyPressed(keyCode) function to make the
animation interactive.
p2.onMouseClick { (x, y) => The supplied code is called, with the current mouse position
// on click code as input, when the mouse is clicked inside the picture.
}
p2.onMouseDrag { (x, y) => The supplied code is called, with the current mouse position
// on drag code as input, when the mouse is dragged inside the picture.
}
p2.onMouseEnter { (x, y) => The supplied code is called, with the current mouse
// on enter code position as input, when the mouse enters the picture.
}
p2.onMouseExit { (x, y) => The supplied code is called, with the current mouse
// on exit code position as input, when the mouse exits the picture.
}
p2.onMouseMove { (x, y) => The suppled code is called, with the current mouse position
// on move code as input, when the mouse is clicked.
}
p2.onMousePress { (x, y) => The supplied code is called, with the current mouse position
// on press code as input, when the mouse is pressed inside the picture.
}
p2.onMouseRelease { (x, y) The supplied code is called, with the current mouse position
=> as input, when the mouse is released inside the picture.
// on release code
}
15
2.2. PICTURE CHAPTER 2. PRIMITIVES
cleari()
draw(p1)
draw(walls)
activateCanvas()
16
2.2. PICTURE CHAPTER 2. PRIMITIVES
Button(text) { Creates a Button with the given text and the given action code.
// on click code The action code is called whenever the button is clicked. From
} within the action code, you can read the value of any other
widget by using that widget’s value function.
Slider(min, max, Creates a slider that goes from min to max in increments of step,
current, step) with current as the initial value.
val instructions =
<html>
To run the example, specify the required <br/>
values in the fields below, and click on the <br/>
<strong><em>Make + animate</em></strong> button at the bottom.
</html>.toString
17
2.3. TYPES CHAPTER 2. PRIMITIVES
2.3 Types
As mentioned earlier, Kojo includes the Java and Scala runtime environments.
Any type available in these environments can be used in Kojo via the import
keyword.
It’s useful to know about the following predefined types within Kojo:
Numbers, which are available in a few different types:
Int – integer, e.g., -3, -2, -1, 0, 1, 2, 3, etc. The maximum integer value (based on the
fact that integers are stored in 32 bits and are signed) is 2147483647. If you want
an integral number bigger than that, you will need to use a long.
18
2.3. TYPES CHAPTER 2. PRIMITIVES
Long – long integer, e.g., 2222222222l (note the l at the end that tells Kojo that this is
a long integer)
Double – double precision decimal fraction, e.g., 9.5
Rational – rational numbers or fractions. You can create rationals in a couple of dif-
ferent ways:
Literal-values, which are built using r prefixed strings, e.g., r''2/3'' and r''5/7''.
Rational-conversions, using the r function available within other numbers, e.g.,
1.r, 3.r, etc. This works well with the fact that once you have a rational number
in an arithmetic expression, it lifts the other numbers in the expression to
make them rationals, resulting in a rational result for the whole expression,
e.g., 2.r / 3, 3.r / 4 + 5.r / 6, etc.
// Part 2 - Rationals
// In additional to the usual operators,
// ** (exponentiation) is also available
val a = r"9/10"
val b = a * r"10/9"
val x = 3.r / 4 + 4.r / 5
val y = 1.r / 4 + 1.r / 8 * 2 * 3
2.r / 4 ** 2
8.r ** (1.r / 3)
val z = x.toDouble
Booleans, which represent truth and falsity in programs, and are used within conditions.
You can create booleans in a few different ways:
Literal-values – true and false.
Comparison-operators like ==, <, <=, >, and >= working on two values that support
the operator, e.g., 2 < 3, 4 == 5, blue == red, etc.
Colors, which are used for setting background colors, and the pen and fill colors of shapes.
Functions for working with colors are described in Section 2.5 on page 23
19
2.3. TYPES CHAPTER 2. PRIMITIVES
Strings, which represent language text, and are useful for input to and output from Kojo.
You can create strings in few different ways:
Literal-values – text enclosed within double quotes, e.g., ''this is a literal string''.
Multi-line-literals – text enclosed within trip quotes (see Listing 2.4 for an example).
Interpolated-strings – text enclosed within double or triple quotes that can contain
external values, e.g., s''this string has $external data''.
HTML, which can be used to create styled text – for use within Label widgets.
Listing 2.4: Ranges, Booleans, Strings, and HTML
// #worksheet
// ranges, for use with loops, for comprehensions, etc.
1 to 10
4 to 20 by 2
// booleans
val b1 = true
val b2 = false
// the operators && (and), || (or), and !(not) are available
b1 && b2
b1 || b2
!b2
val n = 10
(n > 1) && (n < 15)
(n > 1) || (n < 5)
(n > 1) && (n < 5)
// strings
val string1 = "some text"
val string2 = """Line 1
Line2
Line3
"""
val x = 30
val y = 40
val string3 = s"the value of x is $x"
val string4 = s"""the value of y is $y
and the sum of x and y is ${x + y}
"""
// html/xml
val html1 = <html>
This is some <strong>html</strong> text
20
2.4. COLLECTIONS CHAPTER 2. PRIMITIVES
</html>
Pictures, which are used for making composable and transformable shapes that can be ani-
mated. Functions for working with pictures are described in Section 2.2 on page 11
Widgets, like text fields, buttons, drop-downs, etc., which are used to obtain input from the
user. Widgets are further described in Section 2.2.6 on page 17.
Collections, which let you store data values in different ways (sequences, sets, maps, etc.)
for future processing. Collections are further described in the next section.
Options, which let you handle situations where data might be missing, e.g., finding an ele-
ment in a collection that meets a certain criteria. Options allow two possible types of
values: None and Some(data).
2.4 Collections
Detailed information on Scala collections is available in the Scala collections guide. These
collections are available within Kojo, and can be used directly as described in the guide. Some
of the useful collections are described here.
2.4.1 Seq
A Seq represents a sequence of elements, each of which has a fixed index position (starting
from 0) inside the sequence.
2.4.2 Map
A Map represents a mapping from keys to values. It’s easy and efficient to look up a value for
a key.
2.4.3 Set
A set is a collection of elements that contains no duplicates. It’s easy and efficient to de-
termine if an element is present in a set. Sets support the standard set operations: union,
intersection, and difference.
21
2.4. COLLECTIONS CHAPTER 2. PRIMITIVES
// Maps
val ages = Map(
"rahul" -> 11,
"john" -> 10,
"anusha" -> 12,
"hannah" -> 11
)
ages("rahul")
ages.get("sammy")
// Sets
val colors = Set(blue, green, red)
colors.contains(blue)
colors.contains(yellow)
22
2.5. UTILITY COMMANDS AND FUNCTIONS CHAPTER 2. PRIMITIVES
2.4.4 Stack
A stack is a LIFO (last in first out) sequence. You push elements on the top of the stack, and
pop elements off the top. You can peek at the top element.
2.4.5 Queue
A queue is a FIFO (first in first out) sequence. You enqueue elements at the back of the queue,
and dequeue elements from the front. You can peek at the front element.
val q = Queue.empty[Int]
q.enqueue(5)
q.enqueue(10)
q.front
val qelem = q.dequeue
q
Function Description
23
2.5. UTILITY COMMANDS AND FUNCTIONS CHAPTER 2. PRIMITIVES
Function Description
Color(red, green, blue, Creates a new color based on the given red, green, blue, and
opacity) (optional) opacity values. This color can be used with
commands like setPenColor, etc.
hueMod(color, factor) Computes and returns a new color made by changing the hue of
the given color by the given factor. The factor needs to be
between -1 and 1.
satMod(color, factor) Computes and returns a new color made by changing the
saturation of the given color by the given factor. The factor
needs to be between -1 and 1.
britMod(color, factor) Computes and returns a new color made by changing the
brightness of the given color by the given factor. The factor
needs to be between -1 and 1.
canvasBounds Returns the bounds of the canvas: the x and y coordinates of its
bottom left point, and its width and height.
textExtent(text, Computes and returns the size/extent of the given text fragment
fontSize) for the given font size. The extent is returned as a bounding
rectangle with the bottom left and the top right points.
image(height, width) Creates an image with the given height and width. This image is
blank to begin with. You can set the individual pixels in the
image by using the setImagePixel() command. The image can
then be used as a turtle costume, or it can be converted to a
Picture via the PicShape.image() function.
setImagePixel(img, x, Sets the pixel at the given (x, y) location in the given image to
y, color) the given color.
24
3 Composition
Composition allows you to combine primitives (and higher level building-blocks) to do useful
things. The following are some of the forms of composition available within Kojo:
Recursion allows you, while you are defining a command, to get it to call itself.
// a loop
repeat(4) {
forward(10)
}
repeatFor(2 to 10 by 2) { i =>
println(i)
}
25
3.2. FUNCTION COMPOSITION CHAPTER 3. COMPOSITION
// recursion
def pattern(n: Int) {
if (n < 10) {
forward(n)
}
else {
forward(n)
right()
pattern(n - 10)
}
}
clear()
pattern(100)
Recursion allows you, while you are defining a function, to get it to call itself.
For-comprehensions give you a compact notation for transforming collections of data into
other collections. This is based on nested and chained calls to certain well defined
methods within the collection types. See the Programming in Scala book for more
details.
26
3.3. DATA COMPOSITION CHAPTER 3. COMPOSITION
// for comprehensions
for (i <- 1 to 5) yield (i * 2)
Collections – these are predefine classes/types that let you put your data inside them. Col-
lections are described further in Section 2.4 on page 21.
Classes – you can define your own classes that combine data values. This is described further
in Section 4 on page 29
27
3.3. DATA COMPOSITION CHAPTER 3. COMPOSITION
28
4 Abstraction
Abstraction allows you to give names to your compositions. These named elements then
become available within your program – for direct use and as building-blocks for further
composition. Hiding of internal (implementation) details is an important aspect of abstrac-
tion; while using an abstraction, you can focus on what it does without worrying about how it
does it. Abstraction within Kojo is done with the help of the following keyword instructions:
class, which lets you create a new class (and type). Classes help you to compose data values,
along with related commands and functions, into named entities that you can use in
your programs. Note that there are two versions of the class keyword – just class by
29
CHAPTER 4. ABSTRACTION
itself, and case class. The use of case classes is encourage in Kojo, as they are simpler
to use and more powerful. See the Programming in Scala book for more details.
trait, which lets you create new traits. Traits help you to separate the interfaces of abstrac-
tions from their implementations. They also help with mixin composition, rich inter-
faces, class decoration, etc. See the Programming in Scala book for more details.
implicit, which gives you a flexible and controlled way to extend software. See the Program-
ming in Scala book for more details.
30
5 Selection
Selection allows you to choose from a set of alternative instructions as you write your pro-
grams. Selection is based on the following constructs:
If-else allows you to choose between alternatives based on boolean conditions. This works
well for a few few alternatives and simple conditions
Pattern-matching also allows you to choose between alternatives based on boolean condi-
tions. But the conditions can be expressed in much more powerful ways (than if-else).
Pattern matching works well with a large number of alternatives and complex condi-
tions.
31
6 Conclusion
This book outlines some core ideas about programming used within Kojo, and provides a
reference to commonly used commands, functions, and keywords. It provides examples for
all the ideas discussed.
Kojo benefits tremendously from being built on the foundations of the Java and Scala plat-
forms, and from using Scala as its programming language. It benefits due to the rich func-
tionality of these platforms, which is available out of the box in Kojo. It also benefits from
all the documentation and books out there that describe the Scala language and the Java
libraries. The knowledge available in this reading material can be directly used within Kojo:
• You can read more about the Scala language in the Programming in Scala book.
• You can find more information about the Scala API in the official Scaladoc.
• You can find more information about the Java API in the official Javadoc.
If you have any comments on the book, don’t hesitate to write to me at [email protected].
32