| |
Raistlin
Registered: Mar 2007
Posts: 625 |
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! |
|
| |
Genius
Registered: Jun 2003
Posts: 25 |
This is really fantastic! Thank you very much! |
| |
Flotsam
Registered: Jan 2004
Posts: 84 |
At work and too busy to read through with thought, but I would stay away from GIFs. Timing varies wildly between different environments. I would much rather use png's and animate with javascript. That also gives much more flexibility.
Didn't get the image size problem really, but why not go with the biggest possible and mask with html/css according to needs? No need to lose information because of the webpage layout.
PS. check requestAnimationFrame for animating PNG. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Quote: At work and too busy to read through with thought, but I would stay away from GIFs. Timing varies wildly between different environments. I would much rather use png's and animate with javascript. That also gives much more flexibility.
Didn't get the image size problem really, but why not go with the biggest possible and mask with html/css according to needs? No need to lose information because of the webpage layout.
PS. check requestAnimationFrame for animating PNG.
Good points!
I went with 384x272 at first because that’s the recommended and most often used size on CSDb. And I started the database with a scrape of CSDb screenshots - with the plan to fix these up over time…
I add borders where I can in my Windows tool (coded in C++) so I could extend that to 408x272. Everything coming from CSDb would need changing over time regardless (which means a LOT of image updates)…. |
| |
CreaMD
Registered: Dec 2001
Posts: 3038 |
Good for easy browsing and comfortable for enjoying art author by author. I like it this way.
As far as animated gif for interlace is concerned, it doesn't look very good IMO. Some kind of different approach is probably necessary if you want to alternate the frames (can it be simulated in browser using js and be more synchronized to framerate smoother using gpu accelaration? If yes do it and alternate between two gifs instead of using gif animation.)
Some way of automatic updating (Something like "sid happens" would be nice so one would have incentive to visit the page often). Last but not least, compo plattform with drag and drop upload of entries, easy voting (reorder images in order of your preference) and easy setup of new compos by anyone interested would add extra good reason to bookmark and use the site.
This or that, good luck with your efforts.
r |
| |
Carrion
Registered: Feb 2009
Posts: 317 |
Are you going to put the wired pic to this database?
Do we need to provide workstages?
;)
On serious note:
This kind of database is hell of a work
you just mentioned interlace, but what about scrolled multiscreen images + many more issues... and most difficult thing who will keep it updated?
There was Artcity. There was c64pixels.com - not active
+ probably few more.
Right now a good reference could be the Toms Retro Gallery at:
https://tomseditor.com/gallery/browse&lang=en?lang=en&platform=.. |
| |
CreaMD
Registered: Dec 2001
Posts: 3038 |
Quote: Good points!
I went with 384x272 at first because that’s the recommended and most often used size on CSDb. And I started the database with a scrape of CSDb screenshots - with the plan to fix these up over time…
I add borders where I can in my Windows tool (coded in C++) so I could extend that to 408x272. Everything coming from CSDb would need changing over time regardless (which means a LOT of image updates)….
CSDB started by scrapping my BOPC (best of party compos database/gallery) back in times (2001), so it's a kind of poetic justice that somebody is starting their project scrapping CSDB. This or that, as far as I remember* they started with finished usable beta release. Your is also usable (for me it's perfect simple interface for enjoying of gfx, I wouldn't make much changes ;-), but as you say, it's not finished. So, work your ass off and come back with something that might be called beta as soon as possible. ;-)
*well, I do. They used c64.sk to annouynce the launch of beta on 28. december 2001 ;-)
Quote:The C-64 Scene Database (CSDb) is now open to public beta testing. Check it out at: http://noname.c64.org/csdb
Kilroy/No Name |
| |
CreaMD
Registered: Dec 2001
Posts: 3038 |
Quote: Are you going to put the wired pic to this database?
Do we need to provide workstages?
;)
On serious note:
This kind of database is hell of a work
you just mentioned interlace, but what about scrolled multiscreen images + many more issues... and most difficult thing who will keep it updated?
There was Artcity. There was c64pixels.com - not active
+ probably few more.
Right now a good reference could be the Toms Retro Gallery at:
https://tomseditor.com/gallery/browse&lang=en?lang=en&platform=..
Carrion, I totally agree (and that's what I suggest in my first comment)
1. Daily update frequency is the key for keeping the audience returning. Hence the need for something like "sid happens" for quick upload of entries (that will be maybe sorted later) or some kind of sync with CSDB.
2. Building userbase, ideally through some kind of interaction, like having compo plattform would make it a solid service worth support.
Additional notes: Worse kind of interaction would be setting up it's own voting, I don't think that is necessary for a gallery. Filtering pics by compo results, or better said, brosing by years and compos and sorted by results would be of course totally awesome. Same goes for gfx type. And last but not least, tagging (content type, composition, whatever) that could be used for filtering. Actually tagging as general filtering mechanism seems (to me) as best approach for categorising the content in general. Everything can be tag in the end (year, compo, country, nickname, gfx type...) |
| |
CreaMD
Registered: Dec 2001
Posts: 3038 |
I have just realized that your goal is to produce the downloadable zip of all files. Well, I don't think it's needed, because it's just representation of the actual releases, not the C64 files itself as is with GB64 or HVSC, so .... But having a site I have described in previous comments for GFX, that would be a bliss. Same goes for SIDs btw, I should probably ask JCH make a compo subplattform at deepsid along the same ideas ;-) |
| |
Acidchild
Registered: Jan 2002
Posts: 470 |
Quoting Carrion
Right now a good reference could be the Toms Retro Gallery at:
https://tomseditor.com/gallery/browse&lang=en?lang=en&platform=..
unfortunately this one is also not active anymore, otherwise i would have added some more diskcovers :(
|
| |
Carrion
Registered: Feb 2009
Posts: 317 |
@Acidchild.
TBH I dont know if it's active or not. There are some latest pics in it so I assuem it's running. But I may be wrong. Anyway ot looks and work very well IMO.
@CreaMD
if it's going to be a zip file then... well there Assembly64 already. maybe just a small feature in Assembly will do the trick. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Re: ZIP: my thinking was that this can continue without me if need be .. because we never know what will happen a few years from now. But, yeah, maybe not needed. I use Assembly64 now and don’t use HVSC’s ZIP/downloads directly.
Re: compos. Yeah, that will be a big part of this. Hosting the compo results in a nice format. But that’s also a great idea re: compo voting. Someone mentioned just today about Sprites Only entries… they get 10 votes during the compo and then people go back and revote relative to CSDb. Generally, CSDb votes really shouldn’t be taken for compo results at all… my site could possibly solve that issue for graphics, anyway. For now, it’s too “volatile” - every picture could change overnight while I play with the formats. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Oh, re: Compo Voting.. maybe someone has an idea here.. but.. it would be good to be able to do that on the site and, in theory, it would be easy enough to do… but…
Scener/User Registration.
You hate down/up votes right now? Without proper scener validation, like CSDb has, you’ll see people using 10 email addresses to upvote their own shit.
Anyone got any ideas how to fix that? Other than asking CSDb to provide some sort of Google-like user authentication, I don’t see how that will work.
Plus, unless the site becomes ridiculously popular (like CSDb), people won’t bother registering. |
| |
Shine
Registered: Jul 2012
Posts: 338 |
What a cool project!
I would add (later) some statistic & sort features like:
Top10 || graphics mode || date || etc.
But for now i would like to have a decent zoom mode.
I think the best would be a 2x zoom without any interpolation. This current "small" zoomer makes the picture a bit buggy imo.
Anyway, go ahead to surprise us! :) |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
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 ;-) |
| |
Jetboy
Registered: Jul 2006
Posts: 268 |
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. |
| |
Flotsam
Registered: Jan 2004
Posts: 84 |
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. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
@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); |
| |
Flotsam
Registered: Jan 2004
Posts: 84 |
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? |
| |
Moloch
Registered: Jan 2002
Posts: 2914 |
Wasn't there something like this about ten years ago? Only survived a few years if memory serves. |
| |
DanPhillips
Registered: Jan 2003
Posts: 31 |
How complete should the list of entries per artist be?
Rob Levy is missing a few by the looks of it :D
Cheers
Dan |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
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… |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
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...... |
| |
spider-j
Registered: Oct 2004
Posts: 485 |
Interesting proof of concept.
I wouldn't put "Copyright Raistlin 2023" at the bottom on every graphicians page though as this is very misleading ;-) |
| |
iAN CooG
Registered: May 2002
Posts: 3177 |
I was wondering, "wasnt' there already another gfx only repo?" then I checked: what happened to https://c64pixels.com ? |
| |
Oswald
Registered: Apr 2002
Posts: 5076 |
Nice to see all images at once, instead of list if releases. just my 2 cents, clicking on an image I expect a fullscreen view, not a hop to csdb. that should be signalled to the user that he is leaving the site.
zooming the pictures on mousehover is a little too much imho, I'd just highlight the background or border around it slightly. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Oswald, some good ideas there.
I already removed the (c) Raistlin just a few hours ago… that was really just to put “something” in my footer code - but I know it works so I just comment it out for now until I need it :-) |
| |
Moloch
Registered: Jan 2002
Posts: 2914 |
Quoting iAN CooGI was wondering, "wasnt' there already another gfx only repo?" then I checked: what happened to https://c64pixels.com ?
Yeah, that was it, I knew something like this existed before |
| |
Moloch
Registered: Jan 2002
Posts: 2914 |
https://web.archive.org/web/20110719010723/http://c64pixels.com.. |
| |
spider-j
Registered: Oct 2004
Posts: 485 |
Quoting RaistlinI already removed the (c) Raistlin just a few hours ago… that was really just to put “something” in my footer code - but I know it works so I just comment it out for now until I need it :-)
I don't know what you removed, but I was talking about this:
Maybe not a good idea in times where graphicians are already on their toes because of AI, wireing, giving proper credit etc... ;-) |
| |
Shine
Registered: Jul 2012
Posts: 338 |
BTW:
Jailbird did something similar back then:
The Pixelling Cow - Beta |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Interesting. I hadn’t seen either of those.
I’m in two minds now whether this is worth pursuing…
A lot of what I’m trying to make is automated and designed to be relatively quick… or, it will be when finished…
Scraping should usually just be done on new entries on CSDb. I analyse screenshots from there, store their sizes in a CSV, “try” to automatically fix borders and sizes to be consistent. I had plans to unify the palette and switch to a better compressed format - eg. 4-bit GIF with LZW. And so on..
Hashtags for country, year, format, competition, etc… competitions will of course be included to show the results.
Lots can be done… but absolutely the big question is: will it survive? Maintaining something like this, even with all the automation above, will be difficult. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Re: the copyright notice … I hadn’t pushed it to GitHub. Doing that now so it’ll be fixed later today :-) |
| |
Oswald
Registered: Apr 2002
Posts: 5076 |
copyright notice.. just add website by, etc. |
| |
Shine
Registered: Jul 2012
Posts: 338 |
Quoting RaistlinLots can be done… but absolutely the big question is: will it survive? Maintaining something like this, even with all the automation above, will be difficult.
You never know if or how long it will survive.
I would really like this project though! |
| |
spider-j
Registered: Oct 2004
Posts: 485 |
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'));
});
This only sets html attributes on all img tags.
You can just set them directly in the html :-)
<img src="bla.png" loading="lazy" width="384" height="272">
|
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Quote:
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'));
});
This only sets html attributes on all img tags.
You can just set them directly in the html :-)
<img src="bla.png" loading="lazy" width="384" height="272">
Ahhh, damned ChatGPT :p .. I asked it how I could reduce the size of my HTML and it suggested Javascript for the constant stuff ..
Just by reading the name, though, I can guess that "DOMContentLoaded" only happens when an image has loaded.. by which time it's too late to add the 'loading="lazy"' tag... doh!
I've fixed this now ... so the pages should now appear much faster. Thanks for pointing that out :-)
I've also fixed the collages/thumbnails .. if you share an artist's page on Twitter/Facebook you'll get a collage of 4x3 images as the embed image. |
| |
spider-j
Registered: Oct 2004
Posts: 485 |
Quoting RaistlinJust by reading the name, though, I can guess that "DOMContentLoaded" only happens when an image has loaded.. by which time it's too late to add the 'loading="lazy"' tag... doh!
No DOM Content Loaded means the HTML is translated into a domain object model by the browser, which usually happens before images are loaded.
Images should load after that.
The "DOMContentLoaded" event is normally used in javascript when you put it into the header (like in your page) instead of the footer of the page (which has become standard), so you can modify DOM nodes but be sure they are already loaded.
Never the less: it's not good practice to use JS for things you can do in HTML or CSS.
You maybe can get rid of the other JS stuff too with CSS media queries:
.container {
width: 408px;
}
.pixel-title {
font-size: 24px;
}
@media (min-width: 808px) {
.pixel-title {
font-size: 32px;
}
.container {
width: 808px;
}
}
@media (min-width: 1208px) {
.pixel-title {
font-size: 40px;
}
.container {
width: 1208px;
}
}
@media (min-width: 1608px) {
.pixel-title {
font-size: 48px;
}
.container {
width: 1608px;
}
}
|
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Ahhh, interesting. I just mentioned it because lazy loading didn’t seem to be working on my phone… it might just be a problem with Chrome for iPhone. With everything inside the IMG tag, it “just works”. Which is good since you also say it’s better to do that way.
I’ll try your other suggestion tomorrow. ChatGPT -did- also suggest the media query stuff, actually, but I was struggling figuring out the right values to make it work. |
| |
spider-j
Registered: Oct 2004
Posts: 485 |
Quoting Raistlinbut I was struggling figuring out the right values to make it work.
I just copied the values your script calculated from the browser dev console.
Usually at work when I'm not sure about some sizes, I just play around with the values in the CSS dev view. You can just select i.e. "width" and then arrow up / down for in/decreasing the values. |
| |
Deev
Registered: Feb 2002
Posts: 206 |
I don't know whether I'm a bit late on this one since it seems like the project may be on hold, but on the subject of screenshots, one of the things I think should be considered if you're creating a dedicated archive of C64 graphics is that C64 pixels (like most 8 bit machines) are not square. Almost every archive online features C64 graphics displayed in a slightly too-wide aspect ratio. This is something that could be corrected using the high pixel counts of modern displays and would be good to consider if you're going for the definitive archive. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
I’m going to continue with the project but make it something more manageable. I’ll add that to my todo list (Trello). If you know what relative width/height each pixel should be, I could give that a go. |
| |
Deev
Registered: Feb 2002
Posts: 206 |
Quote: I’m going to continue with the project but make it something more manageable. I’ll add that to my todo list (Trello). If you know what relative width/height each pixel should be, I could give that a go.
Someone may tell us otherwise, but a quick Google search is saying PAL 0.937:1, NTSC 0.75:1 |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
I've updated the site now with some popup modal window stuff (instead of linking straight to CSDb) - I don't have the details here yet, they're just filled with test data.. but the HTML/CSS/JS side is working on desktop at least. nb. On mobile, and in small windows etc, it doesn't work yet, it'll look very messy.
I've also updated the collage stuff ... if you haven't seen this, just try sharing one of the artist pages (preferably one with 12 or more images) and you should see an image preview on Facebook and Twitter.
Lots of code changes behind-the-scenes too .. all good stuff that might help me open-source this in future. |
| |
Bob
Registered: Nov 2002
Posts: 71 |
Most impressive work in such a short notice and getting up an art gallery just like that. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
FYI, I decided to continue with this as, actually, quite a few people seem to like the way that the art’s presented on the gallery pages…
I’ve put it all on a proper domain now:-
https://www.C64gfx.com
And added a few new features:-
- popups for each pic with details and links to CSDb
- ratings
- most popular (needs more work for pagination - but you can hand-edit the url to test.. I think there’s 62 or 63 pages of releases)
- bbs graphics included and remapped to Petscii
- where a CSDb “graphics” credit isn’t found I’ll instead look for charset, dir art, etc.. not perfect but it’ll do for now
Etc etc. Quite a lot’s changed overall - but mostly behind the scenes. |
| |
Hate Bush
Registered: Jul 2002
Posts: 460 |
talk about being late to the table.
just wanted to say thanks for this Raistlin <3 already found many gems that escaped me before. |
| |
The MeatBall
Registered: Dec 2001
Posts: 367 |
Quote: FYI, I decided to continue with this as, actually, quite a few people seem to like the way that the art’s presented on the gallery pages…
I’ve put it all on a proper domain now:-
https://www.C64gfx.com
And added a few new features:-
- popups for each pic with details and links to CSDb
- ratings
- most popular (needs more work for pagination - but you can hand-edit the url to test.. I think there’s 62 or 63 pages of releases)
- bbs graphics included and remapped to Petscii
- where a CSDb “graphics” credit isn’t found I’ll instead look for charset, dir art, etc.. not perfect but it’ll do for now
Etc etc. Quite a lot’s changed overall - but mostly behind the scenes.
Love it, nice to be able to go and view an artists "catalogue" of works.
Would love to be able to filter on categories or year and suhc :) |
| |
chatGPZ
Registered: Dec 2001
Posts: 11293 |
Quote:Someone may tell us otherwise, but a quick Google
search is saying PAL 0.937:1, NTSC 0.75:1
That sounds correct indeed. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Quote: Quote:Someone may tell us otherwise, but a quick Google
search is saying PAL 0.937:1, NTSC 0.75:1
That sounds correct indeed.
I'm not totally sure what's expected here then..
I try to draw the images on screen at a linear adjustment of their size .. ie. a 384x272px image (which eventually they all will be on the site) will be presented at 384x272, or 768x544, etc. And they should also be presented without filtering.. so you'll get 1x1, 2x2, etc "pixels".
To scale these to PAL/NTSC proportions, we'd be sometimes getting different pixel sizes than 1x1 and 2x2... which I think would look odd/bad..?
Please let me know if I'm misunderstanding, though.
*- I say "try" because, despite my best attempts, Windows still insists on overriding all scaling options and scaling up. Possibly because I'm on a 4K monitor.. so even though my HTML/CSS is "demanding" a certain pixel size, by the time it's displayed, it's been scaled outside of the control of the web browser it would seem :-( (again, if someone knows more about this, please tell me.. and, yes, "Windows is dumb and not for programmers", Groepaz ;p) |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
By the way, the new URL for the website is www.c64gfx.com .. |
| |
chatGPZ
Registered: Dec 2001
Posts: 11293 |
Quote:To scale these to PAL/NTSC proportions, we'd be sometimes getting different pixel sizes than 1x1 and 2x2... which I think would look odd/bad..?
Every pixel has the same ratio, of course (and not 1x1)
The right way to scale in this context is: produce an original image that is two or three times the size of the intended result, but still in 1:1 ratio. Then scale down only horizontally (*) to achieve the wanted ratio (using bicubic or better filter).
I'd do all of this "offline" and not in CSS, so then you at least have some control over the result :)
(*) non integer factor only horizontally that is - of course vertically you will use 2 or 3 then |
| |
Slator
Registered: Jan 2002
Posts: 273 |
@raistlin:
really superb work, it is totally nice to look through all the graphics like this, I already saw a lot of pics I missed otherwise!
thanks! keep up the nice work, please |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
https://www.c64gfx.com
I did a lot of work on “automatic image fixing” today…
That is, “safe” manipulation of the screens to make them more consistent:-
- most images are now 384x272px “VICE” style screenshots - 32px borders on left and right, 35px on top, 37px on bottom where appropriate. Larger scrolling images stay the same - but vertical scrollers should be 384px wide, horizontal ones 272px tall (Nb. These images look totally crap on the site right now anyway - they’ll be squashed to 384x272px in CSS .. but I will fix these better later).
- most images are also PEPTO. Hopefully at a later date I can support other palettes from a selection. But not yet.
Lots of new pics added from Joe, Ax!s and more. Please, if you have pics to add, send them through :-) .. they must be “released” already though. Help me out a bit by detailed which CSDb release ID matches each pic. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
It could be nice if there were an easy way to push some of these pics back to CSDb.. but I think there’d be uproar that 36,000-colour images (for IFLI pics) are now 16col static images.. and that everything is PEPTO. So maybe too controversial ;p
On my site, though…… a C64 has 16 colours. |
| |
chatGPZ
Registered: Dec 2001
Posts: 11293 |
Gotta love how fake handle shit is listed together with other stuff :)
I'm an artist! <3 |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
I’ve made quite a few changes to the site now… including adding in Compos and a nicer homepage. Facet was kind enough to make a logo and give some ideas on layout/style - I haven’t done these yet but have, at least, switched to his colour scheme.
I’m not a web designer .. or web developer .. so please excuse the bugs etc.. it’s especially bad on small screens like mobile.
https://www.c64gfx.com
Please let me know what you think.. and if anyone knows their way around modern CSS, JS and design, please, help :-)
PS. If you try sharing a link to an artist’s page, or a compo page, on social media, or Slack, or Discord, etc etc, you should get a “collage” of images. This will hopefully be useful for driving social engagement :-) |
| |
Oswald
Registered: Apr 2002
Posts: 5076 |
"new releases" etc could be a clickable link to show all new releases, instead of showing more with a timer. ah ok found out that circles are clickable and "more", its not the most intuitive but works. |
| |
Count Zero
Registered: Jan 2003
Posts: 1882 |
I really love the effort you put into this, Raistlin. Keep it up!
The new style also looks nice.
A small comment - on entries which competed in a compo on the large display of the image there is written e.g.
"#2 in the C64 Graphics compo at Tiny PETSCII Compo 2020" with the Compo link being a link to an internal page. Maybe add a direct link to the csdb compo (as it has a description and compo comments usually)? |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
I think what would probably be best for linking to CSDb there would be to add a link on the event page on C64GFx and explicitly list it as a “CSDb link”. That way we’re not leading people away from the site when they might just be trying to go quickly to the compo page - and they can still get the compo info.
I should probably add more info about the compo to the compo page too - eg. Dates that the compo ran. |
| |
Jetboy
Registered: Jul 2006
Posts: 268 |
Small quality of life improvement if I might suggest: Artist Name could be a link to the artist page. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Quote: Small quality of life improvement if I might suggest: Artist Name could be a link to the artist page.
Great catch! I had that at some point .. but lost it when I refactored all the page code.
It's working again on the site now if you do a refresh :-) |
| |
Oswald
Registered: Apr 2002
Posts: 5076 |
its very nice to see the new releases, I'd have missed a LOT of them without, on csdb I just check the latest comments for new releases, if no comment I dont see it :) |
| |
4gentE
Registered: Mar 2021
Posts: 179 |
Maybe do some SEO (or whatever it's called). Google search places the c64gfx.com website too low. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
4gente: thanks for the suggestion. I’ve added some stuff now and registered with Google’s SEO/indexing data. Great suggestion! I’ll keep an eye on things. |
| |
MagerValp
Registered: Dec 2001
Posts: 1065 |
Google's algorithm has been broken for many years now, I wouldn't worry too much about it. |
| |
Deev
Registered: Feb 2002
Posts: 206 |
As the site becomes more establlished and people start linking and sharing, it will start to work its way higher in the rankings.
To help with this, it would be good to make it easier for people to share an image. You could add a querystring to the url when a modal is opened and if the page is loaded with a querystring, make the site automatically show the modal. I think you're using vanilla js, so history.pushState() will be helpful for this. It would be useful if you could update the og tags to show the selected title, image etc
I'm not an SEO person, but have worked with them in the past, so I've picked up a little bit. It could be worth adding the word "graphics" in a couple of places as I think that could feature in a lot of searches you'd be targetting. I'd maybe change the html title to "Commodore 64 Pixel Art and Demoscene Graphics Gallery". I'd also change the "newest releases" header to "newest C64 graphics". I noticed you also have c64demo.com in the meta description. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
@Deev: thanks for the ideas :)
My host is Netlify, a serverless host with very fast page delivery .. so I need to check about the OG stuff. Also, re: changing the URL, I had that feature quite a while - stacking the URLs makes it hard to use the browser’s back button (but maybe I try again: I’m wondering whether it’s allowed to -pop- the url before pushing the new one…….).
I’ll try more keywords as you suggest :-)
Cheers :-) |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Ok, a quick bit of research tells me that I can just use “replaceState” instead of “pushState” when I open/close the modal - so I can do that part without filling up the URL history :-) … I’ll look at this in the morning. |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Quote: As the site becomes more establlished and people start linking and sharing, it will start to work its way higher in the rankings.
To help with this, it would be good to make it easier for people to share an image. You could add a querystring to the url when a modal is opened and if the page is loaded with a querystring, make the site automatically show the modal. I think you're using vanilla js, so history.pushState() will be helpful for this. It would be useful if you could update the og tags to show the selected title, image etc
I'm not an SEO person, but have worked with them in the past, so I've picked up a little bit. It could be worth adding the word "graphics" in a couple of places as I think that could feature in a lot of searches you'd be targetting. I'd maybe change the html title to "Commodore 64 Pixel Art and Demoscene Graphics Gallery". I'd also change the "newest releases" header to "newest C64 graphics". I noticed you also have c64demo.com in the meta description.
I've managed to get all that working :-) .. Netlify is serverless, as I mentioned, but it has things like "Edge Funcitons" for setting up the og: tags.. so I'm using that now. Works quite well I think :-)
I don't have "share" buttons on the pages right now - but might add those sometime..
I've updated some of the text and titles now too so that it hopefully helps Google indexing. I'm still waiting for their search-test stuff to finish checking the site .. it's said "Processing data, please check again in a day or so" for 2.5 days now .. I guess "or so" is their get-out clause.... |
| |
rexbeng
Registered: Aug 2012
Posts: 30 |
Hey! Very nice site, and a much needed one. :)
One question. Is it supposed to gather just the graphic releases (ie single pics labeled as 'graphics' in CSDB), or does the Db expand to pictures extracted from various types of releases (demos, games etc)? |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
It extends beyond just the CSDb single releases for sure - but of course that’s a much bigger job. Check Scrap’s page for example, I added a whole load of his art that never made single release .. and there’re various others. Joe, Razorback, Mermaid, etc etc. |
| |
chatGPZ
Registered: Dec 2001
Posts: 11293 |
You know that you can use VICE to automatically produce screenshots? You can probably automate a lot with some script magic wrapped around it. (-exitscreenshot and -limitcycles are your friends) |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Quote: You know that you can use VICE to automatically produce screenshots? You can probably automate a lot with some script magic wrapped around it. (-exitscreenshot and -limitcycles are your friends)
Ohhhh, that could save me a lot of time perhaps..! Hmm.. I should give that a go next week! |
| |
Deev
Registered: Feb 2002
Posts: 206 |
Quote: I've managed to get all that working :-) .. Netlify is serverless, as I mentioned, but it has things like "Edge Funcitons" for setting up the og: tags.. so I'm using that now. Works quite well I think :-)
I don't have "share" buttons on the pages right now - but might add those sometime..
I've updated some of the text and titles now too so that it hopefully helps Google indexing. I'm still waiting for their search-test stuff to finish checking the site .. it's said "Processing data, please check again in a day or so" for 2.5 days now .. I guess "or so" is their get-out clause....
You may not find share buttons get a huge amount of use amongst the likely demographic anyway, but I think it's a good step allowing people to link to an image.
If you make the site the best way for someone to link to a graphic, that will mean more links to the site which will in turn help with Google rankings. There are some things you can do on-page to help, but a lot of it is convincing the algorithm that your site is the best one to present to the user for a related search.
Just on pushState vs replaceState, the way it's generally done is that clicking the back button will close a modal, so you would use pushState, but when the user closes the modal by clicking a link on the page, you do history.back(), so if they then click the back button it doesn't re-open it. Usage does vary a little though! |
| |
Jetboy
Registered: Jul 2006
Posts: 268 |
Great job with the database.
I'm logged into c64gfx.com why do i need to sign up again to post comments?
Another, more important question, what is the best way to inform you of authorship of multiple images? |
| |
Raistlin
Registered: Mar 2007
Posts: 625 |
Yeah, sorry about the login stuff… I’m trying to figure that stuff out - but other stuff keeps distracting me…
For updates, best way is to contact me - email, Facebook, a PM here, etc.
Thanks, glad you like it :-) |
| |
Matt
Registered: Apr 2002
Posts: 597 |
Yeah, keep up the good work Raistlin!
I hope you keep updating on a regular base! |
