2020-01-02 16:58:06 +00:00
# ocean tiles
2023-06-22 18:17:41 +00:00
In order to have the ocean and land on the canvas, we have to scale up the ocean.png, create tiles and then upload them to the canvas with drawOcean.js.
Execute those shell commands in this folder (utils/ocean-tiles). Imagemagick needs to be installed.
2020-01-02 16:58:06 +00:00
- create folder for tiles:
2020-01-02 18:05:21 +00:00
```
2020-01-02 16:58:06 +00:00
mkdir ./ocean
cd ocean
2020-01-02 18:05:21 +00:00
```
2020-01-02 16:58:06 +00:00
- to split image into tiles:
2020-01-02 18:05:21 +00:00
```
2020-01-02 16:58:06 +00:00
convert ../ocean.png -crop 128x128 +adjoin ocean_tiles%02d.png
2020-01-02 18:05:21 +00:00
```
2020-01-02 16:58:06 +00:00
- upscale and convert to black and white
2020-01-02 18:05:21 +00:00
```
2020-01-02 16:58:06 +00:00
mogrify -resize 2048x2048 -colors 2 -white-threshold 80% -black-threshold 80% ocean_tiles*.png
2020-01-02 18:05:21 +00:00
```
2020-01-02 16:58:06 +00:00
or without dithering:
2020-01-02 18:05:21 +00:00
```
2020-01-02 16:58:06 +00:00
mogrify +dither -resize 2048x2048 -colors 2 -white-threshold 80% -black-threshold 80% ocean_tiles*.png
2020-01-02 18:05:21 +00:00
```
2020-01-02 16:58:06 +00:00
- create subfolders
2020-01-02 18:05:21 +00:00
```
2020-01-02 16:58:06 +00:00
for i in {0..31}; do mkdir $i; done
2020-01-02 18:05:21 +00:00
```
2020-01-02 16:58:06 +00:00
- put into subfolders
2020-01-02 18:05:21 +00:00
```
2020-01-02 16:58:06 +00:00
for file in ./ocean_tiles*.png; do NUM=`echo $file | sed -e 's/.*ocean_tiles//' -e 's/.png//'`; Y=$(expr $NUM / 32); X=$(expr $NUM % 32); newfile="$X/$Y.png"; mv $file $newfile; done
2020-01-02 18:05:21 +00:00
```
2023-06-22 18:17:41 +00:00
- Draws the 2048x2048 tiles from the ./ocean directory on the canvas. Uses localhost:6379 as redis url, if you need a different one, edit it in the drawOcean.js file.
2020-01-02 18:05:21 +00:00
```
2023-06-22 18:17:41 +00:00
npm run babel-node ./utils/ocean-tiles/drawOcean.js
2020-01-02 18:05:21 +00:00
```