05/15/14

Mandala Design by Programming

Last school year, I can confidently say that many of my students enjoyed this one lab exercise we did in class. The exercise was to create circular designs using lines with C++. It may sound weird to find students enjoying a combination of programming and trigonometry to create digital math art but it did happen. When I uploaded their submissions in Facebook, I got a couple of private messages from former students complaining why they didn’t have those. And there were a few who even got curious enough to ask me to teach them. Unfortunately, the exercise was a cumulative effort from different activities and I couldn’t teach it in just one sitting. Since then, I put “Mandala Design by Programming” as one of my to-do video lectures.

And here it is…

The CPNG header and source files can be downloaded here. The PNG encoder could be acquired here. Make sure to get the lodepng.cpp and lodepng.h.

In the video, I used XCode to compile. In case you’re compiling by terminal, include the following flags: -ansi -pedantic -Wall -Wextra -O3. For example, if your source code is main.cpp and you wish the executable to be called main.exe, you can compile by

Ideally, this video is for fellow programming teachers to inculcate the value of loops. It can also be a side exercise where students would manipulate lines and colors instead of the usual text or number processing. I think, this can also be valuable for Math teachers teaching trigonometry and help the students appreciate sine and cosine.

If you encountered issues while creating your own Mandala Design, e-mail me at francis dot serina at gmail dot com. Also, I’d like to see your own mandala designs so please post in the comments below the results of your own artwork 😀

05/2/14

Token from TechSmith

Last December, I won the TechSmith ScreenChamp Awards 2013. With that, I was interviewed and showed up in one of their segments, 48 in 24. It was fun because it was my first time and I got to share my experiences with creating video lectures. I actually forgot about the interview until today. It turns out that TechSmith sent a token of appreciation for the interview and it arrived today 🙂

Drinking Cup

Back of the Drinking Cup with the different TechSmith products

Thanks and Drinking Cup

Thank You card and Drinking Cup

Thank You card

Thank You Card signed by the 48in24 Crew

With that, I immediately searched for the interview and I found it! Feel free to watch and heckle me. The skype video call seemed low quality and the video is out of sync. Oh well, bare with me.

Ugh… there’s an electric fan at the back. Makes me look poor. And my friends pointed out the hanger on the closet door. Eeep! Don’t even ask what I was wearing down there. Ahahaha!

And darn, they cut out my favorite part. They asked me “If you were to put the experience into one sentence, what would it be?” and I said “It was worth the shame” 😀

03/10/14

Games made by teens!

Another batch of Video Game Development Elective students from Philippine Science High School Main Campus will graduate this end of March. As a final requirement, they need to upload their games in Kongregate and here they are. Click on the image to play their games.

Change

Change was suppose to be a Chemistry-based game that ended up being a Pretentious Game clone. Go get emo with this one 😀

Cornered

Try to stay alive in this somewhat thriller survival game against creepy polygons without getting Cornered

Knockback

This is a difficult physics-based puzzle game using simple 3D objects. I hope your patience doesn’t easily thin out with Knockback

Rolling Rumble

Rolling Rumble was the most popular game during the National Science Fair exhibit. Go and push your friends around. I know you want to.

Synchonicity Alpha

Synchonicity Alpha will annoy you. Enough said.

Spectrum

Need some brain exercise? Spectrum will make your head twist and turn.

Sparkshot

Sparkshot is a tower-defense game using electricity and well… towers 😀

AIDS Infector

This is the most controversial game ever! Get down with the sickness with AIDS Infector

Balloony

And what’s a game exhibit without a Flappy Bird clone. Go get some candies and don’t let the Balloony pop

Logic Invaders

Who ever said binary ain’t fun? They obviously haven’t played Logic Invaders

Shooter

How long can you last in this fancy survival game – Shooter

I hope you guys have the patience of figuring out the controls of their games 😀 I will emphasize on integrating tutorial levels and making the controls more intuitive in my next game development classes.

Oh and feel free to rate and comment their games in Kongregate. I told them to expect the onslaught of the world once their games are out.

02/4/14

Prizes from TechSmith

As some of you know, I joined ScreenChamp Awards 2013 last December and emerged People’s Choice Award. My prizes have arrived today in 3 boxes.

3 boxes from TechSmith

It left Amazon last Jan 20 and arrived in the Philippines on the 24th. It’s been stuck in Pasay City due to a clearance delay for a week. But FedEx got it through and it arrived at my doorstep yesterday. My mom, who received it, was excited herself to see what’s inside. She helped me open the boxes and take pictures of the contents.

box1 from TechSmith

And in box #1 is a foldable reversible pop out background panel! I saw the pictures in Amazon but I didn’t expect them to be this big. That’s my mom behind the panel by the way 🙂

box2 from TechSmith

And in box #2 was my ScreenChamp Trophy 🙂 That’s some beautiful trophy. It’s the first time that I saw this and I wasn’t sure what it was when I took it out the box. I’m quickly running out of space in my room. I have no idea where to put this…

And lastly…

box3 from TechSmith

Box #3 contained the prizes that makes ScreenChamp worth fighting for. I got a red The Forge T-shirt, Canon T5i DSLR + EF 50mm lens, Zoom H4 Audio Recorder, Shure Wireless Lavalier, 4 The Forge Stickers, 2 32GB SDHC Memory Cards, Moleskin Notebook, and Staedtler pens.

I already got my other prize of 250USD Gift Certificate to Premium Beat through an e-mail.

To all those who liked my video, a big THANK YOU! This wouldn’t be a success without you!

02/2/14

Targeting Multiple Aspect Ratios using Unity3D

Unity3D GUI is hell. Add multiple aspect ratios and you’d pretty much be pulling your hair off.

For those developers who are new to tackling multiple aspect ratios; here’s a project that you could test out.

MultiAspectRatioTest
MultiAspectRatioTest
MultiAspectRatioTest.zip
182.0 KiB
200 Downloads
Details

The main issue with different aspect ratios (and screen resolutions) is that they “see” things differently. You could solve this by either using Pillarbox/Letterboxing or Stretching. Pillarbox/Letterboxing is totally out of the question. Nobody likes losing screen real estate. Googling around and you’ll see suggestions of stretching the GUI by manipulating the GUI.matrix via Matrix4x4.SetTRS() but stretching is not cool.

For 3D games, this is barely an issue. For 2D games, yes it is. It’s also an annoyance to the develop User Interfaces for different aspect ratios. Then I stumbled upon How to support 3 iOS aspect ratios in Unity3D which showed how to use a single camera to be deployed in multiple devices with different aspect ratios. The solution: change the orthographic size of the camera! However, there were some discrepancies with the exact pixel values which led me to create the test project above. Nigel also mentioned to use the orthographic size for the UI.

As for the User Interface, to hell with Unity3D GUI since you can’t even see it while you’re coding. Sprites are way better. It makes the world a better place for game developers. Combined with a dedicated camera to draw the user interface from sprites and Text Mesh for dynamic text, we can actually replace most of the form elements in GUI. 

I ran my project on an iPhone 5s, iPhone 3GS and iPad 3 and the results are as follows.

iPhone 5siPhone 5s

iPad3

iPad 3

iPhone 3gs

iPhone 3GS (with a different font size)

What does this mean? Keep your game elements inside the green box and it will be seen in any of the 3 aspect ratios. Then for your UI, use sprites and see how I aligned those orange boxes to the top/bottom edges of the screen. What about the extra space on wider aspect ratios, up to you actually.

01/17/14

MGJ2014 Interview at ANC

This afternoon, I was interviewed by ABS-CBN News Channel regarding the Manila Game Jam 2014!

Check it out here!

Ack, there’s a reason why I prefer to be behind the camera.

Nonetheless, MGJ2014 Orientation in less than 11 hours! MGJ2014 in 6 days! Talk about anxiety attacks

12/31/13

Touch Events in Unity3D

I’ve been working on Crazy Bugz for the past few days to take advantage of the 2D physics and sprites brought in by the latest version of Unity3D. Many things have been updated which reserves a post all by itself. For now, I want to discuss a discovery I made regarding the touch events. I’m not sure if this is iOS or Unity3D specific but I’ve built a work around that seems to be working for now 😀

For a demonstration, here’s a Unity3D package (requires 4.3). Build and test it on touch devices. I’ve only tested it for iOS devices. You can test it with Unity Remote but it has limitations like touch responsiveness which is critical for this demonstration.

TouchDemo
TouchDemo
TouchDemo.unitypackage
14.3 KiB
812 Downloads
Details

First and foremost, I made a generic event handler for the different touch phases in TouchMonoBehavior.cs

The OnTouch* event handlers are all declared public virtual void and passes the Touch parameter. Meaning, each event handler could be called multiple times per Update() depending on how many touches there are (Input.touchCount). We can treat each touch separately by taking note of the finger id that comes with the touch.

All the while, I thought the touch phases have the following state diagram

Touch Phases State Diagram

Unfortunately, upon testing over and over again, it is POSSIBLE to start with Moved or Ended! I haven’t noticed if it could start with Stationary since I don’t use it for my projects at the moment. But my point here is that the Began phase CAN BE SKIPPED! I’m not sure if this is intentional but it’s happening and it got me pulling my hair for the past couple of days.

I’m using an object pool in my project where the objects react to touch. When the user touches, an object is created, let’s call that Object 0. When the user touches again, another object is created called Object 1. If Object 0 gets disabled (as part of the game mechanic) and the user touches again, Object 0 will be re-intialized and treated as something new. Objects don’t get destroyed, rather, they become disabled. This is basically how object pooling works.

Theoretically, every time a Began phase is encountered, a mirror is re-initialized in Crazy Bugz. The user can rotate or stretch this mirror by moving their finger which corresponds to the Moved phase. When the user releases their finger, an Ended phase is encountered and that mirror remains enabled until it gets disabled (shattered) by the laser. However, there are certain occasions where I touch and get a NullExceptionError. It turns out, my game is trying to look for a mirror with a specified finger id that was not created. This means, the Began phase was skipped!

As a work around, if in case the Began phase has been skipped and goes directly to Moved phase, I would treat that as a Began phase. In the case the Began phase has been skipped and goes directly to Ended, I would simply ignore it.

Not exactly the best solution but this will have to do.

The ideal case? Well, Began phase shouldn’t be skipped… ever 🙂

11/23/13

ScreenChamp Awards 2013

I recently joined the ScreenChamp Awards 2013, a contest on screen casting sponsored by TechSmith.

I’m testing my video lecture making powers and see if I can grab that People’s Choice award. I’m very happy to have been selected as a finalist! I still consider myself new to screen casting and video lecture making.

I actually submitted two videos. The first one, Lecture on Structs and Pointers in C++, did not make the finals but the second one did.  As for the topic, well, it’s about… Love 😀 Ahaha! Yes I know, the SSB (single-since-birth) programmer talks about love. Now before you think about romance, I want to clarify that my talk is about the 5 Love Languages written by… you know what… go watch the video here. Don’t forget to up vote and share it 😀

I originally wanted to give my whole 1-hour talk about the 5 Love Languages into this video lecture but I had little time to complete it. Sadly, I had to settle with just the Introduction, which is a teaser to give my audience reasons to stay and listen. I can actually give this talk without the need for normal presentation equipment like projectors and laptops. In fact, I have given this talk multiple times to some of my former students or friends over dinner at home, during lunch in the mall, and in the living area during sleepovers.

The challenge in making this video was that I had to make it interesting without knowing who I am. I think the reason why people listen to my talks is because they know me. But what if I gave this talk to complete strangers, people I’ve never conversed with before, how would they react? Also, since I’m targeting older teens, I need to make it appealing other than just showing myself. Thus, I decided to make use of drawings and hand writings. I enlisted the help of a former student who is great with art, Quina Baterna. I told her my concept and she gave me drawings of the wife, husband, logos for each love language, etc. We  recorded her, drawing these icons on a white board using colored pens.

Quina's-Drawings

Quina’s Drawings

Unfortunately, I encountered problems when I started editing the videos. It turns out, I need a LOT more art to convey my interpretations. I’m no artist, hence, I searched for free vector art online. I found some but I lacked a lot more. Being pressed for time, I resorted to the unthinkable – draw them myself. Yes, that’s right. I drew. I couldn’t create a video of me drawing since I make so many mistakes and it takes me forever to make one. Instead, I used Inkscape to create my black and white, stick figures.

I tried combining Quina’s drawings with the vector art but they don’t seem to work out well. I made a decision to redraw all of Quina’s art using Inkscape. Using this technique prevented me from presenting the art being drawn on screen. Instead, I had the drawings animated by flying them in, scaling them, translating them, and changing their opacity.

Vector-Art

My Vector Drawings

It took me a while to complete the video but I made it a couple of hours before the deadline. My friends commented that the video is such a cliff hanger or bitin. I will continue the video and include my whole talk which includes what the 5 Love Languages are and how to find out yours as well as other people’s Primary Love Language. For now, up vote my video and help me win 😀

Again, the video can be found here!

CREDITS to the following:

Free Vector Icons from http://www.endlessicons.com and http://www.clipartsfree.net

“Easy Lemon”, “Deliberate Thought” Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0
http://creativecommons.org/licenses/b…

DISCLAIMER:
I am not nor am I related to Dr Gary Chapman, Northfield Publishing or Moody Publishers.

Camtasia and SnagIt from TechSmith

10/3/13

No Projector? No Problem! Part 2

Yesterday, I started teaching using VNC to share my screen to my students. Unfortunately, I still had to draw on the whiteboard to emphasise on some points of the lecture. I used the whiteboard yesterday but today is different.

Successfully demonstrating code and lecture slides through their screens, I extended my tools by adding SmoothDraw – a free drawing tool that works very well with tablets. SmoothDraw is the recommended software by KhanAcademy in Windows. For Mac, you have the free Autodesk Sketchbook Express. Both of which were designed for tablets and drawing.

With my students viewing my screen, I put Notepad++ on the right side with SmoothDraw on the left and started drawing doubly linked lists while showing the code. On their computers, they were able to follow while they try to type the code themselves. I think my experiment was successful.

Aside from this, the students were exposed to tablets. I brought my Wacom Bamboo Pen & Touch to school. The normally noisy kids were curious and wanted to draw using the tablet. The first thing that they wrote was their name or signature. How vain 🙂

I think this also gives me the opportunity to be more comfortable with tablets so I can perhaps improve my “drawing” skills. Haha! What a joke!

10/3/13

No Projector? No Problem!

It’s been quite a long time since we’ve had a dedicated working projector for the Viper Lab (classroom where I’m teaching). We’ve already asked for additional projectors but due to the high demand, it cannot be met. We’ve resorted to asking the community through the foundation at AghamRoad.ph. Unfortunately, it’s moving slowly despite being shared in Facebook more than a handful of times already.

I’m teaching Data Structures and Algorithms and go in-depth even to the memory level and pointers when I discuss. I use a lot of code and diagrams to show my point. Unfortunately, it gets tiring to keep on writing board-full of diagrams every meeting. This is where the advantage of the online lecture slides and video lectures come in. However, even with lecture slides, if you don’t have a projector, it’s not as easy to transfer the concepts. The video lectures are meant to supplement the lectures in class for those people who want a repeat of the lecture. They weren’t designed to be the primary method for teaching.

Being desperate, I turned to a familiar technology that I’ve encountered in my previous work. It’s time to work with VNC again. VNC, Virtual Network Computing, is a network protocol for screen sharing or remote desktop. With it, you can control another computer. For my class, I didn’t need full control. I just needed a way to project my screen unto theirs. Also, since we’re low in budget, I was looking for a free portable VNC Server and Client (Viewer). Last time I checked, RealVNC had a price tag and it still has for the server but the client is free. Luckily, I found the free Ultra VNC.

Yesterday, I configured my Windows 7 on my MacBook Pro to run Ultra VNC server. I asked my students to download the RealVNC viewer from my computer (since I have apache running as well). Since we’re all using portable versions, no installation was necessary. They simply unzipped and ran the executable and connected to my laptop via VNC. At first, it wasn’t working right and the clients are all getting blank screens. I closed my VNC server multiple times and it didn’t seem to fix it. I went to the task manager to see a few lingering VNC processes running. Manually ending these instances, I ran the server again and asked everyone to connect. When I heard a few people gasp in amazement, I knew it was working.

“This is cool!”, “How did you do this?”, “It’s amazing”, “Sir, can you see my screen as well?” were the responses of the students. I told them to scale to fit their windows since my screen resolution is quite high and they only see almost half of the screen. With this at hand, I continued my lectures on Linked Lists. I can show them the lecture slide then switch to Notepad++ and Cygwin to demonstrate. I checked my students’ screens from time to time and I noticed that the mouse doesn’t show. I had to keep on highlighting texts in order for them to follow me while I talk.

However, since the lecture was about linked lists, I still needed to draw. The students were cheering “Sir, use Paint!” And I refused to give in to their demands and decided to still use the traditional method of writing on the board – which leads me to another experiment for tomorrow. Since I need to draw diagrams (lots of it), I will bring my tablet tomorrow and see if I could draw everything on screen (using SmoothDraw). Aside from that, I’ll try to record my screen using CamStudio.

Despite all these attempts, the whiteboard is still necessary since the wide space will allow me to write a ton of information and the students can easily go back by looking at the previous writings.