i was playing around with 3d engine lately...
it was really fun...

there is lot of terms that i didn't understand...
im using Away3D port OpenFL...
this engine was originally from flash...

it is old and unmaintaned... but still kinda powerful enough to play around...

the reason i use this engine is because i already familiar with openfl...
since i used to code a lot in flash back in the day
then after flash died i switch to haxe and use openfl...

the other reason is i can easily export my project to multiple platform...

there is other 3d engine that still maintained in haxe called Heaps.io....
the problem with this is... it kinda hard to export to mobile...

it is possible but you need to build it yourself...
im not a pro in that field... so i pick openfl which take care all of building and just give me the final result...

im still not quite understand how to imagine the vector3d...
it is simple when there is only X and Y axis..
but now there is Z axis which make thing kinda confusing

here is the simple scene that i follow from the tutorial...

Click Image to view HD version

from this simple scene i learn a lot...
first is how light work...

now i understand what is ambient, specular, and density in lighting
from what i understand
ambient is minimal light the object should have...
specular is the shiny thingy on the object...
and density is the light level of the light itself

feel free to correct me...

the thing that i didn't understand is why material and light object have those property?
this is the problem when you use 3d engine without the scene editor...

you cant actually change the variable and see what changes...
i plan to make simple ui like slider maybe to change some property...
so i can see modify the property at runtime...

next is some texture type...
there is lot of texture type that i use in that scene...

there is bitmap texture which is just an bitmap image in general...
then spectular map... and if im correct... is just to map where spectular should happend in texture...
black color mean no spectular...
and lastly normal map... this is the most interesting of all texture...

it is determine how light should interact with object...
kinda like bend the light so it make illusion that there is some depth in the object...

before i learn 3d... i though normal map was some kind of black magic to easily shape 3d model...
no... it just how light will interact with the object itself...

next i want to try import 3d model...

because this is some old engine...
fbx format isn't fully supported yet...

instead im gonna use obj format for static model and md5 for animation...
for the texture it will be process manually from in the runtime...

dont worry...this is exactly what i want to do...
im planning to process material myself...

there is awd format actually which is exclusive for this engine...
it can store a full scene... like all the geometry, material, light, etc...

the reason i didnt use that is...
the file size is quite big for a simple scene...

ok now lets try make a simple 3d model...
i use blender 2.79...

uhmm... yeah.. i use old blender...
my laptop cant handle the newer version of blender lmao...
2.79 is the most recent that i can use without too much lag...

luckily i have some experience using blender back in the day...
lets use a default monkey head from blender...
the export it to obj file...

for the texture i just bake i simple ambient light...
and save it to png...

finally just parse the data to the away3d...
and boom you get a monke

Click Image to view HD version

wow... that was a really fun experience...
it is hard to make 3d scene without the scene editor lmao...

maybe im gonna try install unity or godot instead...
yeah hopefully my laptop can handle those big engine...

Ok its time to work on the other section...
currently... there is only 2 section...

both share the same layout... a simple single post page...

now i want to work on Art Gallery Section
this require a new layout both for single page and for listing...

usually when designing a layout...
im just drawing a rough sketch for what im gonna do...
listen... im not a pro lmao...
i just use whatever i think its work okayy...

here is some basic rough sketch for what im gonna do for the lisitng layout

Click Image to view HD version

its a bit different than my approach with the normal post listing...
i want to have a subsection... in this case year

while in the Art Gallery Section...
i want to list all subsection and some of the content from that section...

and if you click view more
im gonna list more of the content with the pagination...

as for the image box...
i took lot of inspiration from other art gallery website...
this is what im come up with...

Click Image to view HD version

the title only visible when mouse hover into the box...
i think that gonna look cool...

oh yeah... for the view count... it is not working yet...
i need to make the counter first...
this is will be implemented later... when i am working on comment system

lastly for the post page layout itself...
i just edit from the normal post page layout...

the only different was it support multiple images...
more meta tags...
and rating system...

of course rating system wont be available right now...
this will come later with the view counter...

and that's it... Art Gallery section is up and running...
i am planning to include all my art i made that i can found...
from back in the day... when i am starting drawing to this day...

ok that's the art gallery

now i want to do some changes with normal layout...
making this subsection make me want to add subsection too to the normal listing...

maybe adding year and month would be a good idea...

then for the post layout...
instead of showing next and prev post on the bottom of the page...

i want to show similar post instead...
maybe like 4-5 listing post

the first would be prev post and the second would be next post...
the rest would be random post from either the same section or same tags

i still wanna talk about the comment system...
but this post already long enough...
and maybe comment system deserve its own post...

yesterday... i am feeling really weird...
i dunno my head just feel really dizzy...
also i got eyestrain...

i didn't do much yesterday...
i spent my day drawing yesterday...

i think that the cause...
my eyes just stare at the screen too much...
and maybe i am just tired in general...

anyway after a good healthy amount of hours sleeping
i am feeling great today...

but i do wake up bit late than usual...
i did wake up early.. but i still feel a little bit eyestrain...
so i took another few hours sleep hehe...

now everything is finee...ready to back on track...
just remember too not overdo it like yesterday

Ohhh... my godnesss...
I'm almost wipe my entire progress again lmao...

i always forget to commit my progresss...
so i am trying to use xampp instead of built in hugo server

i build and watch my website to xampp htdocs folder
then i realized hugo didn't remove old unused files...

there is --cleanDestinationDir flags... but it just wipe the entire folder...
i have another stuff too in htdocs folder that i didn't want to remove...

then i make a simple batch file to remove all file excluding some folder that i want to keep
the problem is... i am not quite experienced with windows batch syntax...

i am always use linux most of the time...
but currently i am using windows right now....

i am search online and managed to make this script

for /F "delims=" %%i in ('dir C:\xampp\htdocs\ /b') do if not "%%i"=="SomeFolderHere" (rmdir "%%i" /s/q || del "%%i" /s/q)

you see the problemm...

here...
at this part (rmdir "%%i" /s/q || del "%%i" /s/q)

i completely forget to include the folder path...
that means it will delete file in the current path where the batch file located...

and you know where i put the batch file is?

yess... correct...
in the root project file...

it almost wipe my project...

luckily it only delete index layout...
which is really easy to recover...

thx god...

this could be a lesson...
from now on i am gonna commit all my changes....

Its now a new month everyone...!!
well... its depending on your location actually...

anyway... i decided to change the font...
in the previous post... i though the problem was i didn't include multiple font format...
this wasn't the case... it was the font itself...
its kinda wierdd... i really love that font actually...

this is the previous font that im using Grandstander
but i didn't wanna cause anymore confusion when designing layout...

soo yeah... its time to change it...
for now i am using Bubblegum Sans...
it is free for personal use... soo don't mind if i do....

i choose more generic looking font...
so that it render consistent on desktop and mobile...
well it looks the same on my laptop and phone... i dunno with other ppl phone...

oh... im also change a bit in page layout...
just to make things easier to read...

im really struggle reading loong text like this one old design...
i guess using gradient background on text isnt a good idea lol...

yoo....it arrive...
i bought new ram a few days ago...

it is just basic 4gb ram... yeah its nothing big actually...
ive been using 2gb ram for a very long time...

recently i want to use vscode to do my coding stuff...
it is bit heavy for my old laptop...
i cant open anything in the background when i use vscode...
soo yeahh.. i need more ram for that...
i like vscode because how powerful it is...

noww.. i can do any multitasking without problem...
it also improve a bit when i do browsing...
its kinda much smoother... especially when i scroll through the web...

in case you're wondering what laptop did i use...
it is Lenovo G485 ...

uhm..yeah i know...it is really old one...
i dont do gaming on my laptop...

using old slow laptop not really a problem for me...
mostly i use my laptop just for drawing and coding...

its work perfectly finee...

hi there...!!

uhmm ok... i want to talk about this little simple feature...
it is called something like lightbox image thingy??
basically here how its work...

there is an image... you click it.. then it get into fullscreen mode...
just like the one you found in medium right??

i want that featurree...
but... as you already now...

im just a lazy person.. so i went into google to find somekind of framework...
then i found this one called....lightense-image
its is pretty simple and does what i wanted....
but there is some issuee... somehow its kinda broken when using container with flex display...
when i try to zoom....it didnt center perfectly...
there is this github issue...
they said try to wrap the image inside div... i did... it work when you didnt resize the div...
but in my case... i need to resize the div... and when i do that.. it just broken...

am also try bunch of other framework but it just straight wierd, bloated, and annoyingg...
i cant find one that work perfectly for me...

aight then... guess i have to make my own...

here is the main problem with the other framework that i tried...
they just take the current image when im click it then make it fullscreen...
after i close the fullscreen mode they tried to move it back to the original place...
some framework even place it at wrong position and just broken lol...

that just too much work...
i can do better...
what if instead of use the current image...
you just make copy of it...
append to body... set the z-index to the front...
then when you want to close it... just simply destroy it...
that way you didnt need to move any image... easyy...

here some proof of concept...
it work like a charm... try to click those cute imagee..

of course it is in flex display...
i need to change the div size so i can use object-fit style on the image...
i think lightense-image just freak out whenever i use object-fit inside flex item...

thats cool... but sure it need more improvment...
for now it just really basic...

im planning to add more feature...
like you can actually zoom in/out certain part and use drag event to move...

just make small ui... slider perhaps... to zoom in/out...
and for the drag event.. it just simply add the event listener done...

also i want lazy load image too... this one is bit tricky...
this one you need two image... the actual image HD quality and the thumbnail...

the image will show the thumbnail one.. but when you click it.. it show the HD one...
this gonna save lot of data usage especially when your bandwidth is limited like mine lol...

this one is bit tricky because i didnt want to make two image...
instead i want to make it automatically generated the thumbnail...

Hugo already support this feature... but... it only work on layout... not the markdown file...

there is a way... using this thing called shortcode...
i really didnt like to setup that thing...
it is not that hard... just annoying...

i swear in jekyll you can use any function inside the markdown if i remember correctl (i could be wrong thoo)...
why Hugo... just make it.. it gonna make thing easier...

yeah but for now im gonna leave it that way..
it is good enough already...

ohh boii... this one is a really long talk xD
i can keep going but i need to really stop here lol...

okay see you on the next post i guess...

This is something i didn't think gonna happened...
soo...

hm....i just realized that font render different on mobile and desktop browser...
especially my font that im using right now...

this really mess up my padding size...

(Left are from desktop, right from mobile)

The size are bit different?
i only noticed right now because im used to use my phone as secondary display to preview live reload of my website...

what? the image too small?? you cant see it because you cant zoom the image? uppss my bad...
currently i haven't implemented click to zoom yet...
i don't know what it called... there is maybe a framework for it...

*Edit i already implemented it.. click the image to fullscreen (kinda off, check my next post)

anyway...

i rarely preview it on desktop
because you know how browser nowdays really taking lot of resource...
and i only have this dinosaurs's age laptop...

speaking of my laptop... im already order new ram
i bought 4gb ram... yeah its better than 2gb ram that im using right now...
it should arrive in 1-2 days...

ok... i think this is because the font format im using??
im not sure yet... you know how browser sometimes require multiple type of font?
yeah i just skip and use single ttf instead... maybe that the cause??

i haven't check it yet...
there is two solution thoo...
if im correct i should provide the other font type... but here's the problem...
i don't remember if the font i use have the other font type...
and i pretty sure i cant just convert it and call it a day...

the other solution is just use another font...
but again... i love this font... its look very interesting... and i love it...

welp...if i cant resolve this issue....
maybe im just gonna use this font and ignore anything lmaoo...

who cares about the design being ruined just because the scale are different...
this is my website anyway... i can do anything i want...

sooo.... Hugo right...
yess...

ok actually....
originally this project using hugo at the very beginning lol...
then i switch to vue3 because i want to learn like proper webdev using powerful framework...
at first it was going smoothh... but as the time goes on... it just getting harder to get things work the way i wanted to be...
mainly because im not a smart enough to understand how to do something...
there is like a lot of trick that i must use... it just doesn't feel right...

i always avoiding using webpack... it just to confusing for me...
i know how it work... but it just to confusing... lot of config that i didn't quite understand i just simply copy paste from site like stackoverflow...
i usually use browserify to build any js web thingy... it much simpler and didn't require lot of config...

after that i just said enough... this is too much for me...
im just wanted to make simple website so i can share anything i like....
not to be confused by all the framework thingy...

don't get me wrong... i love vue3.. the learning curve is really friendly for hobbyist programmer like me...
but im not ready to use it... for now... im just wanted something simple enough...

then i found this cms called CraftCMS...
it really easy and i love it...
i rebuild my website and convert all my layout to this cms...

it was fun until yeah... i decided to reinstall my os and completely forget to backup the database...
i haven't push the website to live server yet... so yeah only layout and web data survive...
and i lost interest to recover all my work...

after a few month i want to comeback...
i got all the layout and stuff... i just need to construct it back...
i didn't want to use database anymore... because im scared all my data gone again...
i just want a everything all in one folder...
so it easier to do a backup

it sound like the job for static site generator right...
im still got all old layout when im still using hugo...

it much easier to convert my new layout which is using CraftCMS to Hugo because they share almost identical syntax....

and that brings us here....
a very simple static site using hugo...

i just do a full circle back to hugo lol...

ohh yeah... im aware there is other static site generator like jekyll or nextjs...
i prefer hugo just because i already familiar with it