Vier

Vier is a keyboard-focused pixel art editor heavily inspired by Vim.

A screenshot of Vier

Features

Source code

The source code is available on SourceHut or on my faculty’s GitLab instance.

Installation

Vier is written in Nim, so the language and its tooling must be installed.

For GNU/Linux, just use the command

nimble install https://git.sr.ht/~xigoi/vier

Alternatively, you can install directly from the repository:

git clone https://git.sr.ht/~xigoi/vier
nimble install

Note that you need to have $HOME/.nimble/bin in your $PATH.

Also note that since Nimble does not support optional dependencies, it will download transitive dependencies that are not actually needed for the project. I am looking into ways to solve this issue.

Usage

Launch Vier via the command line on the picture(s) you want to edit:

vier cat.png dog.png

Alternatively, you can launch it without arguments to create a new picture:

vier

Modes and Tools

In most graphics editing programs, there is the concept of a tool, a state of the editor which determines what action is performed when clicking on an image. This is also the case for Vier, but like in Vim, there is also the concept of modes – a state which affects more generally how keys are interpreted.

Vier has these modes:

Inject mode icon Inject mode I
In this mode, the user can move around the selected picture using HJKL keys and draw with the currently selected tool. The color of the pixels being drawn is replaced by the selected color, so this can also work as an “eraser” if the selected color is transparent. If multiple pictures are opened, they can be switched between using Ctrl-H and Ctrl-L.
Add mode icon Add mode A
In this mode, the user can move around the selected picture using HJKL keys and draw with the currently selected tool. The selected color is added on the color of the pixels being drawn, which allows shading an area with a transparent color. If multiple pictures are opened, they can be switched between using Ctrl-H and Ctrl-L.
Select mode icon Select mode V
In this mode, the user can move around the selected picture using HJKL keys and select a part of the picture using the currently selected tool. The selection is currently useless; copy-paste functionality will be implemented later. If multiple pictures are opened, they can be switched between using Ctrl-H and Ctrl-L.
Color mode icon Color mode C
In this mode, the user can move around a color palette (displayed at the top of the screen) to change the selected color (displayed in the upper left corner). If multiple palettes are available, they can be switched between using Ctrl-H and Ctrl-L.
Command mode icon Command mode ;
In this mode, the user can enter a command, displayed at the bottom of the screen, to perform complex actions such as opening a file. The commands are in the Spry programming language, though this is not important for basic usage. The command is executed by pressing or cancelled by pressing Esc.

The following tools are available:

Brush icon Brush B
The brush tool selects pixels that it moves over.
Segment icon Segment S
The segment tool selects a line segment.
Rectangle icon Rectangle R
The rectangle tool selects an axis-aligned rectangle.
Rectangle outline icon Rectangle outline Shift-R
The rectangle tool selects the outline of an axis-aligned rectangle.
Ellipse icon Ellipse E
The ellipse tool selects an axis-aligned ellipse.
Ellipse outline icon Ellipse outline Shift-E
The ellipse outline tool selects the outline of an axis-aligned ellipse.
Flood icon Flood F
The flood tool selects a contiguous area of pixels with the same color.

Keyboard mappings

The key mappings are inspired by Vim. They are currently not customizable.

KeyAloneShiftCtrl
hold to drawhold to draw with secondary color
AMode ← Add
BTool ← Brush
CMode ← Color
Ddelete pixel
ETool ← EllipseTool ← Ellipse outline
FTool ← Flood
Hmove leftprevious picture/palette
IMode ← Inject
Jmove down
Kmove up
Lmove rightnext picture/palette
Ppaste
Qquitforce quit
RTool ← RectangleTool ← Rectangle outlineredo
STool ← Segment
Uundo
VMode ← Select
Wwrite picturewrite all pictures
Xswap colors
Ypick colorpick secondary color
-zoom outzoom out all pictures
=zoom inzoom in all pictures
;Mode ← Command
Note that the mouse can also be used to draw and select colors. The right mouse button draws with the secondary color.

Selection keyboard mappings

Some keys work differently when used with an active selection.

KeyAloneShiftCtrl
Esccancel selection
Aadd selected color on selection
Ifill selection with selected color
Ycopy selection

Commands

e image.png
open a file for editing (the filename is a symbol)
edit "image.png"
open a file for editing (the filename is a string)
flip-x
flip the current picture horizontally
flip-y
flip the current picture vertically
new
create a new picture with a transparent background and the default size
resize 16 8
resize the current picture, anchoring at the northwest corner
resize-nn 16 8
resize the current picture using the nearest-neighbor algorithm
w image.png
save the current picture under the specified filename (the filename is a symbol)
write "image.png"
save the current picture under the specified filename (the filename is a string)

Note that currently, edits done via commands are not added to undo history and break it.

Planned features

Roughly in order of priority.

Non-features

These things will never be added to Vier.

Badges

Written by human, not by AI Please don’t upload to GitHub

Name

I partially created Vier as a semestral project for a Computer Graphics course at my university. The name of the lecturer can be loosely translated as “fear”, so I decided to name the project after a German word which is pronounced the same way. The word means “four”, which hints at the editor treating images as a square grid (with squares having four sides, obviously). I also came up with the backronym “Vim-Inspired Editor of Rasters”.