First Dot

Pick a color and make a dot. Can you adjust the color and the size?

Donut

If you add a second line of code to your program, you can draw a second dot. Drawing a smaller dot on top of a bigger dot will make a donut. To clear the middle, you can draw in white or even in a special color called erase.

Bullseye

By alternating light and dark dots of different sizes, you can make a bullseye. Can you draw a collection of dots to make interesting striped patterns?

More Ideas

dot purple, 100

Reset

Reference:

colors dot pen fd

# common setup code here. window.print = -> write 'Try using write instead of print.' # remove default error handling UI. window.removeEventListener 'error', see thepopup = null popup = (t) -> if $('#error-advice').length thepopup = $('#error-advice') if thepopup thepopup.html t return thepopup = write """ <center>#{t}</center> """ thepopup.css background: rgba(240,240,240,0.8) fontFamily: 'Arial' margin: '5px 15%' padding: '8px' borderRadius: '8px' boxShadow: '0 0 5px dimgray' hints = null lasterrorevent = null $(window).on 'error', (e) -> lasterrorevent = e if hints then do hints dotcount = 0 cssc = [ "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen", "transparent" ] colors = {} sizes = [] originaldot = window.dot window.dot = -> dotcount += 1 color = black size = 8 for a in arguments if isNaN(a) then color = a else size = a colors[color] = true sizes.push(size) originaldot.apply(null, arguments) hints = -> if lasterrorevent or dotcount == 0 # Catch common beginner typos. if ide dotline = /(?:^|\n)[^\n\S]*dot[^\n#]*/.exec(ide.getEditorText()) if dotline dotline = dotline[0] if dotline if /^dot\s+[a-z]+\s+[a-z]+/i.test(dotline) popup """ Did you put a space in the middle of a color? HINT: colors are spelled without a space. """ else if /^dot\s+[a-z0-9]+\s*[0-9]+/i.test(dotline) popup """ Did you forget a comma? HINT: use a comma between the color and size. """ else if /^dot[a-z]{3}/i.test(dotline) popup """ Did you forget a space? HINT: put a space before the color. """ else if dotline.toLowerCase() != dotline popup """ Did you use capital letters? HINT: most built-in names are lowercase. """ else if /^[ \t]+/.test(dotline) popup """ Did you indent your code? HINT: line up your code on the left. """ else if (m = /^dot\s+([a-z]+)/.exec(dotline)) and not (m[1] in cssc) popup """ #{m[1]} is not a color name I know. HINT: look for the color reference below. """ return if lasterrorevent return if dotcount == 1 and sizes[0] == 100 and colors.purple popup """ Can you change the color? HINT: find the colors reference page below. """ else if dotcount == 1 and sizes[0] == 100 popup """ Can you make a different size? HINT: the number is the diameter. """ else if dotcount == 1 popup """ Try adding a second dot! HINT: add a second line of code. """ else if _.keys(colors).length == 1 popup """ Are your dots all the same color? HINT: try picking different colors. """ else if _.uniq(sizes).length == 1 popup """ Are your dots all the same size? HINT: try picking a different size for a dot. """ else if _.min(sizes) <= 16 popup """ HINT: your dot is smaller than the turtle """ else if not _.every(sizes, (v, i) -> i is 0 or sizes[i - 1] >= v) popup """ Did you cover up a dot? Try drawing the bigger one first. """ else if dotcount < 3 popup """ Challenge: try drawing a bullseye. """ else popup """ Beautiful! You may want to try "More Ideas" or explore other projects. """ $(window).click -> if dotcount is 0 popup """ Click on the blue play button to run the program. """ setTimeout((-> done -> setTimeout hints, 500), 500)