Making art with Scala & Processing

During my long periods of confinement, I got the idea of exploring new innovative areas of computer science. I really love the procedural generation and mixing it with art to be able to extend the creativity to infinity. I then discovered the Creative Coding that meets my expectations. I wish today to help you to get started with the creative coding with Scala and the Java library Processing.

Creative coding is a type of computer programming in which the goal is to create something expressive instead of something functional. It is used to create live visuals and for VJing, as well as creating visual art and design, entertainment, art installations, projections and projection mapping, sound art, advertising, product prototypes, and much more.

From Wikipedia, the free encyclopedia

Processing

Processing is a software sketchbook and a language for creating visual arts with programming.

Processing is written in Java, so we can write our programs directly from Scala without going through the PDE. It’s possible thanks to the Processing Core dependency that we have to add in your build.sbt (if you work with the sbt build tool).

1
2

// https://mvnrepository.com/artifact/org.processing/core
libraryDependencies += "org.processing" % "core" % "3.3.6"

For our first time with Processing, we are going to creates a simple application that create balls (with physics), when the user clicks on his screen.

Minimal code

To start, this is a minimal example of an empty Processing application in Scala:

1
2
3
4
5
6
7
8

import processing.core.PApplet

object EmptySketch extends PApplet {
  def main(args: Array[String]): Unit = {
    val processingArgs = Array("EmptySketch")
    PApplet.runSketch(processingArgs, this)
  }
}

PApplet is a class defined in the Processing Core library and is the base class for all sketches that use processing.core. This class implements a lot of methods and constants needed for image processing and user interaction. In the main, we use the runSketch static method who opens a window to display the sketch and take two arguments, an array of arguments (like the name of the window) and the sketch to be displayed.

The Ball class

As I’m not here to teach you programming, I guess you already have the necessary Scala notions to follow this article, so here’s the code for the class Ball :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

case class Ball(sketch: PApplet,
                x: Float,
                y: Float,
                size: Float,
                xSpeed: Float,
                ySpeed: Float) {
  def next: Ball = {
    val newX = x + xSpeed
    val newY = y + ySpeed

    Ball(sketch,
         newX,
         newY,
         size,
         if (newX < 0 || newX > sketch.width) -xSpeed else xSpeed,
         if (newY < 0 || newY > sketch.height) -ySpeed else ySpeed)
  }

  def render(): Unit = {
    sketch.fill(size, 127)
    sketch.ellipse(x, y, size, size)
  }
}

In the constructor of Ball, there is an unexpected parameter: sketch: PApplet. This parameter allows a ball to access the method who are defined in a PApplet, for example, the methods for rendering the data. The next method simply return a new Ball with updated coordinates and speed (for the bouncing). The render() method calls the sketch methods to draw a ball in the sketch. As you may have guessed the fill method is used to choose a color, and the ellipse method draws an ellipse from his center and his width and height.

The application

Now that we’ve got a ball, we can really start. I remind you of the objective, which is to create a simple application that creates balls (with physics) when the user clicks on his screen. This is the code for the application :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

object BallApp extends PApplet {
  private val balls: ArrayBuffer[Ball] = ArrayBuffer.empty[Ball]
  override def settings(): Unit = {
    size(500, 500)
    balls += Ball(this,
                  width / 2,
                  height / 2,
                  random(10, 100),
                  random(-10, 10),
                  random(-10, 10))
  }

  override def draw(): Unit = {
    background(255)
    balls.transform(_.next).foreach(_.render())
  }
  
  override def mouseClicked(): Unit =
    balls += Ball(this,
                  mouseX,
                  mouseY,
                  random(10, 100),
                  random(-10, 10),
                  random(-10, 10))

  def main(args: Array[String]): Unit = {
    val processingArgs = Array("Ball App")
    PApplet.runSketch(processingArgs, this)
  }

}

The balls attribute is used to store the balls of the application. The methods settings, draw, and mouseClicked are defined in the PApplet class:

• settings(): Defines the actions that will be called at the launching of the application. Here, I choose a screen size and I put my first ball in the application.
• draw(): Continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. Here, I update the coordinates of the balls and I render them.
• mouseClicked(): Defines the actions that will be called when a user clicks on his mouse. Here, I create and put a new ball in the application.

The application is now ready to use. This is what I obtain after some clicks:

This was a simple introduction to Creative Coding on my blog, expect to see many more articles on this subject in the coming days. To learn how to use Processing I invite you to follow theses official’s tutorials. I created a Github repository where I would put all my creations with Processing and Scala. Thanks to Happy Coding’s article which inspired me a lot.