(Potentially) True Accounts of Theigno's Amazing Exploits

Theigno

Supper Mοderator
Staff
Show User Social Media
Hide User Social Media
Joined
Jun 5, 2013
Messages
2,518
Age
26
Location
ɯoɹɟ

Finally decided to claim my very own "What's Happening" Thread!

I'm not yet sure how often and for what exactly I will use this but as I generally don't see the point of announcing details of my private life on the internet, I will probably stick to things related to my miscellaneous Digimon or forum themed activities that don't fit in other threads... or random thoughts and musings, generally noteworthy things or whatever else.

Anyway, let's start off with a miracle that occurred to me this morning!
So I was sitting in my room chewing on an uncooked spaghetti when I accidentally broke off the top of the noodle and it fell on the floor. And it just happened that in the very same moment an empty plastic bottle on the kitchen table was blown over by the wind coming from the open window. The spaghetti and the bottle hit the floor at exactly the same time causing a very unique clacking noise that kind of puzzled me for a moment.

It is truly a magical world.
 

Jay Ukyou

Resistance is Futile
Show User Social Media
Hide User Social Media
Joined
May 14, 2007
Messages
2,111
Location
Nagoya, Japan
...you can't make this stuff, guys! :D
 

Jaybird C

I'm going digital
Show User Social Media
Hide User Social Media
Joined
Jul 20, 2017
Messages
407
Truth is stranger than fiction.
 

Theigno

Supper Mοderator
Staff
Show User Social Media
Hide User Social Media
Joined
Jun 5, 2013
Messages
2,518
Age
26
Location
ɯoɹɟ
On Physics Based Lighting, Digital Studios and Progressive Rendering.. and Gum

Recently, mostly in order to gain some additional motivation, I've decided to rework my 3D rendering and posing workflow I'm using for my Digimon renders.
While it won't be the most incredible difference in terms of results (most of the effects tend to be of the subtle sort), there was quite a bit too get used to. Setting up lights in particular can get a bit more demanding when working with photometric values. There is no longer a "100% light" value that will exactly light up the texture to it's natural brightness no matter how far it's away... now you got a bulb or a spotlight putting out 80000 lumen at 3 meters distance which might totally blow out all the details, or maybe not, depending on how big the model is and it is more often neccessary to relocate or tweak light sources betwen shots, just like in a real photostudio I guess.
Freely scaling stuff around is also out of a question now since everything is now based on having the scene at a realistic scale so the light will behave realistically as well... which brings about a bit of a conundrum at least when it comes to Digimon. Canonically they come in the most varied sizes but as far as Linkz/CyberSleuth is concerned that range is squeezed down considerably. A Belphemon will no longer absolutely dwarf most humanoid Ultimates, it will just be a little bit bigger. So what to do with the lighting setup? Scale the model up to be around 10 meters tall to be accurate to it's portrayal in Savers for example or just use the size it has in relation to the other models in Cyber Sleuth? There is a case to be made for the second option since the model was designed to be displayed at that size but in the end CS uses completely different ligthing methods and resolutions than me anyway. So I'm planning to mostly go for the more "show accurate" sizes (which of course still leaves quite a bit of flexibility since the scale tends to be inconsistent anyway), mostly because lighting a giant model and having to set up all kinds of additional screens and spotlights sounds like a fun challenge.

Of course working with cameras in itself also changes. Instead of having the kind of ethereal generic 3D camera tethered to nothing freely floating around I'm now also working with a setup that simulates a physical camera crane. This of course restricts the camera's movements immensely, and nakes setting up shots a bit of a slower process. No more simply pointing and randomly rotating about, now it's all about adjusting the pan and the tilt of the simulated crane's different parts. What am I gaining from that? Authenticity. Again, this is not something that many would consciously pick up on and it's clearly more aparrent when dealing with animated content but using more down to earth methods simply results in more "natural" angles. Most photos we see are not taken by photographers randomly rotating through the air. Even CG movies tend to use simulated "physical" cameras in order to get closer to the real thing. Our brains have picked up the patterns and, even if subconscoiusly, we've established what a proper perspective looks like. Agin, this becomes more important when animation is involved and the fact that my renders tend to have transparent backgrounds as opposed to any real scenery further diminishes the impact of such aspects but in any case it's practice and it's just very interesting to learn about those things.

The third big change is the way the actual rendering is set up now: Instead of using the standard mode for rendering the Image now gets rendered in a special "Progressive Rendering" mode, an option that I knew the 3D editor had but it actually took me a while to figure out how useful it actually was. Progressive rendering does not work like you would usually set things up; Normally the render settings involve defining a specific amount of samples for shadow calculation, antialiasing Global illumination and so on and then you end up with an output image that will take (for example) 5 minutes to render. The big difference with the Progressive renderer is that all those sampling options are basically skipped and then the images is left to render indefinitly.
Just with this description it's easy to understand why some might not understand advantages of the concept... I mean why would you want to render an image forever? But there are more aspects to this mode the first is that you can always see the current level of detail rendered at any point. The second is that the render can be stopped at any time. And of course the most important part is that, as the C4D manual helpfully points out, "very good results are achieved FAR before infinity".
The renderer works by continually iterating over the image in the form of passes, each one further refining the result. Things like shadows and antialiasing start off rough but continue to get more precise. And when it's precise enough the render can be manually stopped. This is especially helpful when rendering a scene where you are not exactly sure how far to go in with the settings. Let's say we render a scene normally, we set the sample amounts andthen the scene renders for about 5 minutes... and then we notice that somewhere the shadows are still too noisy. Oops, back to the settings, increasing the samples rendering it again... this time it takes for 6 minutes and it looks significantly better. But here's the problem: we needed a sample size that renders for 6 minutes but we actually ended up rendering for 11 minutes because we needed the first 5 minute render in order to figure that out. Here's how things go with the progressive renderer: The image starts rendering like normal... after 5 minutes we take a look and see the grainy shadows and go "eh, that'll take another minute". So we just let it render come back after a minute, see that it's looking better by then and stop the render. It's the same process of observation as before but because we didn't need to render anything all over again the render time became far more efficient.
Of course there are pitfalls to this method as well especially for inexperienced users. The renderer doesn't render anything faster in general and the concept of having infite time could easily lead to innefficient habits like not noticing inefficient shaders. But it's stll useful... and hey if you know you're not going to use your computer for anything else why not just let it sit and render for hours and see how pristine the output is in the end?

But in the end I'm in a position where I don't want to have things to realistic. Sligthly colored lighting with GI can give amazing results but I don't want to falsify the colors of the textures. The same with realistic specular or reflection effects on emtals... those are not only a pain to set up but the material was never supposed to have them. So in many cases specular and other shading effects are already drawn on the texture itself and generation secondary ones on top of that has the tendency to look crappy (for truly realistic renders all materials would of course have to be re-done from scratch with the proper layers to generate the reflections dynamically based on the actual environment). In fact future renders might even go for a bit of a flatter approach to shading since the standard material diffusion in C4D sometimes doesn't end up looking a bit awkward and I've recently figured out ways to reduce it.

Well, I guess that's enough random technical stuff that'll mean nothing to most people. Maybe I'll post something more relatable next time.



Oh and by the way... near my house there's a gumball vending machine, pretty sure it has been there since I was born. It has sold various different kinds of gum over the years that so far have all tasted absolutely terrible (typical for cheap 20 cent gums I guess). Despite this, every few months if there's new kind of gum in the machine I buy some and test if it still tastes as bad as I expect. Today was one of those (randomly) chosen days again. There were no surprises.
 

Theigno

Supper Mοderator
Staff
Show User Social Media
Hide User Social Media
Joined
Jun 5, 2013
Messages
2,518
Age
26
Location
ɯoɹɟ
Python:
[B][PLAIN]The Magic of BBcode [TABLE] Part 1: Creating Dynamic Thumbnails![/PLAIN][/B]

Let's try a bit of a different type of post today, something more "educational"...

If you post a lot of images on this forum you are probably aware of the proper usage of the [PLAIN][THUMB][/PLAIN] and the [PLAIN][THSIZE] [/PLAIN]tags. After all, while the forum automatically limits the maximum width of an image to the width of the post container, having giant pictures take up all the space on the page is very undesirable. These tags however are limited in what they allow you to do and in this post I will introduce a table based alternative method for resizing images that offers multiple advantages over the standard thumbnail tags. These include:

[LIST]
[*]Thumbnail size dependent on screen size
[*]respect for the image's original size
[*]even spacing between multiple images
[*]static and dynamic padding
[/LIST]
If you ask yourself why no one has done this before the answer is that what I'm showing here relies on advanced properties of the table tag that are not documented anywhere in the site's help section so most people are probably unaware of how powerful and versatile the tag actually is. At any point such a property is used it will be explained in a side note prefaced with "[B]Table Fact You Probably Didn't Know About[/B]". Admittedly this method also involves writing more code than the normal tags... [I]far[/I] more when it comes to the more advanced applications. But technology exists to be used! If a certain functionality exists somewhere in the software, no matter how obscure, it shall be exploited for its maximum potential! Forum software is no exception, so let's dive into the world of tables (this will be the first of a multi-part series, tables can do some [I]really[/I] interesting things)...


[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][CENTER][B]The Basics[/B][/CENTER]
[/SUP]
One thing to get out of the way before we start is a bit of clarification: The thumbnail tags actually generate [I]half[/I] thumbnails. They only scale down the source image and don't actually substitute with a smaller version version that would take less resources to load. So if a 2mb JPEG gets scaled down to 150x150px with the tags... it still takes the exact same amount of data to load as it does without the tags. The table implementation also doesn't do that but I wanted to emphasize that we are not losing any functionality compared to the original tag ;)

We'll start with a simple conversion without any of the special features; I have rendered a Greymon and the image is rather big... so I want to scale it down to a thumbnail about 250px win width:
[TABLE]
[TR]
[TD]

[SUB][SUB][SUB][COLOR=transparent].[/COLOR][/SUB][/SUB][/SUB]
[THSIZE=250]https://i.imgur.com/5zoKbgM.png[/THSIZE][/TD]

[TD][TABLE]
[TR]
[TD][URL='https://i.imgur.com/5zoKbgM.png']
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG][/URL][/TD]
[/TR]
[/TABLE][/TD]
[/TR]
[TR]
[TD][QUOTE][B][PLAIN][THSIZE=250]https://i.imgur.com/5zoKbgM.png[/THSIZE][/PLAIN][/B][/QUOTE][/TD]
[TD][quote][B][PLAIN][TABLE="width:260"][TR][TD]
[URL="https://i.imgur.com/5zoKbgM.png"]
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
[/URL][/TD][/TR][/TABLE][/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
On the left we see a standard thumbnail tag approach and on the right the table that produces the same result. The table code is already longer but still quite simple. The thumbnail tag creates an image with a width style and wraps it into a link to the full size image. For the table approach we simply create a new table with one row and one cell and set the "width" property of the table to our thumbnail size (table size overrides image size). We then insert the img tag with the picture inside the cell and wrap it into a link pointing to the itself just like the thumbnail tag does it.
You will have noticed that we needed to make the table about ten pixels wider than the thumbnail tag to get the image to approximately the same size. This is because table cells always have a bit of padding around them which we have to offset. This isn't a big problem since of course it's rarely necessary to work super pixel perfectly when it comes to image thumbnails.
And in case you were wondering about the unusual size of the quotes...


[TABLE]
[TR]
[TD][CENTER][B][SIZE=3]Table Fact You Probably Didn't Know About #1[/SIZE][/B][/CENTER][/TD][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][/TR]
[TR]
[TD]If an element that would normally take up the width of the entire post container, such as a Quote, Code or PHP block, is placed within a table with no defined width it will shrink to match its text content. If it is placed within a table that has a defined width, the same width will be applied to the contained block element as well.[/TD]
[/TR]
[/TABLE]
...This is not exactly critical to what we are doing (in fact it's mostly irrelevant) but it makes for a more varied layout.
Anyway, now that we know how to accurately emulate the thsize tag with tables let's start making the table do some things that the normal tags couldn't do!



[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][CENTER][B]Making image size screen dependent[/B][/CENTER]
[/SUP]
This is the [B]big[/B] important thing that tables enable us to do. Static thumbnails always have their victims so to speak, especially since we live in a time where there's a potentially very big range of possible resolutions that users might browse the forum with. I have a standard Full HD 1920x1080 monitor for example. To me an image with the resolution 600x600 is not exactly big, it's a completely acceptable medium sized square that I can even fit twice in a row in a single post if I want. But for someone browsing the forum on an old 1024x768 monitor (maybe a bit of an extreme example) the image will take up their entire screen width and probably look rather clunky. It's the same for mobile resolutions, especially when browsing in portrait mode. With normal thumbnail tags the user friendly thing to do is to scale things down t the lowest common denominator, have thumbnails really small, so that no resolution has problems. But in that case what about those of us that [I]have[/I] high resolution monitors? We have all that screen space available and the images are not using it even though they could be twice as big without being obnoxious! Isn't that unfair? I would suggest that it is... and also that we can use tables to make this problem go away!

This all depends on a single discovery I made about the
tag a few months ago:

[TABLE]
[TR]
[TD][CENTER][B][SIZE=3]Table Fact You Probably Didn't Know About #2[/SIZE][/B][/CENTER][/TD][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][/TR]
[TR]
[TD]The width of a BBcode table can be defined in pixels as well as in percents, making fluid layouts possible.[/TD]
[/TR]
[/TABLE]
This is pretty much a game changer, since instead of relying on making up a width in pixels and hoping that it's small or big enough for certain devices we can now simply say that we want our thumbnails to have for example one fifth of the width of our post, and this size will stay constant regardless of resolution. Let's demonstrate this by turning our Greymon into a tiny thumbnail:
[TABLE]
[TR]
[TD][URL='https://i.imgur.com/5zoKbgM.png']
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="width:20%"]
[TR][TD]
[URL="https://i.imgur.com/5zoKbgM.png"]
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
[/URL]
[/TD][/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
...And that's all there is to basic relative thumbnails. This Greymon is scaled to 20% of the post's width, which on my full HD display is about 300px wide. On my secondary monitor (1280x1024) the image further scales down to about 200px and so on.
But while the existence of this feature is certainly the main message I want to send with this post, there are many more exciting possibilities that I will demonstrate in the remainder of the post. So let's continue on to...


[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][CENTER][B]Dynamic Padding[/B][/CENTER]
[/SUP]
I have actually used this table scaling method in my Linkz model thread for a while now. I usually like my images centered on the screen and relatively big (as stated before one of the main strengths of dynamic table thumbnails is that it makes including big images in posts more viable since on smaller devices the images also get smaller). At this point I noticed some aesthetic issues with some of the image layouts... and it turned out tables could fix those as well!
Again, let's demonstrate this with Greymon:
[TABLE]
[TR]
[TD][URL='https://i.imgur.com/5zoKbgM.png']
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="align:center, width:45%"]
[TR][TD]
[URL="https://i.imgur.com/5zoKbgM.png"]
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
[/URL]
[/TD][/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
This is basically how I would present this model in my thread, 45% width and centered. However it is only mathematically centered; Visually the centering looks off since because of Greymon's tail there is a lot of empty space in the right part of the image. The naturally eye gets drawn toward the more "populated" right side of the image making it seem like it is not actually centered. In order to [I]visually[/I] center the image we need to nudge it to the right and most importantly we need to do so dynamically. There are "dirty" was to do it, like just including a bunch of white-space or transparent text before the image but that is not only inelegant but also static... since the image scales dynamically the padding needs to be dynamic as well or else the values won't match up. The solution lies in another undocumented table trick:
[TABLE]
[TR]
[TD][CENTER][B][SIZE=3]Table Fact You Probably Didn't Know About #3[/SIZE][/B][/CENTER][/TD][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][/TR]
[TR]
[TD]The "width" and "align" properties are not exclusive to the main table body but can also be manually defined for individual table cells (but not for rows).[/TD]
[/TR]
[/TABLE]
In other words, if we want 25% padding on the right side we can accomplish that by creating another table cell before the one containing our image and defining its width as 25%. The other table cell will automatically take up the rest of the space in the table:
[TABLE]
[TR]
[TD][/TD]

[TD]
[URL='https://i.imgur.com/5zoKbgM.png']
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="align:center, width:60%"]
[TR]
[TD="width:25%"][/TD]
[TD]
[URL="https://i.imgur.com/5zoKbgM.png"]
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
[/URL]
[/TD][/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
There we are again, and this time Greymon looks much better because the center of his body is now at the center of the post. Note however that in order to keep the size of the image the same as before we had to increase the overall width of the table from 45% to 60% since of course the padding cell takes up space [I]inside[/I] the table which we need to offset.
Right now the second table cell is empty and thus invisible but in case you want a bit more precise visual feedback about how much padding is going on exactly there is another handy little table feature for that:

[TABLE]
[TR]
[TD][CENTER][B][SIZE=3]Table Fact You Probably Didn't Know About #4[/SIZE][/B][/CENTER][/TD][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][/TR]
[TR]
[TD]You can define a background color for individual table cells via the "bgcolor" property.
Example: [I][PLAIN][TD="bgcolor:red"]*content*[/TD][/PLAIN][/I]
Like the text color tag the property accepts both color names and hex codes.[/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][/TD]

[TD]
[URL='https://i.imgur.com/5zoKbgM.png']
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="align:center, width:60%"]
[TR]
[TD="width:25%, bgcolor:green"][/TD]
[TD]
[URL="https://i.imgur.com/5zoKbgM.png"]
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
[/URL]
[/TD][/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][CENTER][B]Image size as upper boundary[/B][/CENTER]
[/SUP]
Another way in which our table thumbnails act differently than the normal thumb and thsize tags is that the size limit is applied as an [I]upper limit[/I] instead of an absolute size. Instead of simply being scaling images down, if you were to drop an image into a thsize tag that is [I]smaller[/I] than the size specified in the tag the image will end up being upscaled to that size. In isolated cases this might be useful in very unlikely situations but is very likely to result in a blurry mess instead. Tables thumbnails on the other hand will [B]never[/B] scale an image above its original size, effectively turning the thumbnail into an conditional operation:

[TABLE]
[TR]
[TD]
[URL='https://i.imgur.com/kC8O4sr.png'][IMG]https://i.imgur.com/kC8O4sr.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="width:50%, align:center"][TR]
[TD="align:center"]
[URL="https://i.imgur.com/kC8O4sr.png"][IMG]https://i.imgur.com/kC8O4sr.png[/IMG][/URL]
[/TD]
[/TR][/TABLE][/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
Here we have for example a table thumbnail scaling this image to 50% of the post. However the image is rather small, only 512px wide, which only exceeds 50% of the post width on very small resolutions. Only at those resolutions does any scaling actally take place; everywhere else the image will appear in its original size.

One important thing to note about this kind of conditional scaling is that if you use it in conjunction with a centered or right aligned table you need to define the "align:center/right" property on [I]both[/I] the main table body and the table cell containing the image as shown above. Otherwise the table cell will retain its default left alignment and when a centered table keeps growing while the image no longer scales, the image sticking to the left side of the table will cause it to become off-center.
It is of course also possible to center the image inside the cell with the normal
[CENTER]tags but since the "align" property is directly applied to the [I]td[/I] element and does not in result in the creation of new elements like the
tag, it is the more efficient option here.


[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][B]Consistent thumbnail galleries with even spacing[/B]

[/SUP]
The thing about Thumbnails is that they tend to come in batches. And with the normal forum layout it can be a challenge create a consistent layout for a "gallery" of thumbnail images. Let's say we have 10 images that we want to turn into thumbnails and have them in two centered rows of 5 images each. This is difficult to do normally because of course if the width of our images is fixed the rows will break on smaller resolutions. We can't simply put 5 images next to each other two times and separate them with a line break because we might end up with end up with 4 lines of four and one which would be unacceptable, while simply putting all images in a row also won't guarantee clean rows... so of course we put the images in a table:
[/CENTER]
[TABLE]
[TR]
[TD][URL='https://i.imgur.com/fUEiuOj.png'][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/DMGh6IE.png'][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/fUEiuOj.png'][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/DMGh6IE.png'][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/fUEiuOj.png'][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[/TR]
[TR]
[TD][URL='https://i.imgur.com/DMGh6IE.png'][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/fUEiuOj.png'][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/DMGh6IE.png'][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/fUEiuOj.png'][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/DMGh6IE.png'][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="align:center, width:90%"]
[TR]
[TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[/TR]
[TR]
[TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
We're scaling the width to 90% to have a bit of a margin on the sides and the table handles the rest. We'll have same rows in every resolution. But things get even more interesting if we put a bunch of smaller images into a dynamic table with cells bigger than the images:

[CENTER][/CENTER]
[TABLE]
[TR]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/Nbs1iJA.gif'][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/Nbs1iJA.gif'][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[/TR]
[/TABLE]

[TABLE]
[TR]
[TD][quote][B][PLAIN][CENTER]
[TABLE="align:center, width:70%"]
[TR]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[/CENTER]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
As mentioned before the table will never scale an image above 100%. But it will still evenly distribute the table cells so it will switch over from scaling the images down to inserting spacing between the individual images (It's fun to play around with that by resizing the browser window...).
Again, if the main table is centered it's important that all the images are centered as well, which is why the entire table is wrapped in a
[CENTER]tag. Without it the images would stick to the right side of their table cells.


[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][B]Deactivating auto-spacing via nested tables[/B]

[/SUP]
...But wait! What if we don't like evenly spaced thumbnails? Maybe with some images having all that space between them on higher resolutions simply won't look good... so how do we get the dynamic scaling and consistent rows while getting rid of the automatic spacing? It's easy: By putting our image table inside [B]another[/B] table. When a table is created without a set width it will try to fit its content, scaling it down if there is not enough space. If we create a nested table inside another table the nested table will not inherit the width property of the main table and remain in it's default auto size. It will however shrink if the main table becomes to small.
[/CENTER]
[TABLE]
[TR]
[TD]
[TABLE]
[TR]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/Nbs1iJA.gif'][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/Nbs1iJA.gif'][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[/TR]
[/TABLE][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="width:71%,align:center"]
[TR][TD]
[TABLE="align:center"]
[TR]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[/TD][/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
This our finished second version. Again, the table inside the table has a bit of padding as well so in order to offset that the table has to be 71% wide. When the images are scaled down it acts exactly like the previous table would. But after the images reach their full size the table won't insert any spacing between them. If we are centering the table like in the example, the centering needs to be done using the "align: center" property in both tables since the normal
[CENTER]tag does not work for the table body itself.


...And that's it for today! I hope that some of these techniques will help someone layout their posts in a prettier way although I'm not actually expecting anyone to care as much about this as I do. There's still lots of other crazy things you can do with tables (most of them are not particularly useful though) which I plan to document in this thread at some point in the future.[/CENTER]
Edit: some of the tags don't work yet, quoting the post as "code" until stuff is fixed lol
 

Theigno

Supper Mοderator
Staff
Show User Social Media
Hide User Social Media
Joined
Jun 5, 2013
Messages
2,518
Age
26
Location
ɯoɹɟ
Obituary for a External HDD

Today I have gathered myself here to wish farewell to most of the data on one of my most trusted external hard-drives.

Many, many years ago I owned but a single external HDD. It had a capacity of 1 Terabyte which was pretty nice for back in the day. I must have used it for two or three years when I felt it getting somewhat slower and sometimes it had trouble connecting to the computer for whatever reason; In short I felt my data wasn't especially safe on it any more.
At that point I got myself I new fancy External HDD. It held 2 Terabyte, which back in the day was the most amazing capacity and being able to fill it seemed almost an impossibility. My data would be safe here, but as most of the time the old drive was still working, I devised a sort of Priority based storage system: Any data that was actually important to me I would save on the new fancy drive. Any unimportant files or programs that I didn't especially value but were just kind of nice to have around, I would put on the old drive, which I felt could break any day.
If it did break, I wouldn't lose anything of greater value. If it didn't break I had more usable space. The important part was of course that all that all the important data was safe on the new drive.

And now, a few months ago the fatal tragedy finally struck: The second, (now not so new) HDD I bought stopped working, leaving me with all the pointless data on the really old HDD (which is still trucking along somehow) and none of the data I actually wanted to keep safe. Notice the dramatic irony of almost Shakespearean proportions.

Naturally, I approached a local data recovery service which offered prices between 250€ (reasonable I guess) and 650€ (holy fuck no) for restoring files depending on what sort of file system and hardware damage they found. Unfortunately, their price offer for this particular HDD was 600€ (still a "fuck no" but without the "holy"), since there were indeed hardware failures with the read/write heads and whatnot.
Luckily the diagnosis was free so they'll just send it back.

Much will be lost. Of the most important files, some Digimon related, some not, I do have backups. Some other folders have more or less accidental backups because I've copied them from other drives and forgot to delete the originals.
Some bits and pieces I have and probably still could recover myself, since the HDD isn't completely dead yet; It takes an ungodly amount of time to recognize the drive or load any folder and once every half hour it might be possible to transfer a few dozen Kilobytes.
This might be enough. Much of the actual unique important data comes in rather small pieces, little text files and documents, of notes, a few scripts. Anything bigger is usually something that I didn't produce myself and can get from wherever I got it in the first place (and I have no trouble remembering most of my sources).
So yes, the drive will not truly leave my side. Instead of being completely dead it will remain in a state of barely accessible Limbo, not unlike Commander Powell in Dark Star, who is kept in cryogenic suspension after his death and is still able to contribute information albeit very slowly and inefficiently.

Besides being a heartbreaking tragedy, that will probably be passed on for many future generations to come as a powerful lesson about god knows what, I feel the fallout from this incident is relatively mild and shouldn't set back any of my projects too much.
I should have probably kept moving the important stuff over to any of the newer drives I bought in the meantime (there have been 4 of them by now but mass copying always seemed such a hassle) and made more backups in general, but honestly who actually has enough space to keep two or more copies of everything? I'll figure something out.

Anyway good bye to my to my first 2TB external HDD, it was the hardest of drives and also the most external as well.
 
Top