Remix: Tribute to anime romance

Link to my remix page

Here’s my remix. Mostly complete except for the credits. Hopefully language isn’t an issue as I intended for the music to be more important. Hope you’ll like it and enjoy!

Can-can in Remixes

In trying to get ideas for remixes, I have been watching many videos on Youtube for the past couple of days. Most of what I came across tended to be quite technically advanced, probably due to many of my searches being biased towards those of Japanese origin and the Japanese videos that make it to Youtube come from very skilled and experienced mixers. However, a popular resource they use for mixes and parodies is the Can-can music, and there are countless mixes of various shows that sync speech clips and patterns with the music. They tend to be funny, but do not sound chaotic although it is just mashing together lines of speech. This was probably among the earliest types of mixes I saw before knowing what a mix was.

These kinds of remixes are too technical for me to attempt in this class, but at least they provided good entertainment. The important thing is that they provide some inspiration as I’m hitting a creative wall with the remix project. I think mixing videos with music as a coherent background element would make a good remix. Good luck to everyone for your remixes!

User interfaces and interactive elements with only CSS3

Web sites have generally been designed with three separate elements – HTML for content, CSS for design, and javaScript for user interfaces and interactive elements. However, with CSS3 becoming much more widely supported lately, there has been a preference in some areas to lean towards pure HTML and CSS for website designs, including interactive elements, and only using javaScript for essential parts of the site such as validating forms or performing search filters that require communication with the servers. Some reports claim that there are still users that do not enable javaScript and/or browsers without javaScript support, and because mobile browsing is becoming so widespread, it saves the data required to send javaScript code and the processing required to run them. I’ve been experimenting with this method of site design for my website, and I’d like to share some tutorials I found that show what CSS3 is capable of doing.

3D effects does require some understanding to how 3D graphics are put together and how they are manipulated, but otherwise it is possible to put together most user interface elements with nice animations and transitions that may be key to attracting and maintaining the interest of visitors to your site. In the set of tutorials in the link above, there are excellent examples of Flash-like interactive applications. Depending on the site you are designing, not everything may come in useful and CSS3 performance still varies greatly between browsers, but otherwise it is something fun to experiment with.


Special Effects in Videos

Ever wondered how special effects in movies or even some independent videos are made? The process is generally too complex and situation-dependent to make this a tutorial, especially if you intend to make and use your own custom effects, but I will give the general concept of how it is done. The techniques can be used in the video or independent projects in a simpler way.

The software I will be focusing on is Adobe After Effects. First, here is a video giving a general idea of what After Effects is capable of.

As you can imagine, with a sophisticated set of effects and a lot of work, it is possible to achieve movie-quality special effects with After Effects. However, the first step before trying to insert any effect into a video is to first have the full animation of the special effect you want to achieve. The hardest part would probably be obtaining a special effects animation clean enough to have the background filtered away leaving only the effect behind, otherwise there will be an obvious box surrounding the effect. Many effects can be purchased, but usually they don’t come cheap, and would likely be too much for amateur editors.

Assuming you have a special effect on hand, you now need to import the video into After Effects for use. Just like layering effects on images in Photoshop, a special effect video or animation is layered on top of an existing video. Because videos are much less predictable than static images, it may take a lot of effort keeping the effect in the intended positions across frames, depending on the amount of movement in the original video. In order to make it convincing, filter and mask layers may also need to be added to change the lighting on the effect and hide any parts that may be hidden due to it being behind an existing object in the video.

As an idea, with enough effort and dedication it should be possible to create your own special effects in Photoshop and After Effects itself, but it would require some mad artistic skill if you want a really eye-catching animation. Simple but effective compositions can be made with still images and clever manipulation of transformations within After Effects, but don’t expect huge explosions, lasers, or lightning strikes to happen easily.

Tick Tock – a unique take on a simple concept

What will you do when you know you only have a few minutes left to live? This question is explored in Tick Tock, a short film made by Ien Chi.

First, I will start off with an overview of how the story is presented. Right from the start of the video, it should occur to everyone that something is off about it. The most obvious first cue would be that the clock is ticking backwards. In the next few seconds, you will notice all the sound has a strange echoing, dreamlike quality, as if everything is happening with altered perception. Subtitles are used for all dialogues, even though it would seem that they are speaking English in the first place. Some people may realize it immediately, while others may need time before the situation becomes clear – the entire video is being played backwards. We are taken through the story in reverse time, starting from the final scene and going back through the main character’s desperate attempts to do everything he needs to before he collapses. The viewers are left to piece together the story by themselves, as going through events backwards will definitely lead to some confusion. This technique is really effective in keeping viewers’ attention on the video, as watching the story unravel backwards is really intriguing. In the end, the message of the video is presented through a quote, and did leave an impact on me.

The video is shot from eye level, most probably with the cameraman always running alongside the actor with a handheld camera. This gives the feeling that the viewer is right in the scene with the main character, giving a feeling of closeness with the story. The way the camera is handled makes the illusion that the viewer is next to the character stronger, moving and behaving like a real person would, except that it does not directly interact with the scene.

Another point that gives this video a strong sense of reality and strengthens the closeness of the viewer with the scene is that the entire video appears to be shot with a single take. There are no cuts in the video, but the emphasized sound effects, constant movement of the camera, soundtrack and probably the reversed audio give a sense of urgency that continually draws viewers in. This also gives an idea of how much preparation was needed before shooting the video. Because of the scale and number of actors required, very precise coordination between all actors was likely needed to successfully present the story in one shoot.

Although the concept behind the video is simple – what someone would do if they knew they only had a few minutes left to live, it is presented in a very creative yet simple way, resulting in a video that is interesting and gives a strong impact at the same time.

Audacity – Changing the pitch/tempo without affecting the other

As our next major project is an audio project, I thought I’d introduce a capability Audacity has that I haven’t seen any other major audio editing software I’ve used offers (admittedly I’ve only tried freeware, but one commercial program I know of, Dexster, doesn’t have it).

I’m sure most people who have had an interest in audio manipulation would have tried at some point or other to reproduce the chipmunk effect made popular by Alvin and the Chipmunks. When I first tried doing that, I realized that the pitch/frequency was highly dependent on the tempo of the sound clip. Which makes sense, as higher pitch requires compressing the data into a shorter amount of time to increase frequency and vice versa.

However, the excellent Audacity filters are capable of changing one property without affecting the other. Open an audio file with Audacity, and you should see a window like the following appear.

Your audio file will be presented as a very nice blue/purple wave. To navigate your file, you can scroll left or right if it is long. You can hold Ctrl + scroll up or down to zoom in and out. In a way, it is similar to Photoshop but it represents sound in a graphical way.

Highlight the portion of your file that you want to modify. Go to Effects > Change pitch… or Change tempo… to change each of those properties respectively. Change speed is the filter that affects both pitch and tempo at the same time.

Change pitch

You will see a dialog like the following pop up.

It will offer you many options to change the pitch. First, you can choose the exact key to change to from the one that the filter has estimated from your clip. I haven’t tried to test the accuracy of the estimate but I still think it’s cool that it can estimate the key from a sound sample.

You can also choose the number of semitones or half-steps to raise or lower, by using a positive or negative number respectively. This is probably the easiest to control without messing up the key if it matters, as semitones are the smallest unit in music.

For the highly technical/physics-inclined people, you can also change the exact frequency in Hertz. I have no idea how such fine control would be used practically, but then I’ve mostly dealt only with music so far, so I didn’t need the feature.

Change tempo

The change tempo dialog looks like the following.

The change tempo filter is much simpler, and allows you to simply change it by a certain percentage. If you know the original BPM of the song, you can specify that and your target BPM instead. The last option for changing tempo is the length of time you want to change that particular portion to.


So those are the two tools available in Audacity that I think are among the more powerful and useful features it provides. There are many other filters in Audacity that can do a lot more, and some of them are quite advanced. It takes a little more knowledge of their function and method in order to use them effectively, but as is the case with most multimedia applications, feel free to experiment all you like. Have fun making chipmunks!

An Analysis of SUTORAIKUanime

SUTORAIKUanime is more of a blog that reviews anime (Japanese animation) episodes as well as introducing Japanese culture, but it uses a design that I think is both simple and effective.

The navigation bar.

At the top is the standard banner that any website uses to identify itself to the world. The navigation bar is located below the banner and is of the horizontal drop-down design. The major sections of the site are on the main navigation bar, and when you hover on some buttons, they will drop down to reveal the sub-sections of that area of the site. This design helps remove the clutter that will result if all possible links are simply placed on a single navigation menu. Additionally the buttons are nicely spaced and have clear highlights, letting the user know where the cursor currently points at.

One frame of the highlights slide show.

The top of the content section of the site contains a slide show that displays all the latest news in each category. This allows users to see at a glance all the newest posts without having to scroll through the page or clicking through each category. The only problem I see is that there is no navigation within the slide show itself, the way some other sites have that allows users to quickly look through the slides. In this case, you would have to wait for the slide you just missed to come back after a full cycle.

The contents aren’t anything special, and are arranged the same way most blogs are, from the latest to the oldest. However, the choice of font style and color makes it easy to tell at a glance the boundary between individual posts. Titles are large and blue, a high contrast color against the grayish-white background. Each post is followed by a lighter-colored box that displays details such as the name of ┬áthe poster, post labels, and links to share the post on a number of social networks and services.

The special box.

The more unique part of the website is in the highlight box on the right of the main posts. This part is divided into three tabs. The first is where a brief introduction and major updates regarding the site’s activities are posted. The second tab is a compact list of the latest posts on the site without the clutter of content, only showing a short excerpt from the beginning of the post. This makes it easier to see what the latest posts are without having to scroll through the main posts. Finally, if you already know what you are looking for you can simply type it in the search box that is in the last tab.

This site clearly shows that you don’t have to be flashy in order to look nice or be effective. There is no over-utilization of Javascript or Flash effects, and embodies the general trend now that many websites are once again moving towards minimalism and elegance.