Archive for the ‘ CG ’ Category

Ponar

While at the last Maker Faire, I picked up a 4wd robot kit.

My thought is to hook an ultrasonic sensor to it, to do some simple obstacle avoidance.  Since I’ve never worked with any of these components before (servo’s, ultrasonic sensors, motor-drivers, etc), I want to break down each step so I can really grasp how this stuff works.

I was looking at my bucket of parts and it dawned on me:  I have a servo, I have a Ping))) sensor, a spare Arduino Uno, a bunch of Erector Set parts, and knowledge of Processing programming:  I could (should!) make a simple sonar system.  So the “Ponar” was born:  Ping))) + Arduino + Servo + Processing = Ponar.

How it works:

The Arduino program sweeps the servo back and forth over a 90deg arc.  At each degree, the Ping))) sensor returns back a distance reading.  The degrees and distance values are passed over the serial port to the PC, where the Processing application turns them into a ‘traditional looking’ (in my head at least) sonar read-out.

See it in action:

Want to make one too?  Here’s the steps I went through:

Parts List:

Software List:

Hardware setup:

  • Assemble the servo, bracket, ping, and erector set into a pleasing arrangement.
  • Connect the Arduino’s 5v and ground pins to the mini beadboard with the jumpers.
  • Use jumpers to connect the Vin of the Ping))) and the servo to the Arduino powered row on the mini breadboard.
  • Use jumpers to connect the ground of the Ping))) and the servo to the Arduino grounded row on the mini breadboard.
  • Use a jumper to connect the signal line of the Ping))) to the Arduino’s digital pin 7.
  • Use a jumper to connect the signal line of the servo to the Arduino’s digital pin 9.
  • Connect the Arduino to the PC with the usb cable.
  • Upload the Arduino sketch to the Arduino:  It should start sweeping left and right.
  • Run the Processing sketch:  It should sample the serial stream being passed from the Arduino, and display the sonar view on-screen.

For a couple days work, it was really informative, and actually pretty fun.

Ponar sees beer

 

New Processing sketch: adventureLines

Haven’t posted much lately, been quite busy finaling my current game.

But I’ve had a bit of spare brain-power to work on some Processing stuff.

See more about it over on it’s page.

Click image to get full-size version.

pyglet, second steps…

With my first post on pyglet I wanted to figure out how to make simple primitive shapes. For this post, I wanted to understand the basics of how pyglet’s sprites work, learn their strengths and shorcomings.  In a nutshell I learned that:

  • It’s very easy to center their pivot, translate, rotate, and scale them.  Easier than PyGame.
  • Their drawing in OpenGL can be optimized via batches of vert lists.
  • Sprite have a draw() method(), but you don’t access it when using batches.
  • Sprites don’t have an update() method, so you need to roll your own.
  • I already knew this, but worth bringing up:  Unless I’m missing it, they have no concept of a rect (rectangle) representation, no build in collision of any type.
  • How pyglet sets up resource directories (easier than the docs make it once you figure it out).

Armed with that knowledge, I came up with the below example:  A simple window framework that will create randomly moving\scaling sprites when you click in the window.  They’ll bounce off the walls accurately based on a custom rect solution that can track the rotations to the rects.  There may be more optimized ways of computing \ drawing them, but as a first pass I’m pleased.

"""
sprite02_forBlog.py
Eric Pavey - www.akeric.com - 2011-04-03
Released under the Apache Licence, v2.0

http://www.apache.org/licenses/LICENSE-2.0

"""

import os
import sys
import math
import random
import pyglet

FPS = 60
pyglet.resource.path = ['resource/sprites']
pyglet.resource.reindex()
# The name of the sprite we're going to load:
IMAGE = 'boxOrange01.png'

def getSmoothConfig():
    """
    Sets up a configuration that allows of smoothing\antialiasing of the window.
    The return of this is passed to the config parameter of the created window.
    """
    try:
        # Try and create a window config with multisampling (antialiasing)
        config = pyglet.gl.Config(sample_buffers=1, samples=4,
                        depth_size=16, double_buffer=True)
    except pyglet.window.NoSuchConfigException:
        print "Smooth contex could not be aquiried."
        config = None
    return config

class Sprite(pyglet.sprite.Sprite):
    """
    Let's create a pyglet sprite, that will randomly move around the screen
    bouncing off the walls, accurately tracking it's collision rect even wheb
    rotated.
    """
    # Load the image and center the pivot:
    image = pyglet.resource.image(IMAGE) # pyglet.image.Texture
    image.anchor_x = image.width/2
    image.anchor_y = image.height/2

    def __init__(self, window, x, y, scale=1, batch=None):
        """
        window : pyglet.window.Window : The enclosing window that this sprite
            will be draw in.
        x, y, : float : init position
        scale : float : init scale
        batch : pyglet.graphics.Batch :  Default None.  the Batch to add the
            sprite to.
        """
        super(Sprite, self).__init__(Sprite.image, x, y, batch=batch)
        self.window = window
        self.scale = scale
        self.px = x
        self.py = y
        # Random starting speed\direction deltas:
        self.dx = (random.random() - 0.5) * 1000
        self.dy = (random.random() - 0.5) * 1000
        # how much to change the scale each frame
        self.scaleVal = .01

    def update(self, dt):

        # Cycle our scaling:
        if self.scale > 1.5 or self.scale < .5:
            self.scaleVal *= -1
        self.scale += self.scaleVal

        # Get our rotated rect, and then sort our x & y positions for wall
        # collision below:
        rect = self.getRect()
        xs = sorted(xy[0] for xy in rect)
        ys = sorted(xy[1] for xy in rect)

        # Do wall collision.  If a wall is hit, reverse direction, and offset
        # away from the wall based on the distance by which the wall was passed:
        if xs[0] <= 0:
            self.dx *= -1
            self.x += -xs[0]
        elif xs[-1] >= self.window.width:
            self.dx *= -1
            self.x -= xs[-1]-self.window.width

        if ys[0] <= 0:
            self.dy *= -1
            self.y += -ys[0]
        elif ys[-1] >= self.window.height:
            self.dy *= -1
            self.y -= ys[-1]-self.window.height

        self.px = self.x
        self.py = self.y
        self.x += self.dx * dt
        self.y += self.dy * dt

        # Using this, "forward" of the sprite is the "up" direction of the texture.
        self.radians = math.atan2((self.x-self.px), (self.y-self.py))
        self.rotation = math.degrees(self.radians)

    def getRect(self):
        """
        Returns the four scaled\rotated rect points in clockwise order :
        lt, rt, rb, lb
        """
        left = self.x - self.width/2
        right = self.x + self.width/2
        top = self.y + self.height/2
        bottom = self.y - self.height/2

        lt = (left,top)
        rt = (right,top)
        lb = (left,bottom)
        rb = (right,bottom)

        # Get rotated positions:
        if  self.rotation:
            # Note, as seen below, each of the y's in the first column to the left
            # are subtracted, rather than added like their 'x' counterpart.  I'm
            # not sure why this is needed, but it's very bad if you don't.
            ltx = self.x + ((lt[0]-self.x)*math.cos(self.radians) - \
                            (lt[1]-self.y)*math.sin(self.radians))
            lty = self.y - ((lt[0]-self.x)*math.sin(self.radians) + \
                            (lt[1]-self.y)*math.cos(self.radians))
            lt = (ltx, lty)

            rtx = self.x + ((rt[0]-self.x)*math.cos(self.radians) - \
                            (rt[1]-self.y)*math.sin(self.radians))
            rty = self.y - ((rt[0]-self.x)*math.sin(self.radians) + \
                            (rt[1]-self.y)*math.cos(self.radians))
            rt = (rtx, rty)

            rbx = self.x + ((rb[0]-self.x)*math.cos(self.radians) - \
                            (rb[1]-self.y)*math.sin(self.radians))
            rby = self.y - ((rb[0]-self.x)*math.sin(self.radians) + \
                            (rb[1]-self.y)*math.cos(self.radians))
            rb = (rbx, rby)

            lbx = self.x + ((lb[0]-self.x)*math.cos(self.radians) - \
                            (lb[1]-self.y)*math.sin(self.radians))
            lby = self.y - ((lb[0]-self.x)*math.sin(self.radians) + \
                            (lb[1]-self.y)*math.cos(self.radians))
            lb = (lbx, lby)

        return lt, rt, rb, lb

class SpriteWindow(pyglet.window.Window):

    def __init__(self):
        super(SpriteWindow, self).__init__(fullscreen=False,
                                           caption='pyglet sprite test',
                                           config=getSmoothConfig())

        # Schedule the update of this window, so it will advance in time.  If we
        # don't, the window will only update on events like mouse motion.
        pyglet.clock.schedule_interval(self.update, 1.0/FPS)

        # Set the background color:
        pyglet.gl.glClearColor(0,0,1,0)

        # Used for optimized sprite *drawing*.  It holds vertex lists, not Sprite objects.
        self.sprite_batch = pyglet.graphics.Batch()
        # Used for sprite *updating*, holds our Sprite objects.
        self.sprites = []

        # A label to draw how many sprites we have:
        self.spriteLabel = pyglet.text.Label(str(len(self.sprites)), font_name='Courier',
                                  font_size=36, x=self.width/2, y=32)

        # Setup debug framerate display:
        self.fps_display = pyglet.clock.ClockDisplay()

        # Run the application
        pyglet.app.run()

    #----------------------------
    # Scheduled Events:
    # via pyglet.clock.schedule_interval in __init__

    def update(self, dt):
        """
        Do all upating here:
        """
        for sprite in self.sprites:
            sprite.update(dt)

        self.spriteLabel.text=str(len(self.sprites))

    #----------------------------
    # Window() events:
    # Overridden Window() methods:

    def on_draw(self):
        """
        Do all drawing here.
        """
        self.clear()

        # Draw all our sprites:
        self.sprite_batch.draw()

        # Draw text:
        self.fps_display.draw()
        self.spriteLabel.draw()

    def on_mouse_press(self, x, y, button, modifiers):
        """
        Interaction with mouse.
        LMB creates sprite, RMB deletes sprite.
        """
        if button == 1:
            # Create,... a SPRITE, added to our render batch:
            sprite = Sprite(self, x, y, batch=self.sprite_batch)
            self.sprites.append(sprite)
        else:
            if len(self.sprites):
                # Make sure it's deleted:
                self.sprites[-1].delete()
                self.sprites.pop()

if __name__ == '__main__':
    """
    Launch the app from an icon.
    """
    sys.exit(SpriteWindow())

pyglet: First steps


I had to give my brain a break from all the Processing \ Android stuff and get back into Python.  I’ve done a few small apps with PyGame and it’s been an enjoyable process.  But PyGame is SDL based, and because of that never felt as ‘Pythonic’ to me as I’d like.  Plus, and this is a minor gripe, but it really rubs me the wrong way:  There seems to be no way to easily anti-alias PyGame programs.  Without that, to me, they end up looking just a bit too indy for my taste.

I thought I’d go about learning a new Python game development framework, and the one I settled on is pyglet.

Reasons I like pyglet?

  • Authored in Python with no external dependencies (other than OpenGL).  It ‘feels moar Python’.
  • It’s mainly a big fancy wrapper around OpenGL (which I want to learn).
  • I like it’s event system.
  • You can anti-alias it! :)
  • It has an even higher-level wrapper API, cocos2d (which I’ll get into later), which adds even more game-framework related abilities.

Things that bum me out about it:

  • Unless I’m missing it, has no built-in primitives library.  If you want to draw a line, or a filled circle, you gotta roll your own.  Yes, it has a ‘pyglet.graphics’ library (here, here), but it’s not exactly plug-n-play.
  • The API, while great in some areas, doesn’t have all the convenience functions I’m used to with something like Processing, or even PyGame.  But this means I get to learn how to do it, which isn’t a bad thing.
  • There is no sprite\rect-based collision systems (unlike PyGame).

So, my pyglet beginnings are below.  I tried to come up with a basic window displaying primitives, anti-aliased.  I found a great primitives library that someone already authored so that filled in my primitives hole.  And I wrote my own ‘utils’ module as I learned stuff, slowly filling in the missing pieces I think I’ll need in the future.

Links:

Here is my ‘utilities’ module:

# pyglet.utils.py
# www.akeric.com - 2011-03-17
# utils to make pyglet easier to work with, help my learning of it.

import pyglet
from pyglet.gl import *

def screenshot(name='screenshot'):
    """
    Take a screenshot

    Parameters:
    name : string : Default 'screenshot'.  Name of the saved image.  Will
        always save as .png
    """
    # Get the 'the back-left color buffer'
    pyglet.image.get_buffer_manager().get_color_buffer().save('%s.png'%name)

def getPixelValue(x, y):
    """
    Return the RGBA 0-255 color value of the pixel at the x,y position.
    """
    # BufferManager, ColorBufferImage
    color_buffer = pyglet.image.get_buffer_manager().get_color_buffer()
    # AbstractImage, ImageData, sequece of bytes
    pix = color_buffer.get_region(x,y,1,1).get_image_data().get_data("RGBA", 4)
    return pix[0], pix[1], pix[2], pix[3]

def drawPoint(x, y, color):
    """
    Based on the (r,g,b) color passed in, draw a point at the given x,y coord.
    """
    pyglet.graphics.draw(1, GL_POINTS,
                         ('v2i', (x, y)),
                         ('c3B', (color[0], color[1], color[2]) ) )

def getSmoothConfig():
    """
    Sets up a configuration that allows of smoothing\antialiasing.
    The return of this is passed to the config parameter of the created window.
    """
    try:
        # Try and create a window config with multisampling (antialiasing)
        config = Config(sample_buffers=1, samples=4,
                        depth_size=16, double_buffer=True)
    except pyglet.window.NoSuchConfigException:
        print "Smooth contex could not be aquiried."
        config = None
    return config

def printEvents(window):
    """
    Debug tool that will print the events to the console.

    window is an instance of a Window object receiving the events.
    """
    window.push_handlers(pyglet.window.event.WindowEventLogger())

def playMusic(music):
    """
    Simple wrapper to play a music (mp3) file.

    music : music file relative to application.
    """
    music = pyglet.resource.media(music)
    music.play()

def setBackgroundColor(color):
    """
    Color is a list of four values, [r,g,b,a], each from 0 -> 1
    """
    pyglet.gl.glClearColor(*color)

And here is my ‘basic window’ which draws primitives. It is a dupe of the primitives drawing example from the primitives.py module, but modified into a new window:

# primitivesTest01.py
# www.akeric.com - 2011-03-17

import sys
import random
import pyglet
from pyglet.gl import *
import primitives # module discussed above
import utils # module from above

FPS = 60
smoothConfig = utils.getSmoothConfig()

class PrimWin(pyglet.window.Window):

    def __init__(self):
        super(PrimWin, self).__init__(fullscreen=False, caption='Primitives Test!', config=smoothConfig)
        glEnable(GL_BLEND)
        glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)
        self.p = primitives.Pixel(10,10)
        self.c = primitives.Circle(200,100,width=100,color=(0.,.9,0.,1.))
        self.a = primitives.Arc(150,150,radius=100,color=(1.,0.,0.,1.),sweep=90,style=GLU_FILL)
        self.P = primitives.Polygon([(0, 0), (50, 200), (80, 200),(60,100),(100,5)],color=(.3,0.2,0.5,.7))
        self.l = primitives.Line((10,299),(100,25),stroke=8,color=(0,0.,1.,1.))
        # Setup debug framerate display:
        self.fps_display = pyglet.clock.ClockDisplay()
        # Schedule the update of this window, so it will advance in time at the
        # defined framerate.  If we don't, the window will only update on events
        # like mouse motion.
        pyglet.clock.schedule_interval(self.update, 1.0/FPS)

    def on_draw(self):
        # Window event
        self.clear()
        self.c.render()
        self.p.render()
        self.a.render()
        self.P.render()
        self.l.render()
        self.fps_display.draw()

    def on_mouse_motion(self, x, y, dx, dy):
        # Window event
        self.c.x = x
        self.c.y = y

    def update(self, dt):
        # Scheduled event
        self.a.rotation+=1
        self.c.color = [random.random() for i in xrange(3)]+[1]

if __name__ == '__main__':
    PrimWin()
    sys.exit(pyglet.app.run())

And the result of this awesome code is the screenshot at the top of the screen.

Next steps will be to dig more into cocos2d and see if I can come up with something more interesting than the above screenshot to develop.

Verlet physics in Processing

I randomly came across two great tutorials (one, two) by Florian Boesch detailing verlet physics.  His examples were done in JavaScript, and as a learning exercise I ported them to Processing.  The below images link to the pages on my blog where you can launch the interactive Processing applets and grab the Processing source code.