gradients

multipart project 3
part 4 of, I don't know, like 5

Background:
I think the matrix argument to beginGradientFill is not well understood by the public.

Task:
- make something to play around with it.
- make sure it's intuitive

red is first column of matrix
blue is second column of matrix

by wh0 18 Oct 2010

Tags

gradient matrix
Embed

/**
 * Copyright wh0 ( http://wonderfl.net/user/wh0 )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/jtRy
 */

package {
    import flash.display.*;
    import flash.events.*;
    import flash.geom.*;
    public class FlashTest extends Sprite {
        
        private static const s:Number = 10. / 0x4000 * 2;
        private static const c:Array = [0x000000, 0xffffff];
        private static const a:Array = [1, 1];
        private static const r:Array = [0, 255];
        
        private const m:Matrix = new Matrix();
        private var o:Dot;
        private var v0:Dot;
        private var v1:Dot;
        private var ox:Number = stage.stageWidth / 2;
        private var oy:Number = stage.stageHeight / 3;
        
        public function FlashTest() {
            addChild(o = new Dot(ox, oy));
            addChild(v0 = new Dot(ox + 200, oy));
            addChild(v1 = new Dot(ox, oy + 200));
            o.addEventListener(Dot.MOVE, recalc);
            v0.addEventListener(Dot.MOVE, recalc);
            v1.addEventListener(Dot.MOVE, recalc);
            recalc();
        }
        
        private function recalc(e:Event=null):void {
            if (e && e.target == o) {
                v0.x += o.x - ox;
                v0.y += o.y - oy;
                v1.x += o.x - ox;
                v1.y += o.y - oy;
                ox = o.x;
                oy = o.y;
            }
            m.tx = o.x;
            m.ty = o.y;
            m.a = s * (v0.x - o.x);
            m.b = s * (v0.y - o.y);
            m.c = s * (v1.x - o.x);
            m.d = s * (v1.y - o.y);
            graphics.clear();
            graphics.beginGradientFill(GradientType.RADIAL, c, a, r, m, SpreadMethod.PAD, InterpolationMethod.RGB, 0.75);
            graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
            graphics.endFill();
            graphics.lineStyle(0, 0xff0000);
            graphics.moveTo(o.x, o.y);
            graphics.lineTo(v0.x, v0.y);
            graphics.lineStyle(0, 0x0000ff);
            graphics.moveTo(o.x, o.y);
            graphics.lineTo(v1.x, v1.y);
        }
        
    }
}

import flash.display.*;
import flash.events.*;
internal class Dot extends Sprite {
    
    public static const MOVE:String = 'Dot.MOVE';
    
    public function Dot(x:Number, y:Number) {
        this.x = x;
        this.y = y;
        graphics.lineStyle(0, 0xc0c0c0);
        graphics.beginFill(0xffffff);
        graphics.drawCircle(0, 0, 3.5);
        addEventListener(Event.ADDED_TO_STAGE, addedToStage);
    }
    
    private function addedToStage(e:Event):void {
        removeEventListener(Event.ADDED_TO_STAGE, addedToStage);
        addEventListener(MouseEvent.MOUSE_DOWN, mousedown);
        stage.addEventListener(MouseEvent.MOUSE_UP, mouseup);
    }
    
    private function mousedown(e:MouseEvent):void {
        startDrag();
        stage.addEventListener(MouseEvent.MOUSE_MOVE, mousemove);
    }
    
    private function mouseup(e:MouseEvent):void {
        stopDrag();
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, mousemove);
    }
    
    private function mousemove(e:MouseEvent):void {
        dispatchEvent(new Event(MOVE));
    }
    
}