)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Canvas Spiraling Things

  1. const canvas = document.createElement('canvas');
  2. const c = canvas.getContext('2d');
  3.  
  4. document.body.appendChild(canvas);
  5. document.body.style.margin = 0;
  6.  
  7. function resize() {
  8.   canvas.width = innerWidth;
  9.   canvas.height = innerHeight;
  10.   c.fillStyle = '#000';
  11.   c.fillRect(0, 0, canvas.width, canvas.height);
  12. }
  13. resize();
  14. addEventListener('resize', resize);
  15.  
  16. const cols = ['#555', 'white', 'gray', '#a4c3eb', '#75879e'];
  17.  
  18. const getCol = () => cols[Math.floor(Math.random() * cols.length)];
  19.  
  20. function rect() {
  21.   let x = innerWidth / 2;
  22.   let y = innerHeight / 2;
  23.   let col = getCol();
  24.   let width = 10;
  25.   let height = 10;
  26.   let halfWidth = width / 2;
  27.   let halfHeight = height / 2;
  28.   let alpha = 0.15 + Math.random() * 0.5;
  29.   let vx = 0;
  30.   let vy = 0;
  31.   let rot = 0;
  32.   let rotInc = Math.random() * 0.1 - 0.05;
  33.  
  34.   function change() {
  35.     vx += (Math.random() * 1 - 0.5) / 2;
  36.     vy += (Math.random() * 1 - 0.2) / 2;
  37.   }
  38.   change();
  39.  
  40.   function check() {
  41.     if (x < 0) x = innerWidth;
  42.     if (y < 0) y = innerHeight;
  43.     if (x > innerWidth) x = 0;
  44.     if (y > innerHeight) y = 0;
  45.   }
  46.  
  47.   const radius = 20 + Math.random() * 80;
  48.   const verts = [];
  49.   const NUM = 200;
  50.   const off = Math.random() * 5;
  51.   const cols = [];
  52.   for (var i = 0; i < NUM; i += 2) {
  53.     let xp = Math.random() * 10 - 5;
  54.     let yp = Math.random() * 10 - 5;
  55.     let zp = Math.random() * 10 - 5;
  56.     let dist = Math.sqrt(xp * xp + yp * yp + zp * zp);
  57.     // normalize and scale x,y,z
  58.     verts[i] = (xp / dist) * radius;
  59.     verts[i + 1] = (yp / dist) * radius;
  60.     cols.push(i % 255);
  61.   }
  62.  
  63.   return () => {
  64.     if (Math.random() < 0.13) {
  65.       change();
  66.     }
  67.  
  68.     vx *= 0.99;
  69.     vy *= 0.99;
  70.  
  71.     x += vx;
  72.     y += vy;
  73.  
  74.     check();
  75.  
  76.     c.globalAlpha = alpha;
  77.  
  78.     c.save();
  79.  
  80.     rot += rotInc;
  81.     c.translate(x, y);
  82.     c.rotate(rot);
  83.  
  84.     for (var i = 0; i < NUM; i += 2) {
  85.       const channel = cols[i];
  86.       c.fillStyle = `rgb(${channel}, ${channel}, ${channel})`;
  87.       c.fillRect(verts[i], verts[i + 1], 2, 2);
  88.     }
  89.     c.restore();
  90.   };
  91. }
  92.  
  93. let rects = [];
  94. let NUM = 20;
  95.  
  96. for (let i = 0; i < NUM; i++) {
  97.   rects.push(rect());
  98. }
  99.  
  100. rects[0]();
  101.  
  102. function loop() {
  103.   c.globalCompositeOperation = 'source-over';
  104.   c.globalAlpha = 0.025;
  105.   c.fillStyle = '#000';
  106.   c.fillRect(0, 0, canvas.width, canvas.height);
  107.  
  108.   for (let i = 0; i < NUM; i++) {
  109.     rects[i]();
  110.   }
  111.  
  112.   requestAnimationFrame(loop);
  113. }
  114.  
  115. loop();
// animation // canvas // javascript // speed-coded

Slider Range Input Wave

  1. N = 8 // try changing this
  2. b = document.body
  3.  
  4. b.innerHTML += 'Drag any slider<br>'
  5. for (i = N; i--;) 
  6.   b.innerHTML += `<input id=${i} value=0 type=range style=width:200px;display:block>`
  7.  
  8. onchange = oninput = e => {
  9.   t = e.target
  10.   for (i = N; i--;) 
  11.     t.id != i && (
  12.       self[i].value = 100 * Math.sin(t.value / 60 * i))
  13. }

Sine wave with range sliders…

// golfed // javascript // speed-coded // ui

Random Trick

  1. // multiply math random by another math random:
  2. const value = Math.random() * Math.random() * 10;
  3.  
  4. // This makes it less likely that `value` will be 10
  5.  
  6. // the more times you multiply, the less likely you will be to reach
  7. // the maximum potential value
  8. const value = Math.random() * Math.random() * Math.random() * 10;

I use this a fair amount when creating artwork with code. I’ll usually use a seeded random though for more control.

I was thinking about different icons I might use in a node based programming environment to denote this use of random and after a little futzing around created this series of histograms:

  1. function rand(n = 1, f = 1) {
  2.   let value = 1;
  3.   for (let i = 0; i < n; i++) {
  4.     value *= Math.random();
  5.   }
  6.   // fixing the value so that it fits
  7.   // nicely as a key in the hash table
  8.  
  9.   // hash = {
  10.   //   0.2: 5,
  11.   //   0.9: 8,
  12.   //   etc...
  13.   // }
  14.   return value.toFixed(f);
  15. }
  16.  
  17. function histo(n = 1, f = 2, off, iter = 1500, size = 70) {
  18.   const vals = {};
  19.   const canvas = document.createElement('canvas');
  20.   const c = canvas.getContext('2d');
  21.  
  22.   canvas.width = canvas.height = size;
  23.   canvas.style.margin = '.5em';
  24.   document.body.appendChild(canvas);
  25.  
  26.   for (let i = 0; i < iter; i++) {
  27.     const randNum = off ? off - rand(n, f) : rand(n, f);
  28.     if (vals[randNum] == null) {
  29.       vals[randNum] = 1;
  30.     } else {
  31.       vals[randNum]++;
  32.     }
  33.   }
  34.  
  35.   c.fillStyle = '#ccc';
  36.   c.fillRect(0, 0, size, size);
  37.   c.strokeRect(0, 0, size, size);
  38.   for (let i in vals) {
  39.     const x = parseFloat(i) * size;
  40.     c.beginPath();
  41.     c.moveTo(x, size);
  42.     c.lineTo(x, size - vals[i]);
  43.     c.stroke();
  44.   }
  45. }
  46.  
  47. histo();
  48. histo(2);
  49. histo(3, 2, 1);
  50. histo(5, 2, 1);
  51. histo(6, 2, 0, 500);
// javascript // math // random // speed-coded

Find a String Naive Hill Climbing

  1. const target = 'snippetzone'.split``;
  2. const leng = target.length;
  3. const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split``;
  4.  
  5. function randomString() {
  6.   let str = [];
  7.   for (let i = 0; i < leng; i++) {
  8.     str.push(randomChar());
  9.   }
  10.   return str;
  11. }
  12.  
  13. function randomChar() {
  14.   return alphabet[Math.floor(Math.random() * alphabet.length)];
  15. }
  16.  
  17. let iterations = 0;
  18. const search = randomString();
  19. const indices = [];
  20. for (var i = 0; i < leng; i++) indices.push(i);
  21. let found = false;
  22.  
  23. function loop() {
  24.   for (let i = 0; i < 10; i++) {
  25.     if (indices.length > 0) {
  26.       let ii = Math.floor(Math.random() * indices.length);
  27.       let index = indices[ii];
  28.       search[index] = randomChar();
  29.       if (search[index] == target[index]) {
  30.         indices.splice(ii, 1);
  31.       }
  32.       console.log(search.join(','));
  33.       iterations++;
  34.     } else {
  35.       console.log('found after', iterations, 'iterations');
  36.       found = true;
  37.       break;
  38.     }
  39.   }
  40.  
  41.   if (!found) {
  42.     requestAnimationFrame(loop);
  43.   }
  44. }
  45. loop();

This is a port of an old snippet of mine. It naively and randomly finds a target string. In this case the string “snippetzone”.

It’s fun to see it randomly perform better/worse…

e,f,k,w,q,s,o,h,n,r,f e,f,k,w,q,s,o,h,n,r,u k,f,k,w,q,s,o,h,n,r,u k,f,k,w,q,o,o,h,n,r,u k,f,k,w,q,o,o,v,n,r,u k,f,k,w,q,v,o,v,n,r,u ... s,e,i,p,p,e,t,z,o,n,e s,v,i,p,p,e,t,z,o,n,e s,h,i,p,p,e,t,z,o,n,e s,d,i,p,p,e,t,z,o,n,e s,s,i,p,p,e,t,z,o,n,e s,e,i,p,p,e,t,z,o,n,e s,g,i,p,p,e,t,z,o,n,e s,q,i,p,p,e,t,z,o,n,e s,m,i,p,p,e,t,z,o,n,e s,w,i,p,p,e,t,z,o,n,e s,g,i,p,p,e,t,z,o,n,e s,x,i,p,p,e,t,z,o,n,e s,t,i,p,p,e,t,z,o,n,e s,o,i,p,p,e,t,z,o,n,e s,e,i,p,p,e,t,z,o,n,e s,k,i,p,p,e,t,z,o,n,e s,p,i,p,p,e,t,z,o,n,e s,b,i,p,p,e,t,z,o,n,e s,n,i,p,p,e,t,z,o,n,e found after 176 iterations
// javascript // math // speed-coded // strings

Obfuscated Pre

  1. b = document.body
  2. with(b.style) 
  3.   fontFamily = 'monospace', fontSize = '2em',
  4.   transform = 'skew(10deg) translateX(40px)'
  5.  
  6. N = '<br>';
  7.  
  8. (f=(_='*')=>(
  9.   b.innerHTML+=` <b style='opacity:${Math.random()+.2}'>${_}</b>`,f))('<pre>')
  10.   (   )(   )(   )(   )(N)
  11.    ('(')('0')('_')('_')(N)
  12.     ('-')(   )(   )('-')(N)
  13.      ('_')('_')('0')(')')(N)
  14.       ('-')(   )(   )('-')(N)
  15.        ('(')('0')('_')('_')(N)
  16.         ('-')(   )(   )('-')(N)
  17.          ('_')('_')('0')(')')(N)
  18.           ('-')(   )(   )('-')(N)
  19.            ('(')('0')('_')('_')(N)
  20.             (   )(   )(   )(   )

Not really sure what this is… just playing around…

// codegolf // javascript // obfuscation // speed-coded // strings
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}