Paintable Canvas Hacks

[justinedwards.jle]

I've been playing around with the paintable canvas quite a bit here lately for fun, and I was wondering if anybody had any cool hacks for canvas development they would be willing to share.

To start things off, I'll share a simple way to get drawn curves right in the canvas.

Edit: The gauge example below is just a component with a lot of curves. There are better and easier ways to make such a gauge with the canvas, but for the purposes of this post, the number of curves this component has makes it ideal for demonstrating this method.

A simple method for drawing perfect curves with the paintable canvas:
Using variable names that are self explanitory, the drawArc method looks like this:

g.drawArc(x, y, width, height, startingAngle, angleLengthInDegrees)

I've found that if you take the circle tool, give it a transparent background, and position it where you want the curve to be, its x, y, width and height parameters will be exactly right.

Therefore. if I wanted to make something like this custom gauge with rounded edges:

I could start by simply overlaying my canvas with simple shapes produced by the round shape tool to get the proper dimensions:

Then, select each shape and press ctrl-P to get the parameters:

In my case, the bounds for the four circles are:

[46, 221, 50, 50] # Left small circle
[204, 221, 50, 50] # Right small circle
[50, 50, 200, 200] # Large inner circle
[0, 0, 300, 300] # Large outer circle

Once this is done there will only be two parameters needed for each of the four arcs. This can be determined by simply using a unit circle:

It looks like my two large circles should start at about 315 degrees and end at around 225 degrees. That would be a total of 270 degrees travel, so my code would look like this:

g = event.graphics

g.drawArc(0, 0, 300, 300, 315, 270)
g.drawArc(50, 50, 200, 200, 315, 270)

Looking again at the unit circle, I can estimate that my small left circle should start at around 225 degrees and end 180 degrees later at 45 degrees. My right small circle looks like it should start at around 135 degrees, and end 180 degrees later at 315 degrees, so I'll add these lines to my code:

g.drawArc(46, 221, 50, 50, 225, 180)
g.drawArc(204, 221, 50, 50, 135, 180)

When I run preview mode, I see this in my canvas:

It's not perfect, but it's pretty darn close. From here, a little trial and error to tweak the numbers produces this result:

g = event.graphics

# Large Outer Circle
g.drawArc(0, 0, 300, 300, 310, 280)

# Large Inner Circle
g.drawArc(50, 50, 200, 199, 309, 283)

# Small Left Arc
g.drawArc(46, 221, 51, 51, 228, 180)

# Small Right Arc
g.drawArc(204, 221, 50, 50, 130, 180)

[zxcslo]

This is how I did it a few years ago...

GaugeCanvasArcDonutAnimated.zip (23.5 KB)
I'm using Arc2D.Double with g.setStroke(BasicStroke(arcwidth, BasicStroke.CAP_ROUND, BasicStroke.JOIN_MITER)).
CAP_ROUND is for rounded ends, CAP_BUTT is for normal ends...

[justinedwards.jle]

Customized Borders:
Simply fill the bottom layer of a container with a paintable canvas to create custom borders like these:

# Curved border
# Developed for the repaint event handler of a paintable canvas component

# Define the parent container
parent = event.source.parent

# Define a border width
borderWidth = 15

# Gradient severity
darkenPerPixel = 3

# Get graphics instance
graphics = event.graphics

# Define the unedited background color using rgba intengers
# Since the border color shifts by the amount to darken for every pixel of border width,
# ...each rgb must be at least the same integer value as the border width to ensure no integer can be calculated as less than zero.
startingRed = parent.background.red if parent.background.red >= borderWidth * darkenPerPixel else borderWidth * darkenPerPixel
startingGreen = parent.background.green if parent.background.green >= borderWidth else borderWidth * darkenPerPixel
startingBlue = parent.background.blue if parent.background.blue >= borderWidth else borderWidth * darkenPerPixel

# If any rgb values were adjusted, apply the adjusted values to the parent container's background property
startingBackground = system.gui.color(startingRed, startingGreen, startingBlue, parent.background.alpha)
if parent.background != startingBackground:
	parent.background = startingBackground

# For each side of the canvas, paint the border
for side in range(4):

	# Initialize RGB values for the border. For left and top (side 0 and 1), reduce each by borderWidth
	# For bottom and right (side 2 and 3), keep the original starting RGB values
	# Determine the start and end points for drawing lines based on the side being processed
	if side == 0 or side == 1: # Left side or Top side
		red = startingRed - borderWidth * darkenPerPixel
		green = startingGreen - borderWidth * darkenPerPixel
		blue = startingBlue - borderWidth * darkenPerPixel
		start = 0
		end = borderWidth
	else:
		red = startingRed
		green = startingGreen
		blue = startingBlue				
		if side == 3: # Right side
			start = event.source.width - borderWidth
			end = event.source.width
		else: # Bottom side
			start = event.source.height - borderWidth
			end = event.source.height
			
	# Draw the border lines, adjusting the RGB values to create a gradient effect along each side
	for pixel in range(start, end):
	
		# Increment or decrement RGB values to create a rounded fading effect on the border
		if pixel - start < borderWidth and side < 2 :
			red +=  darkenPerPixel
			green += darkenPerPixel
			blue += darkenPerPixel
		else:
			red -= darkenPerPixel
			green -= darkenPerPixel
			blue -= darkenPerPixel
			
		# Set the current color for drawing
		graphics.setColor(system.gui.color(red, green, blue))
		
		# Draw lines based on the side being processed to create the border effect
		if side == 0: # Left side
			graphics.drawLine(pixel, (0 + pixel), pixel, (event.source.height - pixel))
		elif side == 1: # Top side
			graphics.drawLine((0 + pixel), pixel, (event.source.width - pixel), pixel)
		elif side == 3: # Right side
			increment = event.source.width - pixel
			graphics.drawLine(pixel, (0 + increment), pixel, (event.source.height - increment))
		else: # Bottom side
			increment = event.source.height - pixel
			graphics.drawLine((0 + increment), pixel, (event.source.width - increment), pixel)

[lrose]

That looks familiar...

Circular Slider in canvas

OK, after 4 days I have enough… It seems that (at least for me) this seems to be more difficult than I thought. Making a circular slider is way more different/difficult than making a circular gauge. I’m pretty sure that my lack of knowledge is what’s causing me problems (I also think that the overall approach to this is wrong), but that’s it. Here is what I came up with: CircularSlider_2019-07-03_0941.proj (322.7 KB) Feel free to use, experiment with and in case some…

This demonstrates using hit testing on the canvas to turn your gauge into a "slider" for input purposes.

Be warned in advance that there is some "fancy" math involved.

I also often find that is useful to do all of the drawing at a known unit size and then transform and/or scale to the final size at the end.

[justinedwards.jle]

@lrose

transform and/or scale to the final size at the end.

These lines from the default component example are handy:

#### Scale graphics to actual component size
dX = (event.width-1)/100.0
dY = (event.height-1)/100.0
g.scale(dX,dY)

[justinedwards.jle]

On Screen Presentation Mouse:

I was doing a demo video for a tutorial I made about modifying a slider's click behavior, and to make the mouse clicks visible, I created a simple demo mouse with the paintable canvas. It's useful, so I'm posting the tutorial on how to create it here in case anybody else would like to use it.

First: add two custom boolean properties to the paintable canvas called leftClick and rightClick:

Second: Add this script to the paintable canvas's repaint event handler:

# Get the graphics object from the event
graphics = event.graphics

# Create the main body of the mouse
graphics.setColor(system.gui.color('grey'))
graphics.fillOval(40, 20, 120, 200)

# Set the button colors according to whether or not they have been clicked
# and create the buttons

# Left Button
if event.source.leftClick:
	graphics.setColor(system.gui.color('lightgreen'))
	graphics.fillArc(50, 50, 100, 60, 90, 180)
	
else:
	graphics.setColor(system.gui.color('lightgrey'))
graphics.fillArc(50, 50, 100, 60, 90, 180)

# Right Button
if event.source.rightClick:
	graphics.setColor(system.gui.color('lightgreen'))
	graphics.fillArc(50, 50, 100, 60, 270, 180)

else:
	graphics.setColor(system.gui.color('lightgrey'))
graphics.fillArc(50, 50, 100, 60, 270, 180)

graphics.setColor(system.gui.color('black'))
#Draw a centerline between the buttons
graphics.drawLine(100, 50, 100, 110)

# Create a center mouse wheel
graphics.setColor(system.gui.color('grey'))
graphics.fillOval(95, 65, 10, 30)

# Create a shadow around the buttons when they are clicked,
# ...to create a depressed effect
if event.source.leftClick:
	graphics.setColor(system.gui.color('black'))
	graphics.drawArc(50, 50, 100, 60, 90, 180)
if event.source.rightClick:
	graphics.setColor(system.gui.color('black'))
	graphics.drawArc(50, 50, 100, 60, 270, 180)

Finally: On the component that is being clicked on for the demonstration, add this script to the mousePressed event handler:

if event.button == 1: # left click
	event.source.parent.getComponent('Paintable Canvas').leftClick = True
elif event.button == 3: # right click
	event.source.parent.getComponent('Paintable Canvas').rightClick = True

...and add this script to the same component's mouseReleased event handler:

if event.button == 1:
	event.source.parent.getComponent('Paintable Canvas').leftClick = False
elif event.button == 3:
	event.source.parent.getComponent('Paintable Canvas').rightClick = False

[justinedwards.jle]

Gaming Applications:

I was showing off the paintable canvas to my son and simultaneous showing him some practical applications for the vector math he was studying in trigonometry class. Things probably got a little carried away, and Bananas! was born. The whole game is rendered by a single paintable canvas, so there are a lot of cool hacks in there: slider controls, switches, buttons, animations, etc.

Introducing Bananas!

A single or multiplayer video game for Vision. To Play: Select whether each player will be a robot or a human. Select how many victories are required to win the game, and adjust the gravity if desired. Finally, click the 'Start Game' button. Object of the game: Hit the other monkey with a banana by adjusting the angle and velocity of the throw. The game can be played with a single player, two players, or it's also possible to make both players virtual and just watch the monkeys fight it out. …

I had already constructed some of the ground work this a couple of years ago when I made this post:

Add script to dynamically created objects

Just for fun:

That code includes moving dynamically created shapes around inside a canvas with a mouse, and it has various animation concepts such as momentum, reflection, etc.

[justinedwards.jle]

Keyboard Controls:

It's possible that some wouldn't find this intuitive because simply typing code into the key event handlers for the paintable canvas doesn't work. To enable the controls, the paintable canvas has to be given focus first. An easy and intuitive way to accomplish this is to simply add event.source.requestFocusInWindow() to the mouse clicked event handler. Then, the key event handlers will work once the canvas has been clicked on.

Example keyPressed script:

# A timer component could be started with the keyPressed event handler
# ...to conduct sustained repetative presses when a key is held down,
# ...and the key released event handler would stop and reset the timer.

if event.keyCode == event.VK_UP:
	print 'UP'
elif event.keyCode == event.VK_DOWN:
	print 'DOWN'
elif event.keyCode == event.VK_ENTER:
	print 'ENTER'
elif event.keyCode == event.VK_RIGHT:
	print 'RIGHT'
elif event.keyCode == event.VK_LEFT:
	print 'LEFT'

Edit/Additional information:
When painting controls in the canvas, a focus traversal policy can be simulated by putting a focusable component in the container with the canvas. Use the component's focusGained event handler to simply redirect the focus back to the canvas. Inside the canvas itself, use the focusLost event handler to traverse painted controls:

if event.cause == event.cause.TRAVERSAL_FORWARD:
	# Drive simulated forward traversal here
elif event.cause == event.cause.TRAVERSAL_BACKWARD:
	# Drive simulated reverse traversal here

Note: It could seem like the requestFocusInWindow could be called directly from the focusLost event, eliminating the need for some arbitrary focusable component, but without it, there will be nothing for the real focus traversal policy to tab to, and consequently, there is no guarantee that the focusLost event will occur.

Tangibly, I'm not aware of a simple way to detect or consume the tab key events in Vision, so I imagine this approach could easily be adapted for use cases with other components where it is desirable to mute or manipulate tab actions.

[justinedwards.jle]

Using the paintable canvas as an overlay:

Component outline on different z-order than component

The paintable canvas can be used as an overlay to provide this effect without any regard to z-order or component positioning. Simply overlay the entire container with a paintable canvas, and use the canvas's mouse moved event to detect when the cursor intersects a component, so a top level outline can be painted around it: Example: Add the following custom properties to the canvas: [image] Add the following custom methods to the canvas:

passMouseEvent

#def passMouseEvent(self, event): "…

[justinedwards.jle]

Below is a master list of all possible string arguments for system.gui.color() assigned to a variable for use in scripting functions. I originally created this for the random confetti generator I developed for BANANAS Version 2, but it's been coming in quite handy elsewhere, so I'm posting it here:

possibleStringColors = [
	#String,					#Hex				#RGB
	'AliceBlue', #				#F0F8FF				(240, 248, 255)
	'AntiqueWhite', #			#FAEBD7				(250, 235, 215)
	'Aqua', #					#00FFFF				(0, 255, 255)
	'Aquamarine', #				#7FFFD4				(127, 255, 212)
	'Azure', #					#F0FFFF				(240, 255, 255)
	'Beige', #					#F5F5DC				(245, 245, 220)
	'Bisque', #					#FFE4C4				(255, 228, 196)
	'Black', #					#000000				(0, 0, 0)
	'BlanchedAlmond', #			#FFEBCD				(255, 235, 205)
	'Blue', #					#0000FF				(0, 0, 255)
	'BlueViolet', #				#8A2BE2				(138, 43, 226)
	'Brown', #					#A52A2A				(165, 42, 42)
	'BurlyWood', #				#DEB887				(222, 184, 135)
	'CadetBlue', #				#5F9EA0				(95, 158, 160)
	'Chartreuse', #				#7FFF00				(127, 255, 0)
	'Chocolate', #				#D2691E				(210, 105, 30)
	'Clear', #					#FFFFFF				(255, 255, 255, 0)
	'Coral', #					#FF7F50				(255, 127, 80)
	'CornflowerBlue', #			#6495ED				(100, 149, 237)
	'Cornsilk', #				#FFF8DC				(255, 248, 220)
	'Crimson', #				#DC143C				(220, 20, 60)
	'Cyan', #					#00FFFF				(0, 255, 255)
	'DarkBlue', #				#00008B				(0, 0, 139)
	'DarkCyan', #				#008B8B				(0, 139, 139)
	'DarkGoldenRod', #			#B8860B				(184, 134, 11)
	'DarkGrey', #				#A9A9A9				(169, 169, 169)
	'DarkGreen', #				#006400				(0, 100, 0)
	'DarkKhaki', #				#BDB76B				(189, 183, 107)
	'DarkMagenta', #			#8B008B				(139, 0, 139)
	'DarkOliveGreen', #			#556B2F				(85, 107, 47)
	'Darkorange', #				#FF8C00				(255, 140, 0)
	'DarkOrchid', #				#9932CC				(153, 50, 204)
	'DarkRed', #				#8B0000				(139, 0, 0)
	'DarkSalmon', #				#E9967A				(233, 150, 122)
	'DarkSeaGreen', #			#8FBC8F				(143, 188, 143)
	'DarkSlateBlue', #			#483D8B				(72, 61, 139)
	'DarkSlateGrey', #			#2F4F4F				(47, 79, 79)
	'DarkTurquoise', #			#00CED1				(0, 206, 209)
	'DarkViolet', #				#9400D3				(148, 0, 211)
	'DeepPink', #				#FF1493				(255, 20, 147)
	'DeepSkyBlue', #			#00BFFF				(0, 191, 255)
	'DimGrey', #				#696969				(105, 105, 105)
	'DodgerBlue', #				#1E90FF				(30, 144, 255)
	'Feldspar', #				#D19275				(209, 146, 117)
	'FireBrick', #				#B22222				(178, 34, 34)
	'FloralWhite', #			#FFFAF0				(255, 250, 240)
	'ForestGreen', #			#228B22				(34, 139, 34)
	'Fuchsia', #				#FF00FF				(255, 0, 255)
	'Gainsboro', #				#DCDCDC				(220, 220, 220)
	'GhostWhite', #				#F8F8FF				(248, 248, 255)
	'Gold', #					#FFD700				(255, 215, 0)
	'GoldenRod', #				#DAA520				(218, 165, 32)
	'Grey', #					#808080				(128, 128, 128)
	'Green', #					#008000				(0, 128, 0)
	'GreenYellow', #			#ADFF2F				(173, 255, 47)
	'HoneyDew', #				#F0FFF0				(240, 255, 240)
	'HotPink', #				#FF69B4				(255, 105, 180)
	'IndianRed', #				#CD5C5C				(205, 92, 92)
	'Indigo', #					#4B0082				(75, 0, 130)
	'Ivory', #					#FFFFF0				(255, 255, 240)
	'Khaki', #					#F0E68C				(240, 230, 140)
	'Lavender', #				#E6E6FA				(230, 230, 250)
	'LavenderBlush', #			#FFF0F5				(255, 240, 245)
	'LawnGreen', #				#7CFC00				(124, 252, 0)
	'LemonChiffon', #			#FFFACD				(255, 250, 205)
	'LightBlue', #				#ADD8E6				(173, 216, 230)
	'LightCoral', #				#F08080				(240, 128, 128)
	'LightCyan', #				#E0FFFF				(224, 255, 255)
	'LightGoldenRodYellow', #	#FAFAD2				(250, 250, 210)
	'LightGreen', #				#90EE90				(144, 238, 144)
	'LightGrey', #				#D3D3D3				(211, 211, 211)
	'LightPink', #				#FFB6C1				(255, 182, 193)
	'LightSalmon', #			#FFA07A				(255, 160, 122)
	'LightSeaGreen', #			#20B2AA				(32, 178, 170)
	'LightSkyBlue', #			#87CEFA				(135, 206, 250)
	'LightSlateBlue', #			#8470FF				(132, 112, 255)
	'LightSlateGrey', #			#778899				(119, 136, 153)
	'LightSteelBlue', #			#B0C4DE				(176, 196, 222)
	'LightYellow', #			#FFFFE0				(255, 255, 224)
	'Lime', #					#00FF00				(0, 255, 0)
	'LimeGreen', #				#32CD32				(50, 205, 50)
	'Linen', #					#FAF0E6				(250, 240, 230)
	'Magenta', #				#FF00FF				(255, 0, 255)
	'Maroon', #					#800000				(128, 0, 0)
	'MediumAquaMarine', #		#66CDAA				(102, 205, 170)
	'MediumBlue', #				#0000CD				(0, 0, 205)
	'MediumOrchid', #			#BA55D3				(186, 85, 211)
	'MediumPurple', #			#9370DB				(147, 112, 219)
	'MediumSeaGreen', #			#3CB371				(60, 179, 113)
	'MediumSlateBlue', #		#7B68EE				(123, 104, 238)
	'MediumSpringGreen', #		#00FA9A				(0, 250, 154)
	'MediumTurquoise', #		#48D1CC				(72, 209, 204)
	'MediumVioletRed', #		#C71585				(199, 21, 133)
	'MidnightBlue', #			#191970				(25, 25, 112)
	'MintCream', #				#F5FFFA				(245, 255, 250)
	'MistyRose', #				#FFE4E1				(255, 228, 225)
	'Moccasin', #				#FFE4B5				(255, 228, 181)
	'NavajoWhite', #			#FFDEAD				(255, 222, 173)
	'Navy', #					#000080				(0, 0, 128)
	'OldLace', #				#FDF5E6				(253, 245, 230)
	'Olive', #					#808000				(128, 128, 0)
	'OliveDrab', #				#6B8E23				(107, 142, 35)
	'Orange', #					#FFA500				(255, 165, 0)
	'OrangeRed', #				#FF4500				(255, 69, 0)
	'Orchid', #					#DA70D6				(218, 112, 214)
	'PaleGoldenRod', #			#EEE8AA				(238, 232, 170)
	'PaleGreen', #				#98FB98				(152, 251, 152)
	'PaleTurquoise', #			#AFEEEE				(175, 238, 238)
	'PaleVioletRed', #			#DB7093				(219, 112, 147)
	'PapayaWhip', #				#FFEFD5				(255, 239, 213)
	'PeachPuff', #				#FFDAB9				(255, 218, 185)
	'Peru', #					#CD853F				(205, 133, 63)
	'Pink', #					#FFC0CB				(255, 192, 203)
	'Plum', #					#DDA0DD				(221, 160, 221)
	'PowderBlue', #				#B0E0E6				(176, 224, 230)
	'Purple', #					#800080				(128, 0, 128)
	'Red', #					#FF0000				(255, 0, 0)
	'RosyBrown', #				#BC8F8F				(188, 143, 143)
	'RoyalBlue', #				#4169E1				(65, 105, 225)
	'SaddleBrown', #			#8B4513				(139, 69, 19)
	'Salmon', #					#FA8072				(250, 128, 114)
	'SandyBrown', #				#F4A460				(244, 164, 96)
	'SeaGreen', #				#2E8B57				(46, 139, 87)
	'SeaShell', #				#FFF5EE				(255, 245, 238)
	'Sienna', #					#A0522D				(160, 82, 45)
	'Silver', #					#C0C0C0				(192, 192, 192)
	'SkyBlue', #				#87CEEB				(135, 206, 235)
	'SlateBlue', #				#6A5ACD				(106, 90, 205)
	'SlateGrey', #				#708090				(112, 128, 144)
	'Snow', #					#FFFAFA				(255, 250, 250)
	'SpringGreen', #			#00FF7F				(0, 255, 127)
	'SteelBlue', #				#4682B4				(70, 130, 180)
	'Tan', #					#D2B48C				(210, 180, 140)
	'Teal', #					#008080				(0, 128, 128)
	'Thistle', #				#D8BFD8				(216, 191, 216)
	'Tomato', #					#FF6347				(255, 99, 71)
	'Transparent', #			#FFFFFF				(255, 255, 255, 0)
	'Turquoise', #				#40E0D0				(64, 224, 208)
	'Violet', #					#EE82EE				(238, 130, 238)
	'VioletRed', #				#D02090				(208, 32, 144)
	'Wheat', #					#F5DEB3				(245, 222, 179)
	'White', #					#FFFFFF				(255, 255, 255)
	'WhiteSmoke', #				#F5F5F5				(245, 245, 245)
	'Yellow', #					#FFFF00				(255, 255, 0)
	'YellowGreen' #				#9ACD32				(154, 205, 50)
		]

[justinedwards.jle]

Gear Animations

Create a library script called animation, and add the following function to generate a basic gear shape in a paintable canvas:

from java.awt import BasicStroke, Polygon
from java.lang.Math import sin, cos, PI

def paintGear(graphics, centerX, centerY, gearDiameter, toothHeight, teethCount, rotationAngle, gearColor):
	'''
	Arguments:
		graphics: The java2D graphics option from the repaint event that is being used to generate this animation
		centerX: The x coordinate of the center of the gear
		centerY: The y coordinate for the center of the gear
		gearDiameter: The widest distance across the center of the gear to the tops of the teeth
		innerRadius: The distance from the center of the gear to the base of the teeth
		teethCount: The number of teeth to be painted on the gear
		rotationAngle: The angle of rotation in radians
		gearColor: A java.awt.Color used to fill the body of the gear
	
	Returns:
		None
	
	Overview:
		Calculates all the corners for the teeth, and adds them to a polygon shape to generate a single gear object that can be painted and outlined
	'''
	graphics.stroke = BasicStroke(2)
	gear = Polygon() # Obviously ~ lol
	
	# Calculate the distance from the center of the gear to bottom and top of each tooth
	outerRadius = gearDiameter / 2
	innerRadius = outerRadius - toothHeight
	
	# Java requries radians, but the frames of this animation are divided up into degrees,
	# ...so divide (2 PI) [the radian equivilant of 360 degrees] by the number of teeth
	# ...to get the angle needed to space the teeth evenly around the gear
	toothAngle = (2 * PI) / teethCount
	
	# Slightly offset the angles of the inner and outer points
	# ...to add seemingly uniform flats to the end and base of the gear
	outerHobAngleOffset = .4	# I'm using the word Hob because I once worked in a machine shop,
	innerHobAngleOffset = .1	# ...and the machine that cut the gears was called a gear hobber
	
	# Calculate the (x, y) coordinates needed to draw the gear, and add them to the polygon object
	for tooth in range(teethCount):
		
		# Calculate the current iteration's tooth angle, and offset it by the given rotation anle
		startingAngle = rotationAngle + tooth * toothAngle
		
		
		# Create a list of 6 polar coordinates using the inner and outer radii
		# ...combined with the calculated angle of each tooth
		# ...slightly offset to create little flats at the top of each tooth and at the bottom between the teeth
		polarCoordinates = [(innerRadius, startingAngle),										
			(innerRadius, startingAngle + toothAngle * innerHobAngleOffset),
			
			(outerRadius, startingAngle + toothAngle * outerHobAngleOffset),			
			(outerRadius, startingAngle + toothAngle * (1 - outerHobAngleOffset)),
			
			(innerRadius, startingAngle + toothAngle * (1 - innerHobAngleOffset)),
			(innerRadius, startingAngle + toothAngle)]
		
		# Use the polar to cartesian equations to convert the polar coordinates
		# ...to the required (x, y) coordinates of the Polygon
		for radius, angle in polarCoordinates:
			x = int(centerX + cos(angle) * radius)
			y = int(centerY + sin(angle) * radius)
			gear.addPoint(x, y)
	
	# Set the graphics color for the body of the gear and paint the polygon
	graphics.color = gearColor
	graphics.fillPolygon(gear)
	
	# Draw an outline around the plygon
	graphics.color = system.gui.color(48, 48, 48) # Black was too much on the center hole, so I've slightly greyed it
	graphics.drawPolygon(gear)
	
	# Add a center hole to the polygon (x, y, width, height)
	centerHoleDiameter = 14 # This should be an even number since it's used to offset the x and y coordinates to center this shape on the gear
	centerHoleX = centerX - (centerHoleDiameter / 2)	# A diameters is easier for me to visialize, but it has to be divided by two
	centerHoleY = centerY - (centerHoleDiameter / 2)	# ...and converted to a radius to position the hole correctly with the fillOval method
	graphics.fillOval(centerHoleX, centerHoleY, centerHoleDiameter, centerHoleDiameter)

To generate the gears depicted in the video above, also add this function the animation library:

def gratuitousExample(graphics, rotationDegree, setupValueX = 50, setupValueY = 50, setupValueDiameter = 100):
	'''
	Arguments:
		graphics: The java2D graphics option from the repaint event that is being used to generate this animation
		
		rotaionDegree: An integer from 0 to 359 that represents which gear angle is being painted during this frame of the animation
		
		[setupValueX, ...Y, ...Diameter]: Optional integers that can be used to position a new gear.
			...Defaults to a gear with a 100 pixel diameter positioned in the top left corner of the canvas
		
	Returns:
		None
	
	Overview:
		Defines the parameters needed for the paintGear library script to paint and aninmate various gears
	'''
	# All gears should have the same type of tooth if they are to mesh together perfectly
	# I've gone around in circles on this trying to decide what will be the most intuiive for developers wanting to use this function,
	# ...and presently, I feel like height and width is easier for us to visualize than the actual machinist terms and methods for measuring gear teeth
	toothHeight = 12
	toothWidth = 20
	
	# *********************************************************
	# Repeat this sequence as needed for any subsequent gears
	# Parameters for the driving gear
	gearOneCenterX = 100										# Center x coordinate
	gearOneCenterY = 100										# Center y coordinate
	gearOneDiameter = 185										# How big accross the gear should be
	gearOneCircumference = PI * gearOneDiameter					# Calculate the circumference of the gear
	gearOneTeethCount = int(gearOneCircumference / toothWidth)	# ...and use it to determine the tooth count
	gearOneRotation = rotationDegree * (PI / 180.0)				# Convert the degree integer to radians [rotationDegree can also be referred to as the frame of the animation]
	gearOneColor = system.gui.color('darkgrey')					# This is the fill color for the body of the gear
	# See the last gear for an example of how to use the given setup parameters
	# *********************************************************
	
	# Parameters for the gearTwo gear
	gearTwoCenterX = 201
	gearTwoCenterY = 54
	gearTwoDiameter = 55
	gearTwoCircumference = PI * gearTwoDiameter
	gearTwoTeethCount = int(gearTwoCircumference / toothWidth)
	gearTwoRotation = -gearOneRotation * (float(gearOneTeethCount) / gearTwoTeethCount)	# Invert the angle since this gear moves opposite the gearOne gear, and ratio the angle by the relative number of teeth
	gearTwoColor = system.gui.color('grey')
		
	# Parameters for the gearThree gear
	gearThreeCenterX = 282
	gearThreeCenterY = 90
	gearThreeDiameter = 140
	gearThreeCircumference = PI * gearThreeDiameter
	gearThreeTeethCount = int(gearThreeCircumference / toothWidth)
	gearThreeRotation = gearOneRotation * (float(gearOneTeethCount) / gearThreeTeethCount) # Take the angle of the gearOne [driving] gear, and ratio this gear's angle by its relative number of teeth
	gearThreeColor = system.gui.color('darkgrey')
	
	# Parameters for the gearFour gear
	gearFourCenterX = 449
	gearFourCenterY = 216
	gearFourDiameter = 300
	gearFourCircumference = PI * gearFourDiameter
	gearFourTeethCount = int(gearFourCircumference / toothWidth)
	gearFourRotation = -gearOneRotation * (float(gearOneTeethCount) / gearFourTeethCount) # Take the angle of the gearOne [driving] gear, and ratio this gear's angle by its relative number of teeth
	gearFourColor = system.gui.color('grey')

	# Parameters for the gearFive gear
	gearFiveCenterX = 263
	gearFiveCenterY = 254
	gearFiveDiameter = 100
	gearFiveCircumference = PI * gearFiveDiameter
	gearFiveTeethCount = int(gearFiveCircumference / toothWidth)
	gearFiveRotation = gearOneRotation * (float(gearOneTeethCount) / gearFiveTeethCount) # Take the angle of the gearOne [driving] gear, and ratio this gear's angle by its relative number of teeth
	gearFiveColor = system.gui.color('darkgrey')
	
	# Parameters for the gearSix gear
	gearSixCenterX = 130
	gearSixCenterY = 273
	gearSixDiameter = 188
	gearSixCircumference = PI * gearSixDiameter
	gearSixTeethCount = int(gearSixCircumference / toothWidth)
	gearSixRotation = -gearOneRotation * (float(gearOneTeethCount) / gearSixTeethCount) # Take the angle of the gearOne [driving] gear, and ratio this gear's angle by its relative number of teeth
	gearSixColor = system.gui.color('grey')

	# Parameters for the gearSeven gear
	gearSevenCenterX = 509
	gearSevenCenterY = 46
	gearSevenDiameter = 80
	gearSevenCircumference = PI * gearSevenDiameter
	gearSevenTeethCount = int(gearSevenCircumference / toothWidth)
	gearSevenRotation = gearOneRotation * (float(gearOneTeethCount) / gearSevenTeethCount) # Take the angle of the gearOne [driving] gear, and ratio this gear's angle by its relative number of teeth
	gearSevenColor = system.gui.color('darkgrey')

	# Parameters for the gearEight gear
	gearEightCenterX = 454
	gearEightCenterY = 37
	gearEightDiameter = 50
	gearEightCircumference = PI * gearEightDiameter
	gearEightTeethCount = int(gearEightCircumference / toothWidth)
	gearEightRotation = -gearOneRotation * (float(gearOneTeethCount) / gearEightTeethCount) # Take the angle of the gearOne [driving] gear, and ratio this gear's angle by its relative number of teeth
	gearEightColor = system.gui.color('grey')

	# Parameters for the gearNine gear
	gearNineCenterX = 401
	gearNineCenterY = 37
	gearNineDiameter = 70
	gearNineCircumference = PI * gearNineDiameter
	gearNineTeethCount = int(gearNineCircumference / toothWidth)
	gearNineRotation = gearOneRotation * (float(gearOneTeethCount) / gearNineTeethCount) # Take the angle of the gearOne [driving] gear, and ratio this gear's angle by its relative number of teeth
	gearNineColor = system.gui.color('darkgrey')

	# *********************************************************
	# New Gear setup example:
	# I found that generating the optional arguments with spinner components worked quite well
	gearTenCenterX = setupValueX				# Use the given setup parameters to position the gear at center point X
	gearTenCenterY = setupValueY				# Use the given setup parameters to position the gear at center point Y
	gearTenDiameter = setupValueDiameter		# Use the given setup parameters to adjust the diameter in real time as needed to fit the gear
	gearTenCircumference = PI * gearTenDiameter
	gearTenTeethCount = int(gearTenCircumference / toothWidth)
	gearTenRotation = -gearOneRotation * (float(gearOneTeethCount) / gearTenTeethCount) # Take the angle of the gearOne [driving] gear, and ratio this gear's angle by its relative number of teeth
	gearTenColor = system.gui.color('orange')	# Using an odd color to depict the setup gear helps as well if there are many other gears in the animation
	# *********************************************************

	# Paint the gears
	paintGear(graphics, gearOneCenterX, gearOneCenterY, gearOneDiameter, toothHeight, gearOneTeethCount, gearOneRotation, gearOneColor)
	paintGear(graphics, gearTwoCenterX, gearTwoCenterY, gearTwoDiameter, toothHeight, gearTwoTeethCount, gearTwoRotation, gearTwoColor)
	paintGear(graphics, gearThreeCenterX, gearThreeCenterY, gearThreeDiameter, toothHeight, gearThreeTeethCount, gearThreeRotation, gearThreeColor)
	paintGear(graphics, gearFourCenterX, gearFourCenterY, gearFourDiameter, toothHeight, gearFourTeethCount, gearFourRotation, gearFourColor)
	paintGear(graphics, gearFiveCenterX, gearFiveCenterY, gearFiveDiameter, toothHeight, gearFiveTeethCount, gearFiveRotation, gearFiveColor)
	paintGear(graphics, gearSixCenterX, gearSixCenterY, gearSixDiameter, toothHeight, gearSixTeethCount, gearSixRotation, gearSixColor)
	paintGear(graphics, gearSevenCenterX, gearSevenCenterY, gearSevenDiameter, toothHeight, gearSevenTeethCount, gearSevenRotation, gearSevenColor)
	paintGear(graphics, gearEightCenterX, gearEightCenterY, gearEightDiameter, toothHeight, gearEightTeethCount, gearEightRotation, gearEightColor)
	paintGear(graphics, gearNineCenterX, gearNineCenterY, gearNineDiameter, toothHeight, gearNineTeethCount, gearNineRotation, gearNineColor)
	paintGear(graphics, gearTenCenterX, gearTenCenterY, gearTenDiameter, toothHeight, gearTenTeethCount, gearTenRotation, gearTenColor)

For this example, add the following components to a Vision window:
• A paintable canvas that is at least 620 x 400 pixels.
...Note: If you need your gear animations to scale to any size, see this post.
• A timer component to drive the animation
• Three spinner components for gear setup
• Four labels to make the spinner purposes clear

Add the following custom properties to the paintable canvas:
• frame [integer]
• setupValueDiameter [integer]
• setupValueX [integer]
• setupValueY [integer]

Bind the custom properties to the following component properties:
• frame -- Bound to the timer component's value property
• setupValueX -- Bound to the first spinner component's intValue property
• setupValueY -- Bound to the second spinner component's intValue property
• setupValueDiameter -- Bound to the third spinner component's intValue property

Setup the timer component in the following way, so it counts up almost endlessly and changes its value property approximately every 10 milliseconds

Add the following script to the repaint event handler of the paintable canvas:

# The animation is drawn using 360 frames [one for each degree],
# ...so the animation script will need to know which frame to paint
graphics = event.graphics
frame = event.source.frame % 360
animation.gratuitousExample(graphics, frame, event.source.setupValueX, event.source.setupValueY, event.source.setupValueDiameter)

---

Set the spinner min, max, and initial values:
• All spinners should have an arbitrarily large value to ensure they never interfere with your ability to adjust the position and size of the gears. I set mine to 100 million
• X and Y setup spinners can have a minimum value of 0, but I use 25 to ensure the gears are always beyond the top and left sides of the canvas
• The diameter spinner's minimum value MUST be big enough to ensure at least one tooth can appear on the gear. Otherwise, a zero division error will occur in the script I've provided. I set mine to 50, so the gear will never start out overlapping the left and top edges of the canvas
• Set the integer values of each spinner to some arbitrary number between the min and max values, or a red overlay will appear over the spinner at run time. For the example setup gear, I've found the following values position the gear well in this animation: X = 348, Y = 28, and Diameter = 57

Start preview mode, and toggle the animation on or off as needed using the timer component's running property

New Gear Setup Notes:
• Once a setup gear is positioned correctly, replace the variable names in the library script with the integer values from the spinners.
• To add another gear, simply create a new parameter set in the library script, and use the optional setup position variables to repeat the setup process
• Obviously, the spinners and their labels can be deleted once the setup process for the animation has been completed.
• See the example function's code comments for additional notes about gear setup

Here is an export of the example project in case anybody wants to play around with it:
gearExample.zip (20.1 KB)

I imagine a lot can be done to improve the level of detail in the gears, such as adding rings to the outside or hub rings around the center hole to give the gears a more 3D look. It would also be nice to add some trapezoidal shapes to give the gears a more spoked appearance,

...so if anybody adds something that improves this example, please reply to this thread, and show us how it's done.

[justinedwards.jle]

Flag Animations

The approach in this post will work with just about any flag you can come up with, but for reference, the flag I'm animating was originally created and posted here:

Holiday Paintable Canvas Challenge: Old Glory

Prerequisite Knowledge:
• A timer will need to be set up with its value property bound to a custom frame property on the paintable canvas
• Imports are going to be required to make this work, so for efficiency, this technique should be set up in the script library and called from the repaint event
Reference this post for a detailed tutorial on how implement these two prerequisites:
Paintable Canvas Hacks: Gear Animations

That said, here is a quick tutorial for creating wavy flag animations in Ignition
Generating sinusoidal waves:

Amplitude and wavelength [aka period] are the only two things that are needed to draw a consistent sine wave in Ignition

amplitude = 14
waveLength = 240

As the line is being formed, simply calculate the fraction of the wavelength that has been traversed by the given x coordinate:

cyclePosition = x / float(waveLength)

In the case of our flag, we will want the waves to continuously move horizontally, so it looks like the wave is being pushed by the wind. This is where our timer value comes in. It will be used to generate a phase variable that will shift the x coordinates horizontally:

frame = event.source.frame
phase = -(frame % waveLength)					# The illusion of the flag being pushed by the wind is created by adjusting the starting point of the sinusoid
												# ...make the phase shift negative to simulate left to right movement
cyclePosition = (x + phase) / float(waveLength)	# Convert the phased x position into its fractional position within the wave cycle

To get the y coordinate that corresponds to a given x coordinate in a sine wave, convert the cycle position to radians, take the sin of the resultant value, and multiply it by the amplitude:

y = amplitude * sin(cyclePosition * (PI * 2)) # Evaluate the sine wave at the current cycle position and scale it using the amplitude

With a timer value driving the wave, the above code will produce a nice left to right flowing wave of equal amplitude, but that won't work for a flag because one end will be anchored to a pole, and the other end will be free to the wind. Consequently, the result is a dynamic amplitude that is hardly noticeable at one end while appearing quite significant at the other. Therefore, the amplitude will need to be split into a minimum amplitude variable for the anchored end and a maximum additional amplitude parameter that can be scaled according to a given x coordinate's distance from the anchored end.

Putting it together to calculate the x and y coordinates from one end of a wavy flag to the other, it looks like this:

# Animated wave parameters
# ...Note: The side of the flag that is anchored to the pole naturally won't be able to move up and down as much as the side of the flag that's out in the wind,
# ...so the amplitude parameter is split. The amplitude will be ratiod across the flag to from the pole to the free end
# ...with the minWaveAmp at the pole and incrementally added amplitude until all the maxAdditionalAmplitude is added in at the last pixel on the opposite end of the flag
frame = event.source.frame					# This is a custom property that's bound to a timer value parameter and is used to drive the flag waving amimation
minWaveAmp = 0.5							# The amount of vertical flag movemnt allowed at the flag pole
maxAdditionalAmplitude = 14					# The amount of additional vertical flag movement that is allowed at the free side of the flag
waveLength = 240							# The math nerd in me wants to call this the period
phase = -(frame % waveLength)				# The illusion of the flag being pushed by the wind is created by adjusting the starting point of the sinusoid
											# ...make the phase shift negative to simulate left to right movement
for x in xrange(flagWidth + 1):												# Iterate across every pixel along the width of the flag including the final edge
	additionalAmplitude = maxAdditionalAmplitude * (float(x) / flagWidth)	# Calculate what percentage of the maxAdditionalAmplitude to add based on the position moving from the attached end of the flag to the free end of the flag
	totalAmplitude = minWaveAmp + additionalAmplitude						# Combine the minimum amplitude with the position based additional amplitude
	cyclePosition = (x + phase) / float(waveLength)							# Convert the phased x position into its fractional position within the wave cycle
	y = totalAmplitude * sin(cyclePosition * (PI * 2))						# Evaluate the sine wave at the current cycle position and scale it using the calculated amplitude

Here is the full script that was used in the repaint event that generated the depicted flag animation:
(Click the right pointing arrow to show the code)

Source Code

from java.awt import BasicStroke
from java.awt.geom import GeneralPath
from java.lang.Math import PI, sin
graphics = event.graphics

# Flag pole Parameters
baseRGB = 165 			# The darkest shaded portion of the pole
flagPoleWidth = 20		# 
flagBallDiameter = 28	# 
flagGap = 2				# This is the space between the flag pole and the flag (In pixels)
flagPoleHeight = 500 	# An arbitrarily large number that should more than overlap the bottom of the canvas

# Flag Parameters (In pixels)
stripeHeight = 14							#
flagWidth = 345								#
totalStripes = 13 							# The American flag has 13 stripe representing the original 13 colonies
flagHeight = totalStripes * stripeHeight	#
cantonWidth = 138 							# The technical name for the blue rectangle on the American flag is the canton, but it's also know colloqually as the union
cantonHeight = stripeHeight * 7				# When this is sized correctly, it covers the first seven stripes

# Flag Colors
oldGloryRed = system.gui.color(179, 25, 66)	#
oldGloryWhite = system.gui.color('white')	#
oldGloryBlue = system.gui.color(10, 49, 97)	#
borderColor = system.gui.color(0, 0 ,0, 40)	# Tranparancy creates a nice shadowy effect and minimizes aliasing

# Animated wave parameters
# ...Note: The side of the flag that is anchored to the pole naturally won't be able to move up and down as much as the side of the flag that's out in the wind,
# ...so the amplitude parameter is split. The amplitude will be ratiod across the flag to from the pole to the free end
# ...with the minWaveAmp at the pole and incrementally added amplitude until all the maxAdditionalAmplitude is added in at the last pixel on the opposite end of the flag
frame = event.source.frame					# This is a custom property that's bound to a timer value parameter and is used to drive the flag waving amimation
minWaveAmp = 0.5							# The amount of vertical flag movemnt allowed at the flag pole
maxAdditionalAmplitude = 14					# The amount of additional vertical flag movement that is allowed at the free side of the flag
waveLength = 240							# The math nerd in me wants to call this the period
phaseRate = 6								# This could be called windSpeed, and this could also be controlled by simply making the timer count in larger increments than 1
phase = -(frame % waveLength) * phaseRate	# The illusion of the flag being pushed by the wind is created by adjusting the starting point of the sinusoid
											# ...make the phase shift negative to simulate left to right movement

# For simplicity, everything is drawn from (0, 0) and the final positions of objects are adjusted via translation
graphics.translate(flagPoleWidth - flagGap, flagBallDiameter)

# Paint the shaft of the pole
for index in xrange(flagPoleWidth):
	rgb = baseRGB + (2 * index)								# Adjust the color from dark to bright with each iteration
	graphics.color = system.gui.color(rgb, rgb, rgb)		# ...while simultaneously reducing the stroke width
	graphics.stroke = BasicStroke(flagPoleWidth - index,	# ...to create a linear gradient effect
		BasicStroke.CAP_ROUND, BasicStroke.JOIN_MITER)		# The round cap produces a smoother taper
	x1 = x2 = 0												# X doesn't change on a perfectly vertical line
	y1 = flagPoleWidth - index								# This is offset ip to make a tapered neck below the ball
	y2 = flagPoleHeight										# The number assigned to this variable needs to exceed the lower edge of the canvas for the bottom of the pole to look right
	graphics.drawLine(x1, y1, x2, y2)						# Shift the x position up each iteration to create a point for the ball to rest on

# Paint the ball on the top of pole
for index in xrange(flagBallDiameter):
	rgb = baseRGB + (2 * index)
	graphics.color = system.gui.color(rgb, rgb, rgb)					# Same as the shaft except with a shinking dot instead of a line
	graphics.stroke = BasicStroke(flagBallDiameter - index,				# ...to create a spherical gradient effect that perfectly matches the pole
		BasicStroke.CAP_ROUND, BasicStroke.JOIN_MITER)					#
	graphics.drawLine(0, -(flagPoleWidth / 3), 0, -(flagPoleWidth / 3))	# The y parameters are offset up, so the ball rests on top of the shaft's upper point

# Adjust the graphics origin for flag painting
flagXOffset = (flagPoleWidth / 2) + flagGap		#
flagYOffset = flagPoleWidth						# This puts the top of the flag right below the base of the flagPole's cone
graphics.translate(flagXOffset, flagYOffset)	#

# All of the math needed to calculate the points for the outline and the canton is done while calculating the points for the stripes,
# ...so rather than having to do all the calculations again later, the relevent coordinates are simply stored in these empty lists
# ...and used directly for painting later in the script
outlinePoints = []
cantonPoints = []

# Iterate through the 13 stripes that represent the original 13 colonies and paint them
for stripeIndex in xrange(totalStripes):
	stripe = GeneralPath()
	
	# Alternate red and white
	if stripeIndex % 2:
		graphics.color = oldGloryWhite
	else:
		graphics.color = oldGloryRed

	# Whare the top of the stripe would be without wavyness
	flatStripeY = stripeHeight * stripeIndex
	
	# No need to do all the math twice, as the top points are calculated, 
	# ...offset the y coordinate by the stripe height and store it with the x coordinate here for later
	# ...when the bottom points are added to the strip generalPath shape
	bottomPoints = []
	
	# Top edge of the stripe
	for x in xrange(flagWidth + 1):												# Iterate across every pixel along the width of the flag including the final edge
		additionalAmplitude = maxAdditionalAmplitude * (float(x) / flagWidth)	# Calculate what percentage of the maxAdditionalAmplitude to add based on the position moving from the attached end of the flag to the free end of the flag
		totalAmplitude = minWaveAmp + additionalAmplitude						# Combine the minimum amplitude with the position based additional amplitude
		cyclePosition = (x + phase) / float(waveLength)							# Convert the phased x position into its fractional position within the wave cycle
		waveOffset = totalAmplitude * sin(cyclePosition * (PI * 2))				# Evaluate the sine wave at the current cycle position and scale it using the calculated amplitude
		wavyStripeY = flatStripeY + waveOffset									# Apply the current x position's wave offset to the stripe's base Y coordinate
		bottomPoints.insert(0, (x, wavyStripeY + stripeHeight))					# Add the stripe height to calculated y coodinate for the equivalent x coordinate set on the bottom of the stripe, and insert the resultant set into the bottomPoints list

		# Add all of the top stripe points to the outlinePoints list,
		if stripeIndex == 0:
			outlinePoints.append((x, wavyStripeY))

			# ...and if the x coordinate is one of the ones shared by the canton,
			# ...add that coordinate set to the cantonPoints list
			if x < cantonWidth:
				cantonPoints.append((x, wavyStripeY))

		# Set the general path to its starting point
		if x == 0: # Set the general path to its starting point
			stripe.moveTo(x, wavyStripeY)
			continue
		stripe.lineTo(x, wavyStripeY) # Adding each pixel along the top of stripe from left to right
		
	# Bottom edge of the stripe	
	for x, y, in bottomPoints:
		stripe.lineTo(x, y)	 # Adding each pixel along the bottom of the stripe from right to left

		# Add all the bottom pixels of the bottom stripe to the outlinePoints list
		if stripeIndex == totalStripes - 1:
			outlinePoints.append((x, y))
		
		# The bottom of the canton shares its bottom edge with the bottom of the 7th stripe [6th zero indexed iteration],
		# ...so add any coordinate set from the bottom of that strip to the cantonPoints list
		# ...if the x coordinate is left of the canton's right edge
		if stripeIndex == 6 and x < cantonWidth:
			cantonPoints.append((x, y))

	# Complete and paint the stripe
	stripe.closePath()	# Creates the left edge of the stripe by connecting the bottom corner to the top
	graphics.fill(stripe)

# Create a blue rectangle for the 50 stars
graphics.color = oldGloryBlue
canton = GeneralPath()
startingX, startingY = cantonPoints[0]	# Unpack the fist set of coordinates in the cantonPoints list
canton.moveTo(startingX, startingY)		# ...and add a moveTo iteration to the canton path as a starting point for its iterator
for x, y in cantonPoints:				#
	canton.lineTo(x, y)					# Unpack each point in the cantonPoints list and add a lineTo iteration to the canton shape
canton.closePath() 						# Close the gap from the bottom left corner to the top left corner
graphics.fill(canton)					# ...and fill the completed shape to paint the canton

# Define all the points needed to make a single star in the top left corner of the canvas
points = [
	(4, 0),	# Top outer point
	(5, 3),	# Upper right inner point
	(8, 3),	# Upper right outer point
	(5, 5),	# Lower right inner point
	(7, 8),	# Bottom right outer point
	(4, 7),	# Bottom inner point
	(1, 8),	# Bottom left outer point
	(2, 5),	# Lower left inner point
	(0, 3),	# Upper left outer point
	(3, 3)]	# Upper left inner point

# Separate the x and y coordinates for the top left star into seperate lists for the fillPolygon method,
# ...and inset the star by an arbitrary margin (This was originally done directly in the points set,
edgeMargin = 4

# Switch to white for the stars
graphics.color = oldGloryWhite

# These arbitrary spacing parameters were precisely calculated using trial and error
horizontalSpacing = 24	# The space betwenn the left edge of a star and the left edge of its neighboring star to the right
verticalSpacing = 10	# The space between the top edge of a row, and the top edge of the row below it

# The american flag currently has 5 rows of 6 stars and 4 rows of 5 stars for a total 9 rows
for row in xrange(9):
	starCount = 5 if row % 2 else 6		# Alternate between rows of 6 and 5 stars
	starInset = 12 if row % 2 else 0	# Inset the rows of 5, so the stars appear evenly staggared	

	# Iterate through each star in the given row,
	# ...and calculate a list of X and Y coordinates for each star to pass into the fillPolygon method
	for star in xrange(starCount):
		starXOffset = starInset + (star * horizontalSpacing)
	
		# Use the star's horizontal position to calculate how far the flag wave has moved vertically
		waveOffset = (minWaveAmp + maxAdditionalAmplitude * (float(starXOffset) / flagWidth)) * sin(((starXOffset + phase) / float(waveLength)) * PI * 2)
	
		# Create a couple of empty lists to store the calculated wave offset star coordinates in
		starXCoordinates = []
		starYCoordinates = []
		
		# Unpack each coordinate set within the current star and calculate the necessary positional offsets
		for xCoordinate, yCoordinate in points:
			
			# Shift the star according to whether or not it's in a row with 5 or 6 stars to create a proper staggering effect
			modifiedXcoordinate = xCoordinate + edgeMargin + starXOffset
			
			# See the first few lines of the stripe painting loop for a detailed breakdown of the waveOffset calculation
			waveOffset = (minWaveAmp + maxAdditionalAmplitude * (float(modifiedXcoordinate) / flagWidth)) * sin(((starXOffset + phase) / float(waveLength)) * PI * 2)
			
			# Factor in all the calculated Y parameters to vertically position the star
			modifiedYCoordinate = int(yCoordinate + edgeMargin + (row * verticalSpacing) + waveOffset)
		
			# Add the caclulated coordinates to their respective lists
			starXCoordinates.append(modifiedXcoordinate)
			starYCoordinates.append(modifiedYCoordinate)
		
		# Paint the star using the coordinate lists
		graphics.fillPolygon(starXCoordinates, starYCoordinates, len(points))

# Paint a small border around the flag, so it will look complete against white backgrounds.
graphics.color = borderColor # Without additional anti aliasing logic, this shape looks badly aliased if it's fully opaque, so the border color should have plenty of transparency

# Create a general path shape for the outline of the flag
outline = GeneralPath()

# Unpack the first coordinate set for use as a starting point for the outline shape
startingX, startingY = outlinePoints[0]
outline.moveTo(startingX, startingY)

# Unpack all coordinate sets in the outlinePoints list,
# and create a shape that can outline the flag
for x, y in outlinePoints:
	outline.lineTo(x, y)
outline.closePath() # Connect the bottom left corner of the flag to the top left corner to complete the outline shape

# Draw the semitransparent outline to complete the flag
graphics.stroke = BasicStroke(2)
graphics.draw(outline)

...or if preferred, here is an export of the window with the above working example:
FlagExample.zip (14.9 KB)

[paul-griffith]

Dropping this here just to see if I can successfully nerd-snipe Justin:

Voxel Space

[pturmel]

Shield Up! Too close to the target zone!

( Someone is sniping at close range with a shotgun. )

[michael.flagler]

I loved that game back in the day!