Guides

Here I collect the resources, guides and tools that I found useful for coding and art.

Basics

There are many-many good guides if you want to learn HTML and CSS. I started with Bro Code's video on the topic, it's detailed and straightforward: https://www.youtube.com/watch?v=HGTJBPNC-Gw

For JavaScript, I found the course on freeCodeCamp very helpful: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/

It's long, but you can jump around, it covers many-many topics, and being interactive helps to actually learn it.

If you have any specific questions, look it up on W3Schools: https://www.w3schools.com/html/default.asp. It's a wonderful resource if you need to find out things about specific elements, functions or properties.

And seriously, if you find an interesting website, and start to wonder how something was made, just right click it, and choose inspect element. You can learn many-many things this way.

Movement on canvas

The HTML canvas is a wonderful tool, I wrote a bit about how it works here. But there are a few specific things I found useful.

This is an article about making nice, harmonic motions using trigonometric functions: https://uxdesign.cc/how-you-can-use-simple-trigonometry-to-create-better-loaders-32a573577eb4. (I used this for the fishes in th eseal game.)

Spritesheets are also very useful. If you use images for characters on a canvas, it's better for the performance if you don't load a different image in each frame. You can have a single image that contains all versions of the character, and only show the relevant part of it. A spritesheet looks like this:

And you have to change the area you show according to the frame number or the user input. This uses the "drawImage()" function of the canvas, and it's very flexible. If you use it fro spritesheets, you'll have to give it a lot of arguments. They are the following: image to use (should be an already made image element), coordinates on the spritesheet (the x moves based on the frame number of the animation, the y is on special circumstances, like user input or events), size of cutout on the spritesheet (this is constant), position on the canvas (this is where the image will show up), size of image on the canvas (this is also constant, it's how big the character will appear).

In practice it looks something like this:

    ctx.drawImage(i.image,
        i.cycleLoop[i.currentLoopIndex] * i.width, YsheetShift*i.height, //coordiantes on the spritesheet
        i.width, i.height, //size of the cutout of the spritesheet
        i.canvasX, i.canvasY + yMath, // position on the canvas
        i.width, i.height //size of the image on the canvas);

Here are two good articles about the details of using spritesheets:
https://dev.to/martyhimmel/animating-sprite-sheets-with-javascript-ag3
https://dev.to/martyhimmel/moving-a-sprite-sheet-character-with-javascript-3adg

SVG filters

There are some very cool things that can be done with SVGs, and these filters definitely worth a try:
https://blog.logrocket.com/complete-guide-using-css-filters-svgs/
The distortion filter is like magic.

The SVG displacement maps are also very interesting by themselves: https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/

Also, the turbulence effect I used for the background of the underwater text is based on this article: https://oreillymedia.github.io/Using_SVG/extras/ch16-feTurbulence.html

The usage of SVGs

SVG means Scalable Vector Graphic. SVG elements can simply be inserted into HTML. They contain a series of paths, they only need a few coordinates to draw up the whole image. This means they usually have a very small filesize compared to jpg and png images that store each pixel. They also have the advantage that they can be however big or small without quality loss. They usually can't have that many details, but it's still nice to use them when possible.

I usually draw them in photoshop with the pen tool, and create shapes. Then you can select one or multiple shape layers, and simply choose "copy SVG". I'm still amazed and thankful that it works this easily.

If you want to use an SVG as a background image or an icon, you have to convert it to image data, I usually use this site for that: https://www.svgbackgrounds.com/tools/svg-to-css/

I always forget this, but changing the size an SVG element is not that easy. To resize an SVG element in a way that makes sense, you have to use the viewBox. The viewBox is in the opening svg tag, and it has the values of "0 0 originalwidth originalheight". No commas. If you have this, you can set the width and the height as you wish.

Pixel graphics

I really came to love pixel art. I use Piskel to make them: https://www.piskelapp.com/ It's a very useful program, you can animate gifs, resize images, recolor the pixels with the same size, export the image as gif, png or a spritesheet, it's relatively easy to use, I can only recommend it.