Holiday Paintable Canvas Challenge

Ignition
1

Create your best holiday image in the paintable canvas and share it here.

Example:
I was able to create a Santa Clause in the paintable canvas by simply tracing an image using the techniques outlined in this tutorial:
Paintable Canvas Hacks Post #1

Result:

image
image229×290 16.1 KB

Repaint Event Code:

from java.awt import BasicStroke
from java.awt.geom import Arc2D, GeneralPath

graphics = event.graphics
graphics.stroke = BasicStroke(2)
graphics.color = system.gui.color('red')

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

###################
# Paint Red HAT
###################
hat = GeneralPath()

# Top of hat
hat.append(Arc2D.Double(20, 5, 185, 180, 360, 178, Arc2D.OPEN), True)

# Top of hat brim
hat.append(Arc2D.Double(-60, 75, 330, 230, 121, -59, Arc2D.OPEN), True)

# Right of hat brim
hat.append(Arc2D.Double(117, 69, 70, 76, 30, -60, Arc2D.OPEN), True)

# Beard Border
hat.append(Arc2D.Double(121, 105, 64, 62, 30, -40, Arc2D.OPEN), True)

# Top of ball on hat
hat.append(Arc2D.Double(171, 138, 53, 52, 114, -34, Arc2D.OPEN), True)

# Hat tail 
hat.append(Arc2D.Double(-39, -20, 245, 257, 348, 18, Arc2D.OPEN), True)

hat.closePath()
graphics.fill(hat)

###################
# Paint White Hat Brim
###################
graphics.color = system.gui.color(245, 245, 235)
hatBrim = GeneralPath()

# Top of hat brim
hatBrim.append(Arc2D.Double(-60, 75, 330, 230, 62, 59, Arc2D.OPEN), True)

# Left of hat brim
hatBrim.append(Arc2D.Double(12, 80, 70, 61, 144, 65, Arc2D.OPEN), True)

# Bottom of hat brim
hatBrim.append(Arc2D.Double(-60, 110, 320, 230, 121, -61, Arc2D.OPEN), True)

# Right of hat brim
hatBrim.append(Arc2D.Double(117, 69, 70, 76, 330, 60, Arc2D.OPEN), True)

hatBrim.closePath()
graphics.fill(hatBrim)

###################
# Paint White Hat Ball
###################

graphics.color = system.gui.color(245, 245, 235)
graphics.fillOval(171, 138, 53, 52)

###################
# Paint White Beard
###################
beard = GeneralPath()
graphics.color = system.gui.color(235, 240, 245)

# Beard Shapes starting at the left and moving clockwise
beard.append(Arc2D.Double(10, 115, 64, 62, 145, 50, Arc2D.OPEN), True)
beard.append(Arc2D.Double(4, 146, 58, 53, 142, 102, Arc2D.OPEN), True)
beard.append(Arc2D.Double(16, 182, 58, 53, 152, 118, Arc2D.OPEN), True)
beard.append(Arc2D.Double(46, 208, 50, 53, 183, 108, Arc2D.OPEN), True)
beard.append(Arc2D.Double(75, 216, 50, 54, 214, 108, Arc2D.OPEN), True) # Bottom of beard
beard.append(Arc2D.Double(108, 208, 50, 53, 240, 121, Arc2D.OPEN), True)
beard.append(Arc2D.Double(128, 182, 58, 53, 273, 118, Arc2D.OPEN), True)
beard.append(Arc2D.Double(134, 146, 58, 53, 309, 99, Arc2D.OPEN), True)
beard.append(Arc2D.Double(121, 105, 64, 62, 330, 50, Arc2D.OPEN), True)

# Bottom of hat brim
beard.append(Arc2D.Double(-60, 110, 320, 230, 60, 61, Arc2D.OPEN), True)

beard.closePath()
graphics.fill(beard)

###################
# Paint Face
###################
face = GeneralPath()
graphics.color = system.gui.color(255, 224, 189)

# Right cheek
face.append(Arc2D.Double(33, 75, 130, 150, 330, 55, Arc2D.OPEN), True)

# Bottom of hat brim
face.append(Arc2D.Double(-60, 110, 320, 230, 65, 50, Arc2D.OPEN), True)

# left cheek
face.append(Arc2D.Double(33, 75, 130, 150, 155, 55, Arc2D.OPEN), True)


face.closePath()
graphics.fill(face)

###################
# Paint Mouth
###################

graphics.color = system.gui.color('pink')
graphics.fillOval(79, 150, 38, 41)

###################
# Paint Eyebrows
###################
graphics.color = system.gui.color(225, 230, 235)

rightEyeBrow = GeneralPath()
rightEyeBrow.moveTo(137, 113)
rightEyeBrow.lineTo(138, 122)
rightEyeBrow.lineTo(114, 111)
rightEyeBrow.closePath()
graphics.fill(rightEyeBrow)

leftEyeBrow = GeneralPath()
leftEyeBrow.moveTo(57, 115)
leftEyeBrow.lineTo(56, 122)
leftEyeBrow.lineTo(80, 112)
leftEyeBrow.closePath()
graphics.fill(leftEyeBrow)

###################
# Paint Mustash
###################
LeftStash = GeneralPath()
LeftStash.append(Arc2D.Double(61, 145, 75, 64, 114, 50, Arc2D.OPEN), True)
LeftStash.append(Arc2D.Double(28, 141, 36, 41, 349, -164, Arc2D.OPEN), True)
LeftStash.append(Arc2D.Double(28, 128, 70, 70, 185, 174, Arc2D.OPEN), True)
LeftStash.closePath()
graphics.fill(LeftStash)

RightStash = GeneralPath()
RightStash.append(Arc2D.Double(98, 128, 70, 70, 185, 174, Arc2D.OPEN), True)
RightStash.append(Arc2D.Double(133, 141, 36, 41, 1, -166, Arc2D.OPEN), True)
RightStash.append(Arc2D.Double(61, 145, 75, 64, 16, 50, Arc2D.OPEN), True)
RightStash.closePath()
graphics.fill(RightStash)

###################
# Paint Nose
###################

graphics.color = system.gui.color(225, 150, 150)
graphics.fillOval(82, 140, 31, 22)

###################
# Draw Santa outline and facial details over filled shapes
###################
graphics.stroke = BasicStroke(2)
graphics.color = system.gui.color('black')

# Top of hat
graphics.drawArc(20, 5, 185, 180, 360, 178)

# Top of hat brim
graphics.drawArc(-60, 75, 330, 230, 62, 59)

# Bottom of hat brim
graphics.drawArc(-60, 110, 320, 230, 60, 61)

# Left of hat brim
graphics.drawArc(12, 80, 70, 61, 144, 65)

# Right of hat brim
graphics.drawArc(117, 69, 70, 76, 330, 60)

# Crease between hat tail and hat
graphics.drawArc(95, 40, 86, 106, 10, 24)
graphics.drawArc(95, 40, 86, 106, 40, 24)

# Hat tail
graphics.drawArc(-39, -19, 245, 257, 348, 18)

# Ball on end of hat tail
graphics.drawArc(171, 138, 53, 52, 245, 238)

# Beard counterclockwise
graphics.drawArc(121, 105, 64, 62, 330, 50)
graphics.drawArc(134, 146, 58, 53, 309, 99)
graphics.drawArc(128, 182, 58, 53, 273, 118)
graphics.drawArc(108, 208, 50, 53, 240, 121)
graphics.drawArc(75, 216, 50, 54, 214, 108) # Bottom of beard
graphics.drawArc(46, 208, 50, 53, 183, 108)
graphics.drawArc(16, 182, 58, 53, 152, 118)
graphics.drawArc(4, 146, 58, 53, 142, 102)
graphics.drawArc(10, 115, 64, 62, 145, 50)

# Left Cheek
graphics.drawArc(33, 75, 130, 150, 155, 45)

# Right Cheek
graphics.drawArc(33, 75, 130, 150, 340, 45)

# Nose
graphics.drawOval(82, 140, 31, 22)

# left and right  eyes
graphics.fillOval(59, 121, 24, 24)
graphics.fillOval(113, 121, 24, 24)

# left and right pupils
graphics.color = system.gui.color('white')
graphics.fillOval(68, 126, 11, 11)
graphics.fillOval(117, 126, 11, 11)

# Left Eyebrow
graphics.color = system.gui.color('black')
graphics.drawLine(57, 115, 56, 122)
graphics.drawLine(56, 122, 80, 112)

# Right Eyebrow
graphics.color = system.gui.color('black')
graphics.drawLine(137, 113, 138, 122)
graphics.drawLine(138, 122, 114, 111)

# Right stash
graphics.drawArc(61, 145, 75, 64, 16, 50)
graphics.drawArc(133, 141, 36, 41, 195, 166)
graphics.drawArc(98, 128, 70, 70, 185, 174)

# Left Stash
graphics.drawArc(61, 145, 75, 64, 114, 50)
graphics.drawArc(28, 141, 36, 41, 185, 164)
graphics.drawArc(28, 128, 70, 70, 185, 174)

# Mouth
graphics.drawArc(79, 150, 38, 41, 240, 60)
4 Likes
2

I bet it'd be fun to have a procedurally generated tree with randomly placed lights, tinsel, ornaments?

No nerd sniping, Justin! There's end of year deadlines to think of!

2 Likes
3

I've made Christmas trees before: :slight_smile: Traced Christmas Tree Example

Traced Christmas Tree

For more fun:
Add a running timer component to the window. Then, put a custom property on the canvas called value and bind it to the value property of the timer to drive animations in the canvas.

Example: (Using the Santa repaint event code above)
Modify the part of the code where the eyes and pupils are drawn, so they change with the timer value:

# left and right  eyes
graphics.fillOval(59, 121, 24, 24)
if event.source.value % 2:
	graphics.fillOval(113, 121, 24, 24)
else:
	graphics.drawLine(113, 132, 133, 132)

# left and right pupils
graphics.color = system.gui.color('white')
graphics.fillOval(68, 126, 11, 11)
if event.source.value % 2:
	graphics.fillOval(117, 126, 11, 11)

Result:
SantaWinking

5 Likes