[CSDb] - User Forums

You are not logged in - nap

CSDb User Forums

Forums > C64 Pixeling > C64GFXDb

2023-12-19 09:23

Raistlin

Registered: Mar 2007
Posts: 587

C64GFXDb

I'd like to announce C64GFXDb (name is subject to change).

In the simplest terms, I plan for this to be something similar to HVSC but for graphics. Primarily, a ZIP file download of as much C64 scene and non-scene graphics as can be collected - but also backed up by a website presentation.

v0.05 download is here:
https://www.dropbox.com/scl/fi/rk8lhbt5lsaolfc836ql6/C64GFXDb-v..

And a WIP website is here: https://c64graphicsdb.netlify.app/

There's a lot to do to get it all into nice shape .. my todo list is quite long already.. for example:-

Collection (ZIP etc)
====================

- sort something out for sceners who used multiple handles .. these aren't handled well right now .. plus I seem to have a bug in my database code that pushes older names into "unsorted"...

- ensure that duplicates are removed

- favour a single palette for all, and a better compressed image format (eg. GIF) .. it's then easy to convert these to different palettes later

- ensure all images are a consistent size (multi-screeners can be different in size in the direction of scroll of course)

The Website
===========

- I don't have a main page as yet, just a nasty horrible, massive list of artist names ... this will of course improve at some point...

- for scrolling images I want to actually scroll them within their grid entry... so they'd be almost like animated GIFs (except animated GIFs are a bad idea, I've found, since they don't cleverly compress scroll animation (and so end up HUGE)

Questions
=========

For image dimensions I've been aiming for the same as CSDb - 384x272. This means we could lose pixels, though, as of course C64 screen can go up to 408px wide... any preferences here? I want most pictures to match so that I can setup the grid nicely without images being scaled oddly.

For such as interlace images my eventual plan was to use animated GIFs and to simply flip frames at 50fps (however many frames there are). Check out Leon's folder for a single example. Do you think this is better - or should interlace pics be given in a different form? Many of the screenshots on CSDb seem misleading to me...

Some images are animated .. where it makes sense I've added these as animated GIFs. Check out my own folder (the Turn Disk image) and Talent's folder for examples... do you think this is a good way to go?

Please, please let me know your thoughts, whether you like or hate it .. what can be done to make it better, more useful, etc etc.

Cheers!

... 67 posts hidden. Click here to view all posts....

2023-12-19 20:58

Jetboy

Registered: Jul 2006
Posts: 242

Also hovering over images makes them pop, change the size and makes them not being pixel perfect. Possible solution - show images as 320x200 screen area on the list, and show them in full resolution when mouse overed.

As for sizes, giving dimensions in pixels should work, unless you use some other modifiers that could mess that up.

On 4K you need to scale everything indeed, because image that is 320x200 on 1024 screen looks ok, but on 4K screen seems like thumbnail.

2023-12-19 22:07

Flotsam

Registered: Jan 2004
Posts: 82

Quote: Ah yes.. if anyone knows their way around CSS well enough to get pixel-perfect sizes, I’d be very interested to know how that works.

I had code that supposedly should’ve worked.. but then it looks like the OS is used to scale things - and on a 4K monitor will scale by 1.5x for example. So even when I’m supposedly showing a 384x272px image at exactly that, it’s still showing onscreen as 576x408px.

Some help on that from someone would be awesome :-) .. ChatGPT was no help at all ;-)

For pixelart to appear as it should the images should be resized in multiples (2x, 3x, 4x, etc.) of original size and with "image-rendering: pixelated" applied to them. Otherwise the pics will appear blurry and ugly like they do here @csdb when you zoom a picture (I've left feedback about it a long time ago, but no reaction). For an img to retain its original size, you just omit any size adjustments or apply it's true pixel size. If you show the pictures as background images, you need to define the pixel size for its parent element.

You can fight the funky pixel aspect ratios and screen sizes with CSS media queries. Google if you you're not yet familiar with them.

Also, Javascript is your friend. This is the kind of application that would benefit a lot from some smart use of scripting, lazy loading at minimum.

2023-12-19 22:31

Raistlin

Registered: Mar 2007
Posts: 587

@Flotsam: cheers! the site should actually already have all of that… it has pixelated, the sizes specified are the size of (most of?) the images (and should eventually be all of them), etc etc… I, with ChatGPT, came to the conclusion that the “system” was doing something - in my case I’m on a 4K monitor (as I’m sure many are) and Windows is just scaling…

Re: lazy loading … I need to check this again. It also is supposed to have that…….

I’m not a web coder at all… ChatGPT’s been my friend here ………..

CSS:

.ic img {
width: 384px;
height: 272px;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -webkit-optimize-contrast; /* Older Webkit browsers */
image-rendering: crisp-edges;
image-rendering: pixelated; /* Modern browsers */
object-fit: contain;
transition: transform 0.3s;
display: block;
margin: auto;
}

I don’t currently have the @media stuff for this - but I had earlier… I removed it because it just wasn’t working well :-(

And the JavaScript which is meant to make the lazy loading work:-

document.addEventListener("DOMContentLoaded", function () {
const images = document.querySelectorAll('img');
images.forEach(img => img.setAttribute('loading', 'lazy'));
images.forEach(img => img.setAttribute('width', '384'));
images.forEach(img => img.setAttribute('height', '272'));
});

function setContainerWidth() {
const multiple = 400;
const windowWidth = window.innerWidth;
const numColumns = Math.floor(windowWidth / multiple)
if (numColumns > 4)
numColumns = 4;
const maxWidth = numColumns * multiple + 8;
const container = document.querySelector('.container');
container.style.width = maxWidth + 'px';

const pixelTitle = document.querySelector('.pixel-title');
const fontSize = numColumns * 8 + 16;
pixelTitle.style.fontSize = fontSize + 'px';
}

window.addEventListener('resize', setContainerWidth);

2023-12-19 22:40

Flotsam

Registered: Jan 2004
Posts: 82

Cool, if you're getting funky image sizes, check your pixel aspect ratio. On Chrome, press CTRL + SHIFT + J for console and type window.devicePixelRatio. Is it an integer?

2023-12-19 23:14

Moloch

Registered: Jan 2002
Posts: 2905

Wasn't there something like this about ten years ago? Only survived a few years if memory serves.

2023-12-20 03:36

DanPhillips

Registered: Jan 2003
Posts: 30

How complete should the list of entries per artist be?

Rob Levy is missing a few by the looks of it :D

Cheers

Dan

2023-12-20 05:43

Raistlin

Registered: Mar 2007
Posts: 587

Quote: How complete should the list of entries per artist be?

Rob Levy is missing a few by the looks of it :D

Cheers

Dan

Right now it will only have graphics of his that are released here on CSDb in the “C64 Graphics” category.. and where he has a Graphics credit…

2023-12-20 06:18

Raistlin

Registered: Mar 2007
Posts: 587

Unless someone can convince me that this is worth continuing (and please take a look at Tom's Gallery first), I will probably just shelve this project.

I might continue for a while as a personal project .. because it's been quite interesting just getting everything together. But, being realistic, unless there's a strong desire for something like this, I don't think it's going to be worthwhile as a public project.

C64 graphics are complex .. so all that you can really have are screenshots. It's not like SID where you can link that SID into your own project - unless we're only talking about pure Koala. C64 graphics can have all sorts of sprite combinations, rasters, VIC tricks, etc etc ... So the value of the ZIP that I was creating is much much less than HVSC's SID archive.

It's been really interesting to work on, actually ... I used ChatGPT to help me create the tool. That tool scrapes CSDb, processes the images, tries where it can to unify the width/height so that more of the images are a fixed dimension, creates "collages" to be used for image previews when sharing on Facebook/Twitter, etc etc.

Really good to work on, I learnt a lot (and, yeah, I let ChatGPT teach me some of the C++ functions that i'd never used before for internet access etc), and despite AI getting a lot of bad press of late, it's honestly shown me that AI -is- 100% the future of programming, like it or not (programmers should embrace it - for now at least there's still a lot of programmer interaction required).

But, yeah, this isn't going to work as a HVSC-like thing unfortunately...

I doubt I'll release the sourcecode for it publically - I wouldn't want multiple people scraping the whole of CSDb's images with this......

2023-12-20 08:59

spider-j

Registered: Oct 2004
Posts: 454

Interesting proof of concept.
I wouldn't put "Copyright Raistlin 2023" at the bottom on every graphicians page though as this is very misleading ;-)

2023-12-20 10:38

iAN CooG

Registered: May 2002
Posts: 3142

I was wondering, "wasnt' there already another gfx only repo?" then I checked: what happened to https://c64pixels.com ?

Previous - 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 - Next

Refresh

Subscribe to this thread:

You need to be logged in to post in the forum.

Search the forum:
Search for in
All times are CET.

Search CSDb

Advanced

Users Online

MCM/ONSLAUGHT
jmin
Jetboy/Elysium
Nicron
bodo^rab
iAN CooG/HVSC
Krill/Plush
Nordischsound/Hokuto..
REBEL 1
DeMOSic/MS^LSD^ONS
psych
Guests online: 62

Top Demos

1 Next Level  (9.7)
2 13:37  (9.7)
3 Mojo  (9.7)
4 Coma Light 13  (9.7)
5 Edge of Disgrace  (9.6)
6 Comaland 100%  (9.6)
7 Uncensored  (9.6)
8 No Bounds  (9.6)
9 Aliens in Wonderland  (9.6)
10 Wonderland XIV  (9.6)

Top onefile Demos

1 Layers  (9.6)
2 Cubic Dream  (9.6)
3 Party Elk 2  (9.6)
4 Copper Booze  (9.6)
5 Rainbow Connection  (9.5)
6 It's More Fun to Com..  (9.5)
7 Dawnfall V1.1  (9.5)
8 Birth of a Flower  (9.5)
9 Daah, Those Acid Pil..  (9.5)
10 Quadrants  (9.5)

Top Groups

1 Nostalgia  (9.4)
2 Oxyron  (9.3)
3 Booze Design  (9.3)
4 Censor Design  (9.3)
5 Offence  (9.3)

Top Coders

1 Axis  (9.8)
2 Graham  (9.8)
3 Lft  (9.8)
4 Crossbow  (9.8)
5 HCL  (9.8)

Page generated in: 0.06 sec.