Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Vector Graphics
Started by kilopop Oct 11 2013 06:24 PM

54 replies to this topic
[TOPIC CONTROLS]
Page 2 of 3 1 2 3
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#26

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Not sure but likely. I could close them up if I find them, but we'll have to see.

I've got the face drawing correctly, at least. Subdivision for the bezier is hard-coded, but you'd likely want this to be based on length of the line segments etc, but that'll be for another day.

 

Time to see what happens with the icecream now I know the code roughly works :)



[TOPIC: post.html]
#27

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Yup ice cream crashes. I imagine the open ends don't help.

I'll try removing bits to see what, if anything, I can get to draw to find the culprits by a process of elimination.



[TOPIC: post.html]
#28

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

OK I've got ice cream not crashing.

It was down to the fact that some of the shapes are only a single line, and newPolygon won't accept only 2 points.

So I've caught this and it creates a newLine() instead.

Some bits are still wrong, and I think it may not be possible to sort absolutely everything, but I'll play a bit more and then post the code so others can see what they make of it.



[TOPIC: post.html]
#29

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

[TOPIC: post.html]
#30

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

It seems to me there are a few types of errors:

 

1 - Open ended shapes or shapes with holes - these simply fail

2 - Certain types of curving polygons. I've not been able to locate these exactly, but on the ice cream, the criss-cross patterns go wrong. I'm also seeing a weird error in the outline of the cone.

3 - The higher I set the bezier subdivision the more likely there are to be errors.

 

Images:

 

Face:

http://i.imgur.com/xkcOaVB.png

This is fine now.

 

Ice cream:

http://i.imgur.com/RZNur7V.png

http://i.imgur.com/13ZF0rr.png

http://i.imgur.com/DV1yTly.png

 

As you can see, I can generate various types of different errors by tweaking my code, and most things look ok in at least one pic, but I haven't found a way of making them all work.

At this point I think it is a combination of the open objects, but also how I start an object's path - the 3 pics show differences when I do or do not include these first points, either for lines or for curves.



[TOPIC: post.html]
#31

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

And here is the source:

 

https://github.com/Rakoonic/Vector-Importer

 

It displays both the face and the icecream. I left the settings as they are to work best with the face image, as I think it gives us the best starting place for the icecream weirdness.



[TOPIC: post.html]
#32

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

What I think I need to do is determine if a shape is open or closed.

There should be a way to do it from the data given (likely some sort of combination of do first / last points match, or how many entries there are in the shape - if just one then is open, dunno).

 

However, I should have been in bed 5 hours ago, so it'll have to wait!



[TOPIC: post.html]
#33

jeff15

[GLOBAL: userInfoPane.html]
jeff15
  • Contributor

  • 106 posts
  • Corona SDK

One question I have is what the code would look like in Corona to convert an imported json file into a shape. Is this something that can be done with Starter or do I need to have Pro?

 

I won't, unfortunately, be able to justify upgrading to Pro until I've seen some sales from my apps... Too bad there isn't a way to use Pro for free until you've had a certain number of sales (1000 or something like that). Perhaps that's too complicated but it would encourage more developers to experiment with the added features.



[TOPIC: post.html]
#34

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

You can see exactly what the code looks like as I posted it above on github.

I don't believe Graphics 2.0 will be Pro or Enterprise only as it aims to be the backbone of all graphics-based operations in the future - eventually leading G1 to be retired.



[TOPIC: post.html]
#35

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

It seems there is a basic incompatibility in abilities between illustrator and graphics 2.0.

It isn't a crashing thing, but does mean you get undesired drawing.

 

 

It seems that if you supply an open polygon with a fill and border, then this wiil be drawn wrong.

 

In Illustrator what would happen is that it would draw the fill as if the shape was closed (adds an extra line from the start to the end point of shape), but draws borders only around the supplied edges (so the open area won't have a line).

 

In graphics 2.0, a polygon must be closed. In fact this happens automatically in the above example because in G2 you don't add in an additional end point that matches the start point to mark it as closed. So the *fill* is fine, but in G2 the border is applied to every single edge, and this means you will get unwanted extras.

 

You have a choice really then on how to render open bordered polygons:

1) You draw them filled and with the border on every side, or

2) You draw them unfilled and with the borders correct

 

Ideally of course, you'd not use this sort of shape.

 

The problem with icecream? It contains both :)



[TOPIC: post.html]
#36

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

I should also point out I'm getting a much different set of strokewidths from the icecream image - values seem to be much lower than the exported image would imply, so I'm adding in a scalar to see what 'feels' right.



[TOPIC: post.html]
#37

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 257 posts
  • Corona SDK

Rakoonic - first of all - Wow you did it! I'm sitting here amazed at the possibilities of what could be achieved with vector graphics in Corona. If you think about it, apps could be made with no bitmaps so they would be extremely small files. I guess they would also use very little texture memory? I s'pose the overhead is in the actual memory given what it would take to render a relatively detailed image in code?

 

I have to confess to having limited coding skills so looking at your work I feel a bit like a jawa trying to use a light saber.. better left to the jedis like yourself :)  But.. if I make changes to face.json - will your code draw those too?

 

btw - just got Runtime error - attempt to call 'newPolygon' (a nil value') - polygons.lua123: in function 'loadJSON' using latest build on a PC.. First time I've run code with Graphics 2.0 so I may have something else still turned off..?



[TOPIC: post.html]
#38

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

I should also point out that using JSON, gradients don't get exported.



[TOPIC: post.html]
#39

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

@kilopop - I've not tried on the PC - what daily version are you using (I'm running 2013 here).

Also, I'm about to upload a new version anyway once I get a few more tweaks sorted.

Note there's very little error checking, so it is likely easy to create an invalid shape or make the JSON file invalid (although in this case it should simply not do anything).



[TOPIC: post.html]
#40

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

One thing I've done through laziness is the inheritence. It does mean that I can't use a display group as the actual object (as the metatable stuff screws up). I'll rewrite it to do a different method so that the returned new 'object' is actually a display group containing the new vector image.



[TOPIC: post.html]
#41

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

So github is updated, still using the old object method.

What you can see now is both the face and the icecream (coincidentally the face is looking happily at the icecream...).

 

If you look at the icecream creation code you'll see a few values you can tweak:

    -- Create the ice cream polygon object
    local icecream = polygons:new{
        file                = "assets/icecream.json",
        parent              = sceneGroup,
        bezierSubdivisions  = 5,
        strokeWidthScalar   = 2,
        makeOpenShapesLines = true,
    }
The first 3 parameters should be obvious enough. I chucked in strokeWidthScalar as the lines here appear to be too thin to me. This value (defaults to 1) simply multiplies up all the strokeWidth values in the file.
makeOpenShapesLines is the boolean to toggle for the two types of behaviour as detailed in an earlier post.
The default is false, and when false, open filled shapes are drawn as closed filled shapes.
When true, they are drawn as a line, only covering the correct border.
 
I will probably have to tweak this value so it only gets used in the subset of appropriate cases (open filled shape with border - for now it applies to any open filled shape I think).


[TOPIC: post.html]
#42

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 257 posts
  • Corona SDK

Same error unfortunately. Using latest daily build 2013.1244



[TOPIC: post.html]
#43

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Kilopop - that isn't a graphics 2.0 daily build, just a normal one.

Any graphics 2.0 daily build has the subversion number greater than 2000 (yours is 1244).

 

Go here to grab it: https://developer.coronalabs.com/downloads/graphics-daily-builds

 

I'm about to do my final github update for the day. It has some useful changes.

 

Get the latest working project here: https://github.com/Rakoonic/Vector-Importer

 

Here, for example, is the code used to import and create the objects:

--------------------------------------------------------------
-- SETUP -----------------------------------------------------
 
local __G            = require( "libs.globals" )
local vectorImporter = require( "libs.vectorimporter" )
local storyboard     = require( "storyboard" )
local scene          = storyboard.newScene()
 
--------------------------------------------------------------
-- STORYBOARD ------------------------------------------------
 
function scene:createScene( event )
 
    local sceneGroup = self.view
 
    -- Create the ice cream polygon object
    local icecream = vectorImporter:new{
        file                = "assets/icecream.json",
        parent              = sceneGroup,
        bezierSubdivisions  = 5,
        strokeWidthScalar   = 2,
        makeOpenShapesLines = false,
        autoCenter          = true,
        x                   = __G.screenWidth * 0.3,
        y                   = __G.screenHeight / 2,
    }
 
    -- Create the face polygon object
    local face = vectorImporter:new{
        file               = "assets/face.json",
        parent             = sceneGroup,
        bezierSubdivisions = 15,
        autoCenter         = true,
        x                  = __G.screenWidth * 0.7,
        y                  = __G.screenHeight / 2,
        scale              = 0.8,
        rotation           = -10,
    }
 
end
 
--------------------------------------------------------------
-- STORYBOARD LISTENERS --------------------------------------
 
scene:addEventListener( "createScene", scene )
 
--------------------------------------------------------------
-- RETURN STORYBOARD OBJECT ----------------------------------
 
return scene
So, important tweaks are the changing of the library name (big wow, right?), and some additional properties. Here are all the properties you can pass when creating the object.
 
  • file - Must be the full path from the root of your project.
  • directory - Must either be a standard Corona directory identifier (system.DocumentsDirectory etc), or a string. The string can be either "docs" or "documents" for system.DocumentsDirectory, or anything else for system.ResourceDirectory (although probably best to stick with "resource" for clarity). Defaults to the resource directory if not supplied.
  • parent - A parent group that this object will be placed into if passed.
  • bezierSubdivisions - How much to subdivide each bezier curve. Note that this produces 'bezierSubdivisions + 1' line segments (making 0 a valid option for no subdivision). Defaults to 5 if not supplied.
  • strokeWidthscalar - How much to scale up stroke width values in the file. Defaults to 1 (no change) if not supplied.
  • makeOpenShapesLines - Determines how to handle open filled shapes. Probably needs additional work ;) Defaults to true.
  • autoCenter - creates the objects at the origin - IE regardless of the actual values of the imported files, it moves all these so the object is centered at 0,0 within the object group. An example is if you look at the face JSON file - the face as a whole is located somewhere around 7000,-7000. If you placed the imported object at 0,0, you aren't going to see it because it is waaaay off screen. autoCenter can help you position things correctly. Note that this also affects where the object will rotate and scale from. Defaults to false if not supplied.
  • x - The x location you want the object to be drawn at. Defaults to 0 if not supplied.
  • y - The y location you want the object to be drawn at. Defaults to 0 if not supplied.
  • rotation - The rotation of the object. Defaults to 0 if not supplied.
  • scale - The scale of the object. Defaults to 1 (no change) if not supplied.

 

The object / display group returned also contains a few new functions:

 

  • obj:getCenter() -- Returns the overall center of all the vector objects drawn within the object. Note if you use autoCenter, then this will be 0, 0.
  • obj:getSize() -- Returns the overall width and height of all the vector objects drawn within the object.

 

These two functions are hooks into the object.bounds property which is the bounding rectangle of the entire file imported.

 

If you wish to access sub-objects, then these are merely the children of the object, so you could access them like this:

local firstSubObject = obj[ 1 ]
etc.

Each sub-object has an additional property called .bounds, which is the bounding rectangle of just that sub-object (similar to the object.bounds).

 

The final big change is that the object model now uses a display group as the container for the object, so when you use vectorImporter:new() it returns a display group.
So you can later then just manipulate your vector image in one go by changing the X, Y, scale etc values of this object, and in fact can also chuck it into transitions and whatever (although changing the alpha probably isn't going to have the effect you want if it has too many overlapping layers).
 
Final note (for now):
 
If you want to apply an effect to your vector object, you are going to have to chuck it into a snapshot. This is actually now quite simple, as you can find out the bounds / sizes easily. So something might look like this:
local border        = 10
local width, height = obj:getSize()
local snapshot      = display.newSnapshot( width + border * 2, height + border * 2 )
snapshot.group:insert( obj )
Then you could happily go about adding filters to the snapshot.
Why the border value? Because if you want to add a filter that extends beyond the border of the actual image (say a gaussian blur), then you need this border for the effect to bleed into.


[TOPIC: post.html]
#44

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 257 posts
  • Corona SDK

Doh.. downloading now.

Thanks for the docs there.

 

Out of interest, here is the svg for face.. it does name the layers and seems to use co-ordinates which are even closer to newPolygon's attributes:

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px"
     height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="head">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFCCCC" stroke="#000000" stroke-width="4" stroke-miterlimit="22.9256" d="
        M595.177,236.692c55.279,30.529,93.466,95.708,93.466,171.19c0,104.746-73.531,259.828-164.236,259.828
        c-90.705,0-164.235-155.082-164.235-259.828c0-74.953,37.655-139.743,92.306-170.541l-53.872-14.949l74.285-20.613l-37.952-67.104
        l67.104,37.952l20.613-74.286l20.613,74.286l67.104-37.952l-37.951,67.104l74.285,20.613L595.177,236.692z"/>
</g>
<g id="mouth">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M493.407,464.122c19.311,3.767,38.62,3.741,57.932,0
        c5.27-1.021,9.76,4.392,9.76,9.76s-4.465,8.877-9.76,9.76c-19.312,3.221-38.621,3.606-57.932,0c-5.277-0.985-9.76-4.392-9.76-9.76
        S488.039,464.122,493.407,464.122z"/>
</g>
<g id="ball">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M468.884,437.882c26.27,0,47.695-21.426,47.695-47.695
        c0-26.271-21.426-47.696-47.695-47.696c-26.27,0-47.696,21.425-47.696,47.696C421.188,416.456,442.614,437.882,468.884,437.882z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M570.778,437.882c26.27,0,47.696-21.426,47.696-47.695
        c0-26.271-21.427-47.696-47.696-47.696s-47.695,21.425-47.695,47.696C523.083,416.456,544.509,437.882,570.778,437.882z"/>
</g>
<g id="pupils">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M451.595,401.474c10.698,0,19.423-8.726,19.423-19.423
        s-8.726-19.422-19.423-19.422s-19.423,8.725-19.423,19.422S440.897,401.474,451.595,401.474z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M554.306,401.474c10.698,0,19.423-8.726,19.423-19.423
        s-8.725-19.422-19.423-19.422c-10.697,0-19.423,8.725-19.423,19.422S543.608,401.474,554.306,401.474z"/>
</g>
</svg>
 



[TOPIC: post.html]
#45

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

The ID looks very useful indeed I must admit, but... XML NOOOOO! I hate XML with a passion :)

This is gonna have to wait though, I've already spent more time on it than I'd planned, and I have a backlog of stuff to finish before my trip, so unless someone else does it, progress might well have to wait until the middle of November (I'm back before then but I'll have plenty to do then, and it is the deadline for the Corona G2 compo the 14th, so I'll definitely be busy until then).



[TOPIC: post.html]
#46

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 257 posts
  • Corona SDK

Brilliant work @rakoonic. Thanks for your generous time. Good luck with the comp!

 

kilopop

www.yoozoobooks.com



[TOPIC: post.html]
#47

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Also, a very simple solution to the open polygon problem just occurred to me - instead of trying to do it in 1 shape, you do it in two - one is the fill without border, and the other is the border done as a line. So, a solution does indeed exist for that.



[TOPIC: post.html]
#48

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 257 posts
  • Corona SDK

Yes, just a bit order to the Illustrator files will do it. No boolean means some think arounds as well at time of drafting in Illustrator. Objects on new layers - line, fill..

Object id would be useful for animation and effects..

Could the illustrator plugin drawscri that generates the .json tweak drawscri to output ids?

Or could .svgs be converted into .json?

Found this link:

http://petesaia.com/2011/11/svg-to-json/



[TOPIC: post.html]
#49

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

No, I waas referring to the fact that the importer could do it automatically - when it determines a shape is like this, it splits it into 2. I imagine most people aren't going to want object-level control particularly on the imported stuff, so it makes sense to keep the workflow within Illustrator or whatever as close to normal as possible and let the importer do the hard work.

 

 

As for the SVG format, I'd have to spend time looking at it - obviously the format is a bit more complicated than the JSON (which leaves stuff out - did you notice that there are no gradient fills in the JSON one? This is actually something you can almost certainly do in Corona now, and would be rather useful to get in).

 

The bottom line is I started with JSON because it was the easiest to understand, but I kinda figured it wasn't going to be the most useful one. What we have now is proof of concept, but it still remains to be seen when I'll have time to actually get SVG import in. The first thing I'd have to do I imagine is find a detailled breakdown of the SVG format but I doubt that's tricky, there are probably docs floating around the intrawebs.



[TOPIC: post.html]
#50

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

@kilopop - sorry, somehow the first time I read your last message I didn't see that link. Just opened it up now. It looks... short. I'm not sure what it actually does to be honest, as I've zero skill in regular expressions. But might be a starting place. I *think* though that lua has an XML import library no? If so, that would go a long way to simplifying things as well.




[topic_controls]
Page 2 of 3 1 2 3
 
[/topic_controls]