1. Support for .with and .thats transforms for Pictures
2. Support for declarative animations
3. The Kojo code exchange – a new website
4. Kojo in the Goa government curriculum – an update
5. Turkish enhancements
6. Other miscellaneous enhancements

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:

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

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!

Turkish Translation Journey

Kudos to Bulent on his wonderful work with the translation. And a word of thanks to Björn Regnell — for his help in creating a Kojo localization architecture that has stood up well over the years.

Enjoy (and consider translating Kojo to a language that you know, if you think it might help children in your context)!

1. Improved Visual Appearance for Kojo

Kojo now has a new “Look and Feel” based on FlatLAF. This is an important step in ushering Kojo into the 2020s with a clean, simple, elegant, modern, and scalable look that works well on hi-res displays. Here are a couple of screenshots:

Feedback on the new look is very welcome.

2. Rich Turkish Support in Kojo

Kojo now has great support for Turkish; the breadth and depth of this support has to be seen to be believed (all thanks to Bulent Basaran). I’m hoping for a blog post from him soon describing the work that he has done. In the meantime here’s a screenshot:

I look forward to many many Turkish children benefiting from this work.

3. Miscellaneous Kojo Improvements

• A new Spanish translation by Guillermo Ovejero, Alberto R.R. Manzanares, and team.
• Support for extensions – to enable add-on functionality in Kojo (more on this in a future post).
• Advanced sample games – Othello and Unbeatable Tic-Tac-Toe – under the Showcase menu.
• Runaway script stopping improvements.
• Tweaks to samples.
• Re-introduction of an updated Angles Playground (as the Playing with Angles item under the Samples -> Math Learning Modules menu).

4. Introduction of Kojo in the new Goa ICT Curriculum (aligned with NEP 2020)

I’m happy to report that Kojo is now part of the coding curriculum in (the Indian state of) Goa – for grade 7 (standard and elective curriculum) and grade 8 (elective curriculum). Hats off to the Goa government ed-tech team for recognising the promise of Kojo and giving it a role (under the Chief Minister’s CARES initiative) in fulfilling the mandate of the National Education Policy (NEP) 2020.

Here’s the curriculum notification doc (link below; search for Kojo in the doc to see in detail how it’s being used):

I’m looking forward to some exciting developments in Goa as Kojo is rolled out across the state over the next year or so.

5.  Usage at Lund University, Sweden

Kojo continues to be used at Lund University (one of the prestigious universities in Europe) in interesting ways. The latest initiative is around using Chess as a vehicle for young learners (~ age 10) to discover coding and mathematics – using Kojo as a tool for exploration. More on this in a future post. In the meantime, check out the Lund University Kojo page:

6. New kojo.in Website

Last but not least, we have started work on a new version of the kojo.in website. The basic goal is to give the Kojo website a modern look and feel, but with our own take on it (as opposed to using a pre-canned template from somewhere). Many thanks to Anusha Pant for spearheading this initiative.

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!

1. We now also have a web-based version of Kojo. iKojo (as this version is called) is hosted at Lund University, Sweden. Many thanks to Björn Regnell, Peter Möller, and the folks at the Vattenhallen Science Center at Lund University for facilitating this.

iKojo brings several benefits to the Kojo platform:

• It enables users to easily start experimenting with Kojo without having to download/install anything. When they want to dig deeper and do more serious programming, they can download/install desktop-Kojo.
• It enables users to easily share (via a web link) the games and simulations that they write in Kojo. The game or simulation can be developed in desktop-Kojo, and then shared via iKojo.
• It enables the exporting of web-apps from Kojo. These web-apps can run within any internet browser (on personal computers, tablets, and mobile phones).

Here is an example of a simple game (playable via keyboard and joystick) developed in desktop-Kojo (using Scala), tested on iKojo (via Scalajs), and then exported as a web-app. Click on the image below to play (note that full-screen mode does not work on Apple devices):

You can check out the source code for the game.

2. There’s a new Kojo Intro video out there that introduces the various features of Kojo:

3. There is a new Learning Material section on the docs website that provides a reasonably structured learning journey for children across various fun areas of programming.

4. And finally, a new version (2.9.07) of desktop-Kojo has been released, with the following enhancements since the last release announcement:

• A Turkish (level-3 with custom enhancements) translation contributed by Bulent Basaran. We are looking forward to seeing children in Turkey benefiting from this. Great job, Bulent!
• Sprite-sheets and mp3 files can now be loaded off the net.
• Support for eval.
• Support for screens.
• Web-app export feature.
• Scala has been bumped up to version 2.13.3
• The bundled Java has been bumped up to version 11.0.7
• There is now a virtual Joystick control for games (driven by iKojo on mobile).
• Some sample games have been synced with iKojo.
• Access to the code exchange is available via https.
• Support has been added for vertex shapes – for turtles, pictures, and canvas sketches. This includes support for polygons and curves using (r, theta) coordinates – which enables easy drawing of circular patterns like mandalas and yantras.
• Code completion improvements.
• New viewTranslate(x, y), viewRotate(a), and viewScale(f) commands.

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!

1. Upgrade to Java 11 and Scala 2.13.2

This release includes updates to the core foundational technologies within Kojo:

• The Java runtime (JVM) has been upgraded from version 8 to version 11 — for access to the latest stable JVM technology. The upgrade to Java 11 also provided an opportunity to trim the size of the JVM that is bundled with Kojo (by removing unused components like JavaFX). This has resulted in a decrease of around 25% in the size of the Kojo installer.
• Scala has been upgraded to 2.13.2 (from 2.12.10). This provides improvements to the collections framework and overall performance, in addition to other internal improvements.

2. Generative art enhancements

2(a) Neural style transfer using deep learning

Neural style transfer (NST) is a deep-learning technique that lets you apply the style of one image to the content of another image.

Kojo now supports NST via its easy to use picture transformation syntax. Using this syntax, applying one or more styles (from one or more images) to a pattern is as simple as doing:

val pic = effect(style1) * effect(style2) -> pattern
draw(pic)

Here is an example drawing made in Kojo using NST:

This feature is based on PyTorch. To use NST in Kojo, you need to set up a Python virtual environment with PyTorch, and then do a bit more. So setting this up is a little bit of work for now. But once things are set up, this feature is easy to use (as described above).

2(b) Immediate mode canvas graphics based on a Processing like API

For scenarios (like agent-motion based generative art)  where you need to draw hundreds of thousands of objects on the screen, Kojo now includes an immediate mode API — modelled on the Processing API. To use this API, you need to do the following:

• Create an instance of a class (called Sketch by convention) that has two methods — setup() and drawLoop().
• Give this instance to the canvasSketch(sketch) command.
• After this, your setup() code will be called once and your drawLoop() code will be called at 50 FPS.

Within setup() and drawLoop() you can use the Processing like API.

To make it easy to get going with an immediate mode sketch, Kojo includes a code template for this. Just type in canvasSk in the script editor and press Ctrl+Alt+Space. Then select the canvasSketch template from the code-completion window that pops up. That will give you the following ready to run code:

cleari()
originBottomLeft()
setBackground(white)

class Sketch {
var x = 0
  def setup(surface: CanvasDraw) {
    import surface._
    strokeWeight(4)
    rect(0, cheight/2, 40, 40)
  }

  def drawLoop(surface: CanvasDraw) {
    import surface._
    background(255)
    x += 2
    rect(x, cheight/2, 40, 40)
  }
}

val sketch = new Sketch
canvasSketch(sketch)

Now tweak this as desired. Within setup() and drawLoop(), you can can use code completion on the surface object to see what (Processing like) drawing commands are available to you.

Here is a larger example that uses this API :

3. Breakpoint command

Kojo now includes a breakpoint command which makes it easy to debug/understand programs. You can put breakpoint(someData) on any line in a program, and when the program runs it will stop at that line and show you the value of someData. someData can be a formatted string, so you can put in whatever descriptive string you want to see — to help you to debug/understand the program. All the provided data across successive breakpoint calls is also printed in the output pane, so the output there gives you a nice view of how the data of interest in your program is evolving as the program runs.

This feature is especially useful in debugging/understanding two kinds of scenarios:

• Graphical drawing — for example when you draw a grid, you can put a breakpoint in your grid-cell drawing code, and then see the grid being drawn cell by cell,  along with the desired data for each cell.
• Algorithms — you can put a breakpoint at the input/output to a function to see, step by step, exactly what comes in to, and goes out of, the function. You can see similar information with tracing, but with a breakpoint you can stop a program at a point of interest, look at the data values there, and then proceed step by step.

Here are screenshots of both of the above scenarios:

4. New tutorials and book

New tutorials and a beginner-level book in lesson-plan format are now available on the Tutorials page on the Kojo Docs website. Here are a few examples (ranging from the simple to the not so simple) of the kinds of drawings you can make with the help of the tutorials:

5. Other enhancements

5(a) Support for HSB colors in the ColorMaker

The ColorMaker now supports the HSB/HSV color model, in addition to the HSL and RGB models. This is fully integrated with IPM (Interactive Program Manipulation), so you can Ctrl+Click on any HSB color  in  your code to bring up the color-tweaker window:

For quick reference, the following are some of the ColorMaker functions for creating colors (here shown creating a green or a half-transparent green color):

// cm is an abbreviation for ColorMaker
cm.rgb(0, 255, 0)
cm.rgba(0, 255, 0, 127)
cm.hsl(120, 1.0, 0.5)
cm.hsla(120, 1.0, 0.5, 0.5)
cm.hsl(120, 1.0, 1.0)
cm.hsla(120, 1.0, 1.0, 0.5)
cm.hex(0x00ff00)
cm.hex(0x7f00ff00)

You can also create gradients and textures via the following ColorMaker functions:

// use code completion to fill out the args
cm.linearGradient
cm.linearMultipleGradient
cm.radialGradient
cm.radialMultipleGradient
cm.texture

5(b) timeit command

A new timeit command makes it easy to time your code. For example:

// type KList = ArrayBuffer[Int]
val n = 1500000
val L = util.Random.shuffle(KList.range(0, n))

clearOutput()
timeit {
  quickSort(L)
}
println(L.slice(n - 5, n))

The above prints out the following in the output pane:

Timed code took 3.039 seconds
ArrayBuffer(1499995, 1499996, 1499997, 1499998, 1499999)

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!

1. New docs website

Kojo has a new documentation website – with reference material, concepts, tutorials, and how-to guides on various aspects of programming in Kojo.

2. Generative Art Enhancements in Kojo

We are starting to get serious about generative art  in Kojo, and this release ties together a few threads to make Kojo’s gen-art support more polished. Various ways of doing generative (and computational) art in Kojo are documented at these links:

• Turtle Shape/block patterns.
• Introduction to Pictures.
• Introduction to grid based generative art.
• Utility Command/Function Reference.
• Picture Graphics Reference.

The docs website also has a Scala Quickref to help kids get going with the next level of Scala programming (at about the level of regular Python programming) as they move on from turtle graphics to pictures based gen-art.

To whet your gen-art appetite, screenshots of some recent Kojo artwork are shown below (a few of these drawings are described in the tutorials above):

3. Creative coding by kids for physical products

Kids in Dehradun (the home base for Kojo) have been busy using Kojo for artwork and physical product design. Here are a couple of photos of kids with their first Kojo designed t-shirts:

We are hoping that this work will pick up steam this year, providing lots of great learning opportunities to the kids that we work with.

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

Enjoy!

1.  Support for Tile based games

Kojo now supports multi-layer game environments created using the Tiled level editor. You can load Tiled map/level files inside Kojo, and then use Kojo’s tile-world API to start building games. An example side-scrolling platformer is included with this release, and can be run from the Showcase menu. Here’s a quick video snippet of the game:

2. Miscellaneous improvements

• Kojo now starts up with a bigger script editor in the light-theme mode (just like it already did in dark-theme mode).
• Desktop icons on Windows should now look better (and should not appear jagged / pixelated).

That’s it for this release. As always, the new version is available from the Kojo Download Page. If you run into any difficulties, let us know.

Enjoy!

1.  Initial support for Data Science and Machine Learning

The core features of this support include:

• A data exploration pane (which can be opened/closed at the bottom of the Script Editor) where you can type in snippets of code, run them, and see the results in the output pane. The data exploration pane supports code-completion – for easy discoverability of methods and fields on objects of interest.
• An add-on pack, which can be downloaded from the Kojo-AI project and installed within Kojo. This pack currently includes support for data-frames, charting, neural networks, and graph searching.

Here are some screenshots showing the above in action:

Loading and joining data-frames

Doing a Group-by

Doing a selection

Doing a projection and then drawing a histogram

Doing a projection and then drawing a bar-chart

Doing non-linear regression using Tensorflow and Keras-like layers

A-star search

This is very much work in progress, but also an exciting area of potential growth, with nice synergies with the Kojo-gaming and Kojo-arduino projects. 

2. Gaming Enhancements

Some initial work has been done to support the use-case of developing games within Kojo-Desktop and publishing them on KojoJS. Here are some sample games (running in the browser):

• Pong
• Hunted
• Bugs
• Cars

This is shaping up to be the next area of focus for Kojo based on feedback from users.
Note that KojoJS (powering the links above) is still in ‘experimental’ mode and running on a not very powerful server.

Bugs game running in Kojo-Desktop

3. Miscellaneous improvements

• Editor speedup for larger scripts
• Improvements with Find/Replace.
• New Samples in the area of Generative Art and Math. Other Sample tweaks.
• More robust script interruption under stress (like, for example, while changing drawing colors via the interactive program manipulator)
• Scala upgrade to 2.12.8

That’s it for this release. As always, the new version is available from the Kojo Download Page. If you run into any difficulties, let us know.

Enjoy!

1. The introduction of a dark theme

Kojo now includes a modern dark theme. The colors in this theme are easier on the eyes, especially for those who sit in front of Kojo for longer periods of time.

Here are some screenshots, showing both the new dark theme and the original (but slightly refined) light theme.

2. Windows gaming improvement

Animations on Windows are now able to run at 45-50 frames per second (fps), up from 30-33 fps in earlier versions.

To enable this, Kojo increases the resolution of the Windows system timer whenver an animation starts (and resets it to its original value when the animation ends).

3. Picture enhancements for generative art

In Kojo, Pictures are the building blocks of compositional graphics and generative art (and also gaming, but this section is not about that). The following Picture methods have been added in this release — from the perspective of supporting performant and rich generative art:

• Picture.line(x, y) (to augment Picture.hline and Picture.vline)
• Picture.ellipse(rx, ry)
• Picture.fromPath { path => Unit }

The following method has been ‘optimized’ to perform well with a large number of instances

• Picture.rectangle(w, h)

In case you are wondering about the missing second coordinate for the line/rectangle or the missing center coordinate for the ellipse, that’s because Pictures are anchored around the origin of their parent Picture’s coordinate system, and can be translated, rotated, and scaled as desired after they are created.

All of this will be explained in an upcoming e-book on generative art for secondary school children that will (as currently planned, but subject to enhancement) walk through the creation of these paintings  using Pictures. Here are a couple of Kojo screenshots to whet your appetite:

4. Embedded mode for devices like the Raspberry Pi.

Kojo now has a couple of modes – the original Desktop mode, and a new Embedded mode. The Embedded mode delays the loading of certain Kojo components till (and if) they are actually needed in a Kojo session. This, for example, brings down the Kojo startup time on a plugged-in Raspberry Pi 3b+ from ~50 seconds to ~20 seconds.

Also, in Embedded mode, Kojo does Fast syntax coloring within the script editor (based on the dafault Scala syntax coloring in RSyntaxTextArea). In Desktop mode, Kojo does Rich syntax coloring, which provides better support for things like interpolated strings and xml literals.

You can manually switch between Embedded / Desktop mode and Fast / Rich coloring using the script editor context menu (via a right-click on the editor).

5. Improvements to the Kojo-Arduino bridge

The Kojo-Arduino bridge has seen steady enhancements (the most notable recent one being the addition of support for ultra-sonic sensors for distance sensing). It is now pretty easy to program robots like this one using Kojo (we’ll put up a better video after we get our video-making act together).

Here’s a screenshot of the computer screen from the above video (with Kojo running on a Raspberry Pi 3b+):

6. Protection against the very rare freeze

Certain advanced Kojo scripts (like an earlier version of the beginner challenges) could freeze Kojo if the stars were aligned just wrong. Kojo now detects such potential freezes and stops the offending script.

7. Scala upgrade to 2.12.6

Last but not least, the Scala version in Kojo has moved from 2.11.11 to 2.12.6. This has been on the todo-list for quite some time, and was held back by the dependence of Kojo on the original Scala actor framework (which is not supported on Scala 2.12.x). For this release, Kojo’s actor dependency has been migrated to akka actors.

I’d like to put in a special word of thanks to Lund University for taking on the responsibility of building, signing, and hosting the Mac version of Kojo. Thanks Björn, Marcus, and Peter (for this, and for all your earlier contributions to Kojo).

That’s it for this release. As always, the new version is available from the Kojo Download Page. If you run into any difficulties, let us know.

Enjoy!