How to draw clouds on HTML5 Canvas

-

So basically clouds are shapes with a flat bottom and 3 curves on top (two on the sides on bigger one on the middle)

As i was creating a JS13K Game i wondered around googling if i'd find something as simple as that and 'i couldn't find anything interesting

So i took some pictures of simple animated clouds and sketched it on my notepad trying to reverse engineer shapes in the figure

In my first attempt i discovered that "the base is something similar to css pills, so there's rectangular shape with roundish edges and a circle overlay on top". Putting that into vanilla JavaScript i resorted to creating two canvases

1. foreground layer
2. background layer

Clouds are drawn using a solid color formed by four shapes 3 circles and a rectangle then using some alpha the resultant image is then overlay-ed onto the primary canvas.

Here's an example


It's a sneaky way todraw clouds so they got to be a cleanway todo this without Jumping extra hoops

Last resort was to strike three arcs and join their bottoms using a straight line (without using a secondary canvas)

Here's an example



Comments

Post a Comment

Popular posts from this blog

FlappingBird Postmortem (JS13K)

-
Image
FlappingBird was my Primary entry for JS13K Games competition 2020 It's about a bird flying in a forest of trees (Some of which are upside down) It started out as i was trying to draw some clouds for fun, then later i added every missing component to complete the sky First day. I planned making a game that should as well serve as a 404 page with a hidden game such that when a button is pressed It transitions into gameplay qualities were that it should be easy to play by everybody without need to master many rules Second day. There was a bunch of game ideas up my sleeves one of them was a game where a typical 404 page transitions into a green garden like mine sweeper version made up of a flowering mine field with smooth sweet sound effects Fourth day. We'll Since Mine sweeper is not a very common game there's nothing fun about it and not everyone knows how it's played. So i gave up on it and on this day i started working on backgrounds for flappingBird "the final...
Read more

JavaScript introduction to variables

-
JavaScript is a dynamically typed programming language variables are declared using the following format var `variablename` `value` instead of int integer = 100 In JavaScript a variable can accommodate any typeof value ie a variable can be assigned numbers, strings, functions, and objects. among modern browsers or in "strict mode" variables can be declared in an alternative way using const and let keywords. variable's defined this way's values can not be changed once they have been assigned. ie they are referred to as immutable. var name = "John" var lastname var year = 2020 // var age var male = true console.log( typeof name) // string console.log(typeof lastname) ///undefined console.log(typeof age) // undefined console.log(typeof year) // number console.log(typeof male) // boolean const pi  = 22 / 7 pi = undefined; // sometimes this can raise a typescript error // assignment to constant variable in strict mode console.log(pi) // 3.142...
Read more

FlappingBird JS13K Games

-
Image
FlappingBird is a Mobile side scroller game where the player controls a bird, attempting to fly between columns trees without hitting them Development of this game started out when i was attempting to draw perfect clouds programmatically on a canvas i later added a few more clouds (Something's missing) add moon, stars,  buildings and also add Gradients and for the games character i settled on a bird (using Sprite sheet obtained freely from opengameart) add more them and animated everything. FlappingBird is a single player arcade-style game in which the player controls the bird, which moves persistently to the right. The player is tasked with navigating the bird through pairs of trees that have equally sized gaps placed at random heights. the bird automatically gravitates and only ascends when the player taps the touchscreen or spacebar. Each successful pass through a pair of trees awards the player one point. Colliding with a tree or the ground ends the gamepl...
Read more

How to target all elements of a given class name in JavaScript

-
JavaScript getByClassName only targets one element by default Workarounds  "loops " Loops can mess up your code I personally don't like them. To target all elements you will have to iterate through all of them for each element you will have to add a event listener Example For instance the are 3 links of a same class and you want to add event listeners on all of them .... .... .... // JavaScript const links = document.getByClassName("links") for(var i = 0; i < links.length; i++) links[i].addEventListener('click', event => console.log(event.target.get attribute('class')))
Read more

Zedplug will be decommissioned on November 30th

-
Greetings to each and every one of you. I am writing this letter to inform you that Zedplug will be decommissioned on November 30th. With the goal of becoming the authoritative source of Zambian music, Zedplug began development in November 2019 and was released on February 18, 2020. Since then, Zedplug has worked tirelessly to achieve its objective of being Zambia's leading music distributor. Throughout Zedplug's history, we've had our fair share of good and horrible times, but we've always been committed to keeping Zedplug up and operating. Among other notable milestones, we've had the opportunity to interact with well-known performers. Zedplug has reached the end of its life cycle. I've made my money, and I feel it's time for me to pull the plug on Zedplug. (Please permit me to serve as your master of ceremonies at this moment.) This is how the dismantling will go down. Recap from a few weeks ago: We halted our routines and refused to distribute any music....
Read more