cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
OneThing
Level 8

Christmas Countdown (with added Snow)

Hi all,

 

I had an afternoon free a while back and decided to play with some maths functions to see what can be done with Movement and Graphics. I've created this abomination.

 

Snow.gifI've attached it so people can have a look for themselves.

 

I used some hidden timers to create a bank of rand() values, and attached these to the X and Y Values of a group of 30 Icons. (Note I realise I use RandX for the Y value, and vice versa, but I'd already copied the code 30 times so I wasn't prepared to change Smiley Very Happy )

 

X:

 

RandY10*700+(Sin(Timer1.Value+RandX10)*RandY10*50)

Allows the Snow to fall in the nice Sine wave path. The first Rand *700 gives the staring position. I also set some of the Icons to use Cos instead, and more attached to another timer with a different duration, for more randomness.

 

Y:

(-RandX10*200)+(Timer1.Value/Timer1.Duration)*(380+RandX10*200)

Gives the snow a random speed to fall down the screen and position. The 200 value is the maximum horizontal movement of the "Snowflake" and the 380 is a random number to set the starting position so it doesn't appear off screen.

 

I also set the width of the flakes to:

Rand()*32

To make different sizes up to 32 Pixels wide. 

 

A few different shades of blue and voila, Snow!

 

It's not a finished product and I don't have any more time to play with it, but I found it a fun experiment.

 

If there was an easy way to code this using only one function, and attaching this to as many icons as needed, then it would be something that could be useful in the future. Having to change an maintain 30 different x and y values for each icon, wasn't workable.

 

I just thought I'd share this as I've not seen much fun things done with power apps outside of @mr-dang and his fun game tutorials.

 

Thanks,
Nicky


Accepted Solutions
mr-dang
Level 10

Re: Christmas Countdown (with added Snow)

@OneThing That's a creative use of the settings icon--I had to look more closely to see it.

 

Let me bring in @seadude who can describe a way for you to randomly place multiple snowflakes with fewer controls. He has an app that randomly places emojis in a gallery (template size = 0), and the technique should transfer over to your scenario too. 

 

For your calculation of the days until Christmas, have you considered expanding it to hours, minutes, seconds?

Here's an example of the maths: https://www.youtube.com/watch?v=eS4HesPcOSk

 

Also, once you make some refinements, this app fits very well into the Community App Gallery:

https://powerusers.microsoft.com/t5/Community-Apps-Gallery/bd-p/AppFeedbackGallery

 

CC @TopShelf-MSFT

Microsoft Employee
@8bitclassroom
seadude
Level 8

Re: Christmas Countdown (with added Snow)

Hey there @OneThing and @mr-dang!

What a cool app you created! I think that is the first time I've seen such a realistic animation. Nice work!

Dusting off my ol' app here... hope this translates ok

  • Secret sauce:
    • Set Gallery Length and Width to entire screen size
    • Set Gallery TemplateSize property to 0
    • Place a couple Image Controls in Gallery
    • 2018-11-16-19-36-54.png
  • I went ahead and worked it into your app a little bit (screen3). The snow is falling TOO hard though Smiley Happy . Hadn't yet figured out the timers and such.

Anywho, enjoy!


All Replies
mr-dang
Level 10

Re: Christmas Countdown (with added Snow)

@OneThing That's a creative use of the settings icon--I had to look more closely to see it.

 

Let me bring in @seadude who can describe a way for you to randomly place multiple snowflakes with fewer controls. He has an app that randomly places emojis in a gallery (template size = 0), and the technique should transfer over to your scenario too. 

 

For your calculation of the days until Christmas, have you considered expanding it to hours, minutes, seconds?

Here's an example of the maths: https://www.youtube.com/watch?v=eS4HesPcOSk

 

Also, once you make some refinements, this app fits very well into the Community App Gallery:

https://powerusers.microsoft.com/t5/Community-Apps-Gallery/bd-p/AppFeedbackGallery

 

CC @TopShelf-MSFT

Microsoft Employee
@8bitclassroom
seadude
Level 8

Re: Christmas Countdown (with added Snow)

Hey there @OneThing and @mr-dang!

What a cool app you created! I think that is the first time I've seen such a realistic animation. Nice work!

Dusting off my ol' app here... hope this translates ok

  • Secret sauce:
    • Set Gallery Length and Width to entire screen size
    • Set Gallery TemplateSize property to 0
    • Place a couple Image Controls in Gallery
    • 2018-11-16-19-36-54.png
  • I went ahead and worked it into your app a little bit (screen3). The snow is falling TOO hard though Smiley Happy . Hadn't yet figured out the timers and such.

Anywho, enjoy!

OneThing
Level 8

Re: Christmas Countdown (with added Snow)

Hi @mr-dang,

 

Thanks for the reply and the feedback.

 

My original inspiration for the app was one of my Collegues, who has a "Sleeps until Santa" Countdown on her whiteboard. She manually changes it daily, so I thought I'd look to this replace this hence just having the countdown as days.

 

I have seen your video previously though, so I'll keep it in mind if I get the time to update the app.

 

Thanks,

Nicky

 

OneThing
Level 8

Re: Christmas Countdown (with added Snow)

Hi @seadude,

 

Thanks for the feedback. I never thought of using a Gallery, but I can see how this would be useful, especially being able to add a data source into the gallery to help control the snow.

 

With regards to the wild snow, you have come up with the same issue I had when I first started. Trying to use Rand() in the X & Y while also using a timer means that for each tick of the timer the rand function re-runs and so randomly places the "Snowflake". This makes them jump around like crazy. 

 

At the time I got around this by pre-generating a bank of random numbers. This became unwieldy quickly as I added more items.

Screenshot_5.png

 

If Powerapps had a For Loop type command you could generate these a bit easier perhaps.

 

My first thought from using some maths functions for the animation was to give more of a slide to menu's appearing.

 

Using Log() for a menu appearing allows it to zoom in, but slow as it comes close to its final position.

-Rectangle1.Width + Log(Timer1.Value)/Log(Timer1.Duration)*Rectangle1.Width

Looks a little cleaner than just linearity moving in.

SlideIn.gif

 

If I get more time to start again from it I'll use yours and @mr-dang's advice before submitting to the gallery.

 

Thanks,
Nicky

AleChoski
Level: Powered On

Re: Christmas Countdown (with added Snow)

It would be interesting to change the icons with this Smiley Very Happy

 

https://loading.io/icon/custom/201823