Migrate to Compose Multiplatform (#3)

* Added KMP support for iOS * added working ios example * added working ios example replaced ios project with uikit one * cleaned up code added entry point for desktop compose * added support for browser Added skia support for browser through BrowserViewportWindow * added a new mandela pattern * Optimized performance for some older ones fix broken animation add variation of PersistableCanvas * updated jekyll readmes with new gifs * updated documentation Added links to sources * fix duplicate double conversion

Author: thelumiereguy

.gitignore

@@ -1,4 +1,14 @@
+*.iml
+.gradle
+.idea
+.DS_Store
+build
+captures
+.externalNativeBuild
+.cxx
 /.gradle/
 /build/
 /.idea/
 /local.properties
+xcuserdata
+/kotlin-js-store/yarn.lock

README.md

@@ -4,29 +4,29 @@
 
 ### [Creative Coding Examples](https://thelumiereguy.github.io/CreativeCodingExamples/)
 
-A collection of Creative Coding examples by me & other artists. We've used Jetpack Compose and Processing (Java Edition) to create these.
+A collection of Creative Coding examples by me & other artists. We've used Jetbrains Compose and Processing (Java Edition) to create these.
 
 
 | Example | Screenshot | Link(s) |
 | :---: | :-: | :-: |
-| Circle Pattern | ![Circle Pattern](https://user-images.githubusercontent.com/46375353/179366829-64cd405a-9100-42b7-a1e0-e3320285f56c.png) | [Processing](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/processing/src/main/kotlin/dev/thelumiereguy/examples/circle_pattern/CirclePattern.kt) / [Jetpack Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/circle_pattern/DrawCirclePatternComposable.kt) |
+| Circle Pattern | ![Circle Pattern](https://user-images.githubusercontent.com/46375353/179366829-64cd405a-9100-42b7-a1e0-e3320285f56c.png) | [Processing](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/processing/src/main/kotlin/dev/thelumiereguy/examples/circle_pattern/CirclePattern.kt) / [Jetbrains Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/circle_pattern/DrawCirclePatternComposable.kt) |
 | Circleception | ![Circleception](https://user-images.githubusercontent.com/46375353/179367087-85e7421b-b513-4da0-b6f6-681bcd4e477d.png) | [Processing](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/processing/src/main/kotlin/dev/thelumiereguy/examples/circleception/Circleception.kt) |
 | Divine Intervention | ![DivineIntervention](https://user-images.githubusercontent.com/46375353/179367322-707adf6a-3974-4163-be93-ce4be088a96d.png) | [Processing](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/processing/src/main/kotlin/dev/thelumiereguy/examples/divine_intervention/DivineIntervention.kt) |
 | Fractal Spirograph | ![FractalSpirograph](https://user-images.githubusercontent.com/46375353/179367414-269f33f1-70be-4b5b-ac15-b163190be50e.png) | [Processing](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/processing/src/main/kotlin/dev/thelumiereguy/examples/fractal_spiralograph/FractalSpirograph.kt) |
 | Hexagonal Mandela | ![HexagonalMandela](https://user-images.githubusercontent.com/46375353/179367484-ec5fdaae-6bce-40c8-8d85-4b5686669a26.png) | [Processing](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/processing/src/main/kotlin/dev/thelumiereguy/examples/hexagonal_mandela/HexagonalMandela.kt)|
 | Iris | ![Iris](https://user-images.githubusercontent.com/46375353/179367667-cd1b3dba-6bdb-4db9-84c8-478bf1c4bfb8.png) | [Processing](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/processing/src/main/kotlin/dev/thelumiereguy/examples/iris/Iris.kt)|
 | Phyllotaxis | ![Phyllotaxis](https://user-images.githubusercontent.com/46375353/179415678-b0a9a4db-4cdd-4a4f-8fdb-ba641a8b4630.png) | [Processing](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/processing/src/main/kotlin/dev/thelumiereguy/examples/phyllotaxis/Phyllotaxis.kt)|
 | Whirlpool | ![Whirlpool](https://user-images.githubusercontent.com/46375353/179419156-b761c125-6e90-43f1-beb1-0f2d146579fc.png) | [Processing](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/processing/src/main/kotlin/dev/thelumiereguy/examples/whirlpool/Whirlpool.kt)|
-| Animated Shapes | ![AnimatedShapes](https://user-images.githubusercontent.com/46375353/180615046-350a6bb4-5a2b-4c6e-8afb-621a099decb6.png) | [Jetpack Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/5b445fe655e11224078b8c21891dcb21498d08d2/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/animated_shapes/AnimatedShapes.kt#L80)|
-| Bouncy Balls | ![BouncyBalls](https://user-images.githubusercontent.com/46375353/180617883-ec901aaf-30b6-4f90-a574-24dbd0fec9c5.png) | [Jetpack Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/bouncy_balls_sound/BouncyBalls.kt)|
-| Cantor Circles | ![Cantor Circles](https://user-images.githubusercontent.com/46375353/180618092-ba3cd911-8056-4213-b917-0e1c5c64f072.png) | [Jetpack Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/cantor_circles/CantorCirclePattern.kt)|
-| Dot Product Shading | ![Dot Product Shading](https://user-images.githubusercontent.com/46375353/180618953-d41e0336-5a25-4c74-b220-63026b5a5f05.png) | [Jetpack Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/dot_product_shading/DotProductShading.kt)|
-| Stroked Ripples | ![Stroked Ripples](https://user-images.githubusercontent.com/46375353/180619124-c945242d-1fcf-48d7-9025-cbfbb04c4715.png) | [Jetpack Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/stroked_ripples/StrokedRipples.kt)|
-| Torus | ![Torus](https://user-images.githubusercontent.com/46375353/180619244-1f412194-2963-45c9-8023-64392e554601.png) | [Jetpack Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/torus/Torus.kt)|
-| Cubic Sphere | ![Cubic Sphere](https://user-images.githubusercontent.com/46375353/180620025-9a10a098-ca6f-4c3b-a570-ac5929faeda8.png) | [Jetpack Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/cubic_sphere/CubicSphere.kt)|
-| A basic Flow field | ![Basic Flow Field](https://user-images.githubusercontent.com/46375353/194867317-9949df47-5dcb-4b98-b9da-e2b769458fae.png) | [Jetpack Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/basic_flow_field/BasicFlowField.kt)|
-| Flow field Variation 1 | ![Basic Flow Field](https://user-images.githubusercontent.com/46375353/195086156-c7a47bda-a483-4263-aba5-75b63c590a42.png) | [Jetpack Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/flow_field_patterns/FlowFieldPattern1.kt)|
-| Flow field Variation 2 | ![Basic Flow Field](https://user-images.githubusercontent.com/46375353/195086168-eaf28638-e5b9-4410-ba2a-2e7df2bd9ac5.png) | [Jetpack Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/flow_field_patterns/FlowFieldPattern2.kt)|
+| Animated Shapes | ![AnimatedShapes](https://user-images.githubusercontent.com/46375353/180615046-350a6bb4-5a2b-4c6e-8afb-621a099decb6.png) | [Jetbrains Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/5b445fe655e11224078b8c21891dcb21498d08d2/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/animated_shapes/AnimatedShapes.kt#L80)|
+| Bouncy Balls | ![BouncyBalls](https://user-images.githubusercontent.com/46375353/180617883-ec901aaf-30b6-4f90-a574-24dbd0fec9c5.png) | [Jetbrains Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/bouncy_balls_sound/BouncyBalls.kt)|
+| Cantor Circles | ![Cantor Circles](https://user-images.githubusercontent.com/46375353/180618092-ba3cd911-8056-4213-b917-0e1c5c64f072.png) | [Jetbrains Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/cantor_circles/CantorCirclePattern.kt)|
+| Dot Product Shading | ![Dot Product Shading](https://user-images.githubusercontent.com/46375353/180618953-d41e0336-5a25-4c74-b220-63026b5a5f05.png) | [Jetbrains Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/dot_product_shading/DotProductShading.kt)|
+| Stroked Ripples | ![Stroked Ripples](https://user-images.githubusercontent.com/46375353/180619124-c945242d-1fcf-48d7-9025-cbfbb04c4715.png) | [Jetbrains Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/stroked_ripples/StrokedRipples.kt)|
+| Torus | ![Torus](https://user-images.githubusercontent.com/46375353/180619244-1f412194-2963-45c9-8023-64392e554601.png) | [Jetbrains Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/torus/Torus.kt)|
+| Cubic Sphere | ![Cubic Sphere](https://user-images.githubusercontent.com/46375353/180620025-9a10a098-ca6f-4c3b-a570-ac5929faeda8.png) | [Jetbrains Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/cubic_sphere/CubicSphere.kt)|
+| A basic Flow field | ![Basic Flow Field](https://user-images.githubusercontent.com/46375353/194867317-9949df47-5dcb-4b98-b9da-e2b769458fae.png) | [Jetbrains Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/basic_flow_field/BasicFlowField.kt)|
+| Flow field Variation 1 | ![Basic Flow Field](https://user-images.githubusercontent.com/46375353/195086156-c7a47bda-a483-4263-aba5-75b63c590a42.png) | [Jetbrains Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/flow_field_patterns/FlowFieldPattern1.kt)|
+| Flow field Variation 2 | ![Basic Flow Field](https://user-images.githubusercontent.com/46375353/195086168-eaf28638-e5b9-4410-ba2a-2e7df2bd9ac5.png) | [Jetbrains Compose](https://github.com/thelumiereguy/CreativeCodingExamples/blob/master/jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/examples/flow_field_patterns/FlowFieldPattern2.kt)|
 
 
 ### Contributions
@@ -38,6 +38,7 @@ We would like you to play with this repository and contribute and show-off your
  1. [**k5-compose**](https://github.com/CuriousNikhil/k5-compose) - A p5.js port for Jetpack Compose Desktop
  2. [**Processing**](https://processing.org/) - Processing [Java Edition]
  3. [**Jetpack Compose**](https://developer.android.com/jetpack/compose) - Jetpack Compose on Mobile
+ 4. [**Jetbrains Compose**](https://www.jetbrains.com/lp/compose-mpp/) - Jetbrains Compose for Android, iOS, Web, Desktop
 - All above three modules are separated in the repository. 
 
 **Please check the [contribution guide in wiki](https://github.com/thelumiereguy/CreativeCodingExamples/wiki/Contribution-Guide) to upload your artworks!**

androidApp/build.gradle.kts

@@ -0,0 +1,55 @@
+plugins {
+ id("com.android.application")
+ kotlin("android")
+}
+
+repositories {
+ maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+ google()
+ mavenCentral()
+}
+
+android {
+ namespace = "dev.thelumiereguy.creative_coding_compose.android"
+ compileSdk = 33
+ defaultConfig {
+ applicationId = "dev.thelumiereguy.creative_coding_compose.android"
+ minSdk = 21
+ targetSdk = 33
+ versionCode = 1
+ versionName = "1.0"
+ }
+ buildFeatures {
+ compose = true
+ }
+ composeOptions {
+ kotlinCompilerExtensionVersion = "1.3.0"
+ }
+ compileOptions {
+ sourceCompatibility = JavaVersion.VERSION_11
+ targetCompatibility = JavaVersion.VERSION_11
+ }
+ kotlinOptions {
+ jvmTarget = "11"
+ }
+ packagingOptions {
+ resources {
+ excludes += "/META-INF/{AL2.0,LGPL2.1}"
+ }
+ }
+ buildTypes {
+ getByName("release") {
+ isMinifyEnabled = false
+ }
+ }
+}
+
+dependencies {
+ implementation(project(":compose_common"))
+ implementation("androidx.compose.ui:ui:1.2.1")
+ implementation("androidx.compose.ui:ui-tooling:1.2.1")
+ implementation("androidx.compose.ui:ui-tooling-preview:1.2.1")
+ implementation("androidx.compose.foundation:foundation:1.2.1")
+ implementation("androidx.compose.material:material:1.2.1")
+ implementation("androidx.activity:activity-compose:1.6.0")
+}

androidApp/src/main/AndroidManifest.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+
+ <application
+ android:allowBackup="true"
+ android:icon="@mipmap/ic_launcher"
+ android:label="@string/app_name"
+ android:roundIcon="@mipmap/ic_launcher_round"
+ android:supportsRtl="true"
+ android:theme="@style/Theme.CreativeCodingExamples">
+ <activity
+ android:name=".MainActivity"
+ android:exported="true">
+ <intent-filter>
+ <action android:name="android.intent.action.MAIN"/>
+
+ <category android:name="android.intent.category.LAUNCHER"/>
+ </intent-filter>
+ </activity>
+ </application>
+
+</manifest> 

jetpack-compose/src/main/java/dev/thelumiereguy/creative_coding_compose/MainActivity.kt renamed to androidApp/src/main/java/dev/thelumiereguy/creative_coding_compose/android/MainActivity.kt

@@ -1,4 +1,4 @@
-package dev.thelumiereguy.creative_coding_compose
+package dev.thelumiereguy.creative_coding_compose.android
 
 import android.app.Activity
 import android.os.Build
@@ -11,22 +11,17 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import dev.thelumiereguy.creative_coding_compose.examples.flow_field_patterns.FlowFieldPattern1
-import dev.thelumiereguy.creative_coding_compose.theme.CreativeCodingComposeTheme
+import dev.thelumiereguy.creative_coding_compose.CreativeCodingExampleScreen
 
 class MainActivity : ComponentActivity() {
-
  override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
- setFullScreen()
  setContent {
- CreativeCodingComposeTheme {
- FlowFieldPattern1(
- modifier = Modifier
- .fillMaxSize()
- .background(Color.Black)
- )
- }
+ CreativeCodingExampleScreen(
+ Modifier
+ .fillMaxSize()
+ .background(Color.Black)
+ )
  }
  }
 }