this post was submitted on 07 Feb 2024
3 points (100.0% liked)

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
 

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.

you are viewing a single comment's thread
view the rest of the comments
[–] 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.