http://thonbo.com/WIGGLE/wiggle.html
efter jeg så artmos postede en tut om perlinNoise - slog det mig at jeg havde lavedet en lignene wiggle motion class som jeg lavede i inspiration fra grant skinners grass movement som vi skulle bruge på et project med fly turbolens -
da jeg havde muligheden for at lave det på 3 måder skrev jeg til skinner for at finde ud af hvilken var den mest optimale og her derfor lavet classen ud fra hans forslag
smoke effect stammer også fra perlin noise med displacement men er lagt på som lir -
hele effecten ligger i wiggle motion som er extracted fra perlinNoise farverne gennem byteArray
wiggle class brugt på sas jule website i kombination med Box2D gravity engine
http://thonbo.com/WIGGLE/giftAnim_small.html
Wiggle class:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | package { import flash.events.Event; import flash.display.Sprite; import flash.display.BitmapData; import flash.utils.ByteArray; import flash.geom.Point; public class Wiggle { public var perlinSize:Number; public var roughNess:Number; public var looping:Boolean; public var fractal:Boolean; public var combined:Boolean; public var perlinData:BitmapData; public static var valueArray:ByteArray; public var pixelValue:uint; public var rValue:Number; public var gValue:Number; public var bValue:Number; public var aValue:Number; public function makePattern(perlinSize:Number, roughNess:Number, fractal:Boolean = false, looping:Boolean = true, combined:Boolean = false):ByteArray { perlinData = new BitmapData(2880, 1, false, 0x808080); perlinData.perlinNoise(perlinSize, 1, roughNess, Math.random()*1000, looping, fractal, BitmapDataChannel.RED | BitmapDataChannel.BLUE | BitmapDataChannel.GREEN | BitmapDataChannel.ALPHA, combined, null); valueArray = perlinData.getPixels(perlinData.rect); valueArray.position = 0; return valueArray; } public function getPoint(bArray):Point { var thisPoint:Point = new Point(); pixelValue = bArray.readUnsignedInt(); aValue = pixelValue >> 32 & 0xFF; rValue = pixelValue >> 16 & 0xFF; gValue = pixelValue >> 8 & 0xFF; bValue = pixelValue & 0xFF; thisPoint.x = rValue; thisPoint.y = gValue; if (bArray.position >= bArray.length) { bArray.position = 0; } return thisPoint; } public get redValue():Number{ return rValue } public get greenValue():Number{ return gValue } public get blueValue():Number{ return bValue } public get alphaValue():Number{ return aValue } } } |
for at bruge classen:
init:
1 2 3 4 5 6 7 | var bytes:ByteArray thePerlinValue = new Wiggle(); //makePattern(perlinSize:Number, roughNess:Number, fractal:Boolean = false, looping:Boolean = true, combined:Boolean = false) bytes = thePerlinValue.makePattern(10, 2, false, true, false); |
on loop (ei. enterframe) skriver man
1 2 3 | movePoint = thePerlinValue.getPoint(bytes); trace(movePoint) // 127, 190 or something |
4 kommentarer
Super cool - og fedt at se at der rent faktisk er nogen som kan finde ud af at starte på juletingene i god tid, det burde jo ikke komme bag på nogen at den kommer hvert år
/Mads
www.omflash.dk || www.semor.dk
Ja det er rigtigt sejt. Det skal jeg vist liiige bruge i en produktion jeg sidder med
det er skam fra sidst års produktion
update: nu er byteArray'et indbyttet da classen nu extender byteArray
har rettet classen lidt til så man bare kan kalde
wigglePattern = new Wiggle()
og så i loopet:
_ball.x = wigglePattern.xValue
wigglePattern.newValues()
man er selvfølgelig ikke tvunget til at bruge xValue da alle x y z og w er random og stammer fra rgba farvekoder
og til papervision har jeg lavet et Number3D object så man kan sige
mySphere.position = wigglePattern.point3D
*edit har justeret kontrasten på det pattern der bliver lavet så værdierne giver et mere naturligt udsving
arbejder på at lave kontrast værdien dynamisk - tror jeg ender med at bruge en tweener til dette
i fremtidig version vil jeg gør sådan så man kan modtage next value og evt multiple values som feks
xMultiValue(steps:20):Array() // hvilket ville kunne returnere den nuværende x og de næste 20 værdier