DEV Community

Okyn
Okyn

Posted on

5

Pumpkins fall! 🎃

Happy Halloween 2021!

I challenged myself and decided to code a tiny project related to Halloween and Canvas!

screenshot

Confetti 🎊

I was looking toward a way to get a random particles generator in a canvas, and I came across this great tool confetti-js which widely inspired this project.

halloween-2021

Nearly everything stands in the app config:

const app = {
    target: 'canvas',
    images: ['./images/bat.png', './images/pumpkin.png', './images/sweet.png'],
    max: 30,
    speed: 3,
    width: window.innerWidth,
    height: window.innerHeight,
    imageMinWidth: 30,
    imageMaxWidth: 100,
}
Enter fullscreen mode Exit fullscreen mode

One helpful function:

function getRandomInt(min, max) {
    min = Math.ceil(min)
    max = Math.floor(max)
    return Math.floor(Math.random() * (max - min + 1)) + min
}
Enter fullscreen mode Exit fullscreen mode

Demo and code (which might be frightening 😱) are available.

Demo: https://0kyn.github.io/halloween-2021/
Sources: https://github.com/0kyn/halloween-2021

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (2)

Collapse
 
mayankav profile image
mayankav •

Good start! Keep the posts coming

Collapse
 
0kyn profile image
Okyn •

Thanks for kind words! I'll try :)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Please leave a ❀ or a friendly comment on this post if you found it helpful!

Okay