Dark Bit Factory & Gravity
GENERAL => Challenges & Competitions => Topic started by: combatking0 on November 29, 2013
-
I have started work on a PHP / JavaScript monster that I call "Virtual Advent".
Every day from the 1st of December until Christmas Day, the PHP on my server will reveal a little bit more of the JavaScript code. The JavaScript will code for either a demo effect or a piece of scenery, depending on the day.
You will also be treated to a different tune each day, just to mix things up.
The Virtual Advent Calendar is available here: http://fx.barcodebattler.co.uk/virtual_advent/
(http://fx.barcodebattler.co.uk/virtual_advent/preview.png)
-
Bah, I clicked the link before reading about it going live on 1st December ;) Looking forward to it CK :)
-
Very good Readable Scrolling Cubey Words :clap:
-
Thanks guys. The PHP on the server will add more effects and scenery each day, so it will get more interesting over time.
-
Great stuff, music is like a XMAS Arcade Version from the 80s.
-
Very Impressive mate, Can't wait to see what it does on the 25th :goodpost:
-
Hopefully it won't disappoint.
There's a new effect tomorrow, rather than a piece of static scenery.
-
Very cute and fitting theme for december. I'm a sucker for everything christmas related! :)
Nice touch with the calendar-approach too
-
Nice one :) :clap:
The only problem is that i had the same "accident" as i allways had with the chocolate advent calendars. :diablo:
-
What, you found the secret code which unlocks all 14 days of effects which I have programmed so far?
I had better change the locks ;)
-
I guess so ;) But i will not tell to anyone :) and won't do spoilers :)
:diablo: Also wont praise about what i like :( But hey, there is a lot :)
-
Now that the first week is up, I'll post a run down for those who might have missed it:
Day 1: Music & Scroller - Track #1 "It's Beginning to Look a Lot Like Christmas" by Mafialligator. The scroller is rendered using individually rotating cubes which grow as they move away from the right of the screen and shrink away at the left of the screen. Each day the scroller will display the names of more forum members in its greetings and read out Christmas "facts".
Day 2: Clouds - Track #2 "Feliz Navidad" by Mafialligator. The colour of the clouds is chosen depending on the time of day on the server: white during the day, pink at dawn and dusk and grey during the night. The position of the clouds changes when you re-load the page. The clouds are the only thing to be drawn from a bitmap until day 8.
Day 3: Snowfall - Track #3 "Let it Snow" by Bit Shfiter. 2.5D snow falls from the sky.
Day 4: Sound Synch - Track #4 "We Three Kings" by Rush Coil. The cube scroller cubes change size and colour with each beat of the music.
Day 5: Ground - Track #5 "White Christmas" by RecognizeBITSTEP. The ground is displayed. What could that dark grey stripe be?
Day 6: Hills - Track #6 "Joy to the World" by Rush Coil. 3 snow covered hills are displayed in the background.
Day 7: Sky - Track #7 "Have Yourself a Merry Little Christmas" by Mafialligator. Like the clouds, the sky changes depending on the time of day. Watch out for those twinkly stars at night.
-
This is such a cool idea! At first I didn't understand why you were releasing your demo before the deadline but now it all makes sense.
I'm looking forward to the next effect.
I would actually also like to release my demo in such a staggered way to get feedback
-
Cheers Spitfire.
I got the idea from a Teletext advent calendar in the 1990's - for those who might not know what it was, Teletext was like a very early version of the internet, as it displayed all sorts of news and information on your TV using very simple 8 bit graphics.
One year there was a Teletext Advent Calendar: The first day had a completely black screen, but pressing the "Reveal" button brought up one element of the full picture, probably an elf or a present or something.
Day two had day one's image already displayed, with a second part visible when the "Reveal" button was pressed.
This continued until Christmas Day - I think the final picture was of an accident at the toy factory at the North Pole, but I can't find any pictures of it :(
-
I'm a sucker for everything christmas related :) This is just a wonderful addition. Excellent work and great idea!
If people can't get enough of this, there's a windows screensaver-thingie, that allows you to show a webpage for screensaver.
http://web-page-screensaver.googlecode.com/files/Web-Page-Screensaver.scr (http://web-page-screensaver.googlecode.com/files/Web-Page-Screensaver.scr)
Cheers, and merry X-mas :)
-
what an awesome idea ck!
i haven't had time too hang around the forum as much as i would like lately but i have been keeping an eye on your calenders progress on facebook. and i just ran through all the days there :goodpost:..
i really love the scrolling text. and well its all christmasy so whats not too love :). looking forward to seeing where this goes!
-
Great idea Punqtured - I'll give it a try tonight.
Thanks for following my progress on FB, Ninogenio. I've finished day 19 but a still image doesn't do it justice. I won't be posting any images from the final few days on FB, so as not to spoil the surprise.
-
sorry mate, had not written that last post clearly when i said there, i meant just now. not on fb.
i ran each day on the laptop for a while and think it looks really great! im excited too see whats in store. the day by day progression is a brilliant idea.
-
Thanks mate,
I've finished day 20, so if I get hit by a bus there's still more to come for a while ;)
-
Loving the fact that it changes each day CK :) How does the music work btw, is it audio streams or some kind of synth?
Your talk of Teletext made me remember playing the Bamboozled quiz game on Teletext years ago. My sister and I used to love playing that, even more than the SNES :D
-
Cheers Raizor,
The music is selected by the PHP and the required file name is inserted into an audio tag source definition. The music files themselves are mp3 and ogg format, just in case somebody is watching using a non-mp3 compliant browser.
Bamboozle was great - the page numbers used hexadecimal page numbers which were not available on the remote, but were a valid part of the Teletext specification. The page numbers associated with the "fast text" buttons used for the answers used hexadecimal addresses to prevent cheating. I miss Teletext.
-
lets bring back teletext for mobile devices!! :) i also miss the good old teletext days.
i remember when i was a kid thinking it was a really nifty computer with the big block text then taking a tantrum when my mum said it couldn't play dizzy.
-
Drifting a bit off-topic here, but I could do a Teletext style website in Javascript using the canvas. That should run on mobile devices.
I heard the guy who wrote Digitiser moved on to write scripts for kids TV shows.
Back on topic, I've just finished day 22, but could go back to day 21 to add a little variety ;)
-
Bamboozle was great - the page numbers used hexadecimal page numbers which were not available on the remote, but were a valid part of the Teletext specification. The page numbers associated with the "fast text" buttons used for the answers used hexadecimal addresses to prevent cheating. I miss Teletext.
Hehe, nice :)
-
Drifting a bit off-topic here
indeed! sorry mate,
finally the lamp post has arrived! :) just realized you have added a time of day at the side that controls the sun and moons position accordingly and the lamppost switches off and on depending on day or night.
its developing into a proper dynamic scene, how cool!!
-
Thanks Nino,
The server time used to dictate the hour setting, which is used to determine the sky colour and sun / moon position.
With the Hour control the visitors don't need to wait for hours to see the sky change and the house lights & lamp post turn on and off.
I've finished coding day 24 - once I've done day 25 I'll post the source code.
-
Week 2 is up, so here's a run down just in case anybody missed it:
Day 8: Sun & Moon - Track #8 "Silent Night" by 8 Bit Jesus. The sun changes colour to red during dawn and dusk while it is normally yellow. The moon is drawn from a bitmap. Initially, the time on the server dictated the time of day in the demo, but I have also built an hour selector so we don't need to wait for the server to catch up.
Day 9: House - Track #9 "Santa Baby" by Mafialligator. Like the sun and moon, the house follows the day / night cycle with the timing of its internal lights.
Day 10: Wreath - Track #10 "O Come O Come Emmanuel" by Rush Coil. Sorry guys, this was included just to make up the numbers and is very difficult to spot unless you look for it.
Day 11: Lamp Post - Track #11 "Rudolph the Red Nosed Reindeer" by 8 Bit Jesus. The lamp post turns on at night and off in the day - it even mimics the red "warming up" colour at dusk.
Day 12: Snow Pile - Track #12 "What's This?" by Mafialligator. A mound of snow has appeared under the lamp post. What could it be?
Day 13: Snowman - Track #13 "Walking in the Air" by 8 Bit Bonkers. It's a snowman. Just a man made of snow. That is all.
Day 14: House Decoration - Track #14 "First Noel" by DMA-SC. There's a message in the lights, but you can only read it at night. Its speed is dictated by the rhythm of the music.
-
I have now uploaded the source in the first post, minus the music, since there is 139MB across 50 files.
If you choose to run the source on a PHP enabled server, please do not spoil the surprise. Feel free to read the Christmas "facts" on line 19 though, some of them are funny :)
-
"SNOW IS ACTUALLY THE DANDRUFF OF ANGELS"
that's it i am becoming a hermit next time it snows ;D
it looks like there is some really handy code in there! k++
what would you suggest as an easy means for me too test the code out ck? when it comes too browser based stuff i am a complete noob but would love too learn lol. cheers mate
-
The best way to test the source code would be to install a PHP capable web server on your computer and host the source as a web page.
If you don't have access to a web server, it is also possible to copy the source from its current running location by using the "View Source" function in your browser and then saving the output. That way you lose the PHP randomness while retaining full JavaScript functionality. This may be tidier than trying to unpick the PHP from the JavaScript from the original source file. For absolute full functionality you'll need a copy of the music tracks, but since there's over 130MB of them I can't host them here. I'll put links up on Christmas day or Boxing day if you want to download them.
I have just realised that I have left out the JavaScript modules for the music - these are selected by the PHP depending on which music track is playing. I'll put them into the zip file and re-upload it.
If you want tips on specific aspects of JavaScript, let me know and I'll do my best to explain it.
-
thanks ck,
i did a little reading last night and have started too get a little feel for how this stuff works. so too run your code i have two options, either strip all the php out leaving just the java behind or instal a virtual server such as http://www.apachefriends.org/en/index.html.
i think in the interest of learning ill have a go at removing the php bits out first. i tried your tip through firefox but couldn't figure out how to get it to automate the process.
some really cool stuff, thanks ck!
[edit] ahh i see what you mean!! if i rip the code from your uploaded php code then it gives me a local html code file k++ 8)
-
One of the good things about this particular demo is that you can rip local html sources at different stages of development using the Day setting and see how the different JavaScript modules work together.
-
Week 3 has ended and Christmas is close. Here's a quick recap:
Day 15: Igloo - Track #15 "Fairytale of New York" by 8 Bit Bonkers. I have built an igloo - not particularly festive, but wintery.
Day 16: Pine Tree - Track #16 "Oh Christmas Tree" by Rush Coil. The tree is up, finally!
Day 17: Baubles - Track #17 "Winter Wonderland" by Mafialligator. There's only a few baubles, but look at the size of them - they're quite large when you examine the scale of everything!
Day 18: Tree Lights - Track #18 "Angels We Have Heard On High" by Rush Coil. Chaser lights in 6 different colours now adorn the tree. They also move to the music.
Day 19: Wind - Track #19 "Carol of the Bells" by Rush Coil. The wind blows the clouds and snow around. Also, this is my favourite music track.
Day 20: Smoke - Track #20 "I Saw Mommy Kissing Santa Claus" by Mafialligator. There's smoke rising from the chimney. Santa had best be careful when he arrives, as the wind might blow it into his face...
Day 21: Lamp Post Lights - Track #21 "Last Christmas" by Goto80. The design of the lamp post lights is selected at random by the PHP. Can you spot all of the different designs? Also I've heard Goto80 hails from Sweden. SWEDISH STYLE!
-
It's a nice concept you got there!
It's better to watch it at night, when neon lights is on. :)
-
wow what a massive difference those few small additions have made ck :clap:
really loving what you have done here. the wind blowing the snow and smoke about, the neon sign's and shooting stars.. also really love todays tune, i can fully appreciate how much work has gone into this after doing some work in the last few days with a bit of php/java... having too manage all the individual states etc you should be really proud of what you have done here so far well done mate!!
-
I'm glad you appreciate it. Every one of the 1563 lines of code was carefully crafted by hand.
There's only 3 more items / effects to be added. Any guesses as to what they are?
-
:) does it have anything too do with a big man who dresses in red, and a massive bag full of gifts by any chance?? ;)
-
They arrive together on one of the future days. That leaves only 2 other things.
-
i can see on the 24th at night the igloo will light up but for the life of me as much as i have searched i cant find that 3rd effect lol
-
Well spotted. There's going to be a star on the tree too.
-
What a neat idea ck0. I really enjoyed watching this! :)
-
-
As always nice web prod! ;)
-
and the fun comes too an end :(.. i really enjoyed your little project here ck it leads into christmas in a really nice way and looks lovely! :cheers:
-
I'm glad you all like it. Hopefully it'll pull a few votes - I'm confident that this will get into the top 5.
-
Awesome idea and fantastic tune(s)! Too bad I did not experience the full journey, I got straight to the pudding, which isn't so bad either! ;)
Well done! :cheers:
-
Cheers Kirl. Any favourites from the music selection?
-
I haven't gone over them all but I really dig Fixa Halvljuse, I've got it playing in another tab right now. :updance:
-
Very nice! Even noticed the scroller is made of tiny spinning cubes!
Nice work!
-
Thanks emook.