kanocomputing/make-art

App to learn programming using a basic CoffeeScript drawing API

make-art's Issues

updateProgress bug in summer camp

A scoping issue which means that if the user is completing many challenges in one session, the scope.id was being locked to the first challenge played. For the user it meant that the completed tick isn't appearing when they are catching up challenges.

Basic event handling

Would it be possible to allow basic event handling for mouse or keystrokes?

eg

background black
color red

mouseClicked = (mouse) ->
     moveTo mouse.x, mouse.y
     circle 10

or perhaps have a separate tab?

if (mouseClicked)
     moveTo mouse.x, mouse.y
     circle 10

Essentially this could be used to give users basic interactivity.

No way to validate whether arc is closed

It is impossible to validate whether an arc is closed or not.

To reproduce, inside of a challenge, create this step:

[
     'An arc is part of a cirlce, draw one that matches the inner circle - **type** `arc 180, 1, 2, true`',
    'arc 180, 1, 2, true',
    [
        [ 'arc', { radius: 180, start: 1, end: 2, close: true } ]
    ]
]

This step will not be marked as complete when you type it in, and this is because the validation function never returns true. It will also not work if you try to get it to validate for close = false, which is the default behavior.

I found that when the stepEquals() method (from assert.js) is called to compare the properties of the new canvas object (contained in step.options) with those in the challenge's spec, the step.options object does not contain a property called close. This is what it contained:

{
    x: 250, 
    y: 250, 
    radius: 180, 
    start: 1, 
    end: 2
}

This makes it impossible to compare that key with the close property contained in the step's spec. It suggests that the close property is being stored inside of another object.

X, Y coordinates on canvas are confusing

When I start make art but don't move my mouse over the canvas, the x, y coordinates are blank! they should be populated with the current cursor position automatically!

After I have moved my mouse over the canvas, a good thing happens: they finally display what they're supposed to. Yay.

HOWEVER When my mouse is still over the canvas, the coordinates are updated to the point where the mouse is...BUT there is a crosshairs icon next to the coordinates which makes them look like they're the coordinates of the current canvas position.

I think it's a really good thing that users can get the x, y coordinates by using their mouse...for obvious reasons...but I think this little detail is confusing.

This could potentially be fixed by adding a small cursor icon like this when the coordinates reflect mouse position and not crosshairs position...

Screen dimension optimization

We're still seeing issues with users not being able to fit the canvas pane, code pane, and challenge text into their screen. Results either in users having to scroll, or not realising this is even an issue, and having no access to certain functions.

Can't find variable: stage :(

I've got plenty of projects that reference the previously-valid stage variable, and now they won't load when you try to open them up. Here are just a few:

https://world.kano.me/profile/creations/windows-95_936885
https://world.kano.me/profile/creations/perlin-noise_938687
https://world.kano.me/profile/creations/plan-view-of-an-open-air-loggia-villa-dei-papiri-ercolano

Shape, movement, color functions have default values

circle === circle() === circle(25)

square === square() === square(50)

color === color() === color(rotate(red, random(0, 255)))

move === move() === move(50, 0)

So I could write…

circle
move
circle
move
color
circle
move square

…and lower the barrier to entry. This allows us to teach order of operations without having to teach users about parameters.

Technical problem: color != color(). Without parentheses, function names just refer to the function rather than calling it.

Thoughts @brandonjackson @mkeegan @tancredi?

[Bug] Type colouring acts strange

Try this:

background 'rgba(220, 224,242,1)'
stroke 0
font 'Helvetica', 50
text 'Test'

It won't display anything, despite the drawing colour for the text supposedly being black. However, if you draw a rectangle above the text, it will properly show the rectangle, and the text.

[Challenges] Reset button should set code back to have original `code` from challenge file

Currently it just clears everything.

[Playground] Remove "Playground" title and prevent any marketing banners

Small screens shouldn't have to scroll down to see their code and both of these need to be removed.

Autoclose quotes

When a user types text "hello world". They won't be able to see anything they have written until it is completed because their quotes are unclosed. This could be resolved by having a closing quote appear when any opening quote is typed.

@alex5imon this would help specifically for an early techjam Make Art challenge.

[Validation] Validating `random` values

From a proposed challenge:

        [
            'For every time the loop runs, we want each mountain’s peak to be drawn starting randomly on the top part of the screen. **Type** `moveTo (random 0, 500), (random 0, 200)`',
            'moveTo (random 0, 500), (random 0, 200)',
            [
                ['move-to', function (opts) {
                     return (opts.x >= 0 && opts.x <= 500) && (opts.y > 0 && opts.y <= 200);
                }]
            ]
        ],

This doesn't work, and neither does

                     return (opts.x > 0) && (opts.y > 0);

Or even

                     return true;

@rcocetta thoughts?

How to create a delay?

Hi, I would like to learn to add a delay in any program?
Does exist a technical documentation about the language?

Many thanks in advance.

Juan Antonio

Install debian package

Once #1 is complete

Implementing i18n

Hello, I would like to offer my help to finish the implementation with the i18n.
I am also Spanish, and being the second language that you want to be incorporated, I can give double help.

Please, let me know if I could follow some guidelines. Thank you.

npm build seems broken

This is maybe a browserify issue?

kano-draw > npm run build

> [email protected] build /Volumes/Development/Kano/kano-draw
> gulp

[08:23:10] Using gulpfile /Volumes/Development/Kano/kano-draw/gulpfile.js
[08:23:10] Starting 'browserify'...
[08:23:11] 'browserify' errored after 86 ms Please pass an instance of tiny-lr when calling gulp-livereload.

/Volumes/Development/Kano/kano-draw/node_modules/gulp/node_modules/orchestrator/index.js:153
      throw err;
            ^
Error in plugin 'gulp-livereload'
Please pass an instance of tiny-lr when calling gulp-livereload.
    at module.exports (/Volumes/Development/Kano/kano-draw/node_modules/gulp-livereload/gulp-livereload.js:11:11)
    at Gulp.gulp.task.gulp.src.pipe.stylus.pretty (/Volumes/Development/Kano/kano-draw/gulpfile.js:40:11)
    at module.exports (/Volumes/Development/Kano/kano-draw/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Volumes/Development/Kano/kano-draw/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Volumes/Development/Kano/kano-draw/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/Volumes/Development/Kano/kano-draw/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /Volumes/Development/Kano/kano-draw/node_modules/gulp/bin/gulp.js:77:20
    at process._tickCallback (node.js:419:13)
    at Function.Module.runMain (module.js:499:11)
    at startup (node.js:119:16)

npm ERR! [email protected] build: `gulp`
npm ERR! Exit status 8
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is most likely a problem with the draw package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp
npm ERR! You can get their info via:
npm ERR!     npm owner ls draw
npm ERR! There is likely additional logging output above.
npm ERR! System Darwin 13.3.0
npm ERR! command "node" "/usr/local/bin/npm" "run" "build"
npm ERR! cwd /Volumes/Development/Kano/kano-draw
npm ERR! node -v v0.10.29
npm ERR! npm -v 1.4.14
npm ERR! code ELIFECYCLE
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Volumes/Development/Kano/kano-draw/npm-debug.log
npm ERR! not ok code 0
kano-draw > 

Google Analytics

Implement GA in Make Art.

Language selector

It would be nice to add a language selector to swap between English and Spanish.
For example, people from Spain, main language now is English because we are es_ES and not es_AR and it would make easier everything.

Case sensitivity in code checking

Typing moveto will advance the challenge, but will not be registered as the coffee script is case sensitive.

Install build tools in dr

We need to install
sudo apt-get install npm
sudo apt-get install python g++ make
sudo apt-get install nodejs
and run npm install

and add kano-draw package to the repo

Rewards on Summer Camp

I can't receive the rewards of the Kano Summer Camp on Kano OS 2.1.0

Navigating away

• prevent default for backspace key up event
• "Are you sure" dialogue for when you navigate away

[Validation] Validating functions with variables

For one of the Mischief Week challenges we need to validate this

pairOfLegs = (flipHori,flipVert) ->

Tried this of course, but it still refuses to validate.

"validate": "pairOfLegs = \\(flipHori,flipVert\\) ->"

Any ideas @rcocetta?

npm install error

I am trying to build code in Ubuntu 16.04 to translate to Portuguese-BR, with this settings

npm --version
4.5.0
node --version
v6.10.2
bower --version
1.8.0

but i got this error

bower ECMDERR Failed to execute "git ls-remote --tags --heads [email protected]:KanoComputing/web-components.git", exit code of #128 remote: Repository not found. fatal: repository 'https://github.com/KanoComputing/web-components.git/' not found

Additional error details:
remote: Repository not found.
fatal: repository 'https://github.com/KanoComputing/web-components.git/' not found

is it a private repository?

Incorrect hint syntax in Make Art challenge

The first hint in the Random challenge of the medium level (http://art.kano.me/challenge/medium/random) has incorrect syntax - it tells the user to type random (1, 500) instead of random(1, 500)

Arrows and this @ references difficult to read with new theme

I'm not here to make theme decisions, but looks like it is from here:

make-art/lib/vendor/ace/theme-dawn.js

Lines 83 to 100 in 2f8282f

	color: #A71D5D\
	}\
	.ace-dawn .ace_string {\
	color: #0B6125\
	}\
	.ace-dawn .ace_string.ace_regexp {\
	color: #CF5628\
	}\
	.ace-dawn .ace_comment {\
	font-style: italic;\
	color: #5A525F\
	}\
	.ace-dawn .ace_heading,\
	.ace-dawn .ace_markup.ace_heading {\
	color: #19356D\
	}\
	.ace-dawn .ace_variable {\
	color: #234A97\

make-art/lib/vendor/ace/theme-dawn.js

Line 100 in 2f8282f

color: #234A97\

~

~

on boarding

Onboarding for web users needs to be improved. Only says log in and doesn't push users to sign up for an account.

Clear up warnings from jade template files

   Warning: missing space before text for line 29 of jade file "/tmp/build_8534dff2fe1ab94dc7e1d42e87b245c2/KanoComputing-kano-draw-d9dae9b/views/summer-camp-calendar.jade"
   Warning: missing space before text for line 31 of jade file "/tmp/build_8534dff2fe1ab94dc7e1d42e87b245c2/KanoComputing-kano-draw-d9dae9b/views/summer-camp-calendar.jade"
   Warning: missing space before text for line 33 of jade file "/tmp/build_8534dff2fe1ab94dc7e1d42e87b245c2/KanoComputing-kano-draw-d9dae9b/views/summer-camp-calendar.jade"

[Improvement] shares should render at at least 2x for retina screens.

Lets take a look at how this might impact rendering, but this would make things look a lot nicer on retina screens.

Remove the "Welcome to Make Art" modal

There's no reason this should be here, its a holdover from other desktop and just gets in the way of the user experience.

Some bugs with `color` and `background`

By default, shapes are filled black (that’s fine. I’d expect defaultColor on white here):

If we add a background, though, the shape turns grey (also fine, but contradicts the above. I’d expect defaultColor on blue):

In fact, background always resets the fillStyle to grey. So if we set the color before setting the background, the color is ignored (I’d expect red on blue here):

If we set the color after the shape has been drawn, the shape changes colour (I’d expect defaultColor on white here):

…and this persists even after removing the color command (I’d expect defaultColor on white here):

I’d propose keeping track of the current fill colour in session.settings.fill, and always setting the fillStyle from this before calling session.ctx.fill().

Validation issues

• polygon 20, 40, 80, 40, 100, 0

Most likely the validation array wasn't setup right.

• for-loops starting with 0. The loop is validated correctly but the next line always fails
• for-loops [1..3] won't work

"Make Data" integration

Prototyped here:
https://github.com/KanoComputing/make-art/tree/freedom

[Syntax Highlighting] Function parameters are very difficult to read (blue on blue)

Lets change this to an easier to read colour.

[Validation] Polygons closing

Polygons can be closed with the true keyword:

polygon 10, 10, 10, 0, true

But the validator doesn't have any way of recognising this currently.

Define slider range

The sliders are useless in two situations:

• When trying to change really small numbers (such as the length of an arc, which ranges from 0 to 2)
• When trying to change positions (which span both positive and negative numbers)

I think we need to be able to define the range of the sliders. This could be linked together with changes to the validation system that would allow us to define a range of acceptable values for a parameter.

Strobe the tooltip bar when a "step" is completed

A feature from previous Make Art that provided a visual cue - a strobe (small increase in size then return to base size) – when the line is typed correctly as in the tip

Let's revert this in when we can

Fullscreen editor has incorrect canvas width

Should be 500px x 500px, but instead is 460px x 460px as it used to be before v2.0.

Make Art is not buildable without access to private Kano repos

…
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@kano%2fweb-bus - Not found
npm ERR! 404 
npm ERR! 404  '@kano/web-bus@^1.0.0-alpha.14' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of '@kano/kit-app-shell-uwp'
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alecmolloy/.npm/_logs/2019-09-28T14_19_05_259Z-debug.log

:(

Give different colour palette options

A user could select the "Minecraft" colour palette, which would use a different lookup table for colours based on the standard minecraft colours. That way we could draw the minecraft swords and blocks accurately.

James' idea: run our colour LUTs through instagram filters. So you could instagram filter your creations!

Outdated README.md

The Setup code seems outdated.

    git clone [email protected]:tancredi/draw.git
    cd draw
    npm install

Should be replaced to:

    git clone [email protected]:KanoComputing/kano-draw.git
    cd kano-draw
    npm install

Can't get a working build environment on Kano OS

• Current Kano OS.
• Installed current npm for Raspbian. Is it current? Version number (see below) suggests it is.
• git clone kano-draw
• cd kano-draw
• npm install

This takes a little time, then ends with an error where it complains about "adable-stream" or about "anno-npm-bn-js".

npm install
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No repository field.
npm WARN optional dep failed, continuing [email protected]
npm ERR! EEXIST, open '/home/Hanno/.npm/4518b755-adable-stream-1-1-13-package-tgz.lock'
File exists: /home/Hanno/.npm/4518b755-adable-stream-1-1-13-package-tgz.lock
Move it away, and try again. 

npm ERR! System Linux 3.12.24-ck2
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! cwd /home/Hanno/git/kano-draw
npm ERR! node -v v0.10.35
npm ERR! npm -v 1.4.28
npm ERR! path /home/Hanno/.npm/4518b755-adable-stream-1-1-13-package-tgz.lock
npm ERR! code EEXIST
npm ERR! errno 47
npm ERR! not ok code 0

It doesn't help to remove the .lock or .lock.STALE file as recommended by the error message. Then trying again, the same error with either of two package names mentioned above occurs.

What programming language/syntax does MakeArt accept?

Sorry for dropping the question here, as if it were a coding issue. It's not at all, but I don't know where else to contact you guys.

My son and I want to know all the different commands besides the ones hinted in the UI (color, circle, for, etc.)

We found on our own that there is if and even lamba expressions (e.g., pow2 = (base) -> return base * base

How about switch / case / default and others? Thanks!!

Validating nested loops

An issue as old as time, but still is wreaking havoc on some cool challenges i've been trying to do.

This validates totally fine:

{
    "id": "pattern",
    "title": "Pattern",
    "description": "Learn about color interactions and how shapes can affect our perception of color",
    "code": "",
    "startAt": 2,
    "steps": [
        {
            "hint": "",
            "solution": "for r in [0 .. 350] by 50"
        },
        {
            "hint": "",
            "solution": "    offset = random 0, 1, true"
        },
        {
            "hint": "",
            "solution": "    for i in [0 ... 2] by .1"
        },
        {
            "hint": "",
            "solution": "        arc r, i, i - .05",
        }
    ],
    "completion_text": "",
    "cover": "ozwaldboateng/pattern.png"
}

This does not:

{
    "id": "pattern",
    "title": "Pattern",
    "description": "Learn about color interactions and how shapes can affect our perception of color",
    "code": "",
    "startAt": 2,
    "steps": [
        {
            "hint": "",
            "solution": "for r in [0 .. 350] by 50"
        },
        {
            "hint": "",
            "solution": "    offset = random 0, 1, true"
        },
        {
            "hint": "",
            "solution": "    for i in [0 ... 2] by .1"
        },
        {
            "hint": "",
            "solution": "        arc r, i + offset, i - .05 + offset"
        }
    ],
    "completion_text": "",
    "cover": "ozwaldboateng/pattern.png"
}

The only difference between the two above JSON files is the inclusion of extra binary operators in the second example (adding an offset). Doing so in a nested loop reliably breaks validation for no clear reason.

Redesign UI to Support Better Instructions

The current UI makes it difficult to give the user helpful instructions that help the user understand what is going on instead of simply telling them what to do. For inspiration, we should look to the way that Codecademy gives users instructions.

After you have successfully entered a command, two new sets of text are loaded. The first is the Learn panel, which teaches the user about the command that they just executed. It is sort of a debrief on what just happened. Then there is a second panel called Instructions that tells the user what to do next. FWIW they also have a third panel that makes it easy to report a bug / getting stuck.

I think that something like this is desperately needed in this app. As a writer the current UI makes it very difficult to give nuanced messages, because the interface is clearly designed to display single lines of text. I suppose it would be possible to include longer messages as Markdown but still the UI should have better designed containers for specific kinds of messaging.

[BUG] Challenges complete

Check out this video:
https://www.dropbox.com/s/xhmrgmfyiu4htsl/completed-challenges-bug.mov?dl=0

Challenges inexplicably show completion text sometimes when refreshing a challenge.

Separate strokes in shapes from strokes in lines.

Compare the following images:

Now consider them with strokes:

Now look back at me. Sadly, they aren't me, but if they stopped using strokes and switched to using not-strokes, they could smell like me.