[Joke extension] Make your vscode an aquarium and heal you !
Tags: vscode
Published: 2022-11-10 02:03:50

# VSCode Vector Aquarium

I introduce my joke extension for vscode.
It makes your vscode cute aquarium and heal you !

Here is Github repository.
https://github.com/le-nn/vscode-vector-aquarium

![Animated](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbgwwoky18nf7tbs2xce.gif)

![Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3omv16ea5n2ciclj29h.png)

## Install

Search vscode-vector-aquarium in your vscode extension tab or install from following url.

https://marketplace.visualstudio.com/items?itemName=le-nn.vscode-vector-aquarium

## Features

* When tapped, bait appears and fish will chase and eat it.
* When fish tapped, fish will diffuse and escape.
* Other creature will swim.
* Grouped fish swim in swarm

## How it works

Swarm of fish is implemented with boid algorithm.
https://en.wikipedia.org/wiki/Boids

Draw and movement logic is here.
https://github.com/le-nn/vscode-vector-aquarium/tree/main/src/webview/libs

## Usage

Open extension tab.

![Open](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iex1zmvevzpm8kske0a4.png)

### View on secondary side bar

Enable secondary side bar from ```View > Appearance > Secondary Side Bar```.
Drag from primary side bar and drop Fish icon to secondary side bar in order to make side bar enabled.


![Appearance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7iz7ssmu861gfmmqr9y.png)


![Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaggddatm8cvcz7pb77t.png)

## Setting

Press F1 and input following command.

```
vscode-vector-aquarium.config
```

And setting file will open.
Here is example of settings.
The fish field represents a swarm of fish.
One child of array is one swarm. Its child field represents one fish.
The setting example is as the field name.

```json
{
    "isFoodEnabled": true,
    "isRippleEnabled": true,
    "fish": [
        [
            {
                "color": "#3f51b5",
                "scale": 1,
                "location": {
                    "x": 0,
                    "y": 0
                }
            },
            {
                "color": "#3f51b5",
                "scale": 1,
                "location": {
                    "x": 0,
                    "y": 0
                }
            },
        ],
        [
            {
                "color": "#2196f3",
                "scale": 0.9,
                "location": {
                    "x": 0,
                    "y": 0
                }
            },
            {
                "color": "#2196f3",
                "scale": 1,
                "location": {
                    "x": 0,
                    "y": 0
                }
            }
        ]
    ],
    "jerryfish": [
        {
            "color": "#9c27b0",
            "scale": 1,
            "location": {
                "x": 340,
                "y": 120
            }
        },
        {
            "color": "#e91e63",
            "scale": 0.88,
            "location": {
                "x": 120,
                "y": 230
            }
        }
    ],
    "lophophorata": [
        {
            "color": "#3f51b5",
            "scale": 1,
            "location": {
                "x": 120,
                "y": 200
            }
        }
    ]
}

```

## License

Designed with ♥ by le-nn. Licensed under the MIT License.