Moving to: m/AskMbin!

7 readers

1 users here now

### We are moving! **Join us in our new journey as we take a new direction towards the future for this community at mbin, find our new community here and read this post to know more about why we are moving. Thank you and we hope to see you there!**

founded 1 year ago

Easy workflows for intentionally upscaled art? (kbin.social)

submitted 9 months ago* (last edited 9 months ago) by insomniac_lemon@kbin.social to c/AskKbin@kbin.social

4 comments fedilink hide all child comments

So the basic idea here is using a low-resolution texture that is designed specifically to be upscaled (anything but the first 3) to a simpler smooth aesthetic. Pixel blob/triangle/hexagon etc in with a 32x-or-lower texture (which is all that is downloaded), crisp shape(s) out. Also probably things like lineart for faces (or other similarly composed pieces), generally less colors hopefully preventing ambiguous details.

Batch conversion / post-processing / basic filter (to preview) are all options, but a live shader in an editor would be more useful. Even better for multiple outputs to see results for different shaders and make designs with their quirks in mind to make specific looks (esp. if multiple shaders can be used), or even just an option to tinker with (say if other pixel-art programs are better).

For an editor, I'd want to use Krita (a G'MIC filter would be fine but the ones I tried weren't great**) or maybe a web editor. GIMP would be fine too.

For a medium I probably want to use Raylib, Godot 3.X (with this aesthetic at least), or maybe even Krita animations? Basic 2D/3D, tile maps (per-layer filtering?), bump maps or other PBR/shader inputs, texture warping, using sprites in 3D, animation etc all seem interesting.

SDF (Signed Distance Field/Function) textures are a similar endpoint (and I would consider using Inkscape for that).

For some backstory, I don't really want the pixel art look (especially because I'm not so good at it) nor do I have the skill for a painted look. I'd rather have resolution-independent* art, but upscaled could allow using raster art's tools/features for better support and easier tools/creation/aesthetic etc. particularly for learning/practice while still allowing for higher resolutions than tested for.

I could probably just go for untextured 3D with vertex colors, but I kinda don't want the extra complexity or needing to use Blender. Though both 2D polygons and 3D meshes could be used alongside upscaled textures.

*= Like THE EYE, but there are issues like it needing not-yet-released-PR which may not perform well if used to create an entire scene, plus AA support not being everywhere even for basic polygons, or language bindings being unavailable for some languages in 4.X (ones that work in 3.X).

**= Upscale [Scale2x] works somewhat (16x with x 8 scale factor to get a 128x texture), though the preview appears broken and you must manually resize your canvas before running it. I suspect this is because it is an older filter.

Meta note: No tags used because the relevant ones I could think of all relate to content, particularly pixel art which this doesn't really relate to aside from specific intention and maybe some techniques.

top 4 comments

sorted by: hot top controversial new old

[–] e0qdk@kbin.social 2 points 9 months ago (2 children)

The Wikipedia article for hqx points out that an implementation exists as a filter in ffmepg.

You can run a command line conversion of e.g. a PNG -> PNG using hqx upscaling like: ffmpeg -i input.png -filter_complex hqx=4 output.png

The =4 is for 4x upscaling. The implementation in my version of ffmpeg supports 2x, 3x, and 4x upscaling.

As a quick and dirty way to get semi-live preview, you can do the conversion with make and use watch make to try to rebuild the conversion periodically. (You can use the -n flag to increase the retry rate if the default is too long to wait.) make will exit quickly if the file hasn't changed. Save the image in your editor and keep an image viewer that supports auto-reload on change open to see "live" preview of the output. (e.g. eog can do it, although it won't preserve size of the image -- at least not in the copy I have, anyway; mine's a bit old though.)

Sample Makefile:

output.png : input.png Makefile
	ffmpeg -y -i input.png -filter_complex hqx=4 output.png

Note the -y option to tell ffmpeg to overwrite the file; otherwise it will stop to ask you if you want to overwrite the file every time you save, and in case you're not familiar with Makefiles, you need a real tab (not spaces) on the line with the command to run.

ffmpeg also appears to support xbr (with =n option as well) and super2xsai if you want to experiment with those too.

I'm not sure if this will actually do what you want artistically, but the existing implementations in ffmpeg makes it easy to experiment with.

[–] insomniac_lemon@kbin.social 2 points 9 months ago* (last edited 9 months ago)

That's really good, thank you! The only thing I'm not liking is that with the default terminal size I couldn't see the error telling me that xbr=8 is not supported (so all I saw was the output just not updating).

Got it working with my image viewer but I need to refresh it with a click and F5.

Haven't tried it with a live image refresh, but tomorrow I'll update my system and try Geeqie as that seems to have reloading too (my current image viewer seems to be dead and they point towards that as an alternative). Or something else.

Too bad Krita doesn't have auto-refreshing references (though there may be a way to do that in some way that I'm unaware of).

Image preview for non-Kbin

EDIT: I tried writing the alt-text twice but I don't see it

[–] insomniac_lemon@kbin.social 2 points 9 months ago* (last edited 9 months ago) (1 children)

e.g. eog can do it, although it won't preserve size of the image

Yeah, that is the case. But it wouldn't be an issue if it could properly zoom-to-fit. I also do not like the CSD (for my current setup with a very minimal custom XFWM window theme at least).

Geeqie has poor zoom too but not zoom resetting, but it updates the image too slowly for my liking (and there doesn't appear to be a setting, maybe it's a performance thing) with watch set to 0.1.

Feh has even worse scaling (the window size is set to the image size), but change a few (non-persistent) settings and it works and updates quickly. Though I don't want this for my image viewer. I guess I could use it just for this, though.

On a side note, a similar-sort of idea I've had to this is using a game controller (I have a Steam controller) for its analog controls to use alongside a mouse (or cheap drawing tablet/monitor) to get more drawing functionality*.

It seems like something possible with evdev or maybe xinput particularly with a remapping tool probably, but I tried it with SC-controller (a while ago) and it didn't seem to work.

*= For instance pressure (or flow) on trigger, rotation on trackpad, angle on gyro, and then extra buttons on that side can be used for other shortcuts.

[–] e0qdk@kbin.social 1 points 9 months ago

I was just thinking about the image resizing thing again when I saw your message notice pop up. Another option for preview is a web browser. A minimal HTML page with some JS to refresh the image would avoid the image resize on reload problem, and gives you some other interesting capabilities. Python ships with a kind of meh (slow and quirky), but probably sufficient HTTP server (python3 -m http.server) if you'd prefer to load the preview on a different computer on your LAN entirely (e.g. cellphone / tablet / ... ) for example.

A simple HTML file for this would be something like:

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
        background-color: #000000;
      }
    </style>
    <script>
      function reload()
      {
          let img = document.getElementById("preview");
          let url = new URL(img.src);
          url.searchParams.set("t", Date.now());    // cache breaker; force reload
          img.src = url.href;
      }

      function start()
      {
          setInterval(reload, 500);
      }
    </script>
  </head>
  <body onload="start()">
    <img id="preview" src="output.png">
  </body>
</html>

Regarding input from a gamepad -- I've had some similar ideas before but haven't really had much success using a gamepad artistically outside some limited things where I either wrote the entire program or was able to feed data into programs that accepted input over the network (e.g. via HTTP and which I wrote a custom adapter for). It's been a long time since I've tried anything in that space though, and it might be possible to do something interesting by trying to make the system see the combination of a gamepad stick as relative mouse motion and trigger as pen pressure. I'm not quite sure how to go about doing that, but I'll let you know if I find a way to do it.