K5-compose is a sketchy port of p5.js for Jetpack Compose

Overview

k5-compose

k5-compose is a sketchy port of P5.js for Jetpack Compose Desktop.

This library provides you a playground to play with your sketches so you don't have to worry about maintaining & remember States, animations etc. You can focus on creating awesome sketches, creating generative art. This library also provides you necessary physics and math functions which are ported from p5.js.

Say for example you can do something like this in just 20 lines of code -

Moving Vehicle code K5 Sketch
carbon fastest_gif

Few more examples...

parametric eq particles js gravitation game of life automaton
parametric.mov
particles_js.mov
gravitation.mov
game_of_life.mov

Click on the link to go to the code. Code explains the things in details. Try playing with those by tweaking values and running on your own. 😄 (I have added videos instead of gifs just so you can view these without loosing any frames 😉 )

Getting started

In order to understand using this library for creating experiments, I would recommend to go through the Nature of Code book by Daniel Shiffman - https://natureofcode.com/book/. This will give you the overall knowledge about how a physics system works in simplest way in p5/k5 or in general computer world.
However, you could start digging into it right away by checking examples.

  1. Create your Jetpack Compose Desktop project. Add the following dependency in your build.gradle along with the compose dependencies
implementation("me.nikhilchaudhari:k5-compose:{latest-version}")
  1. Use k5 dsl construct to create K5 sketch
fun main() = k5{

  // Initialise your variables, objects

  show { drawScope ->
    // use drawScope to draw the shapes
  }  
}
  1. Use library apis for calculations and you are good to go! :p

No need to manage/remember states, animation or anything. Just focus on your logic to design sketch rest of the things are handled by the library.

How do I do that?

k5

It's very easy, you have to use k5{...} builder in order to initialise your k5-sketch. The things you define in here will be initialised only once.

fun main() = k5{
  // you can define all your properties, variables, vectors here.
    val position = Vector2D(20f, 20f)
    
    // Say you want to have a control over your shape and few other parameters like, force, acceleration, mass etc. You can use classes to represent your shapes.
    val spaceShip = SpaceShip(position, size) // some data class representing spaceship
    
  //...
}

You can pass size param in k5()

  fun main() = k5(size = Size(800f, 500f)) { ... }

And there are more number of configurations you can do to k5-compose playground which will be applied to the Window{..} composable. You can check API docs. // TODO - api docs.

show

Once you have initialised your necessary stuff which is going to change while running the frame of animation, you have to draw your shape/sketch in the show{...} function. show function gives you a canvas drawscope which you can used to draw into the k5 compose playground.

Note: Whatever you pass in show{...} lambda will run for every frame. So if you want to update the values you've initialised and draw the sketch every frame you can pass those things in the lambda. For example -

fun main() = k5{
  val vehiclePosition = Vector2D(20f, 20f)

  show{ drawScope ->
      
      //update your vehicle position, 
      vehiclePosition.add(Vector2D.randomVector() * 2f)
      
       drawScope.drawCircle(color = Color.White, radius = 30f, center = vehiclePosition.toOffSet())
  }
}

You can apply all the compose Modifiers to the playground like changing background, color and taking keyboard and mouse pointer input.

    show(modifier = Modifier
        .background(Color.Yellow)
        .pointerMoveFilter(
            onMove = {
                //use mouse pointer values here
                false
            }
        )
    ) {
        // Draw your sketch
    }

Few handy Apis

noLoop

Here, the vehiclePosition is constantly updated by adding a random vector to it's previous position and then a new circle is drawn on the playground based on the updated position. Simple, right?

Let's say you don't want to keep your sketch in loop. Let's say you want to draw it only once. You can use noLoop() method in k5{...}.

Playground size

You can use dimensInt or dimensFloat properties available in k5{...} to get the size of the playground. You can pass the size in k5() as well but there are few density display metrics related issues in using floating point values. So to avoid any miscalculations, these Size values can be used to get the precise height and width of your playground.

fun main() = k5 {

    // Use noLoop to draw your content only once
    noLoop()

    show {
        // this will be drawn only once
    }

}

How do I use math and physics functions?

To use and understand mathematics and physics I would recommend Nature Of Code book and Video series by Daniel Shiffman. Or you can go through the examples section in the repo.

Vectors

Vector2D is data class - a vector representing any vector quantity in 2D plane. You can create a simple vector like val acceleration = Vector2D(x = 2f, y = 3f), this means that the acceleration vector's x component is 2f and y component is 3f.

To perform vector operations there are extensions and operators available to give you all the necessary vector algebra APIs. You can take a look at those methods here in the API Docs.

Few helper methods available to create vectors from angle and also to create random vectors -

Random Vector You can create random unit vector by using static method randomVector of Vector2D class. This creates a random unit vector.

val position = Vector2D.randomVector()

Vector from angle If you want to create a vector using any angle you can use fromAngle static method. For ex - the below code will create a vector with angle as PI radians and length of 2. (means x = 2 * cos(angle), y = 2 * sin(angle))

val position = Vector2D.fromAnAngle(angle = PI, length = 2f)

toOffset There's another handy method to convert your vector to the Offset type since you need to pass Offset types while drawing in Jetpack Compose. So you can convert Vector2D into Offset. Using toOffset on vector value.

 val position = Vector2D(2f, 5f)
    position.toOffSet()

Random

You can use the Random functions available in Kotlin by default. To quickly generate any random number within particular range, there are helper extensions available over ClosedRange for any Number data types.

For ex - (-12f..-8f).random() or (1..40).random() or (1.0..10.0).random() etc

If you want ot generate randomGaussian or a random number with your custom set seed value, apis are available to set the seed for randomness etc. You can check it here. And you can use k5Random(api doc) and randomGaussian(api doc) functions to generate random values.

Noise

Noise is used a lot in p5 to generate a smooth randomness in numbers. This library contains Perlin noise helper methods which will generate noise values. You can check it here.

There are three methods available for generating noise values - noise1D(x: Double), fun noise2D(x: Double, y: Double) and fun noise3D(x: Double, y: Double, z: Double)

If you don't know what noise is please take a look here

Trigonometry

You could of course use the basic kotlin.math trigonometric functions but just to keep it in handy this library has extensions functions over Float values. So you can just convert any float value to trigonometric function value over this float.

  val tan = 1f.tan()
  val cos = 0.2f.cos()
  val sin = 0.1f.sin()

  val atan = 1f.atan()
  val acos = 0.2f.acos()
  val asin = 0.1f.asin()

You can check few more trigonometric functions here

Angle The default angle measurement is in radians. If you want to change the angles to be measured in the degrees, then you can set the angleMode to degrees. And degress will be used to measure the angle and in all the functions related to angles.

angleMode = AngleMode.DEGREES

Calculations

There are certain calculations that are related to vector, numbers etc which are required when you write physics system in a 2D environment. Those few methods are directly ported from p5.js. You can find some functions like lerp, map, norm, constrain etc. here

Contribution Guide

PRs are welcomed! Please check contribution guide here

License

Licensed under Apache License, Version 2.0 here

You might also like...
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries

An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries, The application make use of jikan Api which displays a list of animations,there more details and even trailers of the animations.

A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.
A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.

Multiplatform Compose A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many comp

Jetpack Compose based project, used to stress-testing compose features / integrations and explore non-trivial functionality

Project containing Jetpack Compose samples For pagination & network images it uses CATAAS. Known issues Navigation-Compose Issue with fast tapping on

Pokedex Compose is an independent re-write of a demo application by the name of Pokedex, but written in jetpack compose.
Pokedex Compose is an independent re-write of a demo application by the name of Pokedex, but written in jetpack compose.

Pokedex Compose Pokedex Compose is an independent re-write of a similar project by the name of Pokedex. I am recreating the UI but I am doing it using

Compose-Instagram-Profile-UI - Instagram profile screen UI using android jetpack compose
Compose-Instagram-Profile-UI - Instagram profile screen UI using android jetpack compose

Compose-Intsgram-Profile-UI Instagram profile screen UI using android jetpack co

List-programminglanguage-compose - Simple implementation of a list of programming languages using LazyColumn and Coil in Jetpack Compose Lock Screen-Compose - Lock Screen with Jetpack Compose
Lock Screen-Compose - Lock Screen with Jetpack Compose

Lock_Screen-Compose 此專案為Jetpack Compose練習題.

Compose-Ratingbar-library - A simple implementation for rating bar in Jetpack Compose

Compose-Ratingbar-library - A simple implementation for rating bar in Jetpack Compose

Compose Curved-Scroll is an Android Jetpack Compose library made with ❤️
Compose Curved-Scroll is an Android Jetpack Compose library made with ❤️

Compose-Curved-Scroll-library Compose Curved-Scroll is an Android Jetpack Compos

Comments
  • Feature request

    Feature request

    Hi there,

    Love this library, thanks for creating it. The examples and demos look amazing :) I have been using this library mainly for it's Perlin noise generation (as my app doesn't use Compose yet, I can't use all your library's capabilities). When it comes to Perlin noise, it would be useful if the output could be normalised to -1 to 1, so I can use it as a scaling factor (e.g. drawing time-based scaling transformations).

    opened by SammyO 2
  • Provide example using controls

    Provide example using controls

    Similar to how sliders and buttons are supported in p5.js (e.g. see https://p5js.org/examples/dom-slider.html), it would be great to learn controls that could be used with k5.

    This would be useful to add interactivity, e.g

    • Toggle effects with checkboxes
    • Adjust particle number with slider
    • Reset animation with button
    enhancement 
    opened by holgerbrandl 2
  • Add a few interesting UI Demo

    Add a few interesting UI Demo

    Hi @CuriousNikhil , Great K5 Compose Playground! Loving it!!

    I have added a few interesting demo, e.g.

    ezgif com-gif-maker (36)

    More info at https://medium.com/mobile-app-development-publication/jetpack-compose-animation-under-50-lines-using-k5-compose-playground-bef35060c471

    Feel free to merge if you see fit. Thanks!

    opened by elye 1
Releases(v1.0.1)
  • v1.0.1(Jan 28, 2022)

    There's nothing new in this release

    • Bumped the library to the latest Kotlin and Compose versions.

    Thanks to @V9vek for reaching out and letting me know about library build fails.

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Jan 22, 2022)

    After a lot of procrastination, I've decided to finalize these APIs and no more alphas

    This release includes

    • A major update where you can add controls - as regular compose elements like Slider, Checkbox, RadioButton, Toggles, etc. The controls section/view will be displayed on the right side of your sketch here

    Thanks to @holgerbrandl for motivating me to add this feature.

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-alpha2.3(Nov 3, 2021)

    Release notes

    • Finally, the Perlin noise algorithm has been improved and added to k5-compose.

      • You can use noise1D(x), noise2D(x, y) , noise3D(x,y,z) functions to genrate perlin noise value or smooth randomness
    • Have been struggling with generating random numbers so now you've random() extensions available on the ClosedRange. Available for all the number data types.

      • val randomValue = (0.5f..1f).random()

    You can take look at Javadocs for more info regarding apis

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-alpha2.2(Oct 24, 2021)

  • v1.0.0-alpha2.1(Oct 21, 2021)

    • Modified show() method params. dt filed won't be necessary so it's removed.
    • Adding two new properties in k5 construct dimensFloat and dimensInt to get the k5-compose playground dimensions
    • API docs are available
    • fixed bugs
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-alpha2(Oct 17, 2021)

    The k5-compose is ready to use. Few improvements are in progress and will be released in subsequent releases in future.

    • Migrate to jetpack compose latest version
    • Add operator functions for Vectors
    • Add trigonometric functions
    • Fix generating random numbers
    • FIx bugs
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-alpha01(Oct 10, 2021)

    Alpha (Initial) release of k5-compose

    • Contains basic math with vectors, trigonometry, and few math functions
    • Contains basic DSL-builder for creating running canvas window
    Source code(tar.gz)
    Source code(zip)
Owner
Nikhil Chaudhari
Mostly Android, Kotlin, Jetpack Compose, sleep, eat.
Nikhil Chaudhari
This is a Compose for Web port of CompoSnake

Compose-Snake-Web This is a Compose for Web port of CompoSnake. I used the code from there and modified it, to make it work in web. You can try it HER

Jens Klingenberg 13 Apr 30, 2022
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi

Chetan Gupta 38 Sep 25, 2022
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Md. Mahmudul Hasan Shohag 186 Jan 1, 2023
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

MindOrks 382 Jan 5, 2023
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

BHAVNA THACKER 3 Dec 31, 2022
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

omar 1 Aug 11, 2022
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Canopas Software 180 Jan 2, 2023
Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

Adam Kobus 5 Apr 5, 2022
Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

Mori Atsushi 3 Dec 15, 2022
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

Felix Kariuki 5 Dec 29, 2022