Merge pull request #55 from zsoltk/live-setup

Update docs

CHALLENGES.md

@@ -5,22 +5,38 @@
 The following are a set of exciting challenges for you to tackle. They’re designed to test your
 skills, foster innovation, and offer attractive prizes. Go ahead, participate, and win!
 
+## When creating a PR
+
+Please mention in the title: "Optional challenge – ID", where ID is `J01`, `J02` etc. as you see it below. 
+
 ## Jetpack Compose challenges
 
-1. **C01 – Migrate** [`composed`](https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#\(androidx.compose.ui.Modifier\).composed\(kotlin.Function1,kotlin.Function1\))
+1. **J01 – Migrate** [`composed`](https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#\(androidx.compose.ui.Modifier\).composed\(kotlin.Function1,kotlin.Function1\))
  **modifiers to** [`Modifier.Node`](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Node)
 
    * *Description*: [The Jetpack Compose team is migrating](https://youtu.be/BjGX2RftXsU?feature=shared\&t=920) 
      `composed` Modifiers to `Modifier.Node` to increase the performance of Compose apps. Find 
      `composed` Modifiers in the project, and convert them to `Modifier.Node`.
    * *Example in the Compose codebase*: [PR of the Modifier.background migration](https://android-review.googlesource.com/c/platform/frameworks/support/+/2440999).
 
-2. **C02 – Transition between nodes using other shapes**
+2. **J02 – Transition between nodes using other shapes**
 
-   * *Description*: Take a look at how the current transition effect has been implemented in 
-     `DottedMeshShape`. This class utilises circles, but it would be nice to allow also other shapes: 
+   * *Description*: Take a look at the "bubbly" transition between the main screens.
+     You can find the clip shape in `DottedMeshShape`.
+     This class utilises circles, but it would be nice to allow also other shapes: 
      for instance hexagons. Extend the class to support at least circles and hexagons.
 
+## Code, math, graphics
+
+1. **C01 – Explain how the clipped shape transition works**
+
+    * *Description*: Take a look at the "bubbly" transition between the main screens.
+      You can find the clip shape in `DottedMeshShape`. See the part with a link to **graphtoy.com**
+      (check it out to give you a hint). 
+      Provide a code-level comment explanation why this formula results in the visual effect we 
+      see on the screen. Strive to create a clear, easy-to-understand, high quality explanation
+      so that anyone with a minimal understanding of the topic could follow. 
+
 ## Performance challenges
 
 1. **P01 – Measure the performance of the app**

README.md

@@ -3,7 +3,7 @@
 Brought to you by the Android team at Bumble Inc., Live Mosaic is a Compose Multiplatform project featuring a collaborative message board and dynamic image mosaic.
 
 
-## Powered by <img src="https://user-images.githubusercontent.com/238198/177164121-3aa4d19d-7714-4f2e-af12-7d3335b43f9c.png" width="75" /> Appyx
+## Powered by <img src="https://user-images.githubusercontent.com/238198/177164121-3aa4d19d-7714-4f2e-af12-7d3335b43f9c.png" width="20" /> Appyx
 
 If you like this project, please consider starring the Appyx repo, giving us a shout on social media, or both–we’ll appreciate it! We’re more than happy to chat about our projects if you come to our booth.
 
@@ -36,19 +36,13 @@ Get familiar with `Entry` class and its types:
 - Create a pull request and the Bumble Inc team will review it!
 - Show us your pull request at the Bumble Inc. booth on your device, and once we merge it, we’ll hand you your raffle ticket.
 
+
 ## I don’t have a laptop with me, how can I participate?
 
 Creating a text entry is simple enough that you could easily do it from mobile! See [GitHub Mobile](https://github.com/mobile)
 
 Alternatively, we’re happy to post your message or photo for you at the booth, provided you can show proof that your GitHub account belongs to you.
 
-## :computer: How to launch on desktop
-
-- Open Edit configurations
-- Click + in the top left corner, choose Gradle
-- Type live-mosaic:desktopApp in the Gradle project field
-- Type run in the input above it
-- Close the window, now you can launch it from where you usually pick the android app
 
 ## What should I post?
 
@@ -73,10 +67,25 @@ If you're adding an image to the entries:
 
 - The above content guidelines apply
 - Should not be larger than 500 KB
+- Should not be larger than 600 x 400px
 - Be sure to add it to `/shared/commonMain/resources/participant`
 - For the best looks, have it in landscape mode with 3:2 aspect ratio
 
 
+## :computer: How can I launch the project on desktop?
+
+<img width="500" src="https://github.com/bumble-tech/live-mosaic/assets/238198/52118435-c11e-4f75-8641-775a287b05c6">
+
+- Clone the project and open it in Android Studio
+- Open `Edit configurations`
+- Click + in the top left corner, choose `Gradle`
+- Type `live-mosaic:desktopApp` in the Gradle project field
+- Type `run` in the input above it
+- Close the window, now you can launch it from where you usually pick the android app
+
+**Tip**: After launching the app, look for a faint :pause_button: in the top left corner. It turns on/off some manual controls to play with! 
+
+
 ## Conditions of entry
 
 - You must be physically present at the conference for your entry to be merged.
@@ -88,7 +97,7 @@ If you're adding an image to the entries:
 All entries will be reviewed by content moderators appointed by Bumble Inc. We reserve the right to refuse a pull request if we feel that the content is inappropriate in any way, or isn’t promoting Kind Connections.
 
 Examples of content that we would refuse may include but are not limited to:
- 
+
 - Harsh, provocative language or cursing;
 - Political views;
 - Jokes that are at the expense of anyone;

shared/src/commonMain/kotlin/com/bumble/livemosaic/model/Entry.kt

@@ -16,6 +16,13 @@ sealed class Entry {
     data class Image(
         override val mosaic: MosaicConfig,
         override val githubUserName: String,
+        /**
+         * - Should not be larger than 500 KB
+         * - Should not be larger than 600 x 400px
+         * - Be sure to add it to `/shared/commonMain/resources/participant`
+         * - Set `path` to just the filename (without the directory name)
+         * - For the best looks, have it in landscape mode with 3:2 aspect ratio
+         */
         val path: String,
         val contentDescription: String? = null,
         val contentScale: ContentScale = ContentScale.Fit
@@ -24,6 +31,10 @@ sealed class Entry {
     data class ComposableContent(
         override val mosaic: MosaicConfig,
         override val githubUserName: String,
+        /**
+         * Please create your custom composable in a new file in:
+         * /shared/src/commonMain/kotlin/com/bumble/livemosaic/participant
+         */
         val content: @Composable () -> Unit
     ) : Entry()
 }

shared/src/commonMain/kotlin/com/bumble/livemosaic/ui/DottedMeshShape.kt

@@ -65,6 +65,13 @@ class DottedMeshShape(
                         y = lerpFloat(0f, height, v)
                     )
 
+                    /**
+                     * This is what's happening to the value:
+                     * https://graphtoy.com/?f1(x,t)=x&v1=false&f2(x,t)=abs(x-0.5)&v2=false&f3(x,t)=0.5%20-%20f2(x)&v3=false&f4(x,t)=2%20*%20f3(x)&v4=true&f5(x,t)=f4(x)-1&v5=true&f6(x,t)=f4(x)+1&v6=true&grid=1&coords=0,0,2.872704592429975
+                     *
+                     * Explanation:
+                     * - [Writing this explanation is one of the optional challenges. See CHALLENGES.md]
+                     */
                     val value = (progressDelayed
                             + (0.5f - abs(u - 0.5f))
                             + (0.5f - abs(v - 0.5f)))