MaJoYq

index.html

<h2>Fractal No.1</h2>

MaJoYq.markdown

MaJoYq

A Pen by Brian Douglas on CodePen.

License.

script.js

const c = document.createElement('canvas');
document.body.appendChild(c);
const $ = c.getContext('2d');

let w = c.width = window.innerWidth;
let h = c.height = window.innerHeight;

class IFS {
   constructor(opts) {
      this.x = 0.0;
      this.y = 0.0;
      this.pro = 36 * Math.PI / 180;
      this.anti = 0.0 * Math.PI / 180;
      this.arr = [];
      this.iterations = opts.iterations;
      this.space = opts.space;
   }
   generate(_) {
      if (_ < 0.85) {
         this.a = (Math.cos(this.pro) * this.x - Math.sin(this.pro) * this.y) * 0.9;
         this.b = (Math.sin(this.pro) * this.x + Math.cos(this.pro) * this.y) * 0.9;
      } else {
         this.a = (Math.cos(this.anti) * this.x - Math.sin(this.anti) * this.y) * 0.3 + 4;
         this.b = (Math.sin(this.anti) * this.x + Math.cos(this.anti) * this.y) * 0.3 + 1;
      }
   }
   preRender() {
      for (let i = 1; i <= this.iterations; i++) {
         this.generate(Math.random());
         if (i > 500) {
            let xx = Math.round(this.space * this.a + w / 2);
            let yy = Math.round(h / 2 - this.space * this.b);

            this.arr.push({
               x: xx,
               y: yy
            });

            this.x = this.a;
            this.y = this.b;
         }
      }
   }
   render() {
      this.arr.map(_ => {
         $.beginPath();
         $.fillStyle = `hsla(${Math.floor(Math.random()*120)}, 100%, 50%, 0.5)`;
         $.arc(_.x, _.y, 1, 0, 2 * Math.PI);
         $.fill();
      });
   }
}

const ifs = new IFS({
   space: w / 3,
   iterations: 80000
});

ifs.preRender();

function draw() {
   let g = $.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, w);
   g.addColorStop(0, 'hsla(90, 100%, 50%, 0.2)');
   g.addColorStop(1, 'hsla(30, 100%, 50%, 0.2)');
   $.fillStyle = g;
   $.fillRect(0, 0, w, h);

   ifs.render();
};

draw();

window.addEventListener('resize', () => {
   w = c.width = window.innerWidth;
   h = c.height = window.innerHeight;
   draw();
});

style.css

body {
   background: #000;
   overflow: hidden;
}

h2 {
  border: 3px solid #eee;
  color: #eee;
  padding: 1rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 30px;
  width: 143px;
}