**Algorithms***Here is some raw prototype gifs, technical info and links to something you can touch with your hands right now. Today, let's talk about algorithms. Specifically, external tools I use to test/prototype stuff for the game.*Welcome to OpenProcessing. It's a minimalistic site where you can test things out without much overhead on top using JavaScript. I will cover several examples via several posts and today it'll be pseudo-3D effect.

https://www.openprocessing.org/sketch/408645That's the sketch that was made before integrating into the game code. Simple, messy, but works. Idea behind pseudo-3D effect was to render the object 2 more times with according matrix distortions so it look like a side of the object. That's why I call it pseudo - there is not really a lot of 3D math involved. Just some 2D matrices. In-game implementation a bit different, but idea still the same.

Entire function fits into:

1. Start at [scaleX*.33, 0, 0, scaleY*(sin(angle) or cos(angle)), 0, 0] matrix. sin used for first, cos for second texture.

2. Multiply it at [1, 0, tan(-angle % PI), 1, 0, 0] matrix.

3. Translate matrix to new anchor depending on rotation angle. (formula depends on texture and angle)

4. Translate matrix on front texture x/y position minus camera position.

5. Apply parent matrix and render.

6. Repeat for second texture.

But just throwing in link and talk a bit about it is boring. Let's show some examples.

That's how it looks in-game. I don't even know if this effect will be used at all in the end, but hey, experiments!

But what if we mess with the code a bit?

First, let's tint textures in different colors, so you can see what actually gets rendered where. Red texture is first rendered side, green - second.

As you can see, it's just same texture drawn with different parameters (disposition, rotation, skewing and scaling). But what if I will use something with transparency, not just simple rectangular shape?

That's... Interesting. This effect does not work well with complex shapes, obviously. To mimic 3D effect in that case, we'll need at least minimal 3D math involved, polygon data (vertex/UV + textures for sides) at least. I'll throw in a few more examples of messing with parameters and breaking algorithm, because why not?

Let's remove scaling. Originally sides are scaled to 33% of texture width.

This actually produced interesting result of side visually appearing wider than front part. In reality they are identical. Go figure. And why not disable readjusting of translation anchor to accomodate for rotation of object?

And we got all rendered sides snapped onto single point, without actually rendering all sides.

Oh, and let's add this to every object on scene (well, except lasers as they use different rendering routine), because again, why not?

Apparently this shown that I did a lazy job implementing algorithm and it ignores sprite origin and flipping state. But as long as this intended to be used on rectangular shapes without transparency, we don't have to introduce too much complexity anyway.