Category Archives: Graphics

Hermit Crab Curve as PRNG

(a deterministic pseudo-random number generator with contrast and smoothness - inspired by stochastic and organic randomness)

By Zevan | July 23, 2018

Around 2015 I had the idea for a PRNG that would clamp itself and have moments of “smoothness”. When I got around to trying to create such a thing, the result was something I jokingly called the “Hermit Crab Curve”. I also called it the “Shard Curve”.

The equation for the curve defines a radius in polar coordinates:

Where a and d are paramters that control the detail of the curve. o is a rotation and offset value for the angle and s is a scalar. Note the use of rem. The resulting curve is much less interesting if a standard modulo is used in place of a remainder:

The above variable values were found using this interactive version of the equation:

To illustrate how you might use this as a PRNG I created this fork of the above pen:

That, in combination with the information from my other article from yesterday… Should be enough to see what I mean.


You can read the original description of the Hermit Crab Curve that I created using ArcType here:

http://zevanrosser.com/arctype-dev/hermit-crab-curve.html

If you end up using this for something interesting let me know. I’d love to see it :D

Also posted in Math, functions, graphics algorithms, javascript, misc, motion | Tagged , , | Leave a comment

Gumowski/Mira Pseudo-Soundwave

By Zevan | June 30, 2012
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 600)]
  2. var a:Number = 0.02;
  3. var b:Number = .9998;
  4.  
  5. var xn1:Number = 5;
  6. var yn1:Number = 0;
  7. var xn:Number, yn:Number;
  8.  
  9. var scale:Number = 10;
  10. var iterations:Number = 20000;
  11. var step:Number = stage.stageWidth / iterations;
  12.  
  13. function f(x:Number):Number{
  14.     var x2:Number = x * x;
  15.     return a * x + (2 * (1 - a) * x2) / (1 + x2);
  16. }
  17.  
  18. var canvas:BitmapData = Bitmap(addChild(new Bitmap(new BitmapData(600,600,false,0xEFEFEF)))).bitmapData;
  19.  
  20. var circle = new Sprite();
  21. with(circle.graphics) beginFill(0, 0.3), drawCircle(2,2,1);
  22.  
  23. var dot:BitmapData = new BitmapData(4,4,true, 0x00000000);
  24. dot.draw(circle);
  25.  
  26. var pnt:Point = new Point();
  27.  
  28. var txt:TextField = TextField(addChild(new TextField()));
  29. txt.text = "move mouse";
  30.                                                       
  31. addEventListener(Event.ENTER_FRAME, onLoop);
  32. function onLoop(evt:Event):void {
  33.    
  34.     canvas.fillRect(canvas.rect, 0xEFEFEF);
  35.  
  36.     a = mouseY / 1000;
  37.     xn1 = mouseX / 30;
  38.     yn1 = 0;
  39.     for (var i:int = 0; i<iterations; i++){
  40.           xn = xn1;
  41.           yn = yn1;
  42.          
  43.           xn1 = b * yn + f(xn);
  44.           yn1 =  -xn + f(xn1);
  45.           pnt.x = i * step;
  46.           pnt.y = 300 + yn1 * scale;
  47.           canvas.copyPixels(dot, dot.rect, pnt, null, null, true);
  48.        
  49.     }
  50. }

Try it out:

Gumowski Mira Pseudo-soundwave - wonderfl build flash online

Also posted in BitmapData, Math, graphics algorithms | Leave a comment

Circle Fitting

By Zevan | June 5, 2010
CLICK HERE TO COPY
Actionscript:
  1. var circs:Array = []
  2. var circNum:int = 600;
  3. addEventListener(Event.ENTER_FRAME, onAdd);
  4. function onAdd(evt:Event):void {
  5.     if (circs.length <circNum){
  6.         makeGrowable();
  7.     }
  8. }
  9.  
  10. function makeGrowable(){
  11.    
  12.     var s:MovieClip = MovieClip(addChild(new MovieClip()));
  13.     s.x = Math.random() * stage.stageWidth;
  14.     s.y = Math.random() * stage.stageHeight;
  15.     with(s.graphics){
  16.         lineStyle(0,0);
  17.         drawCircle(0,0,10);
  18.     }
  19.     s.scaleX = s.scaleY = 0;
  20.     circs.push(s);
  21.     s.addEventListener(Event.ENTER_FRAME, onScaleUp);
  22. }
  23.  
  24. function onScaleUp(evt:Event):void {
  25.     var c:MovieClip = MovieClip(evt.currentTarget);
  26.     c.scaleX = c.scaleY += 0.05;
  27.     for (var i:int = 0; i<circs.length; i++){
  28.         var circ:MovieClip = circs[i];
  29.         if (circ != c){
  30.             var amt:Number = circ.width/2 + c.width/2;
  31.             var dx:Number = circ.x - c.x;
  32.             var dy:Number = circ.y - c.y;
  33.             var dist:Number = Math.sqrt(dx * dx + dy * dy);
  34.             if (amt> dist){
  35.                 c.removeEventListener(Event.ENTER_FRAME, onScaleUp);
  36.                 if (c.scaleX <0.1){
  37.                     if (contains(c)){
  38.                     removeChild(c);
  39.                     }
  40.                 }
  41.             }
  42.         }
  43.        
  44.     }
  45. }

Circle fitting is one of those things I've never bothered to do... today I figured I'd give it a try and this is what I came up with. I posted it on wonderfl:

Also posted in misc, motion | Tagged , , , | 7 Comments

3D Ring

By Zevan | May 3, 2010
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 500, height=500)]
  2. var ring:MovieClip = createRing();
  3. ring.x = stage.stageWidth / 2;
  4. ring.y = stage.stageHeight / 2;
  5. addChild(ring);
  6.  
  7. function createRing(sectionNum:int = 30):MovieClip{
  8.     var container:MovieClip = new MovieClip();
  9.     container.circles = [];
  10.     container.theta = 0;
  11.     container.thetaDest = 0;
  12.     var step:Number = (Math.PI * 2) / sectionNum;
  13.     for (var i:int = 0; i<sectionNum; i++){
  14.         var c:MovieClip = new MovieClip();
  15.         with (c.graphics){
  16.             lineStyle(0,0x000000);
  17.             beginFill(0xCCCCCC);
  18.             drawCircle(0,0,20);
  19.         }
  20.         c.thetaOffset = step * i;
  21.         container.addChild(c);
  22.         container.circles.push(c);
  23.     }
  24.     container.addEventListener(Event.ENTER_FRAME, onRun);
  25.     return container;
  26. }
  27. function onRun(evt:Event):void {
  28.     var container:MovieClip = MovieClip(evt.currentTarget);
  29.     var num:int = container.circles.length;
  30.     for (var i:int = 0; i<num; i++){
  31.         var c:MovieClip = container.circles[i];
  32.         var angle:Number = container.theta + c.thetaOffset;
  33.         c.x = 200 * Math.cos(angle);
  34.         c.y = 100 * Math.sin(angle);
  35.         c.scaleX = (100 + c.y) / 120 + 0.2;
  36.         c.scaleY = c.scaleX;
  37.     }
  38.     container.circles.sortOn("y", Array.NUMERIC);
  39.     for (i = 0; i<num; i++){
  40.         container.addChild(container.circles[i]);
  41.     }
  42.     if (container.mouseX <-100){
  43.         container.thetaDest -= 0.05;
  44.     }
  45.     if (container.mouseX> 100){
  46.         container.thetaDest += 0.05;
  47.     }
  48.     container.theta += (container.thetaDest  - container.theta) / 12;
  49.    
  50. }

This snippet shows how to create a 3D ring navigation using sine and cosine. Have a look:

Also posted in 3D, MovieClip, UI, arrays, motion, sortOn | Tagged , , | 3 Comments