Graphics

// https://github.com/pixijs/examples/blob/gh-pages/required/examples/demos/graphics-demo.js
@file:Suppress("DEPRECATION")

package demos

import kotlin.browser.document
import kotlin.js.Math
import kotlin.js.json

fun main(args: Array<String>) {
    val app = PIXI.Application(800, 600, json("antialias" to true))
    document.body!!.appendChild(app.view)

    app.stage.interactive = true

    val graphics = PIXI.Graphics()

    // set a fill and line style
    graphics.beginFill(0xFF3300)
    graphics.lineStyle(10, 0xffd900, 1)

    // draw a shape
    graphics.moveTo(50,50)
    graphics.lineTo(250, 50)
    graphics.lineTo(100, 100)
    graphics.lineTo(250, 220)
    graphics.lineTo(50, 220)
    graphics.lineTo(50, 50)
    graphics.endFill()

    // set a fill and line style again
    graphics.lineStyle(10, 0xFF0000, 0.8)
    graphics.beginFill(0xFF700B, 1)

    // draw a second shape
    graphics.moveTo(210,300)
    graphics.lineTo(450,320)
    graphics.lineTo(570,350)
    graphics.quadraticCurveTo(600, 0, 480,100)
    graphics.lineTo(330,120)
    graphics.lineTo(410,200)
    graphics.lineTo(210,300)
    graphics.endFill()

    // draw a rectangle
    graphics.lineStyle(2, 0x0000FF, 1)
    graphics.drawRect(50, 250, 100, 100)

    // draw a circle
    graphics.lineStyle(0)
    graphics.beginFill(0xFFFF0B, 0.5)
    graphics.drawCircle(470, 200,100)
    graphics.endFill()

    graphics.lineStyle(20, 0x33FF00)
    graphics.moveTo(30,30)
    graphics.lineTo(600, 300)


    app.stage.addChild(graphics)

    // let's create a moving shape
    val thing = PIXI.Graphics()
    app.stage.addChild(thing)
    thing.x = 800/2
    thing.y = 600/2

    fun onClick() {
        graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1)
        graphics.moveTo(Math.random() * 800, Math.random() * 600)
        graphics.bezierCurveTo(
                Math.random() * 800, Math.random() * 600,
                Math.random() * 800, Math.random() * 600,
                Math.random() * 800, Math.random() * 600
        )
    }

    // Just click on the stage to draw random lines
    app.stage.on("pointertap", { _ -> onClick() })

    var count = 0.0

    app.ticker.add({

        count += 0.1

        thing.clear()
        thing.lineStyle(10, 0xff0000, 1)
        thing.beginFill(0xffFF00, 0.5)

        thing.moveTo(-120 + kotlin.math.sin(count) * 20, -100 + kotlin.math.cos(count)* 20)
        thing.lineTo( 120 + kotlin.math.cos(count) * 20, -100 + kotlin.math.sin(count)* 20)
        thing.lineTo( 120 + kotlin.math.sin(count) * 20, 100 + kotlin.math.cos(count)* 20)
        thing.lineTo( -120 + kotlin.math.cos(count)* 20, 100 + kotlin.math.sin(count)* 20)
        thing.lineTo( -120 + kotlin.math.sin(count) * 20, -100 + kotlin.math.cos(count)* 20)

        thing.rotation = count * 0.1
    })
}