How to Put Drawings in Your Blog

This post is not at all related to anything mobile, gaming, or programming.  But it's a great beginner tip for bloggers, myself included!

Say you work with Google Documents a lot and enjoy the rich set features that it offers, such as multi-level lists and the ability to insert custom drawings.  I love the drawings feature (ie: charts, graphs, diagrams, illustrations, etc.) of Google docs because I love visual aids.  I love to include some sort of visual to "show" what I am trying to explain. 



Say you also have a blog (say, from www.blogger.com), but you find the blog site's default post editor somewhat lacking in features.  For instance, you may want to give your blog post some... visual aids!  Sadly, Blogger's current post editor does not have this capability and I am not aware of any other blog sites that do offer it.  You would need to find some software to create your drawing, save it as an image file, then insert it into your blog post.  TEDIOUS!  Wouldn't it be great to use Google Documents as your post editor?

Well unfortunately, you can't change the post editor, but here's the next best thing.  You can write your blog post as a Google Document, and then publish it straight to your blog!  This method allows you to include those drawings in your blog post!  Another bonus is that you can use multi-level lists (like numbered lists or bullets) because Google docs does it while the  Blogger post editor only handles single level lists.  Mind you, I have only tried this with Blogger, but I don't see why it wouldn't work with most other blog sites out there.

How to do it: Start off by creating a new Google Document and use this to write your blog post, drawings included.  When you're ready to publish, click on the Share button at the top-right corner.  In the menu that pops up, select Publish as web page.  Now you should see an option to Post to blog.  If this is your first time, you will need to set your blog site settings, such as which blog site you use and what user ID and password you use to access it.  Once set up, click on Post to blog.  Now, your Google doc has been published to your blog!

Check your blog.  If your drawings don't appear (they may appear as missing links), here is the reason why and how you fix it: When you publish to your blog, the drawing gets converted into a picture (PNG format) that Google stores internally.  Your blog will automatically link to this picture.  However, blog readers will not be able to see these pictures because the PNG file is only readable by you.  This is because by default, only you can access the Google doc.  To fix this, go back to docs.google.com, select the check box for the Google doc that contains your blog post, and click on Share -> Get the link to share.  In the dialog that appears, select the check box for Allow anyone with the link to view (no sign-in required).  Make sure to NOT select the Allow them to edit check box for obvious reasons.  Click on Save & Close and you're done.  Check your blog post again and the PNG files should appear. 

This is great for those of you that do technical articles because of the ability to insert your own diagrams or illustrations to spruce up your blog posts.  It is also easy to change: just change the drawing in the Google doc and republish to your blog.  Very geeky, but very powerful.  Happy blogging!

2D Collision Detection: Part 1

 

Last night, I completed my simple 2D collision detection function and tested it.  It works!  Before I divulge the details of my algorithm, I'll show you my process.  When I was researching algorithms, I came across some common ones people were using:

 

1. Bounding Box algorithm: put each object into a bounding box and then determine if two boxes intersect each other  

2. Bounding Circle algorithm: put each object into a bounding circle and then determine if two circles intersect each other (offhand, this one seems quicker and possibly more accurate for more organic shapes than the bounding box algorithm)  

3. SAT using convex polygons: This one is more complex than the other two and requires significant work beforehand.  Basically, you need to create a convex polygon for all objects (likely a manual task), and then you can use SAT (Separating Axis Theorem) to determine if two polygons intersect each other.  My thought is that using SAT will be the most accurate algorithm, but I got scared off by the thought of having to calculate normals for each edge and the shear number of projections involved.  Also having to manually set up polygons for each object seemed like just too much work.
   

I figured that I would start simple, so it would have to be either bounding box or bounding circle.  The basic algorithm would be:

Given box A and B and vector V that represents the movement from A to A':

1. move box A to A'. 
2. if A' intersects B, then reverse A' to the point where it no longer intersects B.

 

The problem here is: what if B is between A and A' and V is large enough such that A' passes B? 

 

In such a case, A would simply move right through B.  I looked online for solutions on this and the only solution I found was: keep vector V relatively small (ie: Don't move A so fast!).  I could understand that in most cases, this would not be an issue.  But what if B was skinny? 

 

In such a case, it would not take V to be very large before this problem occurred.  I was determined to find an algorithm that would not only account for the starting and ending position of A, but also the path of A to A' (the darker red area below).

 

 Next time I will look into the strategy of how to implement this.