/skiss

Primary LanguageKotlinGNU General Public License v3.0GPL-3.0

Skiss

Skiss (Swedish: Sketch): an extremely basic 2D animation system for Android.

It's little more than a game loop, but it's very fast and lightweight and has a structure and syntax influenced by Processing.

Setup

Add a SkissView to your layout:

<oppen.skiss.lib.SkissView
    android:id="@+id/skiss_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Create a subclass of Skiss (see example below), pass in the view and start from your Activity/Fragment:

DemoSkiss(skiss_view).start()

Example

There are a few convenience methods (eg. fill, line, circle etc) but the standard View Canvas is also available:

package oppen.skiss.example

import android.graphics.Canvas
import oppen.skiss.lib.Skiss
import oppen.skiss.lib.SkissView
import oppen.skiss.lib.color
import oppen.skiss.lib.random

class DemoSkiss(view: SkissView): Skiss(view) {

    private val background = color("#1d1d1d")
    private val red = color("#ff0000")
    private val pale = color("#55ffffff")
    private var y = 0f

    override fun setup(width: Int, height: Int) {}

    override fun update(canvas: Canvas) {
        background(background)

        y += 2
        if (y > height) y = 0f

        stroke(red)
        line(0f, y, width.toFloat(), y)

        noStroke()
        fill(pale)
        repeat(100) {
            circle(random(width), random(height), random(5, 40))
        }
    }
}

Reference

smooth/noSmooth

Anti-aliasing is off by default, screens on modern devices are so high resolution it may not be needed at all. Skiss uses the same beginner-friendly naming as Processing, turn anti-aliasing on in setup:

override fun setup(width: Int, height: Int) {
    smooth()
}

stroke/noStroke

Stroke is used for lines, points, and shape borders. Supply a colour int for Skiss to draw with: stroke(aColour). Be sure to pre calculate the colour value and assign to a field, avoid any allocations in the update block. Turn off stroke drawing with noStroke()

fill/noFill

Same as stroke above but for shape fills, eg:

fill(red)
circle(100, 100, 20)

Off-screen buffer

Modern phone screens have a lot of pixels, if you're doing anything pixel based it'd be best to use a small offscreen buffer canvas. See the Meta-gravity demo for an example.

Development References