Seeking fancy new contraptions for your decks? Seek no further, friend! Have a look at my wares, ready to copy and paste right into Decker:

The "marquee" contraption:

Configure your choice of text and size! Respects the "font" setting for contraption instances.

%%WGT0{"w":[{"name":"marquee1","type":"contraption","size":[100,100],"pos":[391,195],"def":"marquee","widgets":{"canvas1":{},"text":{}}}],"d":{"marquee":{"name":"marquee","size":[100,100],"resizable":1,"margin":[5,5,5,5],"description":"A horizontally-scrolling text marquee.","script":"on set_text x do text.value:x end\non get_text do text.value end","attributes":{"name":["text"],"label":["Text"],"type":["rich"]},"widgets":{"canvas1":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"animated":1,"script":"on view do\n me.font:card.font\n t:me.font.textsize[text.text][0]\n w:me.size[0]+t\n me.clear[]\n me.text[text.text (me.size/1,2)-(w%sys.ms/10),0 \"center_left\"]\nend","scale":1},"text":{"type":"field","size":[27,25],"pos":[1,-57],"locked":1,"show":"none","value":"Your Text Here!"}}}}}

The "flag" contraption:

Add your favorite horizontally-striped flags to your deck, big or small, square or rectangular. The color list may use any of the built-in named colors ( white, black, yellow, orange, red, magenta, purple, blue, cyan, green, darkgreen, brown, tan, lightgray, mediumgray, darkgray ) or pattern indices (0-47).

%%WGT0{"w":[{"name":"flag1","type":"contraption","size":[100,100],"pos":[206,121],"def":"flag","widgets":{"canv":{},"val":{}}}],"d":{"flag":{"name":"flag","size":[100,100],"resizable":1,"margin":[9,9,9,9],"description":"a resizable flag made of multicolored horizontal strips.","script":"on get_value do val.text end\non set_value x do val.text:x view[] end\non view do\n c:each c in \",\" split val.text\n  (0+c) unless colors[c]\n end\n canv.clear[]\n s:canv.size[1]/count c\n each v i in c\n  canv.pattern:v\n  canv.rect[0,s*i 1+canv.size[0],s] \n end\nend","attributes":{"name":["value"],"label":["Colors\n(Comma\nSeparated)"],"type":["code"]},"widgets":{"canv":{"type":"canvas","size":[100,100],"pos":[0,0],"pattern":37,"scale":1},"val":{"type":"field","size":[90,20],"pos":[1,-31],"locked":1,"border":0,"style":"plain","align":"center","value":"red,orange,yellow,green,blue,purple"}}}}}

The "patternPicker" contraption:

A grid of swatches- click one to choose a pattern and fire a change[] event! Configurable to include or exclude colors. If you're looking for a little scripting exercise, try using a patternPicker to make a fancier editor for the flag contraption!

%%WGT0{"w":[{"name":"patternPicker1","type":"contraption","size":[100,100],"pos":[48,107],"def":"patternPicker","widgets":{"c":{},"v":{},"cc":{}}}],"d":{"patternPicker":{"name":"patternPicker","size":[100,100],"resizable":1,"margin":[10,10,10,10],"description":"a palette of patterns and (optionally) colors.","script":"on get_value do v.value end\non set_value x do v.value:x view[] end\non get_color do cc.value end\non set_color x do cc.value:x view[] end\n\nb:5\nr:4+2*cc.value\ns:floor(c.size-2*b)/8,r\n\non boxes do\n flip b+s*flip 8 cross r\nend\n\non view do\n o:-50\n c.clear[]\n each p i in boxes[]\n  c.pattern:i\n  c.rect[p s]\n  c.pattern:1\n  c.box[p s+1]\n  if i=v.value o:p end\n end\n c.pattern:0\n c.box[o-1 s+3]\n c.pattern:1\n c.box[o-2 s+5]\nend\n\non inside p r do\n min(p>r)&(r+s>p)\nend\non click pos do\n each p i in boxes[]\n  if inside[pos p]\n   set_value[i]\n   card.event[\"change\" i]\n  end\n end\nend\n","template":"on change val do\n \nend","attributes":{"name":["value","color"],"label":["Value","Color"],"type":["number","bool"]},"widgets":{"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"border":0,"scale":1},"v":{"type":"slider","size":[60,25],"pos":[2,-41],"locked":1,"show":"none","interval":[0,47]},"cc":{"type":"button","size":[14,20],"pos":[73,-40],"locked":1,"show":"none","style":"check","value":1}}}}}

Have some contraptions of your own to share? There's plenty of room in the Bazaar!

Now Serving,

The EggTimer Contraption

A countdown timer for a configurable number of seconds, firing a "finish[]" event and inverting in color when it completes. Clicking a second time resets the countdown.

%%WGT0{"w":[{"name":"eggtimer1","type":"contraption","size":[60,20],"pos":[226,161],"def":"eggtimer","widgets":{"b":{},"s":{},"a":{}}}],"d":{"eggtimer":{"name":"eggtimer","size":[60,20],"resizable":1,"margin":[5,5,5,5],"description":"a configurable countdown timer.","script":"on get_seconds do 0+s.text end\non set_seconds x do s.text:x end\n\non view do\n b.font:card.font\n if b.animated\n  e:(sys.ms-a.text)/1000\n  b.text:r:floor 0|get_seconds[]-e\n  if r=0\n   if b.show=\"solid\" card.event[\"finish\"] end\n   b.show:\"invert\"\n  end\n else\n  b.show:\"solid\"\n  b.text:s.text\n end\nend\n\non click do\n a.text:sys.ms\n b.animated:!b.animated\n view[]\nend","template":"on finish do\n \nend","attributes":{"name":["seconds"],"label":["Seconds"],"type":["number"]},"widgets":{"b":{"type":"button","size":[60,20],"pos":[0,0],"font":"body","text":"10"},"s":{"type":"field","size":[52,18],"pos":[4,-81],"locked":1,"style":"plain","value":"10"},"a":{"type":"field","size":[53,20],"pos":[3,-57],"locked":1,"style":"plain"}}}}}

Behold the beauty of

The eye contraption:

A configurable pupil image follows the pointer around the card, constrained by an oval inscribed within the contraption's bounding box. In most cases, you'll want this contraption to be shown in "transparent" mode, with the rest of the eyeball drawn on the card background, but there are also interesting possibilities for placing eyes behind partially-transparent canvases. (Note: make sure you upgrade to Decker v1.13 before using this contraption!)

To specify the pupil image, copy an image using the "select" tool and paste it into the "pupil image" rich-text field in the "Eye Properties" panel as shown above. You may want to use the "View -> Transparency Mask" setting to make parts of the pupil opaque white.

%%WGT0{"w":[{"name":"eye1","type":"contraption","size":[100,100],"pos":[88,220],"show":"transparent","def":"eye","widgets":{"pupil":{},"img":{}}}],"d":{"eye":{"name":"eye","size":[100,100],"resizable":1,"margin":[0,0,0,0],"description":"An animated eyeball that follows the user's pointer around the card. Best shown \"transparent\" with a blank eye underneath.","script":"on get_pupil do\n img.value\nend\n\non set_pupil x do\n img.value:x\n view[]\nend\n\non view do\n i:first extract arg where arg..type=\"image\" from img.value\n pupil.size:i.size\n pupil.clear[]\n pupil.paste[i 0,0 1]\n \n c:card.size/2\n p:pupil.size/2\n d:pointer.pos-card.offset+c\n m:(c-p)&mag d\n pupil.pos:(c-p)+m*unit heading d\nend","attributes":{"name":["pupil"],"label":["Pupil\nImage"],"type":["rich"]},"widgets":{"pupil":{"type":"canvas","size":[22,23],"pos":[110,44],"locked":1,"animated":1,"show":"transparent","border":0,"image":"%%IMG0ABYAFwAAAAH8AAf/AA//gB//wD//4H//8H//8P//+P//+P//+P//+P//+P//+P//+H//8H//8D//4B//wA//gAf/AAH8AAAAAA==","scale":1},"img":{"type":"field","size":[27,28],"pos":[-47,-56],"locked":1,"border":0,"value":{"text":["","i"],"font":["",""],"arg":["","%%IMG0ABYAFwAAAAH8AAf/AA//gB//wD//4H//8H//8P//+P//+P//+P//+P//+P//+P//+H//8H//8D//4B//wA//gAf/AAH8AAAAAA=="]}}}}}}

Hey kid, want a chicken? Chickens float. They all float when you're using

The "bob" Contraption:

Works much like the "eye" contraption: copy and paste a (probably transparent) image into the properties panel of the bob widget and your image will hover ominously above a shadow. Adjust the size of the contraption to control how vigorously the object bobs.

%%WGT0{"w":[{"name":"bob1","type":"contraption","size":[100,126],"pos":[305,100],"def":"bob","widgets":{"bg":{"size":[100,126],"image":"%%IMG2AGQAfgD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wDpAQ8ATwEbAEYBIQBBASUAPgEnAD0BJwA+ASUAQQEhAEcBGQBRAQ0A/wD/AOk="},"spr":{"size":[51,91],"pos":[24,20]},"img":{"value":{"text":["","i"],"font":["",""],"arg":["","%%IMG2ADMAWwDvIAQALyADAQIALSADAQEgAwAqIAYBAiABACggAwEBIAQBASACACYgBwEBIAIBASACAQEAJCADAQEgBQECIAIBASABACIgAwEBIAIBASAFAQEgAgEBIAEAIiAFAQEgAwECIAIBAiABAQEgAQAgIAEBASAFAQEgAgEBIAEBAiACAQEgAgAgIAQBAyABAQEgCAEBIAEAHyAEAQEgAwEBIAIBASABAQEgAQECIAIBAQAfIAEBASABAQIgAQECIAEBASABAQIgBAEBIAMAHiADAQIgAgEEIAIBBCAEAB0gAgECIAEBASACAQEgAwEBIAEBAyACACABASADAQEgAQECIAEBASABAQEgAQEBIAIBAgAgIAMBASACAQIgAgEDIAIBAyABAQEAHyABAQEgAgEFIAEBAyABAQEgAgECIAEAHwECIAEBAiABAQEgAgEEIAIBBCABAB8gAgEDIAEBCyABAQIAHgECIAEBBSABAQogAQEBAB4gAgEFIAEBASABAQogAQAeIAEBFAAeIAEBCCABAQYgAQEEAB0BCCABAQogAQECABsBASACAQMgAQEGIAEBCgAZAQEgAgECIAEBCiABAQMgAQEBIAIBAgAXAQEgAwEBIAEBAiABAQ0gAQEEIAEAFiAFAQEgAQETIAIBAQAVIAcBBSABARAgAQAVIAEBASABAQEgAwEBIAEBFgATIAEBASABAQIgAwEBIAEBASABAQggAQELABIgAwECIAIBAiABAQEgAgEDIAEBEQAQAQEgAgEBIAEBASACAQMgAQEKIAEBDAAPAQEgAQECIAEBASABAQIgAgEEIAEBASACAQIgAQEOAA8BASACAQIgAQEBIAEBASABAQMgAQEHIAEBByABAQYgAQAOIAEBAyABAQEgAQEEIAEBAiABAQogAQELIAEADQEBIAEBASADAQEgAgEHIAEBFCABAA0gAQEBIAEBASABAQIgAgEdIAEADAEDIAEBASABAQMgAQEBIAEBGSABAQEADAEDIAIBASABAQcgAQEWIAEBAgALAQEgAgEjIAEBAQALAQwgAQEaAAwBJwAMARkgAQEMAA0BJgANAQEgAQEkAAwBBCABASIACwEDIAEBIwAMIAEBJSABAAwBASACASQACwECIAIBIwAMAScADAECIAEBJAAMIAEBAiABASMADAEVIAEBEAANASYADQEFIAEBIAAOASUADgEUIAEBDwAQASMAEQEhABMgAQEQIAEBDQAVIAMBCyABAQ8AGQEYABsgAQEWAB0gAQETACABDiABAQMAISABAQIAAiABAQUABQECACEgAQECAA0BAwAgIAEBAgAOAQIAIQEDAA0gAQECACAgAQECAA0gAQECACAgAQECAA0gAQEDAB4BBQAMIAEBBAAcIAEBBgAKAQcAGyABAQMgAQEDAAggAQEIABoBAwACIAEBAgAHIAEBAyABAQYAGQEDAAIgAQEDAAYgAQEDAAEBAyABAQMAGAECAAQBAwAGIAEBAgACAQIAAiABAQIAGCABAAUBAgAHIAEBAgACAQIAAwECAB4BAgAIIAEAAiABAQIAAwECAB4BAgAMAQIAAwECAB8BAQALIAEBAgAkAQEACyABAQIAMCABAQEAMSACABA="]}}}}],"d":{"bob":{"name":"bob","size":[100,100],"resizable":1,"margin":[5,5,5,5],"description":"Animate an object bobbing in midair with a shadow.","script":"on get_object do img.value end\non set_object x do img.value:x view[] end\n\non oval pos size do\n flip pos+size*flip unit 2*pi*(range 20)/20\nend\n\non view do\n i:first extract arg where arg..type=\"image\" from get_object[]\n spr.size:i.size\n spr.clear[]\n spr.paste[i]\n \n bh:.9*bg.size[1]\n sh:spr.size[1]\n sy:.5*bh-sh\n t:(card.index)+sys.ms*0.002\n spr.pos:(.5*bg.size[0]-spr.size[0]),sy+sy*sin t\n\n bg.clear[]\n bg.poly[oval[bg.size*.5,.9 (.4+.2*1+sin t)*(.5*spr.size[0]),.05*bg.size[1]]]\nend","attributes":{"name":["object"],"label":["Object"],"type":["rich"]},"widgets":{"bg":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"show":"transparent","border":0,"scale":1},"spr":{"type":"canvas","size":[23,23],"pos":[38,63],"locked":1,"animated":1,"show":"transparent","border":0,"scale":1},"img":{"type":"field","size":[26,23],"pos":[0,-46],"locked":1,"value":{"text":["","i"],"font":["",""],"arg":["","%%IMG2ABcAFwBIAREABgEBDQ8BAQAGAQENDwEBAAYBAQ0PAQEABgEBDQ8BAQAGAQENDwEBAAYBAQ0PAQEABgEBDQ8BAQAGAQENDwEBAAYBAQ0PAQEABgEBDQ8BAQAGAQENDwEBAAYBAQ0PAQEABgEBDQ8BAQAGAQENDwEBAAYBAQ0PAQEABgERAEg="]}}}}}}

The v1.14 release introduced a generalization for read[], allowing scripts to break an animated GIF image down into frames. There are many interesting ways to take advantage of this functionality. For example,

The "gif" Contraption:

At last, an easy way to import animated GIFs into decks! This contraption prompts the user to select a GIF file, unpacks and dithers it to 1-bit, automatically resizes itself to match the size of the image, and then loops the frames at 30fps:

Note that using GIF widgets can quickly expand the size of your decks- use them sparingly, and avoid importing huge or overly-long animations! Decker's GIF loader is brand-new and may have some quirks to hammer out, so remember to save often while playing with this feature.

%%WGT0{"w":[{"name":"gif1","type":"contraption","size":[100,100],"pos":[206,121],"def":"gif","widgets":{"c":{},"f":{},"b":{}}}],"d":{"gif":{"name":"gif","size":[100,100],"resizable":1,"margin":[0,0,0,0],"description":"Import and play animated gifs. Careful: huge gifs can quickly bloat the size of your deck!","script":"on view do\n fr:extract arg where arg..type=\"image\" from f.value\n c.show:card.show\n c.clear[]\n if count fr\n  b.show:\"none\"\n  i:fr[(count fr)%sys.ms/2*60]\n  card.size:i.size\n  c.paste[i]\n else\n  b.show:\"solid\"\n end\nend","widgets":{"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"animated":1,"border":0,"scale":1},"f":{"type":"field","size":[73,35],"pos":[8,-50],"locked":1},"b":{"type":"button","size":[69,20],"pos":[16,40],"script":"on click do\n g:\"[255,0,255,246,148,108,132,51,61,147,144,86,66,111,185,134,69,0]\"\n grays:(0,1,32+range 16) dict \"%j\" parse g\n f.value:raze each i in read[\"image\" \"frames\"].frames\n  rtext.make[\"\" \"\" i.map[grays].transform[\"dither\"]]\n end\n view[]\nend","text":"Open Gif..."}}}}}

The "scrubber" Contraption:

This contraption doesn't animate automatically; instead, it allows a user to manually scrub back and forth through the frames of the animation. It also demonstrates importing color images (resampled to the Decker 16-color palette) instead of 1-bit dithering.

%%WGT0{"w":[{"name":"scrubber1","type":"contraption","size":[100,100],"pos":[49,108],"def":"scrubber","widgets":{"c":{},"f":{},"b":{},"s":{}}}],"d":{"scrubber":{"name":"scrubber","size":[100,100],"resizable":1,"margin":[0,0,0,19],"description":"Import animated gifs and allow the user to manually scrub through the frames. Careful: huge gifs can quickly bloat the size of your deck!","script":"on change do\n view[]\nend\n\non view do\n fr:extract arg where arg..type=\"image\" from f.value\n s.interval:0,(count fr)-1\n c.show:card.show\n c.clear[]\n if count fr\n  b.show:\"none\"\n  i:fr[s.value]\n  card.size:i.size+s.size*0,1\n  c.paste[i]\n else\n  b.show:\"solid\"\n end\nend","widgets":{"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"border":1,"scale":1},"f":{"type":"field","size":[73,35],"pos":[8,-50],"locked":1},"b":{"type":"button","size":[69,20],"pos":[16,40],"script":"on click do\n f.value:raze each i in read[\"image\" \"frames\"].frames\n  rtext.make[\"\" \"\" i]\n end\n view[]\nend","text":"Open Gif..."},"s":{"type":"slider","size":[100,17],"pos":[0,83],"interval":[-1,0]}}}}}

There are many variations possible on the above ideas that you might want, like looping back-and-forth, rescaling imported images to fit the bounding box of the contraption, or firing events to drive other animations. Feel free to share your own takes!

seeking affirmation? look no further than the

Validator Contraption:

Works much like a field, but will display informative (or annoying) text below if the value doesn't pass muster.

The validation rule(s) are provided in the script of the contraption instance, by filling out the "on check" function. This function is given the current text, and may return either an error message (a string) or the number 0 if the text is valid. In the above example, the validation function looks like so:

%%WGT0{"w":[{"name":"validator1","type":"contraption","size":[128,41],"pos":[173,242],"def":"validator","widgets":{"v":{},"e":{}}}],"d":{"validator":{"name":"validator","size":[128,41],"resizable":1,"margin":[89,5,6,22],"description":"a text input field with configurable validation rules.","script":"on is_valid  x do 0~me.event[\"check\" x] end\non get_valid   do is_valid[v.text] end\non get_text    do if is_valid[v.text] v.text else 0 end end\non set_text  x do if is_valid[x] v.text:x end end\n\non change x silent do\n err:card.event[\"check\" v.text]\n e.text:if 0~err\n  if !silent card.event[\"change\" x] end\n  \"\"\n else\n  err\n end\nend\n\non view do\n v.font  :card.font\n v.locked:card.locked\n v.show  :card.show\n e.show  :card.show\n change[v.text 1]\nend","template":"on change x do\n \nend\n\non check x do\n \nend","attributes":{"name":["text"],"label":["Text"],"type":["string"]},"widgets":{"v":{"type":"field","size":[120,17],"pos":[4,4]},"e":{"type":"field","size":[120,14],"pos":[4,23],"locked":1,"border":0,"style":"plain"}}}}}

Time zones are a drag. Banish them with

The .Beat Contraption:

A nice simple one. Display the current Swatch Internet Time.

%%WGT0{"w":[{"name":".beat1","type":"contraption","size":[96,28],"def":".beat","widgets":{"t":{"value":"@ 668.75"}}}],"d":{".beat":{"name":".beat","size":[96,28],"margin":[0,0,0,0],"description":"display the .beat time, also known as Swatch Internet Time.","image":"%%IMG2AGAAHAACAVwAAwECIFoBAgABAQIgAQFaIAEBAyABAVwgAQECIAEBXCABAQIgAQFcIAEBAiABAVwgAQECIAEBBiACAVQgAQECIAEBBiACAVQgAQECIAEBBiACAVQgAQECIAEBBiACARQgAgE+IAEBAiABAQYgAgEUIAIBPiABAQIgAQEGIAUBAyAEAQMgAwEBIAEBASAEAT0gAQECIAEBBiAGAQEgBgEBIAYBASAEAT0gAQECIAEBBiACAQIgAgEBIAIBAiACAQEgAgECIAIBAiACAT4gAQECIAEBBiACAQIgAgEBIAIBAiACAQEgAgECIAIBAiACAT4gAQECIAEBBiACAQIgAgEBIAYBASACAQIgAgECIAIBPiABAQIgAQEGIAIBAiACAQEgAgEFIAIBAiACAQIgAgE+IAEBAiABAQYgBgEBIAYBASAGAQIgAgE+IAEBAiABAQQgAQEBIAUBAyAEAQMgAwEBIAEBAyACAT0gAQECIAEBXCABAQIgAQFcIAEBAiABAVwgAQECIAEBXCABAQIgAQFcIAEBAyABAVogAQECAAEBAiBaAQIAAwFcAAI=","widgets":{"t":{"type":"field","size":[54,15],"pos":[39,7],"locked":1,"animated":1,"script":"on view do\n p:\"%p\" parse \"%e\" format sys.now\n b:(1/86.4)*(3600*24%p.hour+1)+(60*p.minute)+p.second\n me.text:\"@ %4.2f\" format b\nend","font":"mono","show":"invert","border":0,"style":"plain"}}}}}

No configuration options for this one. It might be a fun exercise to try creating an enhanced version that fires an event when the .beat advances!

Tired of inert masses? Why not bring them to life with

The Pulse Contraption

Turn your favorite image into a pulsating mass! Works much like the Eye Contraption; copy and paste an image of your choice into an instance of the Pulse Contraption and it will begin to writhe and stretch, scaling from its initial size to the bounds of the contraption. It is also possible to adjust the speed and whether the axes scale in sync, or offset with one another.

%%WGT0{"w":[{"name":"Pulse1","type":"contraption","size":[100,100],"pos":[49,189],"def":"Pulse","widgets":{"c":{},"o":{},"i":{},"s":{}}}],"d":{"Pulse":{"name":"Pulse","size":[100,100],"resizable":1,"margin":[5,5,5,5],"description":"A quivering, pulsating mass.","script":"on get_sprite   do i.value   end\non set_sprite x do i.value:x end\non get_axes     do o.value   end\non set_axes   x do o.value:x end\non get_speed    do s.text+0  end\non set_speed  x do s.text:x  end\n\non view do\n img:first extract arg where arg..type=\"image\" from i.value\n scl:.5*1+sin(o.value*pi*0,1)+(.02*s.text)*sys.frame\n size:img.size+scl*c.size-img.size\n pos:.5*c.size-size\n c.clear[]\n c.paste[img pos,size 1]\nend","attributes":{"name":["sprite","axes","speed"],"label":["Image","Offset Axes?","Speed"],"type":["rich","bool","number"]},"widgets":{"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"animated":1,"show":"transparent","border":0,"scale":1},"o":{"type":"button","size":[99,20],"pos":[131,-30],"locked":1,"show":"none","text":"Offset Axes?","style":"check","value":0},"i":{"type":"field","size":[100,20],"pos":[130,-1],"locked":1,"show":"none","value":{"text":["","i"],"font":["",""],"arg":["","%%IMG2ABIAEgAGAQYACgEKAAcBDAAFAQUNBAEFAAMBBA0IAQQAAgEDDQoBAwABAQQNCgEHDQwBBg0MAQYNDAEGDQwBBw0KAQQAAQEDDQoBAwACAQQNCAEEAAMBBQ0EAQUABQEMAAcBCgAKAQYABg=="]}},"s":{"type":"field","size":[100,20],"pos":[130,28],"locked":1,"show":"none","style":"plain","value":"1"}}}}}

Note: large pulsating images may cause Web-Decker to bog down on slower machines, and line drawings generally produce better-looking results than dithered images.

Make your deck teem with activity using

The Turtle Contraption:

Just like its namesake animal, the Turtle Contraption is a little triangular critter that moves around. If you drag them around manually you can reposition them on the card.

The behavior of each turtle is controlled by their script. The "move" function is given a dictionary containing the turtle's "pos" (position) and "dir" (direction). This function should return a modified dictionary containing a new position and direction, and can optionally set "pat" (a pattern number for drawing the turtle in) and "fd" (a number of pixels to move forward in the current direction). From these building blocks, many interesting behaviors can be built, as demonstrated above:

The definition below is pre-loaded with the last of the above behaviors, which is perhaps the most interesting: it wanders around and avoids any "walls" that have been drawn on the card background. These turtles aren't extremely good at solving mazes, but perhaps you could improve their performance?

%%WGT0{"w":[{"name":"flatlander","type":"contraption","size":[30,30],"pos":[219,59],"script":"on move x do\n d:0 while (d<30)&!card.image[floor x.pos+d*unit x.dir] d:d+1 end\n x.dir:x.dir+if d<20 .01 else .001 end*random[100]-50\n x.fd :d>10\n x.pat:8+d<10\nend","show":"transparent","def":"turtle","widgets":{"c":{},"s":{}}}],"d":{"turtle":{"name":"turtle","size":[30,30],"margin":[0,0,0,0],"description":"a programmable embodied agent.","script":"on get_state   do s.text   end\non set_state x do s.text:x end\n\non view do\n # state management\n os:\"%j\" parse s.text\n offset:card.size/2\n center:card.pos+offset\n is.pos :os.fp+center\n is.dir :os.dir\n is:card.event[\"move\" is]\n c.pattern:os.pat:32 unless is.pat\n if \"fd\" in is is.pos:is.pos+is.fd*unit is.dir end\n os.dir :is.dir\n os.fp  :is.pos-floor is.pos\n card.pos:(512,342)%is.pos-offset\n s.text:\"%j\" format os\n \n # rendering\n tri:4 take flip offset+flip(14,10,10)*unit os.dir+(.666*pi)*range 3\n c.clear[]\n c.poly[tri]\n c.pattern:1\n c.line[tri]\nend","template":"on move x do\n x\nend","attributes":{"name":["state"],"label":["State"],"type":["code"]},"widgets":{"c":{"type":"canvas","size":[30,30],"pos":[0,0],"locked":1,"animated":1,"script":"on drag do\n card.pos:pointer.pos-me.size/2 \n me.pos:0\nend","show":"transparent","border":0,"draggable":1,"scale":1},"s":{"type":"field","size":[100,20],"pos":[57,-4],"show":"none"}}}}}

Another palette-related editor,

The AnimEdit Contraption:

This contraption provides an editor for the four animated pattern "slots". Clicking "Read" will load the sequences of patterns in each slot into the text field, and clicking "Write" will apply the contents of the text field to the deck. The slider and canvas above provide a quick reference for all the currently defined colors and patterns, by index.

Each animated pattern (slots 28, 29, 30, and 31) consists of up to 8 indices into other patterns, shown comma-separated, one pattern per line.

%%WGT0{"w":[{"name":"animEdit1","type":"contraption","size":[155,99],"pos":[248,51],"def":"animEdit","widgets":{"v":{},"r":{},"w":{},"p":{},"c":{}}}],"d":{"animEdit":{"name":"animEdit","size":[155,99],"margin":[0,0,0,0],"description":"an editor for the animated pattern sequences.","image":"%%IMG2AJsAYwADAZYABAEBDZYBAQACAQENmAECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQECDZkBAg2ZAQINmQEBAAEBAQ2XAQEAAwEBDZUBAQAFAZUAAw==","widgets":{"v":{"type":"field","size":[149,49],"pos":[3,25],"style":"code"},"r":{"type":"button","size":[72,20],"pos":[3,76],"script":"on click do\n v.text:\"\\n\" fuse each v in 28,29,30,31\n  \",\" fuse patterns[v]\n end\nend","text":"Read"},"w":{"type":"button","size":[74,20],"pos":[78,76],"script":"on click do\n each l i in 4 limit \"\\n\" split v.text\n  patterns[28+i]:0+\",\" split l\n end\nend","text":"Write"},"p":{"type":"slider","size":[72,20],"pos":[3,3],"script":"on change val do\n c.clear[]\n c.pattern:val\n c.fill[]\nend","interval":[0,47],"style":"compact"},"c":{"type":"canvas","size":[74,20],"pos":[78,3],"scale":1}}}}}

You spin me right round baby, like

The Rotor Contraption:

A rotor continuously rotates an image at a configurable speed. Rotors support transparency and can optionally be made draggable, like a canvas.

When pasting your image in, be sure to leave a sufficient margin: rotors spin around the centerpoint of the image, and only the circular part at the center of a rectangular image will spin "cleanly":

%%WGT0{"w":[{"name":"rotor1","type":"contraption","size":[100,100],"pos":[152,53],"show":"transparent","def":"rotor","widgets":{"c":{},"s":{},"i":{}}}],"d":{"rotor":{"name":"rotor","size":[100,100],"resizable":1,"margin":[5,5,5,5],"description":"Animate an image by making it spin!","script":"on get_speed   do 0+s.text  end\non set_speed x do s.text:x  end\non get_img   do i.value   end\non set_img x do i.value:x end\non get_draggable   do c.draggable   end\non set_draggable x do c.draggable:x end\n\non view do\n img:first extract arg where arg..type=\"image\" from get_img[]\n rot:(sys.frame/60)*2*pi*get_speed[]\n c.clear[]\n c.paste[img.copy[].rotate[rot] (c.size/2)-(img.size/2) 1]\nend","attributes":{"name":["speed","img","draggable"],"label":["Rotation Speed","Image","Draggable"],"type":["number","rich","bool"]},"widgets":{"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"animated":1,"script":"on drag do\n if me.draggable\n   card.pos:pointer.pos-me.size/2 \n   me.pos:0\n end\nend","show":"transparent","border":0,"scale":1},"s":{"type":"field","size":[23,20],"pos":[117,2],"show":"none","style":"plain","value":"0.5"},"i":{"type":"field","size":[23,20],"pos":[117,33],"show":"none","value":{"text":["","i"],"font":["",""],"arg":["","%%IMG2AEUAQwD/AP8A/wD/AHUBAQBDAQMAQgEEAEEBBABBAQUAPwEGAD8BBgA+AQcAPgEDDQEBAwA+AQMNAQEDAD4BAw0CAQMAPQEDDQIBAwA8AQMNAwEDADwBAw0DAQMAPAEDDQQBAwA6AQQNBAEDADoBAw0GAQMAOQEDDQYBAwA4AQMNBwEDADgBAw0IAQMANwEDDQkBAwA2AQMNCgEDADQBAw0MAQMAMgEDDQ0BAwAyAQMNDQEEADEBAw0OAQMAMQEDDQ4BAwAwAQMNDwEDADABAw0QAQMALwEWADABFQAvARUAMQEDAP8A/wD/AP8A/wAI"]}}}}}}

The rotor is also available in a variant,

The SeekRotor Contraption:

A seekRotor rotates to point toward something. By default, that "something" is the user's pointer. If you provide a "target[]" event handler on the contraption instance you can tell it to point toward any position you like. For example, pointing at the center of a field:

This behavior pairs nicely with making the source or target draggable, as seen above! Images for the seekRotor should face to the right in their initial view.

%%WGT0{"w":[{"name":"seekRotor1","type":"contraption","size":[100,100],"pos":[351,79],"show":"transparent","def":"seekRotor","widgets":{"c":{},"i":{}}}],"d":{"seekRotor":{"name":"seekRotor","size":[100,100],"resizable":1,"margin":[5,5,5,5],"description":"Animate an image by making turn toward the cursor.","script":"on get_img   do i.value   end\non set_img x do i.value:x end\non get_draggable   do c.draggable   end\non set_draggable x do c.draggable:x end\n\non view do\n img:first extract arg where arg..type=\"image\" from get_img[]\n trg:pointer.pos unless card.event[\"target\"]\n rot:heading trg-card.offset+card.size/2\n c.clear[]\n c.paste[img.copy[].rotate[rot] (c.size/2)-(img.size/2) 1]\nend","template":"on target do\n pointer.pos\nend","attributes":{"name":["img","draggable"],"label":["Image","Draggable"],"type":["rich","bool"]},"widgets":{"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"animated":1,"script":"on drag do\n if me.draggable\n   card.pos:pointer.pos-me.size/2 \n   me.pos:0\n end\nend\n","show":"transparent","border":0,"scale":1},"i":{"type":"field","size":[23,20],"pos":[117,33],"show":"none","value":{"text":["","i"],"font":["",""],"arg":["","%%IMG2AEUAQgD/AP8A/wD/AP8AfQEBAEMBBABBAQkAPAELADoBAwkBAQwANQEDCQYBCwAxAQMJCAEMAC4BAwkNAQkALAEDCREBCAApAQMJFAEJACUBAwkWAQgAJAEDCRkBBQAkAQMJFgEHACUBAwkTAQkAJgEDCQ8BCgApAQMJBgEQACwBAwkEAQ8ALwEDCQIBDQAzAQoAPAEGAD4BBgBAAQMA/wD/AP8A/wD/AP8ArA=="]}}}}}} EDCRkBBQAkAQMJFgEHACUBAwkTAQkAJgEDCQ8BCgApAQMJBgEQACwBAwkEAQ8ALwEDCQIBDQAzAQoAPAEGAD4BBgBAAQMA/wD/AP8A/wD/AP8ArA=="]}}}}}}

bored of base 10? how about

The BitField Contraption:

The bitField contraption (shown here linked to an ordinary field widget), stores a numeric value and allows it to be viewed and edited as binary digits. Clicking toggles a bit, and dragging can set multiple bits quickly. The "width" (in bits) can be configured to any value between 1 and 32. Like a Field widget, it fires an "on change" event, and it respects the "show", "font", and "locked" common attributes.

%%WGT0{"w":[{"name":"bitField","type":"contraption","size":[216,31],"pos":[176,159],"def":"bitField","widgets":{"c":{"size":[216,31],"pattern":0},"v":{"size":[65,31],"pos":[234,0],"value":"0"},"w":{"pos":[234,45]},"d":{"pos":[234,79]}}}],"d":{"bitField":{"name":"bitField","size":[101,20],"resizable":1,"margin":[5,5,5,5],"description":"a visual, interactive display of an integer as its bits, shown from most to least significant.","script":"on get_value   do 0+v.text end\non get_width   do 0+w.text end\non set_value x do v.text:((2^w.text)-1)&0|x view[] end\non set_width x do w.text:32&1|x             view[] end\n\nbw:get_width[]\nbv:get_value[]\n\non unpack do\n t:bv each v in range bw\n  r:2%t t:floor t/2 r\n end\nend\n\non view do\n c.clear[]\n c.font:card.font\n c.show:card.show\n cell:card.size/bw,1\n t:bv\n each bit i in unpack[]\n  r:cell*((bw-1)-i),0\n  c.pattern:1\n  if bit c.rect[r cell+1] end\n  c.pattern:!bit\n  c.text[bit r+cell/2 \"center\"]\n end\nend\n\non drag pos do\n bit:(bw-1)-floor pos[0]/card.size[0]/bw\n if !card.locked\n  set_value[if d.value\n   bits.and[bv bits.xor[(2^bw)-1 2^bit]]\n  else\n   bits.or[bv 2^bit]\n  end]\n  card.event[\"change\" get_value[]]\n end\nend\n\non click pos do\n bit:(bw-1)-floor pos[0]/card.size[0]/bw\n d.value:bits.and[bv 2^bit]\n drag[pos]\nend\n\non release pos do\n drag[pos]\nend","template":"on change val do\n \nend","attributes":{"name":["value","width"],"label":["Value","Width"],"type":["number","number"]},"widgets":{"c":{"type":"canvas","size":[101,20],"pos":[0,0],"locked":1,"border":1,"scale":1},"v":{"type":"field","size":[65,20],"pos":[119,0],"show":"none","style":"plain","value":"0"},"w":{"type":"field","size":[65,20],"pos":[119,34],"show":"none","style":"plain","value":"8"},"d":{"type":"button","size":[60,20],"pos":[119,68],"show":"none","style":"check","value":0}}}}}

Trying to make a jump-scare, or at least a nice cupholder? Look no further than

The PopOut Contraption:

The PopOut Contraption behaves like a two-position switch, animating a configurable image in a smooth tween from one position to another when the image is clicked (or if anything else modifies its ".value" attribute). The contraption will automatically choose a vertical or horizontal orientation based on the bounding box of the contraption and the size of the source image, favoring the axis which allows the image more freedom of movement.

%%WGT0{"w":[{"name":"popOut1","type":"contraption","size":[45,84],"pos":[428,40],"script":"on click do\n popOut2.value:!popOut2.value\nend","show":"transparent","def":"popOut","widgets":{"c":{"size":[12,15],"pos":[16,0],"show":"transparent","image":"%%IMG2AAwADwABAbM="},"v":{"size":[60,11],"pos":[58,1],"value":1},"t":{"size":[64,11],"pos":[57,18],"value":"1"},"i":{"size":[66,11],"pos":[57,35]},"s":{"size":[100,11],"pos":[56,51],"value":"1.5"}}}],"d":{"popOut":{"name":"popOut","size":[101,148],"resizable":1,"margin":[0,0,0,0],"description":"A sliding animated element that alternates between two positions when clicked.","script":"on get_value do v.value end\non set_value x do v.value:x view[] end\non get_img do i.value end\non set_img x do i.value:x view[] end\non get_speed do 0+s.text end\non set_speed x do s.text:0|x end\n\non click do\n set_value[!get_value[]]\n card.event[\"click\"]\nend\non tween a b t do\n # see easeInOutBack() from easings.net\n c1:1.70158 c2:1.525\n a+(b-a)*.5*if !t>.5\n    ((2*t    )^2)*((c2+1)*(   2*t))-c2\n else\n  2+(((2*t)-2)^2)*((c2+1)*(-2+2*t))+c2\n end\nend\non view do\n img:first extract arg where arg..type=\"image\" from i.value\n c.size:img.size\n c.show:card.show\n c.paste[img]\n tn:0+t.text\n chg:if tn>v.value -1 elseif v.value>tn 1 else 0 end\n t.text:0|1&tn+chg*0.03*s.text\n c.animated:!tn~v.value\n d:card.size-c.size\n a:d[1]>d[0]\n tw:tween[2 d[a]-2 tn]\n ct:d[!a]/2\n c.pos:if a ct,tw else tw,ct end\nend","template":"on click do\n \nend","attributes":{"name":["img","speed","value"],"label":["Image","Speed","Value"],"type":["rich","number","bool"]},"widgets":{"c":{"type":"canvas","size":[26,26],"pos":[37,0],"locked":1,"border":0},"v":{"type":"button","size":[60,20],"pos":[114,2],"show":"none","style":"check","value":0},"t":{"type":"field","size":[64,20],"pos":[113,31],"show":"none","style":"plain","value":"0"},"i":{"type":"field","size":[66,20],"pos":[113,61],"show":"none","value":{"text":["","i"],"font":["",""],"arg":["","%%IMG2ABoAGgABARgAAQH/Af8BcgABARgAAQ=="]}},"s":{"type":"field","size":[100,20],"pos":[112,90],"show":"none","style":"plain","value":"1"}}}}}