DWVision Ident Design Process

Just before Christmas we were given the task of recreating BTVision’s ident change to the best of our ability, but have our own styles. The main visual idea behind it is a two colour triangle which floats around an empty scene with a mild blue hue and reveals the text of the ident, and has abstract designs coming from the triangle, representing the various styles of the station. We were told to recreate this to the highest quality we can do. This is a writing about the design processes I used to create the idents, including issues I ran into, and various other ideas.

I started off by making the triangle. I created this using a Cylinder object with three sides, adding some height for the thickness of the triangle. After this I converted the triangle to an editable mesh, selecting all of the edges, and using the Bevel tool with some subdivisions to round off the corners. I was happy with this, however the top and bottom sides weren’t properly attached in the bevel process, and I had to remake them. This was easy enough to do with the Fill Polygon Hole tool, but it left me with a solid triangle, not a hollow one. To fix this, I made a copy of this triangle, added both to a Boole object, and scaled the cutting out triangle up on the Y axis only to make it taller than the original triangle, and then scaled down on the X and Z axis only until I liked the thickness that remained. This worked well, and I converted this process to a new object. The inside walls were all flat though, and didn’t look very nice, so I extruded them in and towards the centre, adding a small amount of bevel to smooth it out. This allowed me to apply multiple textures too, and I added a matt white to the outside of the triangle, and a reflective lilac to the inside. A very similar style to the BTVision one, and I like the way it turned out.

Now that the triangle was done, I could play about with animating it, with things coming out, and revealing the text of the ident. Revealing the text initially proved difficult as my first tests shown, the text flickering a lot as I had issues with Boole. I recreated this with some newly learned XPresso, an easier way to move the object booleaned against the text, and set it up to move with the triangle at an offset. It turned out that the order of the objects in the Boole fixed most of my flickering issue.

Next I started working on the first ident. I recently saw a few tutorials on GreyscaleGorilla.com, and one of them stood out to me. It was text and a spline that frosted over with hair objects. I liked the idea, but I wanted something other than text appearing from the triangle. I thought that a few splined helices would be good. I set up the triangle, and the helices to animate and grow out of the triangle, however it turned out that getting it to ‘freeze’ over proved more difficult than I first thought. This ident took me the longest time of the three, and proved quite difficult in the long run. I found that the hair objects didn’t like being generated onto polygons that change their shape, size, and count. This caused the flickering effect that is visible in the ident. However, this effect turned out to be not as bad as I thought, and I liked the overall style and randomness it brought to the scene. The only issue with hair objects in this way is that the hairs seemed okay when the scene was placed in reverse, but not when played forwards. I had to flip the animation process (end frame at 0, start frame at 300) to get the hair to render correctly, and then I reversed the rendered video in Final Cut to play forwards, adding the music, and a light glow effect to brighten the scene.

The second ident is the one with the coloured shards floating up into the air. This one was relatively simple, but proved a bit more difficult the more it progressed. I started off with the empty triangle, and a simple particle emitter, which would emit very low polygon terrain objects up into the air. I added a wind effect for the particles which was linked with the triangle to always blow out, at a slow steady pace, and I created another wind effect on the ground, which would blow towards the particle stream and rotate to create some turbulence. I duplicated the emitter 8 times, and added them into a null which sat dead centre to the triangle. I then offset each emitter from the centre of the null, and changed the material colours for each one, to a colour of the rainbow. The null slowly spins around too, spreading the colours throughout the shards, and adding variation. I then animated the triangle falling down, first onto its side, and then flat as the shards kept rising. The falling triangle caused an issue where the shards would clip through the side of the triangle as it fell, which is visible the camera. I added a destructor object to the side of the triangle to prevent this from happening. I rendered two versions of this, both by mistake. The first render had the emitted particles too small, and the second render had them too big, however they both took so long to render that I could keep messing about with them, and the deadline was approaching fast. I decided to merge both the large and small ones together, with some transparency and some effects to make it better. It’s not perfect, but it saves time, and works quite well.

The third ident is the one with the green glowing balls that are generated as the triangle moves up, and then at the top they are released and fall to the ground. This was inspired by some popcorn animations, where physical objects pop out of an emitter and collide with each other and their environment. I decided to make them a series of balls, which would emit and grow up an invisible prism made of three planes until they are released when the planes move down under the scene. It seemed a little boring, so I decided to move the triangle up too, as if it were creating the prism of balls as it emits them, reaching the top and then dropping to the floor atop the balls. This worked quite well, and other than a few teething issues where the triangle would fly out of the scene in a spasm due to collision, it worked quite well. The issues I had with this were mostly at render time. Getting camera positions was difficult, and between frames 212 and 229 the camera would go through the floor, resulting in those frames being nothing but green. I had to render this scene 3 times, each process taking around 4 hours on my friend’s computer which was four times as powerful as mine. The objects generated was well over 300 balls, and they were all colliding with each other and the scene every frame, which added to the render time. I then put the video into final cut and added the music I thought was the best for the scene.

This was the design process I used for the creation of these idents, and I personally think they turned out quite well.

Web Design Project

This short writing is to explain the process and ideas behind my web design project.

I was given a task to attempt to give some ideas for a few website ideas, and I came up with a few. These ranged from gallery websites and small stores, to complex mini-game websites. I did have one idea which stood out among the rest, and this was an idea of a website that done nothing but told you how long you had been looking at the website for. My drive behind this was caused by me noticing that a lot of people spend all of their time looking at the same page for hours on end. When they get home, or at work, they spend a majority of their time browsing these websites. Granted, the websites in question offer various services, from social networking, to video or audio streaming, or reading news and events, or researching on things, but some of the other websites don’t really contain anything special. They are simple sites, made in a few days, and end up producing a lot of money for the owners.

Now there’s a topic that is the drive behind a vast majority of the content on the web: Money. Businesses require a website for their service, they pay designers to make the website, and the business gets much more income in the long run. This is what most websites are, with their intrusive adverts, very slow and poorly written code, and not taking user experience into account. I didn’t want to follow this, and I decided to make and style my own. It started out as a really simple square on a gradient background, using some simple Cascading Stylesheets (CSS) as I read up that it’s cleaner to read the code, but has a little bit on the download side. It had two bars spanning the entire width of the browser, one at the top with “The Box” in it, with a nice looking font, and one at the bottom with the copyright notice.

The contents of the box in the middle was a very simple javascript counter which I found as an example on W3Schools.com. It simply ran every 1,000 milliseconds (1 second), and added 1 to a variable, eventually counting up (1 + 1 = 2, 2 + 1 = 3, 3 + 1 = 4, etc). This counts how many seconds the page has been active for, but displaying just some seconds to the user isn’t user friendly, so I done some maths after getting the number of seconds to format it to minutes, hours, etc. I done this by using the maths operation Modulus, which a friend told me about. He explained that the process is the same as division, however its value is what remains. So, 60 Modulus 60 has 0 left over, meaning the seconds is 0. When it goes up to 61 seconds though, if you take 60 seconds away from it, you’re left with 1, “resetting” to 0, in layman terms. This process is repeated for minutes and hours too. The total seconds is regularly divided by 60, and then rounded down. So if the seconds count is 45, and divided by 60, you get 0.75, but it’s rounded down to make 0. This is the minutes counter. Once the seconds goes higher than 60, dividing it by 60 will give you 1, and repeat, rounding down for each second, once you get to 120 seconds it goes up to 2, and so forth. The hours works in a similar way, but instead of getting the seconds count and dividing by 3,600, it simply takes the minutes number and divides by 60. At 59 minutes it will still be 0 after rounding down, but at 60 minutes, it will round down to 1.

This simple timer ran for as long as you were on the page. You could leave it alone, and continue with various browsing. If you closed the page, you’d loose your progress on the website. Going back would start you at 1 again. I looked into various methods of storing the time of users. From MySQL tables, to flat file PHP scripts, but I read up on browser cookies. I’ve heard about these in the past, since some websites use them to store login information, or other credentials for easier methods of remembering user information, without the possibility of getting confused. I looked some more into it, and decided to use a cookie to store the data of the time. It seemed I was looking at W3Schools.com more often as they have a javascript tutorial and examples on storing cookies, but this was for login information. I didn’t want login information, I wanted time. I changed a few of the variables and eventually got it to store the time as a number of seconds in the cookie. This proved troublesome, as I was facing a few problems with reading data from the cookie properly, which I fixed by converting it to a number, and how to get the timer to start from the time stored in the cookie. I started this by checking the cookie when the browser connects. The check will make detect if the number from the cookie is there, and if it is, and it’s not empty, it’ll set the variable used to count total seconds to the number in the cookie, otherwise it’ll set it to 0 if there is no time stored in the cookie.

This cookie needs to be saved periodically though, and similar to how we get hours, minutes and seconds from a large number that counts up, we set up another section using Modulus, however every 15 seconds, instead of 60, meaning every 15 seconds it’ll reset to 0. I have an if statement just under this which will say ‘if the number is 0, save the cookie with the current time’. Meaning the cookie will save every 15 seconds to the user, and when the user closes and comes back, it will start off at the last save, which is every 15 seconds. In addition to this, I wanted something which will get the users attention every now and then. I opted for javascript alerts, because they’re easy to set up, and quick to modify, however I didn’t want the same message to appear all the time.

A friend of mine explained to me about using a system, similar to the cookie saving method, except longer, and it will choose a random number between two others. The number is then passed to another function which will take the number, and pick the represented string from an array (list of values, referenced by an index, in this case the random number). This setup makes it much easier to add and remove the random strings, and I could even randomly change the interval between alerts by changing the modulus value.

This is what I have so far, it’s quick and works quite well in my opinion. The setup is easy to modify at a later date, which makes it easier to come back to for quick changes. This is my website, and I had great fun playing with and developing it.