Vector Drawing, Shadowing, Masking, Coloring strategy

Knot-related Computing
1

i still play around drawing knots; but am not artist, so try computer calculated vector type drawing.
i think some of these strategies would also lend to other mediums.

Many pieces of the whole strategy available: photochop type layering, masking, shadow/filtering etc.
Vector part of build leaning more towards: Illustrator, gimp, inkscape etc.

For correct depth shadows, i use a constant black glowFilter; allowing it to disappear over black background:

leaving only shadows where lines cross themselves / other lines (or objects).

For rounded appearances i use another glowFilter set to innerGlow

also intersect it’s 12 px shadowing coming fr0m both sides of 16px line

For best computer calculating i set line size to 16 pixels, outer glowFilter to 8px, inner glowFilter to 12px

maintain even # sizes, favouring powers of 2>> found much less error on reSize due to less decimals division/rounding!!!

For colors; i start all lines WHITE. Then on top layer (for most flexibility) i subtract colors from the white, to leave desired color

Starting from raw WHITE, make object and give BLACK inner/outer glows (use glow as shadowing), remove RED and BLUE from rgb:WHITE would leave GREEN and BLACK shadowing.

Once set-up, can copy completed object, duplicate to new object, and drill to raw line and adjust, rest is automated.

This also goes for animating same in Flash etc.; once layer package built, manipulate only raw line

Worst part is when vector crosses self on same layer, the lines join.

so have to mask, chop, piece elements crossing self.

i seriously degraded the quality of these pix for faster downloading

In some pix a white background is partially shown: highlighting that external shadows are always there, and disappear over black.
where ORANGE lines are seen in pix_a,b,c, is only for visibility here; in actual use raw lines are WHITE (as in pix_d,e,f…)

2

draw_a_raw_vector_handles.png
Shows blue vector line and blue adjustment handles, when far right vector point is chosen.
16pixel size line very evenly divisible several times on resizing, before goes to dividing decimals, eventual over run/rounding calc err
Line shows orange to see easier, but really use white at raw layer
You bend the arms at the points, to curve, add points etc.
This becomes the base object
The next steps can be combined on 1 layer>> but then can limit ease of future editing!

draw_b_glowFilters_innerRound_outerShadows.png
Shows the previous raw vector saved as an object, then glows for even shadowing(shadowFilter would favor angled shadows) applied.
stay to round numbers, let black on black cancel shadows where they shouldn’t be>> only show shadows on lower intersection object
inner shadow is 12px from each side on 16px line for intersection shadowing

draw_c_object_over_clippingMasks.png
is masking/clipping layer for the shadowed objects. Will show the rope object under yellow mask, then grey mask, then red mask, in different main stage layers; to show going around self, other objects etc. by then manipulating the layers.
Working like this, if need to change 1 of the objects, would need to change all 3; being that they all contain the same object, just different masks, you’d change that 1 object, and they’d all line up again!

draw_d_objectWhite_revealsUnder_yellowMask_nextBelow_greyMask.png
same layer, white rope with shadowing now under yellow mask to only reveal until hits grey/red masks
(grey/red showing here only for example; usually wouldn’t see)
This masking layer is an object on scene 1:main stage, then ext object on the main stage will be this same object, only with rope under grey mask etc.
black/white background change once again shows how external shadows always present, just not seen on black

draw_e_startWhite_removeBlueRed_leavesGreen_shadowBlacks.png
White raw item, shadowed, masked, then colors RED and BLUE removed from white, leaving green and also the black shadowing.
3 objects on main stage: Different masked objects of same raw vector white artwork, added glowFilters

draw_f_startWhite_removeRed_leavesYellow.png
same 3 objuecs copied, flipped horizontally and then layered correctly
remove red from white rgb, leaves gb/green-blue=yellow; shadowing and masking all same

draw_g_startWhite_removeGrn_leavesPurp_fadeAlpha.png
similar + shows alpha(visibility) 50%, real color purple is there 50% alpha purple + 50% alpha purple = real purple of white - green

draw_h_vectorMath_accurate_to19x_here.png
starting from a vector base/ authoring environment, gives greater accuracy, almost Zer0 pixelation or err at source level
This shows a blow up of pic 19x, shadow miscalcualtions (on this particular example) start after that
still quite impressive compaired to bitmap/common graphics.

3

software? operating system?

4

This is made on Flash launched from win7
but the strategies should hold up for mainstream vector and/or layering/shading etc. programs that are cross-platform.

ie. Flash, Photoshop, Illustrator, inkscape, gimp etc. authoring environments on win/linux/apple outputting universal .png, .jpg some .swf etc.

5

Your drawings are gorgeous, TreeSpyder,

I would like to point out just two things : First, in order to draw smoother, good-looking curved paths / splines, it is better if you minimize the number of control points / knots.

" Splines are curves, which are usually required to be continuous and smooth. Splines are usually defined as piecewise polynomials of degree n with function values and first n-1 derivatives that agree at the points where they join. The abscissa values of the join points are called knots. The term “spline” is also used for polynomials (splines with no knots) and piecewise polynomials with more than one discontinuous derivative. As such, splines with no knots are generally smoother than splines with knots, which are generally smoother than splines with multiple discontinuous derivatives. Splines with few knots are generally smoother than splines with many knots; "
"… the ideas [ of splines ] have their roots in the aircraft and shipbuilding industries. "
"…“lofting”, a technique used in the British aircraft industry during World War II to construct templates for airplanes by passing thin wooden strips (called “splines”) through points laid out on the floor of a large design loft, a technique borrowed from ship-hull design. For years the practice of ship design had employed models to design in the small. The successful design was then plotted on graph paper and the key points of the plot were re-plotted on larger graph paper to full size. The thin wooden strips provided an interpolation of the key points into smooth curves. The strips would be held in place at discrete points (using lead weights, called “ducks”… and between these points would assume shapes of minimum strain energy.
“…one possible impetus for a mathematical model for this process was the potential loss of the critical design components for an entire aircraft should the loft be hit by an enemy bomb. This gave rise to “conic lofting”, which used conic sections to model the position of the curve between the ducks. Conic lofting was replaced by what we would call splines in the early 1960s.”
"The word “spline” was originally in an East Anglian dialect. "

Second, the time may be ripe to move to a virtual 3D representation of knots. One possible way to do this, is to start from pictures of a knot taken from many sides, then make virtual reality “clouds” of points located on the surface of the rope : a very easy, and free, way, is to use the 3D modelling software 123D, by Autodesk.
http://www.123dapp.com/

6

just a small addition showing more clearly the sharp accuracy of Vector graphics when zoomed.
This shows 40x magnification, and reveals only more sharpness, not the standard bitmap pixelation.
The blue rope still starts out as the white plus inner shadowing to give roundness,
i just subtracted red and green from the white, to leave the clear blue, and not touch the black shadowing.
The ropes all have a shadow glow outside too of black, doesn’t show on black background.
So, this cheat allows shadows to only fall properly to give depth, when crossing over nonBlack area/ another item.