I’m pleased to announce a new release of Kojo. The following are the highlights (for Kojo and the activities around it) since the last announcement:

Support for .with and .thats transforms for Pictures

Pictures in Kojo can now be transformed using method based .withXx and .thatsXx transforms. So the following program using the earlier object-functional transforms:

cleari()
 
val pic =
  trans(100, 0) *
    rot(45) *
    trans(50, 0) ->
    Picture.rectangle(100, 50)
 
draw(pic)

now becomes:

cleari()
 
val pic = Picture.rectangle(100, 50)
  .withTranslation(50, 0)
  .thatsRotated(45)
  .withTranslation(100, 0)
 
draw(pic)

The available method-functional transforms can be seen via code completion on any picture pic by typing pic.with + Ctrl+Space or pic.thats + Ctrl+Space.

The .withXx and the corresponding .thatXx transforms do the same thing, and can be used interchangeably to make your code nicely readable – the way you like it.

Both the earlier object-functional and the new method-functional transform syntaxes are fully supported. You are free to pick and choose whatever works best for you.

Here’s a larger program that shows the new transforms in action:

cleari()
 
val cb = canvasBounds
val bg = cm.linearGradient(cb.x, cb.y, cm.black, cb.x + cb.width, cb.y + cb.height, cm.gray, false)
setBackground(bg)
 
val fillc = cm.linearGradient(0, 0, ColorMaker.hsl(40, 1.00, 0.40),  0, 150, cm.yellow, false)
 
def halfPetal = Picture {
  left(45)
  right(90, 120)
}
 
def petal = picStack(halfPetal, halfPetal.withFlippedX)
  .withFillColor(fillc)
  .withPenColor(cm.darkGoldenrod)
  .withPenThickness(1)
 
val nump = 7
 
def flower(petals: Int): Picture = {
  if (petals == 1)
    petal
  else
    picStack(petal, flower(petals - 1).thatsRotated(360.0 / nump))
}
 
draw(flower(nump))

And here’s the output of the program:

Support for declarative animations

Kojo now has support for animations based on Transitions and Timelines. Here’s some sample code for a Transition based animation:

cleari()
drawStage(white)
 
// pic to be animated
def pic = Picture.rectangle(100, 50)
 
// the properties within the animation state
def xProp(s: Seq[Double]) = s(0)
def yProp(s: Seq[Double]) = s(1)
def hueProp(s: Seq[Double]) = s(2)
def scaleProp(s: Seq[Double]) = s(3)
 
// makes a pic for the given animation state
def makePic(s: Seq[Double]) = {
    fillColor(cm.hsl(hueProp(s), 1, 0.5)) *
        trans(xProp(s), yProp(s)) *
        scale(scaleProp(s)) ->
        pic
}
 
// animation definition
val anim = Transition(
    2, // duration
    Seq(0, 100, 0, 1), // initial state
    Seq(300, 50, 240, 0.7), // final state
    easing.QuadInOut, // how animation moves from initial to final state 
    makePic, // a function to make a pic for the current state
    false // hide when done?
)
 
// run the animation
run(anim)

The basic idea with transition based animations (as shown in the code above and described below) is the following:

  • You define a picture that you want to animate.
  • You define the state of your animation. This consists of properties of the animation picture that change over the course of the animation.
  • The animation state is a sequence of doubles. It’s up to you to interpret these doubles however you want. You can do this is a principled way by defining property functions that pick out the relevant double value from the state sequence.
  • You define a function that can make an animation frame/picture for you for any given state.
  • You then define the actual animation, with a duration, a start state, an end state, an easing function, and the frame making function from the previous step.
    • The easing function defines how Kojo interpolates your animation state from the start state to the end state. Kojo comes with many predefined easing funtions.
  • Finally you run the animation!

Once you have one or more animation definitions, you can do the following:

  • Reverse an animation to create a new animation that does the given animation in reverse.
  • Do anim.repeated(count) to create a new animation that does the given animation repeatedly for the given number of times.
  • Combine animations using animSeq – to create a new animations that does the given animations one after the other.
  • Combine animations using animPar – to create a new animations that does the given animations concurrently.

The above describes a Transition based animation. If what you want to do is difficult with a Transition, you can use a Timeline. A Timeline differs from a Transition in the following important way:

Instead of being able to specify only an initial and a final state for an animation, you can specify states over the whole lifecycle of the animation using key-frames.

More on this and other aspects of the animation feature in a future blog post. For now, let me finish off this section with a quick couple of animations submitted by students – after a few sessions of coding with this feature:

Many thanks (once again!) to Anay Kamat from the Goa government’s CM-CARES team for his contributions to this feature. And many thanks (once again!) to the Kojo Code Hackers group of students for their experiments and feedback with this feature.

The Kojo code exchange – a new website

The Kojo code exchange is a site where users of Kojo can share their creations. Earlier this year, we released a new version of this site. This cut makes it easier to display your creations and enjoy and learn from the creations of others.

Here’s a quick screenshot of the new site:

Take a minute or two to browse the pages of the site and view the numerous interesting creations there! Many thanks to Vasu Sethia and Anusha Pant for their contributions to the code exchange website.

Kojo in the Goa government curriculum – an update

The Goa Government has released a teacher’s handbook for grade 7 for Coding/ICT. Kojo features prominently in the book:

I’m looking forward to some exciting action with Kojo in Goa over the next few years (especially after seeing some of the wonderful creations by Goan teachers and students on the Kojo Code Exchange).

Turkish enhancements

Bulent Basaran has been busy refining the Turkish translation of Kojo and adding more and more features to it. I will request him to provide an update in a guest blog post here. In the meantime, take a look at his commits – and be impressed 😉 :

https://github.com/litan/kojo/commits?author=bulent2k2

Other miscellaneous enhancements

There have been many other enhancements since the last release announcement. Some of these include:

  • Chess support contributed by Ida Rasmark and the team at Lund University. More on this in a future blog post.
  • Code completion improvements.
  • Breakpoint pane improvements.
  • New commands for animation loops that run in a more functional way – without the need for mutable variables.
  • A Look and Feel upgrade.
  • A Java upgrade.
  • And more…

That’s it for now…

As always, the new version of Kojo is available from the Kojo Download Page. If you run into any difficulties, let us know.

Enjoy!