Category Archives: Math

Quick line in HTML and JavaScript

Usually if you want to draw lines in HTML you use canvas or SVG. Awhile back I wondered how I might do it without those. This is really just a proof of concept speed coded answer to that question:

This works by using a div with a border, rotating it and scaling it as needed so it fits between two arbitrary points.

This could be abstracted a bit more, but it works pretty well. I usually choose `setInterval` over `requestAnimationFrame` when prototyping - because I like to easily be able to change the speed of
framebased things like this. If I were to try and make this code more dynamic, I would probably switch out to `requestAnimationFrame`.

If you try and connect two lines together - you’ll notice some inaccuracy - a good argument for using SVG or canvas over something like this. That said, if you are connecting two elements using a single line, this inaccuracy would become irrelevant.

Also posted in Graphics, html5, javascript, misc, motion | Tagged , , | Leave a comment

Hermit Crab Curve as PRNG

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

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 Graphics, functions, graphics algorithms, javascript, misc, motion | Tagged , , | Leave a comment

PRNG Sine Rendering (Easiest Seeded Random with Index)

Here is a codepen showing seeded random numbers created use `Math.sin`. We’ll get to the code in a bit, first a little backstory…

Over the years I’ve used all manner of famous random number generators. From Tausworthe to Mersenne Twister.

Sometime last year I was trying to find a seeded PRNG, when working in Objective-C `arc4random` seems to be the common choice. I quickly became frustrated however as it didn’t seem possible or at least didn’t seem easy at all to reset the sequence of numbers. Maybe there’s an easy way, but whatever it is, I couldn’t find it. So after probably an hour of frustration trying all the weird different PRNGs, I decided to resort to a super simple old trick.

Why do you care about resetting the sequence?

Having a seed that you save at the beginning of your program can be super powerful. You can use anything for this seed, like the time or just another random number. From that point on your random numbers will be completely deterministic and depending on the complexity of your program you can simply save the seed and use it again later - causing your program to do exactly the same thing it did last time it had that seed. Those of you who dabble with generative artwork are probably familiar with this idea.

This experiment uses that trick:

Those textures will always be the same when the seed is 18. Thats an old experiment from the flash days, I think I used Grant Skinner’s seeded PRNG for that.

On the off chance you still have flash in your browser you can see it here:

Static black and white:
http://zevanrosser.com/sketchbook/things/bw_tex_static.html

Animated black and white:
http://zevanrosser.com/sketchbook/things/bw_tex_animated.html

Ugly colors version:
http://zevanrosser.com/sketchbook/things/col_tex_animated.html

It turns out that if you take sine or cosine and pop very large values for theta into it - you get something that looks very random. Lets look at the code:

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
var rc = 0,
  seed = 30,
  MAX_RAND = 0xffffff;
 
function idxRand(nth) {
  if (nth != null) rc = nth;
  rc++;
  return Math.abs(Math.sin(seed * rc) * MAX_RAND);
}
 
var firstFour = [idxRand(), idxRand(), idxRand(), idxRand()],
  second = idxRand(1),
  fourth = idxRand(3);
 
console.log(firstFour);
console.log(second);
console.log(fourth);
 
var canvas = document.createElement("canvas"),
  c = canvas.getContext("2d");
 
canvas.width = 400;
canvas.height = 300;
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
document.body.appendChild(canvas);
 
for (var i = 0; i < 300; i++) {
  c.fillStyle = "red";
  c.fillRect(idxRand() % 200, i, 4, 4);
 
  c.fillStyle = "green";
  c.fillRect(200 + Math.random() * 200, i, 4, 4);
}

Will output something like this:

[16576418.984205123, 5113873.3245154265, 14998774.234509233, 9741038.668934602]
5113873.3245154265
9741038.668934602

This code could be improved in a few different ways - but its good enough to illustrate the technique. Lines 1-9 are all you need to have a reproducible random sequence. With a large step value for theta and an even larger coefficient (0xffffff) for sine, you can use modulo to get the range you need (line 30). You can access the old values by passing an index to `idxRand`. This is illustrated in lines 11 through 17 - where we get the first four values and then grab them again using the index argument.

While significantly statistically different - and likely significantly different performance-wise, you’ll notice that visually there is little difference… :D

UPDATE: Had an idea that an alternative post title for this would be Easily Attain the Nth value from a PPRNG(pseudo-pseudo-random-number-generator)…

Also posted in Uncategorized, javascript, misc, random | Tagged , , | Leave a comment

Gumowski/Mira Pseudo-Soundwave

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, Graphics, graphics algorithms | Leave a comment