Skip to content

Instantly share code, notes, and snippets.

@nanjizal

nanjizal/DrawMitre2.hx

Created July 21, 2024 01:36
Show Gist options
  • Save nanjizal/6c41a2bc31575be48a2247bcbab37b18 to your computer and use it in GitHub Desktop.
Save nanjizal/6c41a2bc31575be48a2247bcbab37b18 to your computer and use it in GitHub Desktop.
Download ZIP
Mitre Gradients.
Raw
DrawMitre2.hx
package cornerContour._application;
import starling.rendering.IndexData;
import starling.rendering.VertexData;
import openfl.display.Sprite;
import openfl.events.Event;
import openfl.display.Graphics;
import openfl.display.BitmapData;
import openfl.geom.Vector3D;
// contour code
import cornerContour.Sketcher;
import cornerContour.Pen2D;
import cornerContour.SketcherGrad;
import cornerContour.Pen2DGrad;
import cornerContour.StyleSketch;
import cornerContour.StyleEndLine;
import cornerContour.color.ColorHelp;
// SVG path parser
import justPath.*;
import justPath.transform.ScaleContext;
import justPath.transform.ScaleTranslateContext;
import justPath.transform.TranslationContext;
/*
import pi_xy.formats.StarlingTexture.toStarlingQuad;
import pi_xy.Pixelimage;
import pi_xy.formats.Format;
import pi_xy.triangleGML.TriangleGML;
*/
import starling.core.Starling;
import openfl.display.Bitmap;
import openfl.display3D.Context3DRenderMode;
import openfl.errors.Error;
import openfl.geom.Rectangle;
import openfl.system.Capabilities;
import openfl.system.System;
import openfl.display.StageScaleMode;
import openfl.utils.Assets;
import openfl.utils.ByteArray;
import openfl.Vector;
import haxe.Timer;
import starling.core.Starling;
import starling.display.Stage;
import starling.events.Event;
import starling.text.BitmapFont;
import starling.text.TextField;
import starling.textures.Texture;
import starling.textures.TextureAtlas;
import starling.assets.AssetManager;
import starling.utils.Max;
import starling.utils.RectangleUtil;
import starling.utils.StringUtil;
import starling.display.Mesh;
function main(): Void { openfl.Lib.current.addChild( new TestStarling() ); }
class TestStarling extends Sprite {
var _starling:Starling;
public function new(){
super();
if (stage != null) start();
else addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
function onAddedToStage(event:Dynamic): Void {
removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
stage.scaleMode = StageScaleMode.NO_SCALE;
start();
}
function start(): Void {
Starling.multitouchEnabled = true; // for Multitouch Scene
_starling = new Starling(Game, stage, null, null, Context3DRenderMode.AUTO, "auto");
_starling.stage.stageWidth = 1024;
_starling.stage.stageHeight = 768;
_starling.enableErrorChecking = Capabilities.isDebugger;
_starling.skipUnchangedFrames = true;
_starling.supportBrowserZoom = true;
_starling.supportHighResolutions = true;
_starling.antiAliasing = 16;
_starling.simulateMultitouch = true;
_starling.addEventListener(Event.ROOT_CREATED, function(): Void {
//loadAssets(startGame);
startGame();
});
this.stage.addEventListener(Event.RESIZE, onResize, false, Max.INT_MAX_VALUE, true);
_starling.start();
}
function startGame(): Void {
var game:Game = cast(_starling.root, Game);
game.start();
//Timer.delay(removeElements, 150); // delay to make 100% sure there's no flickering.
}
function onResize( e: openfl.events.Event ): Void {
var viewPort:Rectangle = RectangleUtil.fit( new Rectangle(0, 0, 1024, 768), new Rectangle(0, 0, stage.stageWidth, stage.stageHeight));
try { this._starling.viewPort = viewPort; }
catch( error: Error ) {}
}
}
@:keep class Game extends starling.display.Sprite {
var pen2D: Pen2D;
var sketcher: Sketcher;
var pen2DGrad: Pen2DGrad;
var sketcherGrad: SketcherGrad;
var vertexData = new VertexData("position:float2, alpha:float1, color:bytes4");//texCoords:float2,
var indexData = new IndexData();
public function new() {
super(); // nothing to do here -- Startup will call "start" immediately.
}
public function start(): Void {
vertexData.premultipliedAlpha = true;
vertexData.updateTinted("color");
drawContours();
var startI = rearrageDrawData( 0 );
rearrageGradientDrawData( startI );
var mesh:Mesh = new Mesh( vertexData, indexData );
addChild( mesh );
}
public
function drawContours(){
trace( 'drawContours' );
pen2D = new Pen2D( 0xFF0000FF );
pen2DGrad = new Pen2DGrad( 0xFFDD4993, 0xFF497BC0, 0xFF8ACE53 );
pen2DGrad.currentColor = 0xFF0000FF;
pen2DGrad.colorB = 0xFF00FF00;
pen2DGrad.colorC = 0xFF0000FF;
/*arcSVG();
pen2D.currentColor = 0xff0000FF;
birdSVG();
cubicSVG();
pen2D.currentColor = 0xa0ff3300;
quadSVG();
pen2D.currentColor = 0xff00ff84;*/
var sketcherG = new SketcherGrad( pen2DGrad, StyleSketch.Mitre, StyleEndLine.both );
sketcherG.width = 20;
var sketcher = new Sketcher( pen2D, StyleSketch.Mitre, StyleEndLine.both );
sketcher.width = 20;
addJoinTestForwards( sketcher, 100., 0. );
addJoinTestForwards( sketcherG, 0., 0. );
pen2DGrad.colorB = 0xFFCC00FF;
pen2DGrad.currentColor = 0xFFFF9900;
sketcherG.mitreLimit = 6;
sketcherG.width = 15;
addJoinTestForwards( sketcherG, 220, 10 );
}
public
function rearrageDrawData( startI: Int = 0 ){
trace( 'rearrange draw data for Pen2D' );
var pen = pen2D;
var data = pen.arr;
var totalTriangles = Std.int( data.size/7 );
var i = startI;
var j = 0;
if( i != 0 ) j = Std.int( i/3 );
var color: Int = 0;
var alpha: Float = 0;
for( p in 0...totalTriangles ){
pen.pos = p;
color = Std.int( data.color );
alpha = getAlpha( data.color );
j = i;
vertexData.setPoint( i, "position", data.ax, data.ay );
vertexData.setColor( i, "color", color );
vertexData.setAlpha( i, "alpha", alpha );
i++;
vertexData.setPoint( i, "position", data.bx, data.by );
vertexData.setColor( i, "color", color );
vertexData.setAlpha( i, "alpha", alpha );
i++;
vertexData.setPoint( i, "position", data.cx, data.cy );
vertexData.setColor( i, "color", color);
vertexData.setAlpha( i, "alpha", alpha );
i++;
indexData.addTriangle( j, j+1, j+2 );
}
return i;
}
public
function rearrageGradientDrawData( startI: Int = 0 ){
trace( 'rearrange gradient draw data for Pen2DGrad' );
var pen = pen2DGrad;
var data = pen.arr;
var totalTriangles = Std.int( data.size/9 );
var i = startI;
var j = 0;
if( i != 0 ) j = Std.int( i/3 + 1 );
var colorA: Int = 0;
var alphaA: Float = 0.;
var colorB: Int = 0;
var alphaB: Float = 0.;
var colorC: Int = 0;
var alphaC: Float = 0.;
for( p in 0...totalTriangles ){
pen.pos = p;
colorA = Std.int( data.colorA );
alphaA = getAlpha( data.colorA );
colorB = Std.int( data.colorB );
alphaB = getAlpha( data.colorB );
colorC = Std.int( data.colorC );
alphaC = getAlpha( data.colorC );
j = i;
vertexData.setPoint( i, "position", data.ax, data.ay );
vertexData.setColor( i, "color", colorA );
vertexData.setAlpha( i, "alpha", alphaA );
trace( colorA );
i++;
vertexData.setPoint( i, "position", data.bx, data.by );
vertexData.setColor( i, "color", colorB );
trace( colorB );
vertexData.setAlpha( i, "alpha", colorB );
i++;
vertexData.setPoint( i, "position", data.cx, data.cy );
vertexData.setColor( i, "color", colorC );
vertexData.setAlpha( i, "alpha", alphaC );
trace( colorC );
i++;
indexData.addTriangle( j, j+1, j+2 );
}
return i;
}
function addJoinTestForwards( sketcher: Sketcher, ox: Float, oy: Float ){
// forwards
sketcher.moveTo( 200, 432 );
sketcher.moveTo( 200+ox, 430+oy );
//
sketcher.lineTo( 700+ox, 450+oy );
sketcher.lineTo( 700+ox, 700+oy );
sketcher.lineTo( 450+ox, 750+oy);
sketcher.lineTo( 450+ox, 700+oy );
sketcher.lineTo( 370+ox, 50+oy);
sketcher.lineTo( 300+ox, 300+oy);
sketcher.lineTo( 200+ox, 50+oy);
sketcher.lineTo( 150+ox, 450+oy );
sketcher.moveTo( 0.,0. ); // required to make it put endCap
}
/**
* draws Kiwi svg
*/
public
function birdSVG(){
var sketcher = new Sketcher( pen2D, StyleSketch.Fine, StyleEndLine.both );
sketcher.width = 2;
var scaleTranslateContext = new ScaleTranslateContext( sketcher, 20, 0, 1, 1 );
var p = new SvgPath( scaleTranslateContext );
p.parse( kiwi_d );
}
/**
* draws cubic SVG
*/
public
function cubicSVG(){
var sketcher = new Sketcher( pen2D, StyleSketch.Fine, StyleEndLine.both );
sketcher.width = 10;
// function to adjust color of curve along length
sketcher.colourFunction = function( colour: Int, x: Float, y: Float, x_: Float, y_: Float ): Int {
return Math.round( colour-1*x*y );
}
var translateContext = new TranslationContext( sketcher, 50, 200 );
var p = new SvgPath( translateContext );
p.parse( cubictest_d );
}
/**
* draws quad SVG
*/
public
function quadSVG(){
var sketcher = new Sketcher( pen2D, StyleSketch.Medium, StyleEndLine.both );
sketcher.width = 10;
sketcher.colourFunction = function( colour: Int, x: Float, y: Float, x_: Float, y_: Float ): Int {
return colorIntAlpha( 0xFfaa00 , Std.random(0xFF) );
}
// function to adjust width of curve along length
sketcher.widthFunction = function( width: Float, x: Float, y: Float, x_: Float, y_: Float ): Float{
return width+0.008*2;
}
var translateContext = new ScaleTranslateContext( sketcher, 0, 100, 0.5, 0.5 );
var p = new SvgPath( translateContext );
p.parse( quadtest_d );
}
/**
* draws elipse arcs
*/
public
function arcSVG(){
var arcs0 = [ arc0_0, arc0_1, arc0_2, arc0_3 ];
var arcs1 = [ arc1_0, arc1_1, arc1_2, arc1_3 ];
var arcs2 = [ arc2_0, arc2_1, arc2_2, arc2_3 ];
var arcs3 = [ arc3_0, arc3_1, arc3_2, arc3_3 ];
var arcs4 = [ arc4_0, arc4_1, arc4_2, arc4_3 ];
var arcs5 = [ arc5_0, arc5_1, arc5_2, arc5_3 ];
var arcs6 = [ arc6_0, arc6_1, arc6_2, arc6_3 ];
var arcs7 = [ arc7_0, arc7_1, arc7_2, arc7_3 ];
var pallet = [ silver, gainsboro, lightGray, crimson ];
var x0 = 130;
var x1 = 450;
var yPos = [ -30, 100, 250, 400 ];
var arcs = [ arcs0, arcs1, arcs2, arcs3, arcs4, arcs5, arcs6, arcs7 ];
for( i in 0...yPos.length ){
drawSet( arcs.shift(), pallet, x0, yPos[i], 0.5 );
drawSet( arcs.shift(), pallet, x1, yPos[i], 0.5 );
}
}
// draws a set of svg ellipses.
function drawSet( arcs: Array<String>, col:Array<Int>, x: Float, y: Float, s: Float ){
for( i in 0...arcs.length ) draw_d( arcs[ i ], x, y, s, 1., col[ i ] );
}
// draws an svg ellipse
function draw_d( d: String, x: Float, y: Float, s: Float, w: Float, color: Int ){
pen2D.currentColor = color;
var sketcher = new Sketcher( pen2D, StyleSketch.Fine, StyleEndLine.both );
sketcher.width = w;
var trans = new ScaleTranslateContext( sketcher, x, y, s, s );
var p = new SvgPath( trans );
p.parse( d );
}
}
// elipses
var crimson = 0xFFDC143C;
var silver = 0xFFC0C0C0;
var gainsboro = 0xFFDCDCDC;
var lightGray = 0xFFD3D3D3;
var arc0_0 = "M 100 200 A 100 50 0.0 0 1 250 150";
var arc0_1 = "M 100 200 A 100 50 0.0 1 0 250 150";
var arc0_2 = "M 100 200 A 100 50 0.0 1 1 250 150";
var arc0_3 = "M 100 200 A 100 50 0.0 0 0 250 150";
var arc1_0 = "M 100 200 A 100 50 0.0 0 0 250 150";
var arc1_1 = "M 100 200 A 100 50 0.0 1 0 250 150";
var arc1_2 = "M 100 200 A 100 50 0.0 1 1 250 150";
var arc1_3 = "M 100 200 A 100 50 0.0 0 1 250 150";
var arc2_0 = "M 100 200 A 100 50 -15 0 0 250 150";
var arc2_1 = "M 100 200 A 100 50 -15 0 1 250 150";
var arc2_2 = "M 100 200 A 100 50 -15 1 1 250 150";
var arc2_3 = "M 100 200 A 100 50 -15 1 0 250 150";
var arc3_0 = "M 100 200 A 100 50 -15 0 0 250 150";
var arc3_1 = "M 100 200 A 100 50 -15 0 1 250 150";
var arc3_2 = "M 100 200 A 100 50 -15 1 0 250 150";
var arc3_3 = "M 100 200 A 100 50 -15 1 1 250 150";
var arc4_0 = "M 100 200 A 100 50 -44 1 0 250 150";
var arc4_1 = "M 100 200 A 100 50 -44 0 1 250 150";
var arc4_2 = "M 100 200 A 100 50 -44 1 1 250 150";
var arc4_3 = "M 100 200 A 100 50 -44 0 0 250 150";
var arc5_0 = "M 100 200 A 100 50 -44 0 0 250 150";
var arc5_1 = "M 100 200 A 100 50 -44 1 1 250 150";
var arc5_2 = "M 100 200 A 100 50 -44 1 0 250 150";
var arc5_3 = "M 100 200 A 100 50 -44 0 1 250 150";
var arc6_0 = "M 100 200 A 100 50 -45 0 0 250 150";
var arc6_1 = "M 100 200 A 100 50 -45 0 1 250 150";
var arc6_2 = "M 100 200 A 100 50 -45 1 1 250 150";
var arc6_3 = "M 100 200 A 100 50 -45 1 0 250 150";
var arc7_0 = "M 100 200 A 100 50 -45 0 0 250 150";
var arc7_1 = "M 100 200 A 100 50 -45 0 1 250 150";
var arc7_2 = "M 100 200 A 100 50 -45 1 0 250 150";
var arc7_3 = "M 100 200 A 100 50 -45 1 1 250 150";
var quadtest_d = "M200,300 Q400,50 600,300 T1000,300";
var cubictest_d = "M100,200 C100,100 250,100 250,200S400,300 400,200";
// kiwi bird
var kiwi_d = "M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331zM445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111C434.693,207.929,439.613,203.01,445.731,203.01z";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment