1,955

Plays

1

Reviews

100%

Like It

2

Comments

Fly Lines

by si99

Description

Low key drawing app.

Click to control colour and brush size, then to draw. Super simple.

2 Comments

si99
Sorry for delay - didn't notice your question.

I had a global array (lines), and this was in a code block in the core draw loop (i just had a "foreach item in lines" block around it):

var bits:Array<String> = Std.string(item).split(";" ;);
var width:Float = Std.parseFloat(bits[0]);
var start:Array<String> = bits[1].split(",");
var end:Array<String> = bits[2].split(",");
var colours:Array<String> = bits[3].split(",");

var halfWidth:Int = Std.int(width/2.0);
var qtrWidth:Int = Std.int(width/4.0);
var eWidth:Int = Std.int(width/8.0);

g.strokeColor = Utils.getColorRGB(Std.parseInt(colo urs[0]),Std.parseInt(colours[1]),St d.parseInt(colours[2]));
g.fillColor = Utils.getColorRGB(Std.parseInt(colo urs[0]),Std.parseInt(colours[1]),St d.parseInt(colours[2]));
g.strokeSize = Std.int(width);
g.drawLine(Std.parseFloat(start[0]) , Std.parseFloat(start[1]), Std.parseFloat(end[0]), Std.parseFloat(end[1]));

// square out the ends
g.strokeSize = 1;

var width2:Float = Math.sqrt(Math.pow(width, 2) Math.pow(width,2))/2;
var x1:Float = Std.parseFloat(start[0]), y1:Float = Std.parseFloat(start[1]);
var x2:Float = Std.parseFloat(end[0]), y2:Float = Std.parseFloat(end[1]);
var angle:Float = Math.atan2(y2-y1, x2-x1);

g.beginFillPolygon();
g.addPointToPolygon(x1 width2*Math.cos(angle-0.25*Math.PI) , y1 width2*Math.sin(angle-0.25*Math.PI) );
g.addPointToPolygon(x1 width2*Math.cos(angle 0.25*Math.PI), y1 width2*Math.sin(angle 0.25*Math.PI));
g.addPointToPolygon(x1 width2*Math.cos(angle 0.75*Math.PI), y1 width2*Math.sin(angle 0.75*Math.PI));
g.addPointToPolygon(x1 width2*Math.cos(angle 1.25*Math.PI), y1 width2*Math.sin(angle 1.25*Math.PI));
g.endDrawingPolygon();

g.beginFillPolygon();
g.addPointToPolygon(x2 width2*Math.cos(angle-0.25*Math.PI) , y2 width2*Math.sin(angle-0.25*Math.PI) );
g.addPointToPolygon(x2 width2*Math.cos(angle 0.25*Math.PI), y2 width2*Math.sin(angle 0.25*Math.PI));
g.addPointToPolygon(x2 width2*Math.cos(angle 0.75*Math.PI), y2 width2*Math.sin(angle 0.75*Math.PI));
g.addPointToPolygon(x2 width2*Math.cos(angle 1.25*Math.PI), y2 width2*Math.sin(angle 1.25*Math.PI));
g.endDrawingPolygon();

So, pretty simple stuff. Draw a line of the desired size. Then draw a square, rotated to the angle of the line, at each end (so you get square ended lines, by default they're round-ended, which looks pretty naff)

So, each element in lines is a text string, width;startX,startY;endX,endY;colou rIndex - first split by ; then split positions by , - very simple

a global array colours just stores all the possible colours, with colourIndex being an index to that array (again, dirt simple).

only catch with this is it's horribly heavy duty if you draw too much. I haven't (yet) figured out how NOT to have to redraw the whole thing every frame, even if it's not changing. So, that's more intense than it should be.
1 10 years, 5 months ago