I made a vector editor in Scratch, inspired by the 2.0 vector editor

http://scratch.mit.edu/projects/jji7skyline/2822414

cheddargirl
Okay, so I had some chances to play around with the vector editor. Here's one that I did (the one on the left was made in one of the older paint editor editions).

http://alpha.scratch.mit.edu/projects/10001942

Thanks for taking the time to test it out and write up your feedback! It's really helpful. Oh and seeing what you were able to create was great too.

cheddargirl
During the drawing process, there one basic tool that I felt was missing: a bezier/line tool. If it's currently not on the list of features to be added, I have to highly insist that it should be added. I usually use the line tool very heavily in the Scratch 1.4 paint editor - my drawing tutorial here shows how I use the line tool over freeform pen in a raster editor; given that I've gotten a lot of positive feedback on that tutorial I think having a bezier tool (or at least a tool that allows users to pre-determine the position of the nodes) is necessary.

I may be misunderstanding the use case here - but currently you can create straight lines on any angle by using the pen tool + Shift. (Note there is currently a bug if you release shift before the mouse, so when you're ready to end your line release the mouse, then shift. A fix for this is in our next push)

cheddargirl
I think the most difficult thing I encountered using the vector editor is trying to simply color something. Some people prefer doing line art first and then use the (raster) fill bucket to color things in. The vector fill bucket doesn't work this way, and to a certain degree, this makes the coloring issue difficult and more lengthy: I either have to learn to draw using closed objects that are colored beforehand, or I have to create separate color shapes to conform to the lineart. (I'm not sure if I explained myself well, but I think the best way to explain is by challenging others to remix my project and color the image on the right).

The paint bucket is definitely a work in progress…it is a difficult one to get right. We want to get it to feel and act as close to bitmap paint bucket as possible. Hopefully we'll have some iterations for everyone to test out soon.

cheddargirl
One thing I haven't seen yet is the ability to copy costume images. Is that feature missing, or is it hidden somewhere and I can't figure it out?

That's hidden. We need to do something about that. If you use the stamp tool on the top nav of the project editor, you can duplicate a costume. Not sure if I explained that well…let me know if not.

Thanks!

Champ99

cheddargirl
During the drawing process, there one basic tool that I felt was missing: a bezier/line tool. If it's currently not on the list of features to be added, I have to highly insist that it should be added. I usually use the line tool very heavily in the Scratch 1.4 paint editor - my drawing tutorial here shows how I use the line tool over freeform pen in a raster editor; given that I've gotten a lot of positive feedback on that tutorial I think having a bezier tool (or at least a tool that allows users to pre-determine the position of the nodes) is necessary.

I may be misunderstanding the use case here - but currently you can create straight lines on any angle by using the pen tool + Shift. (Note there is currently a bug if you release shift before the mouse, so when you're ready to end your line release the mouse, then shift. A fix for this is in our next push)

Ah, sorry if I wasn't clear.

A bezier tool is a path tool where you predefine the path by setting the nodes in certain places. This is not the same as with freeform drawing in a vector editor because you adjust the nodes after the line in drawn, not before. A good analogy to this is a connect-the-dots image, where the nodes are like the dots and lines are drawn between them. This YouTube video http://www.youtube.com/watch?v=MjQl1cl2184 shows how a bezier tool works.

The bezier tool is actually common to both raster and vector editors (GIMP, for example, has a bezier tool). However, unlike with vector editors, the bezier process can be easily imitated in a raster editor using the straight line tool via the process I described in the drawing tutorial I linked to earlier. The line tool in the vector editor does not work in the same way since there is no way to join the end nodes of two straight lines together.

Champ99

cheddargirl
One thing I haven't seen yet is the ability to copy costume images. Is that feature missing, or is it hidden somewhere and I can't figure it out?

That's hidden. We need to do something about that. If you use the stamp tool on the top nav of the project editor, you can duplicate a costume. Not sure if I explained that well…let me know if not.

Whoa, that's… not very intuitive for me, I thought that the stamp was only for duplicating sprites! My first thought was that the functions for duplicating/removing costumes and sprites would be in different locations, it's just so weird having a single function on the top there not knowing what they're for. Maybe the functions should be separate, with the duplicate/remove function for sprites should be on top of the sprite section and the duplicate/remove function for costumes somewhere in the costume tab.

Ah, another question: So far, I can only import images as costumes, but I can't figure out how to import an image into the editor. How do I import images in the editor? Or is that not doable yet?

I think the vector is a gorgeous addition, and I'm loving it so far. A few problems are, I can't find a ‘delete’ or an ‘undo’ button, so my sprites aren't as good as I like. Despite that, things like the auto-corrections that the computer makes really pleases me. I think that the project editor might just be the best part of Scratch 2.0!

I'm waiting for the update before trying it. Someone ping me when it comes. Thanks.

Okey doke, I'm kind of having problems selecting objects. Sometimes, if I overlay objects on top of each other, clicking on one object might end up selecting the other. Is there an easier way to select object for moving/editing other than by moving the unwanted object out of the way?

cheddargirl
Okey doke, I'm kind of having problems selecting objects. Sometimes, if I overlay objects on top of each other, clicking on one object might end up selecting the other. Is there an easier way to select object for moving/editing other than by moving the unwanted object out of the way?

We're using layering. If you draw a large circle and then a smaller circle on top of it. The smaller circle is on the top layer and you should be able to grab it and move it around. You'll also be able to grab and move around the bigger circle because even though it's below the smaller one, it's larger and not masked by it. If however, you draw a small circle (transparent fill) and a larger circle over it (also transparent fill) then the larger circle will be ‘on top’ and masking the smaller one. It sounds like this is the case you're in. If you want to move the shapes below the one you drew on top, the easiest way to do this is to select the ‘top’ shape, and click the ‘layer down’ tool you'll see at the bottom of the tool palette. Let me know if you have trouble…

Problem: Whenever I use circles for a picture and switch to another window and try to edit it again, the circles go all over the place. Anyone notice that bug?

Playing around with the editor, I imported a vector image and noticed that I was incapable of editing it except for certain things like recoloring and resizing. Will the Scratch 2.0 editors contain the ability to edit imported vectors?

Saca312
Problem: Whenever I use circles for a picture and switch to another window and try to edit it again, the circles go all over the place. Anyone notice that bug?

Yeah!

I was drawing a bunch of lollipops on a background for the blog post. I grouped the pink lollipop-tops to the sticks, then moved on to the scripts. When I went back to the background, the lollipop-tops had been displaced about 200px northeast.

I don't like how new backgrounds are a huge white rectangle, it should be clear (checkered). Also, you can't spawn a text box on a rectangle, so it's annoying.

Champ99

cheddargirl
Okey doke, I'm kind of having problems selecting objects. Sometimes, if I overlay objects on top of each other, clicking on one object might end up selecting the other. Is there an easier way to select object for moving/editing other than by moving the unwanted object out of the way?

We're using layering. If you draw a large circle and then a smaller circle on top of it. The smaller circle is on the top layer and you should be able to grab it and move it around. You'll also be able to grab and move around the bigger circle because even though it's below the smaller one, it's larger and not masked by it. If however, you draw a small circle (transparent fill) and a larger circle over it (also transparent fill) then the larger circle will be ‘on top’ and masking the smaller one. It sounds like this is the case you're in. If you want to move the shapes below the one you drew on top, the easiest way to do this is to select the ‘top’ shape, and click the ‘layer down’ tool you'll see at the bottom of the tool palette. Let me know if you have trouble…

Is there another way of selecting? Or, if forcing a shape to the top layer is the only way to move a shape, is there a way to control which layer an object is located?

cheddargirl
Is there another way of selecting? Or, if forcing a shape to the top layer is the only way to move a shape, is there a way to control which layer an object is located?

We don't currently have plans to support controlled layers. We're trying to balance simplicity and control. Can you describe (or even better create a sample project) with the use case where you think controlled layers would be most useful?

Thanks!

Champ99
We don't currently have plans to support controlled layers. We're trying to balance simplicity and control. Can you describe (or even better create a sample project) with the use case where you think controlled layers would be most useful?

Thanks!

I was trying to test out coloring in the editor, and I'm finding that I have to keep forcing the lineart to the front at all time and forcing certain colors to be on the bottom http://alpha.scratch.mit.edu/projects/10004731/

I've just tried the editor out and I'd plead to have a switch to bit-mapped editor option!

Its great to have a super-duper vector drawing - advanced users will be able to achieve great things BUT it will introduce a large barrier with younger/less able pupils and classroom educators.

The “paint” concept is something that is taught/learnt as a basic skill.

When I come to teach Scratch - 85% of pupils/teachers understand and can use the 1.4 editor with minimal instruction and get onto the programming side very quickly.

This is a baby and bath-water situation we have here

Or to put it into Scratch Language - the low floor has been raised and increased the barrier to entry.

Simon

SimpleScratch
I've just tried the editor out and I'd plead to have a switch to bit-mapped editor option!Its great to have a super-duper vector drawing - advanced users will be able to achieve great things BUT it will introduce a large barrier with younger/less able pupils and classroom educators.The “paint” concept is something that is taught/learnt as a basic skill.When I come to teach Scratch - 85% of pupils/teachers understand and can use the 1.4 editor with minimal instruction and get onto the programming side very quickly. This is a baby and bath-water situation we have here Or to put it into Scratch Language - the low floor has been raised and increased the barrier to entry.Simon

Thanks for the feedback on this. It's something we're definitely concerned about. The hope is that the vector editor can be made clear and intuitive enough that it's almost as easy to learn as the vector editor. Many adults may not be used to it yet though, so even if we succeed with that goal, there will be a cost, since most adults are less familiar with vector editing than with bitmap editing.

But it's definitely something that's on our minds, and we're not totally sure how it'll pan out - (we'll be watching closely). Thanks for the feedback, and please do check back now and again, as the paint editor is still under heavy development. Hopefully we can still stay vector, but push that floor back down to 1.4 levels, or only slightly above.

One thing we've noticed with the kids we are working with is that the available of ready-made graphics really speeds up the process. With the new vector editor it would be great to have the ability to import editable vectors of SVG or AI files. There are so many free vector images available online, it would be great to be able to incorporate them into projects without first converting them to bitmaps. Perhaps there are some open source Actionscript libraries already available to handle the import.

Hey, how goes the Bucketfill function? I tried it on one of my projects and it failed to fill in closed spaces properly (save for a few areas) and transparent fill causes my browser to freeze. http://alpha.scratch.mit.edu/projects/10001942/

I just wanted to move some of my suggestions for the paint editor to a more appropriate location. This is reposted from (http://alpha.scratch.mit.edu/forums/topic/7/?page=7#post-2089).

A feature complete bitmap/vector editor is definitely going to be a lot of work. Reinventing the wheel here is going to be tough and possibly stretch your team a bit outside of your core goals. To avoid holding up Scratch 2 due to the editor, you might want to consider integrating with an existing SVG project where the majority of the work is already done and being maintained. The SVG-edit project (https://code.google.com/p/svg-edit/) looks wonderful, is under the MIT license and seems to have all the features you are looking for with the added benefit of SVG import/export allowing seamless integration with standalone editors. The Scratch team would just need to focus on seamless integration back into the user's Sprites library.

Here are some possibilities:
1) Keeping your built-in editor simple and adding SVG import/export for more advanced editing in Inkscape, Illustrator, etc. The key is to maintain scalability and some editability in the local editor.

2) Integrate a completed third-party open source editor:
Example: SVG-edit (https://code.google.com/p/svg-edit/) - fully web-based, active project, MIT license. Might be able to work with the author to fork into a simplified version suitable for Scratch audience. Full SVG import and very feature complete. The demo of the latest version is very impressive and runs right in the browser (http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html). The editable vector shape library would be great for young Scratchers.

Example HTML-based: http://editor.method.ac/ made by http://news.ycombinator.com/user?id=duopixel


3) Replace the current built-in editor with an open source Actionscript library.
Example: Actionscript-based SVG editor (http://code.google.com/p/svgeditor-as3/)

learnegy
One thing we've noticed with the kids we are working with is that the available of ready-made graphics really speeds up the process. With the new vector editor it would be great to have the ability to import editable vectors of SVG or AI files. There are so many free vector images available online, it would be great to be able to incorporate them into projects without first converting them to bitmaps. Perhaps there are some open source Actionscript libraries already available to handle the import.

Thanks for this feedback. This is something we are definitely interested in supporting. We're currently working on ensuring that our image library of characters/ images are easily editable as vectors. The next step would be to allow vectors that are imported to be easily edited as well - though this is a bit more tricky.

cheddargirl
Hey, how goes the Bucketfill function? I tried it on one of my projects and it failed to fill in closed spaces properly (save for a few areas) and transparent fill causes my browser to freeze. http://alpha.scratch.mit.edu/projects/10001942/

The fill (including transparent fill) is definitely still very buggy on the alpha. We have plans for bug fixes and improvements to the interaction that are in our queue. The next paint editor update should incorporate some of these things. (Apologies - I know it's been a while since our last paint editor update)