| |
Raistlin
Registered: Mar 2007
Posts: 671 |
Screenshots of Interlace Pics
I’m interested to know what people’s thoughts are on screenshotting interlace pics…
On C64GFX, we do things a bit differently to CSDb. Generally, we care more about the original art than how it’s presented - so we’ll host logos with all the “extras” removed (scrollers, textual information, etc). But of course CSDb screenshots are of how things are actually released.
With interlace pics, it’s more complicated. In theory we should be displaying animations at 50fps (usually) switching between 2 screenshots.. but I’m lead to believe that that could cause battery drain and other problems on devices - plus the FPS probably wouldn’t be 50.
Some sort of blending was suggested.. or simply choosing alternate pixels and merging to create a full-res pic.
The latter is what I’ve tried with some pics .. eg. Some of Leon’s. It looks good and it looks like it’s true to the original creation - I’d hazard a guess that he simply drew these pics at full 320x200px resolution on most of these, actually, rather than drawing on C64 in an interlace editor?
Eg. https://c64gfx.com/image/168046
I toyed with the idea of blending the 1px offset pictures (frame 0 and frame 1).. but I’m not sure that that’s correct either.
Others have suggested some fairly complex blending schemes that presumably show more like it would be on CRT - and I think this is where the 1,000s of colours problem comes in (evident on many CSDb screenshots). This seems unfair since regular MC/HI screenshots don’t get the same treatment.
Anyway, interested to know thoughts… both for CSDb and for C64GFX.com |
|
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
You are taking things out of contexts, and you do it without authors consent. Are you sure that is right thing to do? I know many do not mind, most do not care, but the rest?
Anyway, like with most questions in the style "this or that", the answer is both. Or rather all of them in this case.
Make all the options avaliable and let users choose. No single optoon is better than that. |
| |
Gordian
Registered: May 2022
Posts: 72 |
Quote: I’m interested to know what people’s thoughts are on screenshotting interlace pics…
On C64GFX, we do things a bit differently to CSDb. Generally, we care more about the original art than how it’s presented - so we’ll host logos with all the “extras” removed (scrollers, textual information, etc). But of course CSDb screenshots are of how things are actually released.
With interlace pics, it’s more complicated. In theory we should be displaying animations at 50fps (usually) switching between 2 screenshots.. but I’m lead to believe that that could cause battery drain and other problems on devices - plus the FPS probably wouldn’t be 50.
Some sort of blending was suggested.. or simply choosing alternate pixels and merging to create a full-res pic.
The latter is what I’ve tried with some pics .. eg. Some of Leon’s. It looks good and it looks like it’s true to the original creation - I’d hazard a guess that he simply drew these pics at full 320x200px resolution on most of these, actually, rather than drawing on C64 in an interlace editor?
Eg. https://c64gfx.com/image/168046
I toyed with the idea of blending the 1px offset pictures (frame 0 and frame 1).. but I’m not sure that that’s correct either.
Others have suggested some fairly complex blending schemes that presumably show more like it would be on CRT - and I think this is where the 1,000s of colours problem comes in (evident on many CSDb screenshots). This seems unfair since regular MC/HI screenshots don’t get the same treatment.
Anyway, interested to know thoughts… both for CSDb and for C64GFX.com
ezgif.com gives similiar effect to real (VICE) interlace effect. But fps seems to be variable, propably caused by browser engine.
Delay time: 2
Cross fade frames: checked
Frame delay: 1
Frame count: 2
don't fade last to first frame: checked
Source: Cyclone de l'interieur |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
Quote: ezgif.com gives similiar effect to real (VICE) interlace effect. But fps seems to be variable, propably caused by browser engine.
Delay time: 2
Cross fade frames: checked
Frame delay: 1
Frame count: 2
don't fade last to first frame: checked
Source: Cyclone de l'interieur
looks awfull on my phone. terrible on my laptop, and semi decent on my desktop |
| |
Gordian
Registered: May 2022
Posts: 72 |
Quote: looks awfull on my phone. terrible on my laptop, and semi decent on my desktop
What about video?
https://kawalekkodu.pl/video.html |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
Sorry for double posting.
Theoretically the best solution would be to use window.request AnimationFrame(callbackfunction)
and display 2 images alternatively. It would synchronize to the screen refresh rate. That means it wouldn't be the same rate as on c64 on most monitors, but at least it would display both images for the same amount of time so the nasty flickering would be minimal.
Theoretically, because it is web based, and with javascript you cannot be sure of anything. Even Nikolaj Copernicus might be still alive in some JS context...
Of course using 2 Vice screenshots with pal emulation (or ntsc, depending of original image) turned on would look more true to original experience than 2 crisp representations of data.
If you need, i can help you implement that during the weekend.
Still i would love to be able to see each half image separately, superimposed flicker free version, and fake higher resolution one. |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
Quote: What about video?
https://kawalekkodu.pl/video.html
Much, much better! Seems flawles on laptop and PC, and only glitches ocassionally on the phone.
However i'm not sure how much more data usage it would need. It is a matter of storage space, but more important on outgoing transfer. Depending on the plan it could impqact server costs greatly. |
| |
Gordian
Registered: May 2022
Posts: 72 |
Quote: Much, much better! Seems flawles on laptop and PC, and only glitches ocassionally on the phone.
However i'm not sure how much more data usage it would need. It is a matter of storage space, but more important on outgoing transfer. Depending on the plan it could impqact server costs greatly.
15186 bytes. |
| |
Raistlin
Registered: Mar 2007
Posts: 671 |
Quote: What about video?
https://kawalekkodu.pl/video.html
Trying on my phone, I’m just getting a static frame from this..? |
| |
Gordian
Registered: May 2022
Posts: 72 |
Quote: Trying on my phone, I’m just getting a static frame from this..?
Please check that file directly. You must set looping manualy.
https://kawalekkodu.pl/cyclone_de_l_interieur.mp4 |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
Quote: Trying on my phone, I’m just getting a static frame from this..?
IT's that good!
Try zooming it, you will notice those are actually 2 images shown alternatively pretty quickly.
Though i noticed some compression artifacts. |
| |
Gordian
Registered: May 2022
Posts: 72 |
More accurate refresh rate without loss quality, but size is 69389 bytes.
https://kawalekkodu.pl/video2.html
Command used:
ffmpeg -framerate 1/0.02 -i cyclone_%1d.png -r 25 -crf 0 outputvideo.mp4
Files used: cyclone_1.png cyclone_2.png |
| |
Count Zero
Registered: Jan 2003
Posts: 1931 |
Hm - video.html works on my FF ESR (128.4 here currently) and Chrome, video2.html works on Chrome only. Shrug.
"Video can't be played because the file is corrupt." (using the mp4 directly - html has just a blank page) ? |
| |
Gordian
Registered: May 2022
Posts: 72 |
Quote: Hm - video.html works on my FF ESR (128.4 here currently) and Chrome, video2.html works on Chrome only. Shrug.
"Video can't be played because the file is corrupt." (using the mp4 directly - html has just a blank page) ?
There is something wrong with video codec. I will try encode later.
HTML is <video> tag with attributes autoplay, loop and muted (this one is needed to autoplay without user interaction). |
| |
MagerValp
Registered: Dec 2001
Posts: 1075 |
I'd try a static 50/50 blend as the fallback, and then replace it with a javascript anim with two alternating 70/30 and 30/70 frames.
It'll never look exactly how it does on a proper crt in the web browser, so you'll have to find an approximation that isn't too jarring. Flipping between two frames without blending sadly never looks right on modern browsers.
Extracting hires pixels from MCI like your example above just looks wrong and should be avoided imho — it'll never look anything even remotely like that on a real C64. |
| |
chatGPZ
Registered: Dec 2001
Posts: 11378 |
Those flickering gifs are headache inducing, awful
video doesn't work for me (static), browser doesn't offer "loop" either.
I don't think there is a good solution for this. Not an easy one anyway. You'll either get non synchronised flickering mess - or some super unrealistic blended image.
Maybe you can steal a CRT shader with phosphor persistance somewhere and wrap it into a webgl based viewer. That might work - without showing totally unrealistic result. |
| |
Raistlin
Registered: Mar 2007
Posts: 671 |
Quote: I'd try a static 50/50 blend as the fallback, and then replace it with a javascript anim with two alternating 70/30 and 30/70 frames.
It'll never look exactly how it does on a proper crt in the web browser, so you'll have to find an approximation that isn't too jarring. Flipping between two frames without blending sadly never looks right on modern browsers.
Extracting hires pixels from MCI like your example above just looks wrong and should be avoided imho — it'll never look anything even remotely like that on a real C64.
50/50 blend is exactly what I'm working on right now - and I think is for sure the best solution.
Emulating CRT isn't something that I do for "regular" (non-interlace) images so I won't with interlace either. If someone wants to see these on CRT, they can just bring the pics up fullscreen and plug a CRT into their PC :p |
| |
chatGPZ
Registered: Dec 2001
Posts: 11378 |
What you could also try is producing two images that have the half-frames in alternating lines, and then put those into a gif like above - it may or may not reduce flickering |
| |
Gordian
Registered: May 2022
Posts: 72 |
Quoting chatGPZ
browser doesn't offer "loop" either.
You mean just playing video file (not html file) directly in browser? There should be "loop" option in the context menu.
I really don't know what is going on with 2nd version. It's encoded via libx264 encoder and should works...
Third version: https://kawalekkodu.pl/video3.html
Works in Chrome and FF.
Command used:
ffmpeg -framerate 1/0.02 -i cyclone_%1d.png -r 25 -crf 0 -pix_fmt yuv420p -codec:v libaom-av1 outputvideo.mp4
Codec AV1: https://trac.ffmpeg.org/wiki/Encode/AV1
Browser support: https://caniuse.com/av1 |
| |
chatGPZ
Registered: Dec 2001
Posts: 11378 |
Quote:There should be "loop" option in the context menu.
yeah, right. and it looks much less irritating than the gif version.
However, if browser doesn't loop by default (and there is no way to force it), its kinda useless |
| |
Gordian
Registered: May 2022
Posts: 72 |
Quoting chatGPZQuote:There should be "loop" option in the context menu.
yeah, right. and it looks much less irritating than the gif version.
Video has lower frame rate - closer to real interlace.
Quoting chatGPZ
However, if browser doesn't loop by default (and there is no way to force it), its kinda useless
Yes, it's useless if you want to play "interlaced" images outside the webpage. There is solution for this, just put more than 2 frame into video file, but it will grow. |
| |
Raistlin
Registered: Mar 2007
Posts: 671 |
Ok, I've updated the site now to use 50:50 blending for the interlace pics. I create the blended pics when I run my update-tool for the site - so if a better formula or method comes along that I can implement in C++ then it's easy to update all the pics at the same time.
Though... there're apparently currently 705 images tagged as interlace - and I've so far only setup approx 20 of them.. it's a very manual process to get these done right now. But, yeah, some samples:-
https://c64gfx.com/image/185980
https://c64gfx.com/image/46010
https://c64gfx.com/image/168046
https://c64gfx.com/image/179136
I reckon it's good enough. Filesizes are small, there's no flickering (I know... often there -should- be flickering... but .. meh ..), etc etc. |
| |
CreaMD
Registered: Dec 2001
Posts: 3057 |
I did something similar (mixing of 2 pics) 24 years ago. manually in gfx editor (hence the cropping and different sizes). I made a gallery of party GFX compo pictures in PHP. Entries from every party that I could find were there filterable by year and maybe some other filters. All pics had wrong palette (I liked that one though). The gallery got scrapped by Noname guys for initial CSDB content in all wrong sizes etc ;-). Images got slowly replaced by the correct ones over the years (not sure if all of them, though).
the images are here :-)
http://www.c64.sk/gallery/bopc2/pic/ |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
Quoting chatGPZI don't think there is a good solution for this. Not an easy one anyway. You'll either get non synchronised flickering mess - or some super unrealistic blended image.
Could somebody please hold my beer?
http://brombra.net/hold%20my%20beer/index.html |
| |
CreaMD
Registered: Dec 2001
Posts: 3057 |
🤌🤌🤌 |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
i used vice to make screenshots and i'm using those images,colors seems strangely oversaturated to me.
Anyone can experiment by saving index.html and placing 2 images in the same folder naming them s1.png and s2.png then opening the index.html in the browser.
Source is well documented, courtesy of chatgpt.
looks great on all my devices. On desktop it seems there is no flicker at all thanks to 144Hz refresh rate |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
correction. it ocassionally stutters on my laptop showing the same frame a couple of times |
| |
chatGPZ
Registered: Dec 2001
Posts: 11378 |
Goes into unrealistic blended drawer for me - no difference to static blended image here :) |
| |
Raistlin
Registered: Mar 2007
Posts: 671 |
And again it doesn’t work on my iPhone :-( .. it only
Updates the screen if I scroll/zoom etc. |
| |
Digger
Registered: Mar 2005
Posts: 432 |
It would be nice to offer the preview mode:
1.) Lace (by using GPU accelerated CSS or JS renderAnimationFrame, e.g. I do toggle a CSS class when you switch "dither" to "lace" https://og2t.github.io/retro-palette-explorer/)
2.) Overlay blending 50/50 |
| |
Raistlin
Registered: Mar 2007
Posts: 671 |
Quote: It would be nice to offer the preview mode:
1.) Lace (by using GPU accelerated CSS or JS renderAnimationFrame, e.g. I do toggle a CSS class when you switch "dither" to "lace" https://og2t.github.io/retro-palette-explorer/)
2.) Overlay blending 50/50
That looks good! The “preview”‘hover appears over the contain on the main window, though, so I can’t actually click the options underneath on mobile :-(
I’ll try on desktop tonight. |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
Quote: And again it doesn’t work on my iPhone :-( .. it only
Updates the screen if I scroll/zoom etc.
11 years is a lot for a phone. It has propper support since ios 7.0
groepaz: it is as close as can be. The biggest difference we have influence on is higher than c64 refresh rate. we can lower it but only by integer factor.
on a 60hz monitor it will be 30hz so still too high for pal c64, but perfect for.ntsc.
on a 72Hz and a factor of 3 it would be 24hz, almost like pal but a little less.
I will add buttons to try different factors when i crawl out of bed.
Then there are factors we have no influence on, like the fact modern monitors have totally different characteristics than crt. We could come up with some ways to circumvent it, but i agree it is not worth the effort.
Plus i think image we used is not the best example. It was first one Raistlin posted. I will grab one of Carron's works next time.
t |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
I shouldn't be writing when i'm not fully awake... Please disregard previous post as the details are totally misscalculated.
Anyway - here is experiment with different factors.
Images switching every 1,2,3 frames.
http://brombra.net/hold%20my%20beer/index2.html
@gropeaz: I can still see flickering on 60Hz monitor with option 1, but when the refresh rate is greater than that, it is virtually the same for me as superimposed images. |
| |
Gordian
Registered: May 2022
Posts: 72 |
Test in CSS: https://kawalekkodu.pl/interlace_css.html |
| |
Shine
Registered: Jul 2012
Posts: 354 |
I like your result. |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
Gordian, are you sure blendmode should be soft-light?
What we need to do to superimpose those 2 images is getting average for each pixel. I would do it like that in Affinity Photo, but there is no average blendmode in css...
Notice how displaying alternating frames in my implementation makes the background color of Carrion image blend evenly, as it should, and using your method makes stripes slightly visible. |
| |
chatGPZ
Registered: Dec 2001
Posts: 11378 |
The animated css version looks most accurate from all posted ones to me |
| |
Gordian
Registered: May 2022
Posts: 72 |
Quoting JetboyGordian, are you sure blendmode should be soft-light?
Jetboy, this is the only value that works best IMO. |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
Quote: Quoting JetboyGordian, are you sure blendmode should be soft-light?
Jetboy, this is the only value that works best IMO.
For the Leon picture it is pretty close indeed, but it needs to work well for all of them. Raistlin blend solution seems to be spot on.
But that css interlace works really well. |
| |
Raistlin
Registered: Mar 2007
Posts: 671 |
Thanks Gordian - that does look good! It’ll take me a while to try on the site properly but I’ll get there :-) |
| |
Gordian
Registered: May 2022
Posts: 72 |
And.... Tri-lace: https://kawalekkodu.pl/trilace_css.html
Quoting RaistlinThanks Gordian - that does look good! It’ll take me a while to try on the site properly but I’ll get there :-)
If you need, I can prepare more universal CSS, which takes URL of images from data-* attributes of DIV.lace. Just let me know. |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
Quote: And.... Tri-lace: https://kawalekkodu.pl/trilace_css.html
Quoting RaistlinThanks Gordian - that does look good! It’ll take me a while to try on the site properly but I’ll get there :-)
If you need, I can prepare more universal CSS, which takes URL of images from data-* attributes of DIV.lace. Just let me know.
Frame 2 and frame 3 are the same. |
| |
Gordian
Registered: May 2022
Posts: 72 |
Good catch:) I fix it, was wrong only as separated frames examples. |
| |
Digger
Registered: Mar 2005
Posts: 432 |
Soft-light mode seems to increase the saturation though. |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
I know i'm retarded, but i think if something is going to be done, it should be done right.
There is an error in the css animation, it has keys at 0, 50, 100 while it should have them at 0, 33, 66.
You have them 2 side by side so you can compare, but at the higher rate, so it blends better.
Also soft-light is plain wrong. Compare interlacing result with it, then compare it with proper blend.
http://brombra.net/hold%20my%20beer/trilace_css.html
But Gordian you unintentionally created excellent copy protection for images. They cannot be saved with "save image", and if you make a screenshot it will be not correct :) Of course anyone with a browser and some knowledge can still scrap the sources and reconstruct images, but that requires way more than average knowledge :) I'm impressed! Have not seen it done like that before. Bravo!
In a way that reminds me of LM Dir Fun Fresh cannot type some values into the filenames where he is injecting the code, so he can't do simple lda #$value, but he can load different value and xor it with yet another different value getting what he needs that would otherwise be prohibited. It is exactly the same thing with images here :) |
| |
Gordian
Registered: May 2022
Posts: 72 |
Quoting Jetboy
There is an error in the css animation, it has keys at 0, 50, 100 while it should have them at 0, 33, 66.
Yes, you're absolutely right. I've uploaded wrong version.
Quoting Jetboy
Also soft-light is plain wrong. Compare interlacing result with it, then compare it with proper blend.
As I wrote above, soft-light is the only option which gives results closest to the "real" interlace. Any other value of background-blend-mode it is not as good as this one. It's not the ultimate solution, just example;)
Quoting Jetboy
But Gordian you unintentionally created excellent copy protection for images. They cannot be saved with "save image", and if you make a screenshot it will be not correct :) Of course anyone with a browser and some knowledge can still scrap the sources and reconstruct images, but that requires way more than average knowledge :) I'm impressed! Have not seen it done like that before. Bravo!
Every image embedded as background-image cannot be save by "Save image":) Whatever there is animation or not. |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
Quoting Gordian
Every image embedded as background-image cannot be save by "Save image":) Whatever there is animation or not.
Yes, but not every background image displays wrong when screen shoting. This could be brought to next level by mixing more images, which each looks nothing alaik original picture, but looks exactly the same when you combine all of them.
As Digger suggested, i added pure css solution to blend 3 images to one properly without using blend modes, just opacity (previous link updated). We draw first image with 100% opacity, second on top of it with 50% opacity, and third with 33.33% opacity. In result each image has 33,33% of influence - of course there is some rounding error like always with discrete math, but it is negligible. |
| |
Digger
Registered: Mar 2005
Posts: 432 |
@Raistlin: I hope this last solution solved the problem? I'd still vote for a toggle switch between i-lace and composite. |
| |
chatGPZ
Registered: Dec 2001
Posts: 11378 |
(and interlace should be default really) |
| |
Raistlin
Registered: Mar 2007
Posts: 671 |
Which do we think we'd like most?
I'm not currently looking to emulate CRT .. I don't think that would be fair since the MC/HI pics don't do that. But if "interlace" can be simulated without all the smudging that comes with CRT, I think that would be fine?
Was Gordian's 50hz interlace here the right option..?
https://kawalekkodu.pl/interlace_css.html |
| |
Gordian
Registered: May 2022
Posts: 72 |
I've made a little change in that example.
Previous 50 Hz and 100 Hz based on the linear easings which causes smoother swaps (there is opacity change between images). I added also stepped animation like in the trilace example. It looks like rectangle signal/function, and no smoothness can bee seen. The bigger difference can be seen in the 50 Hz example which is just slower. |
| |
Jetboy
Registered: Jul 2006
Posts: 329 |
YEAH! Now we are talking!
Your new version of interlace, plus my version of css blending and we are ready to go!
btw. There are 2 versions of interlace with MC. With, and without 1 pixel horizontal scroll. It is important to keep that if we want the images to be as true to the original as possible. |
| |
Raistlin
Registered: Mar 2007
Posts: 671 |
Thanks to Gordian, we now have interlace pics interlacing on C64GFX :-)
Leon’s page is a great example of them: https://c64gfx.com/artist/1373/leon |
| |
Shine
Registered: Jul 2012
Posts: 354 |
Yeah indeed, thanks A LOT to Gordian!
I am not a big fan of interlaced pictures at all, but this result seems very suited! |
| |
Gordian
Registered: May 2022
Posts: 72 |
No at all, it was pleasure for me:)
P.S. We add also JS script which prevents flickering empty/black frame(s) when they are not fully loaded (sometimes one of the frames was loaded faster than the other one). |
| |
chatGPZ
Registered: Dec 2001
Posts: 11378 |
Somehow on the website it doesnt look nearly as good (interlace stuttering all the time) as in the css anim in the thread :/ |
