<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Posts on fotino.me</title>
    <link>https://fotino.me/posts/</link>
    <description>Recent content in Posts on fotino.me</description>
    <generator>Hugo</generator>
    <language>en-us</language>
    <lastBuildDate>Tue, 15 Dec 2020 05:39:34 +0000</lastBuildDate>
    <atom:link href="https://fotino.me/posts/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Moments of Inertia for Triangles and other Polygons</title>
      <link>https://fotino.me/moment-of-inertia-algorithm/</link>
      <pubDate>Tue, 15 Dec 2020 05:39:34 +0000</pubDate>
      <guid>https://fotino.me/moment-of-inertia-algorithm/</guid>
      <description>&lt;p&gt;In my previous two articles I discussed &lt;a href=&#34;https://fotino.me/2d-parametric-collision-detection/&#34;&gt;collision detection&lt;/a&gt; and &lt;a href=&#34;https://fotino.me/2d-rigid-body-collision-response/&#34;&gt;response&lt;/a&gt; between rigid bodies. In order to do proper collision response between rotating objects, we needed to calculate the &lt;a href=&#34;https://en.wikipedia.org/wiki/Moment_of_inertia&#34;&gt;moment of inertia&lt;/a&gt; about their center of mass. Here I&amp;rsquo;m going to describe how to get the moment of inertia for an arbitrary triangle, and then I&amp;rsquo;ll show a triangulation algorithm to apply this to any polygon.&lt;/p&gt;
&lt;h2 id=&#34;right-triangles&#34;&gt;Right Triangles&lt;/h2&gt;
&lt;p&gt;The first step is going to be calculating the moment of inertia for a right triangle, since we can get a simple closed formula. Let&amp;rsquo;s define the right triangle as having a width &lt;em&gt;w&lt;/em&gt; and a height &lt;em&gt;h&lt;/em&gt;, rotating about the origin with a uniformly distributed mass of density &lt;em&gt;ρ&lt;/em&gt;. We know the area is equal to &lt;em&gt;wh/2&lt;/em&gt; so we can calculate the density if we only have the mass.&lt;/p&gt;</description>
    </item>
    <item>
      <title>2D Rigid Body Collision Response</title>
      <link>https://fotino.me/2d-rigid-body-collision-response/</link>
      <pubDate>Sat, 12 Dec 2020 22:24:38 +0000</pubDate>
      <guid>https://fotino.me/2d-rigid-body-collision-response/</guid>
      <description>&lt;p&gt;This is a followup to my &lt;a href=&#34;https://fotino.me/2d-parametric-collision-detection/&#34;&gt;previous article&lt;/a&gt; regarding collision detection between arbitrary polygons. Today I&amp;rsquo;ll be explaining how to update the linear and angular velocity of these polygons in response to that collision. I&amp;rsquo;m going to go about this with perfectly elastic collision in mind, so both momentum and kinetic energy will be conserved. At the end I&amp;rsquo;ll show how to tweak the formula slightly to change the elasticity with a coefficient of restitution.&lt;/p&gt;</description>
    </item>
    <item>
      <title>2D Parametric Collision Detection</title>
      <link>https://fotino.me/2d-parametric-collision-detection/</link>
      <pubDate>Tue, 08 Dec 2020 23:36:35 +0000</pubDate>
      <guid>https://fotino.me/2d-parametric-collision-detection/</guid>
      <description>&lt;p&gt;Today I&amp;rsquo;m going to describe a method for detecting collisions between arbitrary polygons in 2D. This is part one of a two-part series, in &lt;a href=&#34;https://fotino.me/2d-rigid-body-collision-response/&#34;&gt;the next post&lt;/a&gt; I will show how to make use of this collision detection info to do collision response.&lt;/p&gt;
&lt;p&gt;Many collision detection methods simply test for intersection between the two polygons - but what if they are moving at high speed? What if you have a point mass that is supposed to collide with a line? In some cases testing for intersection alone will result in objects clipping through other objects - and simple intersection tests won&amp;rsquo;t tell you the time of collision, the point at which collision occurred, or the normal to the surface of collision, all of which are important for proper collision response. This method will allow us to calculate all three.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Nightcrawlers Game Art</title>
      <link>https://fotino.me/nightcrawlers-game-art/</link>
      <pubDate>Sun, 20 Nov 2016 23:24:51 +0000</pubDate>
      <guid>https://fotino.me/nightcrawlers-game-art/</guid>
      <description>&lt;p&gt;Some original game art for my latest project, a survival platformer called Nightcrawlers. More to come!&lt;/p&gt;
&lt;p&gt;&lt;img alt=&#34;zombie&#34; loading=&#34;lazy&#34; src=&#34;https://fotino.me/content/images/2016/11/zombie.gif&#34;&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=&#34;bat&#34; loading=&#34;lazy&#34; src=&#34;https://fotino.me/content/images/2016/11/bat.gif&#34;&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=&#34;spider&#34; loading=&#34;lazy&#34; src=&#34;https://fotino.me/content/images/2016/11/spider.gif&#34;&gt;&lt;/p&gt;</description>
    </item>
    <item>
      <title>Gravity Simulation of the Solar System</title>
      <link>https://fotino.me/grav-sim-inner-planets/</link>
      <pubDate>Sun, 28 Aug 2016 23:09:50 +0000</pubDate>
      <guid>https://fotino.me/grav-sim-inner-planets/</guid>
      <description>&lt;p&gt;I was curious about how easy this would be to do, so the other day I took the leap and wrote a simple gravity simulator with the Earth and Sun. I googled for &amp;ldquo;planet table&amp;rdquo; and used the data from NASA&amp;rsquo;s public &lt;a href=&#34;http://nssdc.gsfc.nasa.gov/planetary/factsheet/&#34;&gt;planetary fact sheet&lt;/a&gt;. I used the average distance from the Sun and average orbital velocity to set initial conditions for the Earth. After applying the &lt;a href=&#34;https://en.wikipedia.org/wiki/Newton%27s_law_of_universal_gravitation#Modern_form&#34;&gt;law of gravity&lt;/a&gt;, I got a nice circular orbit. The masses, distances, and velocities I used are all accurate, but the diameters are much larger than in the actual solar system. With the diameters at the proper scale, the sun would be a tiny spec and the earth would be invisible.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Some Simple JavaScript Art</title>
      <link>https://fotino.me/js-art-1/</link>
      <pubDate>Thu, 07 Jul 2016 05:21:32 +0000</pubDate>
      <guid>https://fotino.me/js-art-1/</guid>
      <description>&lt;p&gt;I&amp;rsquo;ve been seeing this sort of art everywhere, with moving points connected by lines that are more solid the closer the points are to each other. It&amp;rsquo;s fun to watch and seemed like a simple effect to replicate, so here is my take on it.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Click on the animations below to show them individually. If you are on a phone the animations will probably lag when they are all running on this one page.&lt;/em&gt;&lt;/p&gt;</description>
    </item>
    <item>
      <title>Consolite, a Tiny Game Console on an FPGA</title>
      <link>https://fotino.me/consolite-fpga/</link>
      <pubDate>Wed, 08 Jun 2016 03:28:16 +0000</pubDate>
      <guid>https://fotino.me/consolite-fpga/</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;If you wish to make a game from scratch, you must first invent the universe.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;a href=&#34;https://github.com/rfotino/consolite-hardware&#34;&gt;Hardware source&lt;/a&gt; | &lt;a href=&#34;https://github.com/rfotino/consolite-compiler/blob/master/examples/tron.c&#34;&gt;Tron source&lt;/a&gt; | &lt;a href=&#34;https://github.com/rfotino/consolite-compiler/blob/master/examples/circles.c&#34;&gt;Circles source&lt;/a&gt; | &lt;a href=&#34;https://github.com/rfotino/consolite-emulator&#34;&gt;Emulator source&lt;/a&gt; | &lt;a href=&#34;https://github.com/rfotino/consolite-assembler&#34;&gt;Assembler source&lt;/a&gt; | &lt;a href=&#34;https://github.com/rfotino/consolite-compiler&#34;&gt;Compiler source&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;For my latest project, I am diving back into &lt;a href=&#34;https://en.wikipedia.org/wiki/Verilog&#34;&gt;Verilog&lt;/a&gt; to create the hardware side of Consolite. For those who don&amp;rsquo;t know, &lt;strong&gt;Consolite&lt;/strong&gt; is the name I&amp;rsquo;ve given to my design of a tiny hobbyist game console and associated software toolchain. In my previous posts, I demoed &lt;a href=&#34;https://fotino.me/the-consolite-compiler/&#34;&gt;a compiler&lt;/a&gt; that translates from a flavor of C to Consolite Assembly, &lt;a href=&#34;https://fotino.me/breakout-in-assembly/&#34;&gt;an assembler&lt;/a&gt; that translates from Consolite Assembly to binary files, and &lt;a href=&#34;https://github.com/rfotino/consolite-emulator&#34;&gt;an emulator&lt;/a&gt; that runs the resulting binaries.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Spaceship.codes - A Game for Programmers</title>
      <link>https://fotino.me/intro-to-space-ai/</link>
      <pubDate>Sat, 02 Apr 2016 22:01:26 +0000</pubDate>
      <guid>https://fotino.me/intro-to-space-ai/</guid>
      <description>&lt;p&gt;&lt;a href=&#34;//github.com/rfotino/space-ai&#34;&gt;Source code (MIT License)&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;After a few months of development, I&amp;rsquo;m proud to announce the first release of &lt;a href=&#34;//fotino.me/static/spaceship.codes&#34;&gt;spaceship.codes&lt;/a&gt;! Spaceship.codes is a browser game for programmers, with a built in code editor that the player uses to write JavaScript to control their spaceship. I will illustrate this with a simple example; it might be helpful to open spaceship.codes in a new tab so that you can follow along.&lt;/p&gt;
&lt;p&gt;First we need to load a level. We can do this by clicking the &amp;ldquo;Select Level&amp;rdquo; button, then clicking the first level (named &amp;ldquo;Thrust&amp;rdquo;), and finally clicking the &amp;ldquo;Load&amp;rdquo; button. After the level is loaded, you should see something like the following:&lt;/p&gt;</description>
    </item>
    <item>
      <title>Dana Scully in Colored Pencil</title>
      <link>https://fotino.me/dana-scully-colored-pencil/</link>
      <pubDate>Sun, 24 Jan 2016 23:50:23 +0000</pubDate>
      <guid>https://fotino.me/dana-scully-colored-pencil/</guid>
      <description>&lt;p&gt;&lt;a href=&#34;https://fotino.me/content/images/2016/01/dana-scully-large.jpg&#34;&gt;&lt;img alt=&#34;Dana Scully in colored pencil&#34; loading=&#34;lazy&#34; src=&#34;https://fotino.me/content/images/2016/01/dana-scully.jpg&#34;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://fotino.me/content/images/2016/01/dana-scully-large.jpg&#34;&gt;Click for larger image.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;In honor of the X-Files premiere tonight, here is my attempt at a portrait of one of my favorite characters — &amp;ldquo;The Skeptic&amp;rdquo;, aka Special Agent Dana Scully.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Calculating Centroids of Non-Intersecting Polygons</title>
      <link>https://fotino.me/calculating-centroids/</link>
      <pubDate>Wed, 23 Dec 2015 17:10:00 +0000</pubDate>
      <guid>https://fotino.me/calculating-centroids/</guid>
      <description>&lt;h2 id=&#34;what-is-a-centroid&#34;&gt;What Is a Centroid?&lt;/h2&gt;
&lt;p&gt;The &lt;a href=&#34;https://en.wikipedia.org/wiki/Centroid&#34;&gt;centroid&lt;/a&gt; is a geometric property of a shape, somewhat related to the center of mass. It is the point denoted &lt;strong&gt;(x̄, ȳ)&lt;/strong&gt; that is the average of all points in the shape. For example, in a rectangle the average of all points in the shape is dead center, as shown in &lt;em&gt;Figure 1&lt;/em&gt; below.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&#34;Figure 1, the centroid of a rectangle&#34; loading=&#34;lazy&#34; src=&#34;https://fotino.me/content/images/2015/12/figure1-1.jpg&#34;&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Figure 1. The average position of all points, or centroid, of a rectangle is precisely in the center of the shape.&lt;/em&gt;&lt;/p&gt;</description>
    </item>
    <item>
      <title>The Consolite Compiler</title>
      <link>https://fotino.me/the-consolite-compiler/</link>
      <pubDate>Thu, 08 Oct 2015 14:52:18 +0000</pubDate>
      <guid>https://fotino.me/the-consolite-compiler/</guid>
      <description>&lt;p&gt;In my &lt;a href=&#34;//fotino.me/breakout-in-assembly&#34;&gt;previous post&lt;/a&gt;, I created Breakout in my custom assembly language, &lt;a href=&#34;//github.com/rfotino/consolite-assembler/blob/master/docs/assembly.md&#34;&gt;Consolite Assembly&lt;/a&gt;. Writing a game in assembly was a fun challenge, but I am used to writing code at a higher level of abstraction. To make it easier on myself, I created a compiler that takes source code in a C-like language and converts it to Consolite Assembly. The source of the Consolite Compiler, written in C++, &lt;a href=&#34;//github.com/rfotino/consolite-compiler&#34;&gt;can be found here&lt;/a&gt;. A rough specification for the language, which I will refer to as &lt;strong&gt;Consolite C&lt;/strong&gt;, &lt;a href=&#34;//github.com/rfotino/consolite-compiler/blob/master/docs/spec.md&#34;&gt;can be found here&lt;/a&gt;.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Breakout in Assembly</title>
      <link>https://fotino.me/breakout-in-assembly/</link>
      <pubDate>Sun, 30 Aug 2015 23:40:37 +0000</pubDate>
      <guid>https://fotino.me/breakout-in-assembly/</guid>
      <description>&lt;p&gt;Technical details follow, and while I&amp;rsquo;ve tried my best to make it interesting and accessible I know that some of you just want to play the game. &lt;a href=&#34;#play&#34;&gt;Here is a link&lt;/a&gt; to do just that.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Consolite&lt;/strong&gt; (coming from &amp;ldquo;console lite&amp;rdquo;) is the name I&amp;rsquo;ve given to my recent project of making a tiny hobbyist game console and associated toolchain. My end goal is to write a custom microprocessor and video controller that I can put on my &lt;a href=&#34;//numato.com/mimas-v2-spartan-6-fpga-development-board-with-ddr-sdram.html&#34;&gt;Mimas V2 FPGA board&lt;/a&gt;. For prototyping purposes, I have first written an assembler and an emulator so that I can test out how writing games will work while easily making tweaks to &lt;a href=&#34;//github.com/rfotino/consolite-assembler/blob/master/docs/assembly.md#instructions&#34;&gt;the instruction set&lt;/a&gt;.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Scott Pilgrim in Colored Pencil</title>
      <link>https://fotino.me/scott-pilgrim-in-colored-pencil/</link>
      <pubDate>Wed, 22 Jul 2015 05:22:25 +0000</pubDate>
      <guid>https://fotino.me/scott-pilgrim-in-colored-pencil/</guid>
      <description>&lt;p&gt;&lt;a href=&#34;https://fotino.me/content/images/2015/07/scott-ramona-large.jpg&#34;&gt;&lt;img alt=&#34;Scott Pilgrim and Ramona Flowers on a park bench, content with each other.&#34; loading=&#34;lazy&#34; src=&#34;https://fotino.me/content/images/2015/07/scott-ramona-2.jpg&#34;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://fotino.me/content/images/2015/07/scott-ramona-large.jpg&#34;&gt;Click for larger image&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;This is my favorite frame from the Scott Pilgrim comics (originally drawn by Bryan Lee O&amp;rsquo;Malley). I recently got hold of some art supplies so I figured I&amp;rsquo;d immortalize it for my wall.&lt;/p&gt;
&lt;p&gt;For this project I used:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#34;//www.amazon.com/dp/product/B00000J0S3/&#34;&gt;Crayola colored pencils, 50 count&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;//www.amazon.com/gp/product/B00UJXIY9W&#34;&gt;Strathmore 100lb 9x12&amp;quot; paper&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;//www.amazon.com/gp/product/B002X94T8U&#34;&gt;Prismacolor blending pencils&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;http://www.amazon.com/gp/product/B00006IFAJ&#34;&gt;Prismacolor kneaded rubber eraser&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</description>
    </item>
    <item>
      <title>Tetris in Hardware</title>
      <link>https://fotino.me/tetris-in-hardware/</link>
      <pubDate>Fri, 10 Jul 2015 00:41:38 +0000</pubDate>
      <guid>https://fotino.me/tetris-in-hardware/</guid>
      <description>&lt;p&gt;&lt;em&gt;Using the &lt;a href=&#34;https://www.digilentinc.com/nexys3/&#34;&gt;Nexys 3&lt;/a&gt; board with &lt;a href=&#34;http://www.xilinx.com/products/silicon-devices/fpga/spartan-6.html&#34;&gt;Spartan 6&lt;/a&gt; FPGA to output Tetris to a VGA display.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://github.com/rfotino/verilog-tetris&#34;&gt;Source Code&lt;/a&gt; | &lt;a href=&#34;https://fotino.me/static/pdf/tetris-report.pdf&#34;&gt;Full Technical Report&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;m a computer science student at UCLA, and one of my most recent classes was a &amp;ldquo;Digital Design Lab&amp;rdquo; where we got to play around with programming FPGAs. For our final project we were allowed to choose what we wanted to create, and my partner and I decided to go with a clone of the popular video game &lt;a href=&#34;https://en.wikipedia.org/wiki/Tetris&#34;&gt;Tetris&lt;/a&gt;.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Planetary - Circular Platformer Concept</title>
      <link>https://fotino.me/circular-platformer-concept/</link>
      <pubDate>Wed, 08 Jul 2015 23:18:35 +0000</pubDate>
      <guid>https://fotino.me/circular-platformer-concept/</guid>
      <description>&lt;p&gt;&lt;a href=&#34;#demo&#34;&gt;Skip to playing the game!&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;In &lt;a href=&#34;https://fotino.me/snake-in-javascript&#34;&gt;my last post&lt;/a&gt;, I dipped my toes in the water with the &lt;a href=&#34;https://phaser.io&#34;&gt;Phaser game engine&lt;/a&gt; by making a simple game of Snake. I enjoyed using Phaser and decided to further test its capabilities by making something more complex. I&amp;rsquo;ve always wanted to make a side-scrolling shooter, but developing the storyline, levels, and graphics to do it right isn&amp;rsquo;t something I have time for right now. So I thought, what if I cut corners and just made the level a loop, so you can play infinitely? That gave me the idea for a circular platformer, where you run around the surface of a planet and have to defend against waves of enemies. I&amp;rsquo;m sure it has been done before, but it seemed interesting enough to start working on. You can see the project &lt;a href=&#34;https://github.com/rfotino/planetary&#34;&gt;on Github&lt;/a&gt;.&lt;/p&gt;</description>
    </item>
    <item>
      <title>Snake in JavaScript with the Phaser Game Engine</title>
      <link>https://fotino.me/snake-in-javascript/</link>
      <pubDate>Sat, 27 Jun 2015 23:36:00 +0000</pubDate>
      <guid>https://fotino.me/snake-in-javascript/</guid>
      <description>&lt;p&gt;I&amp;rsquo;ve been wanting to get back into game programming recently, so I decided to build the classic video game &lt;a href=&#34;https://en.wikipedia.org/wiki/Snake_(video_game)&#34;&gt;Snake&lt;/a&gt;. I chose Snake because it has simple mechanics and I had never programmed it before. As a web developer I know the browser can be a great platform to get up and running quickly, so I decided to make it in JavaScript. I hadn&amp;rsquo;t built a browser game since before the &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt; tag became widely supported, but luckily GitHub has a handy list of &lt;a href=&#34;https://github.com/showcases/javascript-game-engines&#34;&gt;JavaScript game engines&lt;/a&gt;. I chose &lt;a href=&#34;https://phaser.io&#34;&gt;Phaser&lt;/a&gt; because it&amp;rsquo;s at the top of the list, and after looking through the documentation it looked like it would suit my purposes. You can &lt;a href=&#34;#play&#34;&gt;play the finished product here&lt;/a&gt;.&lt;/p&gt;</description>
    </item>
  </channel>
</rss>
