cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              // Click to regenerate a new function

// no. of instructions in genome:
var genome_size = 12;
// image resolution:
var dim = 100;

// image, and copy for double buffering:
var vid = new field2D(dim);
var past = vid.clone();

// set of available operations:
var ops = [//"constant", 
           "rotor", 
           "average", //"noise", 
           "translate", "rotate", "scale",  
           "sample", "sample", "sample"];

// generate a random genome:
function generate(len) {
  var geno = [];
  for (var i = 0; i < len; i++) {
    // generate a random instruction-gene:
    geno.push([
      ops[random(ops.length)],
      random(5),
      random(5)
    ]);
  }
  return geno;
}

// the "big switch statement" interpeter
// takes a genome (array of instructions)
// converts it to a string of JavaScript code
// (to be used as the body of a new function)
function interpret(list) {
  // the growing list of statements in the function:
  // initialized with one statement to define the current image coordinate:
  var stats = ["var norm = new vec2(x/dim, y/dim);"];
  // the growing list of available register names:
  var vars = ["norm"];

  // now the big per instruction switch:
  for (var i = 0; i < list.length; i++) {
    var item = list[i];
    // pull out the operator & arguments
    var op = item[0];
    var i1 = item[1];
    var i2 = item[2];
    // get the nth most recent register, counting backward
    var v1 = vars[vars.length-1 - wrap(i1, vars.length)];
    var v2 = vars[vars.length-1 - wrap(i2, vars.length)];
    // get the expression:
    var val;
    switch (op) {
      case "constant":
        // generate a constant vector:
        val = "new vec2(" + ((i1-3) * 0.1) + "," + ((i2-3) * 0.1) + ")";
        break;
      case "rotor":
        // create a vector as a function of time:
        val = "vec2.fromPolar(now * " + (i1-3) + ")";
        break;
      case "noise":
        // add some noise to a register:
        val = "vec2.random(random()).mul(" + v1 + ")";
        break;
      case "average":
        // get average of two registers:
        val = v1 + ".clone().add(" + v2 + ").mul(0.5)";
        break;
      case "translate":
        // add one register to another:
        val = v1 + ".clone().translate(" + v2 + ")";
        break;
      case "scale":
        // scale one register:
        val = v1 + ".clone().scale(" + v2 + ".clone().add(1))";
        break;
      case "rotate":
        // rotate a register by the angle of another:
        val = v1 + ".clone().rotate(" + v2 + ".angle()*0.1)";
        break;
      case "sample":
        // sample the image at a coordinate
        // determined by a register:
        val = "new vec2(past.sample(" + v1 + ".clone().add(norm), 0), past.sample(" + v2 + ".clone().add(norm), 1) )";
        break;
    }
    // create the output name:
    var name = "r" + vars.length;
    // remember this as a possible register:
    vars.push(name);
    // now build & add the full statement:
    stats.push("var " + name + " = " + val + ";");
  }
  // build the return value (the last created register)
  var name = vars[vars.length-1];
  stats.push("return [" + name + "[0], " + name + "[1] , " + name + "[1] ];");
  // join up all the statements into a single string:
  return stats.join("\n");
}

function reset() {
  vid.set(function() {
    return [random(), random()];
  });

  var test = generate(genome_size);
  var code = interpret(test);
  write(code);
  fun = new Function("x", "y", code);
}

reset();

function mouse(e, p) {
  if (e == "down") reset();
}

function update() {
  var tmp = past;
  past = vid;
  vid = tmp;
  
  vid.set(fun).normalize();
  
  if (Math.abs(vid.min() - vid.max()) < 0.01) reset();
  
  write(vid.min(), vid.max());
}

function draw() {
  vid.draw();
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console