The first step was to build the frame. The frames were put together, and then the screen was stapled onto the frame so that it was really tight on the frame.

I forgot to take a picture, but after we built our frame we applied a thin layer of photo emulsion onto our silkscreen. While we waited for the emulsion to dry, we took a walk to Katari on Elgin Street and got our designs printed on an acetate sheet.

The next step was to prepare the positive. We placed our acetate sheet on top of our silkscreen, and let it sit under the light for approximately 12 minutes. This made is so that the areas that are not hit by the light (i.e. the black parts on the acetate) will become soft and washable afterwards.

This is what the screen looks like after the baking. The light green area is then washed off using lukewarm water, leaving behind only the baked emulsion in the areas that were transparent on the acetate sheet.

Next, we let the screens sit in front a fan for a bit to let it dry.

The screen is now complete and ready for printing! YEAH!!! Really impressed at how smooth and accurate it turned out.

I went nuts and started printing on all sorts of materials. I started off with white ink on pink cloth, and I think it looked awesome. Good to know for when I make t-shirts in the future.

I then tried white ink on a black shirt. Looks rad, if I may say so myself! I’m starting to like the ‘negative’ version of the Move Your Mountain logo more than the original :)

I made my mark on Spins and Needle’s communal tarp as well. The blue brain design is my friend Grant Lucas’ bad-ass design, which also turned out awesome!

Overall I was extremely happy with the way my screen turned out, and had a blast at the workshop. I was worried that I might mess up my screen somehow, but I was surprised to learn that it’s pretty hard to mess up a screen. I found myself a new hobby, and I’m definitely going to be making more designs. I’ll be using this Move Your Mountain screen for future merch as well (tees, prints, tote bags, etc.). Big thanks to Melanie from Spins and Needles for organizing and teaching at this workshop – you were awesome!

This workshop runs monthly, so I highly recommend it to anyone who wants to learn how to silkscreen and make their own unique screen in the process.

Inspiration:

I looked at a lot of American posters from World War II for inspiration. I’ve always loved propaganda posters, especially how they make everything sound really imperative. I also liked how they mixed sans-serif fonts with script fonts.

Overall I think I was able to pull off a pretty legit-looking propaganda poster. It was a good exercise for learning blend modes as well.

THE END

This year I attended Flash In The Can 2011, a conference in Toronto on Design and Technology. I was always under the impression that this conference was mostly about Flash, but my friend Grant Lucas convinced me otherwise. He went to FITC last year, and told me how it was more about design, workflow, and inspiration, and little to do with Flash. This got me thinking about going to FITC 2011, but when he told me that McBess (one of my favourite artists in the world) was going to be doing a talk I immediately booked tickets to the conference.

In this post I’m going to talk about the three speakers that resonated with me the most.

Signalnoise (James White)

On the first day, I attended a talk by James White of Signalnoise called “Back to the Future II”. In his talk, James talked about how his past experiences and childhood memories has affected his artwork. James was really into heavy metal and old TV opening titles with funky colors, and you can really see that in his bright-colored, retro art.

James really emphasized how he made almost all of the artwork in his spare time, outside of work. This really got me thinking about how important is for me to keep working on art on my free time. Now that I’m finished school for good and back full-time at work, I have no excuse to put art projects aside. I felt that I really need to keep pumping out projects in order to improve my artistic skills.

Robert Hodgin

Robert Hodgin showed off some of the coolest generative art I’ve ever seen in my life. It was cool to how he’d look at things in nature, like a tree or a beach, and think of ways to reproduce it with code. He talked about some of his past projects, the challenges he faced, and how he overcame them. My favourite project of his was called “Into the Woods”, which was an audio-visual piece that he created with cellist Zoë Keating. The entire experience, including the sky, trees, grass, etc. is created with code, and is absolutely beautiful. I highly recommend checking out his project here.

Robert too talked about his past and how it influenced him. He recalled a time when he was a toddler, he was climbing Mount Fuji and he remembered being surrounded by tall trees and mist. This experience was the basis for many of his projects, including “Into the Woods”. However, it turned out that this memory was completely false, and that he was actually just at a small park in Tokyo :P

Near the end of his presentation, Robert showed off “Planetary”, an iPad app that he and his colleagues at Bloom Studio Inc. have been working on. Planetary is an app that takes your iPad’s music library, and dynamically generates a solar system based on your collection. For example, the textures of the planets are created using an artist’s album cover. For those who have an iPad, be sure to check it out on the App Store.

Generative art is something I’d definitely like to experiment with, although I severely lack in the programming skill department. I’ll start off with small particle effects projects using Processing, and then move on to using the Cinder library.

McBess (Matthieu Bessudo)

Last but not least, McBess! I’ve been a big fan of McBess’ work ever since a few years ago I saw his music video, Wood. I’ve always loved old cartoons as a kid, and love artists that use that style in their work.

I totally thought McBess made “Wood” for a band called Dead Pirates, but what I found out during the presentation was that the song was made and recorded by McBess alone, and the Dead Pirates was a fictional band with imaginary characters. Later, he formed a band with his buddies called Dead Pirates with whom he plays live shows, but it’s interesting to see how the fictional band came before the actual band.

I enjoyed seeing McBess’ projects and learning about his workflow, but what really got to me was his awesome sense of humor. He just seemed to be a really down-to-earth dude, and his slides would frequently include references to boobies and ‘wanking’. I chatted with him briefly after his presentation, and he was kind enough to answer some questions that I had for him.

Like the fanboy that I am, I got my friend to take a picture of me and McBess. To further emphasize my fanboyness I decided to wear my Dead Pirates tee that day.

Conclusion

From these three awesome individuals, I learned the following:

• Think about what excited you as a kid, and think of ways to integrate those experiences into your own work.
• Always seek inspiration. Appreciate your surroundings (places, events, people, music, etc.) and harness them into your own work.
• Don’t be afraid to try something because it’s not “original”. James White and McBess openly talked about their influences, and how it’s okay to be influenced by others. Standing on the shoulder of giants, so to speak.
• Don’t procrastinate. Keep making artwork to improve.

FITC 2011 was a blast, and I’m really glad I attended this year. I went in with little idea on what to expect, and left with a mind packed with inspiration and a stomach full of butterflies. I would definitely go back next year, if I can somehow cheat into getting a student pass ;)

Thanks again Grant for letting me know about FITC, and Shopify for letting me take time off to attend.

I thought I’d share some of my university experiences here.

Highlights:

• Diving into the world of web. Learning HTML+CSS was a bunch of fun, and I will continue learning more about it after graduation.
• Learning how to make dynamic websites with PHP. My mind was blown when I got my first PHP script running, and learned how dynamic websites work.
• Co-op at NeuroLanguage and Shopify. Spending a year working for Shopify was a blast – it was so hard going back to school afterwards. I can’t wait to go back there fulltime in May. For future IMDers, I would highly recommend taking Co-op. It’ll really help you narrow down what you really want to do as a profession. Even if you don’t like your placement, at least you’ll find out what you don’t like to do, and you can still make connections.
• Learning Processing + Arduino. Programming things that are actually tangible was an awesome experience.
• Learning how to model, rig, animate etc. in 3D using Autodesk Maya. I hated this at first but grew to like it a lot. I will continue to do 3D as a hobby in the future.

Not-so-awesome times:

• All-nighters in the labs that were hotter than Africa and smelled like B.O. PRO-TIP: Lining up 3 rolly-chairs and using it as a bed is actually really comfy.
• Having to use crappy computers in the labs that would randomly restart
• Having to use WebCT on a regular basis. Why do universities still use this piece of sh*t? There are so many better alternatives.
• Having to take courses that taught me absolutely nothing (I’m sure every program has these).
• Having to learn Macromedia Director. Seriously? It was 2007, and we still had to learn Director? Gimme a break (a year later they switched the course to Flash).

It feels weird thinking that I don’t ever have to go back to campus, or worry about schoolwork. Even though Senior Project’s been done for a week now, I still wake up thinking that I have something I need to do for it. I can’t wait to go back to the 9-5 lifestyle, as it’ll leave me with more time to work on personal projects!

THE END

Thing to keep in mind when exporting to FBX

• Deformer animations simply do not work. I’ve browsed through many, many forums looking for a solution but could not find an answer. What happens is that once exported to FBX, only the first frame will have the deformers applied, but not for any frames after that. This means that for the rest of the animation, the object being deformed will maintain the same shape from the first frame.
• Blend shapes work! You just have to re-arrange the Input Orders (explained later)
• Constraints may not alway work. I used parent constraints for my eyes and some of the controls, but they would do odd things when exported. For example, even though they’d work perfectly as an .mb file, in the FBX file there would be an offset on the objects that were constrained, so they wouldn’t be in the right positions.
• You have to delete non-deformer history after you smooth your mesh. Otherwise, even when your model is exported, it will still be unsmoothed.
• Make sure all your normals are facing the right way. To see normals, go to Display > Polygons > Face Normals. Not having the normals pointing the right way will mess up many things in the app/game, primarily the lighting.

Below, I’ve outlined the steps to properly export an FBX file. There is also a supplementary video that may help you get started. At this point, you should have the character modeled, textured, the joints and controls set up, and the mesh for any blend shapes created.

The proper steps for exporting to FBX

1. Smooth-bind the mesh to your rig.

Make sure you have the Animation menu open. Select the root joint, then select the mesh. Go to Skin > Bind Skin > Smooth Bind. Now, when you move your joints, your mesh should move as well. Don’t smooth just yet! Keep working in smooth-preview mode for now (hit 3 on your keyboard).

2. Weight paint the non-smoothed mesh.

You should now go ahead and weight-paint your model. I won’t go over the details on how to weight paint here, but I found this tutorial by unpicked1 very useful. It’s easier if you weight-paint before you smooth, since there are less vertices to worry about.

You only have to weight paint one side of your character. You can use the Mirror Skin Weight tool later to copy the weights from one side to another. When you use this tool, make sure your character is in its bind pose.

3. Animate the model.

Use your rig to animate the model. Walk, jump, swim… go nuts!

4. Smooth the mesh

Switch to the Polygons menu. Select the mesh, and go to Mesh > Smooth. If you have any meshes for blend shapes, go ahead and smooth them too. You may be tempted to export to FBX right away, but if you do now, your FBX model’s mesh will not be smoothed. Once you smooth it, you may have to weight-paint certain areas that may not be moving as they should.

5. Delete Non-Deformer History.

Go to Edit > Delete by Type > Options. Make sure that “All non-deformer history” is selected (Fig. 4).

Select the main mesh (not the blend shapes). Go to Edit > Delete by Type. This deletes the smooth node from the mesh, so now when you export it, it will be smooth in the FBX as well! If you did a simple Delete History, it would have deleted the smooth, but all weight-paint information and animations will be lost.

6. Create blend shape.

Switch to the Animation menu. Select the blend shape mesh, Shift+Select the main mesh, then go to Create Deformers > Blend Shape. The main mesh should now have a new attribute for the blend shape. When this new attribute gets closer to 1, the main mesh becomes more and more similar to the blend shape. Notice how in Fig.5, the goldfish’s mouth is now open like the blend shape.

7. Change Input Orders

The problem right now is that the blend shape is now prioritized over the animations. This means that if the value for the blend shape attribute is set to 1, the mesh will take on the blend shape for the duration of timeline instead of doing the animations. To fix this, we must change the input orders of the main mesh. Right click and hold on the main mesh, and go to Inputs > All Inputs (Fig. 6).

You will now see all the inputs of that mesh. Middle-click and drag the Blend Shape node on top of the Tweak node (when you middle-click over the Blend Shape node, you should see a plus sign). See Fig.7.

Now, even with the blend shape attribute set to 1, the model will retain its animation, PLUS have the blend shape applied.

8. Include blend shapes into animation

You can no go ahead and keyframe the blend shapes into your animation. For me, I used the fish’s blend shape to animate the opening/closing of the fish’s mouth (Fig. 8).

9. Check export options & export

Go to File > Export Selection… > Options. Under file type, select “FBX export”. Click the “Edit preset” button to open the FBX export options. In the options for the FBX export, look over the following:

• Under “Animation”, make sure the Animation checkbox is checked.
• Under “Bake Animation”, make sure the Bake Animation checkbox is checked. Also, set the Start and End values to the duration of your animation.
• Under “Deformed Models”, make sure all checkboxes are checked

Once this is done. select your model or the group containing your model. Go to File > Export Selection…. Export the FBX model to the directory of your choice. You should now have a fully-working FBX model.

I made a supplementary video that guides you through this as well. You can check it out here.

Conclusion

Anyway, those were my findings while working with FBX, and I couldn’t find information on this anywhere else.

Hope it helps!

*UPDATE* Caught embarrassing mistake. Thanks Grant!

Inspiration

The “Meekrab” logo that I remember seeing from Harold and Kumar was my biggest inspiration. I never really knew what the Meekrab logo was for (according to Urban Dictionary, it’s for a band formed by the directors of H&K) but I always thought it was cool and memorable.

The Process

I first started with a simple sketch. In fact, I drew this really quickly on the bus in my notebook.

I later scanned the doodle, and brought it in to Photoshop. The sketch was far from perfect, but the idea was there. Basically I wanted a Mountain-Man with his arms in the air, with the text “MyM” below it. I needed the design to be in a circle because the first thing I wanted to do was make pins.

With the scanned image in a locked layer in Photoshop, I started tracing the image with the Pen Tool. I like to first trace the shape of the outer silhouette in black, and then create another shape inside it in white. This allows me to easily tweak the thickness of the lines afterwards by adjusting the curves and anchor points of the shapes.

The arms and the outline of the body were the first thing that I traced. I then created a white shape for the inner body, and this gave the body a nice black outline.

Next, details such as the eyes, mouth, and the text were added. In the same way as I did before, I created the outer shape first and filled in the inside afterwards. For example, for the mouth I drew the shape first and then filled it with a series of white triangles to form the teeth.

Below is the first version of the design. The arms and letters look weird, and when scaled down it looked like pure garbage. Absolutely disgusting, but hey, it’s an iterative process :P

The second was a big improvement. The lines were thicker, and I made sure everything was more symmetrical (like the eyes and the teeth). I was still unsatisfied with the arms though; to me they still looked too flimsy and weak.

The End Product

For the final version I gave the arms a bigger arc so that they look stronger, and threw in some Sign of Horns for maximum bad-assery. I applied a grunge texture on top to add a bit of texture. I like how there are three lightning bolts, since there are three of us in the band (I totally didn’t just realize this now *shifty eyes*).

Finally, I sent my design over to the awesome folks at Crucial Pins so that they can make some pins for us. The pins arrived only 2 days after I ordered them – I was pleasantly surprised by their fast service. Mountain-Man looked damn fine on shiny silver paper too.

Eventually when we have more band money we plan on making t-shirts with this design, and also screenprint it on Chris’ bass drum skin.

THE END

Needless to say it was a wicked-awesome night. The Start, a local cover band opened the night with some kickass covers of British hits. We played our set after The Start. I was nervous as hell at first since it was our first time playing our tunes in front of an audience, but the nervousness melted away after a song or two (I think I was melting too, I was so damn sweaty on stage… sorry for the B.O., guys). The headliner band, Brainhunter ended the night with some rockin’ tunes (BRAAAAAINS anyone?).

What was cool was that the next morning, we were mentioned in Andrew Carver’s blog on National Capital Rock. He’s also got some sweet pictures from the show on his Flickr.

We’re going on a brief hiatus as Chris will be going on vacation, but things will really pick up once he comes back. I’m going to be graduated from university, and back at Shopify full-time (hopefully). We’ll be getting together more often to jam and play more shows, and we plan on recording sometime in May/June. Once we have good recordings, we’ll be launching our website.

BIG THANK YOU to everyone for coming to the show, my buddy Jesshi for the awesome pictures, Andrew Carver for mentioning us on NatCapRock, and Brainhunter & The Start for the awesome night, hopefully the first of many more.

Here is the final animation, enjoy :)

Overall, I’m pretty happy with the result, but I wish I had more time to improve on certain areas. In particular, I want to improve the animations and timing. I was never trained in traditional animation, and I find most of Boomi’s animations a little ‘floaty’. In the future I’d like to study more about animation in order to get that tight animation that you see in Pixar movies. I would also like to have better voices and sound effects.

The Process

The first thing we had to do for our animations was create a storyboard, as well as 2D animatic, shown below. The animation was basically a series of panels and images representing each shot.

Once that was done, I started modeling Boomi. I used a model of a chubby character that I found on TurboSquid as a starting point, and modified it to make it fit Boomi’s proportion. I stuck on Boomi’s head on top, and voila! The model was complete. I kept his body parts as simple as possible because I wanted to make the rigging process as simple as possible (a realistic body wouldn’t really fit in with the cartoony style of Boomi).

One thing that I learned was to smooth the mesh immediately. Maya has this cool feature where you can see a preview of a smoothed mesh by hitting the ’3′ key, and what’s cool is that when you render your image with Hardware Rendering or Mental Ray, the mesh will still be smoothed.

The next step was to set up a rig for Boomi so that he could be animated. The rig is made up of joints, and it essentially acts as the ‘skeleton’ for Boomi. Controls (the boxes, circles and various other shapes that you see around Boomi) were also created. The purpose of controls is to simplify the animation process. They allow you easily select and keyframe joints and attributes.

When the skeleton was first bound to the mesh, some of Boomi’s vertices that shouldn’t be affected would be affected by certain joints. For example, initially when I moved Boomi’s arm, his leg would deform as well. To fix this, I used the Weight Paint tool to specifically assign which vertices each joint should be affecting. At first I had tried weighting AFTER I smoothed the mesh – this was a huge mistake and I wasted so many hours doing this. When you smooth the mesh, you create a lot of extra vertices and that makes the weighting process much harder since you have to deal with a larger amount of vertices. It’s best to keep the mesh unsmoothed, and just switch back and forth between smoothed/unsmoothed (hit the 1 and 3 keys) as you go through the weight painting process.

Once Boomi was weighted, we were to create some animation tests to make sure he can do all of the main movements without any odd deformities to the mesh.

Finally, after the preparation of Boomi was complete, I started implementing Boomi into the sets that I created, using Maya’s Camera Sequencer and Trax Editor. I must say, the Trax Editor is a freakin’ sweet tool – it allows you to use canned animations and loop it really easily (not only that, it also lets you adjust the speed of the cycles). It is perfect for things like walk cycles, dancing, and any kind of motion that might be looped.

Hope you enjoyed the animation! To the students in my program who have to take this course next year – let me know if you have any questions and I’d be more than happy to help out!

1. Install jQuery

If you are unsure of how to do this, please see Steps 1 to 3 from this tutorial.

2. Install Colorbox

Grab the jQuery plugin Colorbox here, and upload it to your theme assets. We’re going to be using Colorbox to get the lightbox popup when a product is added to the cart. I usually use Fancybox for lightboxes, but I decided to go with Colorbox for this tutorial because it “can be called directly, without assignment to an element”. This means that I can call a Colorbox method, and create a lightbox on-the-fly when the “Add to Cart” button is clicked, but with Fancybox this would be impossible.

Be sure to add these two files in the <head> section to your theme.liquid as well.

<head>
     ...other assets
     {{ 'colorbox.css' | asset_url  | stylesheet_tag }}
     {{ 'jquery.colorbox-min.js' | asset_url | script_tag }}
</head>

3. Modify the “Add to Cart” button

Open your product.liquid file, and locate the input button for adding to the cart. The input button looks like this:

 <input type="submit" name="add" value="Add to Cart" id="add" />

We want to do two things to this button: first, we want to make it so that even if the user clicks on it, the user is not taken to the cart page. Second, we want to call a custom function (that we’re going to be writing shortly) that makes an AJAX call to add the product to the cart.

 <input type="submit" name="add" value="Add to Cart" id="add" onclick="return false; addItem('add-to-cart');"/>

The addItem function takes the form’s id as a parameter. This is so that when we use jQuery later, we know which form to select. The opening tag for your form should look like this:

<form action="/cart/add" method="post" id="add-to-cart"> 

4. Preparing product.liquid

Add the following line at the top of product.liquid.

<div id="added-box-wrapper" style="display:none;">
    <div id="added-box"></div>
</div>

The added-box is where the content of the lightbox will be inserted. We need to wrap it in another div with a “display:none;” so that the content of the lightbox are not displayed on the actual page.

5. Preparing theme.liquid

Next, we have to modify theme.liquid a little so that the number displayed for the number of items in the cart updates automagically. In theme.liquid, find a place where you want to show a link to the cart. In this tutorial, I’m going to put it in the right column, under where it says “Shopping Cart”.

<a href="/cart" id="cart-number">
    {% if cart.item_count == 0 %}
       Your cart is empty.
    {% endif %}
</a>    

What’s important here is that the <a> tag has the id “cart-number”, so that we can select it with jQuery later to modify its contents.

It’s been a while since my last post, but now that I’m finally finished my winter semester I can start writing here more often. I will also try my best to catch up on unanswered comments! It’s starting to sink in that there are only two more semesters of school left… I can’t wait to finish completely!

The highlight of this past semester was diving into the world of interactive multimedia. For one of our classes, we were taught an open-source programming language called Processing. My classmates Grant Lucas, Mark Pintar and I built the ‘faceTable’, which was an interactive table display that would display the user’s Facebook information by using customized Reactivision markers. Words don’t do it justice – we will be posting videos of it in action on Vimeo once we make the demonstration videos.

Plans for the summer

This summer I’d like to find and share more hacks and tweaks in Shopify that would allow storeowners to add unique features to their store. I’d also like to write more tutorials to help storeowners get started with their stores.

In my spare time, I plan on playing around with Processing and OpenFrameworks in an attempt to create some cool visual displays. Particle systems is an example of something I’d like to create using one of these two languages. I’ll also be playing shows with the band The Mudplots, as well as work on another band project that I have brewing :)

Anyway, I’m off to kill some more time – two more hours until my flight to Toronto! Don’t fail me, Reddit…

UPDATE: A random elderly man from Calgary just approached me with a super-serious look on his face asking if I could check something for him using the wifi on my laptop. Thinking it was an emergency, I opened up my laptop. Turns out he just really needed to know the result of the Pittsburgh vs Montreal game for his hockey pool. Canadians are awesome :D