Objects of Art - Pall Thayer

Objects of Art - Pall Thayer, 2015
Object Oriented Art Code

'Objects of Art' are a growing collection of JavaScript objects created as works of art by Pall Thayer. As software, they are provided under the GPLv3 license. As works of art, they are (c) Pall Thayer.

Portrait of the Artist - Mar 30 2018

                                                                                
var portrait = function(who) {
    this.who = who;
    var count = 0;
    var skinSurface;
    var skin = document.createElement("canvas");
    
    var makeSkin = function() {
        skin.id = "skin";
        skin.width = window.innerWidth;
        skin.height = window.innerHeight;
        skin.style.position = "absolute";
        skin.style.top = "0px";
        skin.style.left = "0px";
        document.body.appendChild(skin);
        skinSurface = skin.getContext("2d");
    };
    
    var startPortrait = function() {
        makeSkin();
        var bodyParts = setInterval(makeParts, 5);
    };
    
    var makeParts = function() {
        count++;
        if(count < 2000) {
            var line = "rgba(0,0,0,0.4)";
        }else{
            line = "rgba(0,255,5,0.4)";
        }
        count = count == 4000?0:count;
        var size = parseInt((Math.random()*10)+10);
        skinSurface.strokeStyle = line;
        skinSurface.font = size+"px sans-serif";
        //skinSurface.strokeText(who, Math.random()*(window.innerWidth+1000)-500, Math.random()*(innerHeight+500)-250);  
      	skinSurface.strokeText(who, Math.random()*(window.innerWidth+1000)-500, 0.5*Math.sin(count*.01)*(innerHeight)+innerHeight/2);  
    };
    
    startPortrait();
};

Mr. Rhythm - Nov 5 2017

                                                                                
var mrrhythm = function() {
  var karray;
  var kcount = 0;
  var sarray;
  var scount = 0;
  var harray;
  var hcount = 0;
  var real = new Float32Array(8);
  var imag = new Float32Array(8);
  for(var i = 0; i < real.length; i++) {
    real[i] = Math.random();
    imag[i] = Math.random();
  }

  var thestuff = document.getElementById("thestuff");
  var context = window.AudioContext || window.webkitAudioContext;
  var actx = new context;

  var kickme = actx.createOscillator();
  kickme.type = 'sine';
  kickme.frequency.value = 110;
  var kamp = actx.createGain();
  kamp.gain.value = 0.0;
  kickme.connect(kamp);
  kamp.connect(actx.destination);
  kickme.start();


  var kseq = document.createElement('input');
  kseq.id = 'kickme';
  kseq.type = 'text';
  kseq.value = '10';
  thestuff.appendChild(kseq);

  var spankme = actx.createOscillator();
  var wave = actx.createPeriodicWave(real, imag);
  spankme.setPeriodicWave(wave);
  //spankme.type = 'sine';
  spankme.frequency.value = -1;
  var spbs = 2 * actx.sampleRate,
    spnb = actx.createBuffer(1, spbs, actx.sampleRate),
    spop = spnb.getChannelData(0);
  for(var i = 0; i < spbs; i++) {
    spop[i] = Math.random() * 2 - 1;
  }
  var spanknoise = actx.createBufferSource();
  spanknoise.buffer = spnb;
  spanknoise.loop = true;
  var spamp = actx.createGain();
  spamp.gain.value = 0.0;
  spankme.connect(spamp);
  spanknoise.connect(spamp);
  spankme.start();
  spanknoise.start(0);
  spamp.connect(actx.destination);

  var spseq = document.createElement('input');
  spseq.id = 'spankme';
  spseq.type = 'text';
  spseq.value = '001';
  thestuff.appendChild(spseq);

  var htbs = 2 * actx.sampleRate,
    htnb = actx.createBuffer(1, htbs, actx.sampleRate),
    htop = htnb.getChannelData(0);
  for(var i = 0; i < htbs; i++) {
    htop[i] = Math.random() * 2 - 1;
  }
  var hattrick = actx.createBufferSource();
  hattrick.buffer = htnb;
  hattrick.loop = true;
  var htgain = actx.createGain();
  htgain.gain.value = 0.0;
  hattrick.connect(htgain);
  htgain.connect(actx.destination);
  hattrick.start();

  var htseq = document.createElement('input');
  htseq.id = 'hattrick';
  htseq.type = 'text';
  htseq.value = '000101';
  thestuff.appendChild(htseq);

  var readbeats = function() {
    var k = kseq.value;
    karray = k.split('');
    playbeats("k");
    var s = spseq.value;
    sarray = s.split('');
    playbeats("s");
    var h = htseq.value;
    harray = h.split('');
    playbeats("h");
  }

  var playbeats = function(inst) {
    switch(inst) {
      case 'k':
        if(parseInt(karray[kcount]) == 1) {
          kickme.frequency.setValueAtTime(110, actx.currentTime);
          kickme.frequency.exponentialRampToValueAtTime(0.001, actx.currentTime+10);
          kamp.gain.setValueAtTime(1, actx.currentTime);
          kamp.gain.exponentialRampToValueAtTime(0.001, actx.currentTime+0.5);
        }
        kcount = kcount < karray.length?kcount+1:0;
        break;
      case 's':
        if(parseInt(sarray[scount]) == 1) {
          spankme.frequency.setValueAtTime(220, actx.currentTime);
          spamp.gain.setValueAtTime(0.3, actx.currentTime);
          spamp.gain.exponentialRampToValueAtTime(0.001, actx.currentTime+0.8);
        }
        scount = scount < sarray.length?scount+1:0;
        break;
      case 'h':
        if(parseInt(harray[hcount]) == 1) {
          htgain.gain.setValueAtTime(0.2, actx.currentTime);
          htgain.gain.exponentialRampToValueAtTime(0.001, actx.currentTime+0.1);
        }
        hcount = hcount < harray.length?hcount+1:0;
        break;

    }
  }

  var animate = function() {
    for(var i = 1;i < 9999;i++) {
      window.clearInterval(i);
    }
    var go = setInterval(function(){readbeats();}, 200);
  }
  animate();

}

Runningness - Oct 23 2017

                        
function Runningness() {

  var subCounter = 0;
  var mainCounter = 0;

  var run = function() {
    var subc = document.getElementById("subc");
    var c = document.getElementById("c");
    subc.innerHTML = subCounter;
    c.innerHTML = mainCounter;
    if(subCounter < 99) {
      subCounter++;
    }else{
      subCounter = 0;
      mainCounter++;
    }
  }
  for(var i = 1;i < 9999;i++) {
      window.clearInterval(i);
  }
  var runner = setInterval(run, 100);
}

An Abstraction? - Oct 10 2017

                                                
var autodraw = function() {
  var theCanvas;
  var howLong = window.innerWidth;
  var howHi = window.innerHeight;
  var reason = "Can we get some real gun controls already?";
  var ltrs = reason.split("");
  var ltrc = 0;
  var counter = 0;
  var goto = [Math.random()*howLong, Math.random()*howHi];
  var from = [Math.random()*howLong, Math.random()*howHi];
  var ctx;
  var r, g, b;
  var letters = 10;

  var init = function () {
    theCanvas = document.createElement("canvas");
    theCanvas.id = "thecanvas";
    theCanvas.width = howLong;
    theCanvas.height = howHi;
    document.body.appendChild(theCanvas);
    ctx = document.getElementById("thecanvas").getContext("2d");
    r = parseInt(Math.random()*255);g = parseInt(Math.random()*255);b = parseInt(Math.random()*255);
    ctx.fillStyle = "rgba("+r+","+g+","+b+", 0.3)";
    ctx.font = letters+"px sans-serif";
    animate();
  };

  var draw = function() {
    letters++;
    ctx.font = letters+"px san-serif";
    if(counter % 10 == 0) {
      goto = [((Math.random()*100)-50)+goto[0], ((Math.random()*100)-50)+goto[1]];
    }
    if(counter % 500 == 0) {
      goto = [Math.random()*howLong, Math.random()*howHi];
      from = [goto[0], goto[1]];
      r = parseInt(Math.random()*255);g = parseInt(Math.random()*255);b = parseInt(Math.random()*255);
      ctx.fillStyle = "rgba("+r+","+g+","+b+", 0.1)";
    }else{
      from = [(((goto[0] - from[0])*0.008)+from[0]), (((goto[1] - from[1])*0.008)+from[1])];
    }
    ctx.fillText(ltrs[ltrc], from[0], from[1]);
    ltrc++;
    if(ltrc >= ltrs.length){ltrc=0;letters = 5;}
    counter++;
  }

  var animate = function() {
    for(var i = 1;i < 9999;i++) {
      window.clearInterval(i);
    }
    var go = setInterval(function(){draw();}, 10);
  }
  init();
}

Form Over Function (For Alexei) - Oct 8 2017

        
var form = function() {
    this.width = parseInt(Math.random()*500);
    this.top = parseInt(Math.random()*window.innerHeight);
    this.left = parseInt(Math.random()*(window.innerWidth+500))-250;
    var types = ['text', 'radio', 'checkbox', 'button', 'color', 'date', 'range'];
    this.type = types[parseInt(Math.random()*types.length)];
    var growTo = parseInt(Math.random()*window.innerWidth);
    
    this.makeFormEl = function() {
        var formEl = document.createElement('input');
        formEl.id = this.type+parseInt(Math.random()*1000);
        formEl.type = this.type;
        formEl.style.top = this.top+'px';
        formEl.style.left = this.left+'px';
        formEl.style.position = 'absolute';
        formEl.style.width = this.width+'px';
        var form = document.getElementById('the_form');
        form.appendChild(formEl);
        var ani = setInterval(function(){grow(formEl);}, 100);
    }
    
    var grow = function(el) {
        this.width += (growTo - this.width)*0.1;
        el.style.width = this.width+'px';
    }.bind(this);
};

Objects in Motion III: Square with content flipping on two axes - Oct 8 2017

                                                
var qpdb = function() {
    var count = 1;
    var width = window.innerWidth;
    var height = window.innerHeight;
    var thoughts = ['q', 'p', 'd', 'b'];
    var where = ['left', 'right', 'left', 'right'];
    var Ydeg = 180;
    var Xdeg = 180;
    var frame = document.createElement('div');
    
    var youNeedMe = function() {
        frame.style.height = height*0.5+'px';
        frame.style.width = height*0.5+'px';
        frame.style['border-left'] = '5px solid #cca';
        frame.style['border-top'] = '5px solid #ccb';
        frame.style['border-right'] = '5px solid #ccc';
        frame.style['border-bottom'] = '5px solid #ccd';
        frame.style.margin = 'auto';
        frame.id = 'needme';
        makeThought();
    }
    
    var makeThought = function() {
        frame.style['font-family'] = 'sans-serif';
        frame.style['font-size'] = height*0.2+'px';
        frame.style.padding = '10px';
        var bubble = '';
        for(var i=0;i < thoughts.length;i++) {
            bubble += '<div style="float:'+where[i]+'">'+thoughts[i]+'</div>';
            if(i % 2 !== 0) {
                bubble += '<br style="height:0px;clear:both;">';
            }
        }
        frame.innerHTML = bubble;
        document.body.appendChild(frame);
        for(var i = 1;i < 9999;i++) {
            window.clearInterval(i);
        }
        var grow = setInterval(function(){becoming();}, 1000);
    }
    
    var becoming = function() {
        switch(count) {
            case 1:
                Ydeg *= -1;
                frame.style.transform += 'rotateY('+Ydeg+'deg)';
                break;
            case 2:
                Xdeg *= -1;
                frame.style.transform += 'rotateX('+Xdeg+'deg)';
                break;
            case 3:
                Ydeg *= -1;
                frame.style.transform += 'rotateY('+Ydeg+'deg)';
                break;
            case 4:
                Xdeg *= -1;
                frame.style.transform += 'rotateX('+Xdeg+'deg)';
                break;
            default:
                break;
        }
        count = count == 4?1:count+1;
    }
    
    youNeedMe();
}

Objects In Motion II: Square flipping horizontally - Oct 7 2017

                                                                
var square = function(where) {
    this.there = where;
    var fair = false;
    var bear = fair;
    var air = 90;
    var hair = 90;
    var pear = hair + air;
    var square = document.createElement('div');
    square.style.border = '5px solid black';
    square.style.width = pear+'px';
    square.style.height = pear+'px';
    square.style.margin = 'auto';
    if(fair)
      square.style['border-right'] = '5px solid red';
    document.body.appendChild(square);
    
    var care = function(bear) {
        for(var i = 1;i < 9999;i++) {
            window.clearInterval(i);
        }
        share = setInterval(function(){mare(bear);}, 1000);
    };
    
    var mare = function(bear) {
        pear *= -1;
        square.style.transform += 'rotateY('+pear+'deg)';
    };
    
    function share() {
        return true;
    };
    
    care(bear);
};

Objects In Motion I: Rotating circle - Oct 7 2015

var theByrds = function() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    var season = document.createElement('div');
    var deg = 0;
    season.style.border = "5px solid black";
    season.style.width = width/2+'px';
    season.style.height = width/2+'px';
    season.style['margin-left'] = 'auto';
    season.style['margin-right'] = 'auto';
    season.style['border-radius'] = '100%';
    document.body.appendChild(season);
    
    this.turn_turn_turn = function() {
        for(var i = 1;i < 9999;i++) {
            window.clearInterval(i);
        }
        
        var turn_turn = setInterval(turn_turn_turn, 100);        
    }
    
    function turn_turn_turn() {
        season.style.transform = 'rotate('+deg+'deg)';
        deg++;
    };
};

Ce Ne Sont Pas les Citrons - Sep 19 2015

var lemon = function() {
    var started = false;
    var i=0;
    var seed = new AudioContext();
    var fruit = seed.createOscillator();
    var tree = seed.createOscillator();
    fruit.type = 'square';
    tree.type = 'square';
    tree.detune.value = 2;
    var color = seed.createGain();
    fruit.connect(color);
    tree.connect(color);
    var squeeze = seed.createDelay();
    squeeze.delayTime.value = 0.5;
    var juice = seed.createGain();
    juice.gain.value = 0.5;
    squeeze.connect(juice);
    juice.connect(squeeze);
    color.connect(juice);
    color.connect(seed.destination);
    juice.connect(seed.destination);
    var howLong;
    var fvalue;
    
    var buttonUp = function() {
        var bod = document.getElementsByTagName('body');
        var makeButtons = '';
        for(var i=1;i<100;i++) {
            makeButtons += '<input type="button" onclick="lemon.pucker('+(i*100)+')" value="lemon">';
        }
        bod[0].innerHTML = makeButtons;
    };
    
    this.pucker = function(freek) {
        fvalue = freek;
        window.clearInterval(howLong);
        fruit.frequency.value = fvalue;
        tree.frequency.value = fvalue;
        color.gain.value = 0.7;
        if(!started) {
            startFruitTree();
        }
        howLong = setInterval(sing, 50);
    };
    
    var sing = function() {
        color.gain.value -= 0.05;
        fvalue -= 100;
        fruit.frequency.setValueAtTime(fvalue, seed.currentTime);
        tree.frequency.setValueAtTime(fvalue, seed.currentTime);
        if(color.gain.value < 0) {
            window.clearInterval(howLong);
        }
    };
    
    var startFruitTree = function() {
        fruit.start();
        tree.start();
        started = true;
    };
    
    buttonUp();
}

After Ahmed Mohamed - Sep 18 2015

var itsAclockOfficer = function() {
    this.time = new Date();
    this.h = this.time.getHours();
    this.m = this.time.getMinutes();
    this.s = this.time.getSeconds();
    this.howLong = window.innerWidth;
    this.howHi = window.innerHeight;
    
    this.makeClock = function() {
        clock = document.createElement("div");
        clock.id = "clock";
        clock.style.position = "absolute";
        clock.style.width = this.howLong+"px";
        clock.style.height = this.howHi+"px";
        clock.style["background-color"] = "red";
        clock.style["text-align"] = "center";
        clock.style["font-size"] = "50px";
        clock.style.color = "white";
        ahmed = document.body.appendChild(clock);
        for(var i = 1;i < 9999;i++) {
            window.clearInterval(i);
        }
        setInterval(itCountsTheSecondsOrElseItGetsTheHose, 1000);
    }
    
    var itCountsTheSecondsOrElseItGetsTheHose = function() {
        if(this.s == 59) {this.s = 0;this.m++;}else{this.s++;}
        if(this.m == 59) {this.m = 0;this.h++;}
        if(this.h == 13) {this.h = 1;}
        document.getElementById("clock").innerHTML = zeroPad(this.h)+":"+zeroPad(this.m)+":"+zeroPad(this.s);
    }.bind(this);
    
    var zeroPad = function(num) {
        if(num < 10) {
            return '0'+num;
        }
        return num;
    }
    
    this.makeClock();
}

Circles - Sep 8 2015

var circle = function(id) {

    var colorme = function() {
        return parseInt(Math.random()*255);
    };
    
    this.size = parseInt(Math.random()*250);
    this.speed = parseInt(Math.random()*10)+3;
    this.color = "rgb("+colorme()+","+colorme()+","+colorme()+")";
    this.howLong = window.innerWidth;
    this.howHi = window.innerHeight;
    var circle = document.createElement("div");
    var timer;
    
    this.draw = function() {
        design();
        document.body.appendChild(circle);
        animate();
    };
    
    var animate = function() {
        timer = setInterval(rise, 50);
    };
    
    var rise = function() {
        var thecircle = document.getElementById(id);
        this.howHi -= this.speed;
        circle.style.top = this.howHi+"px";
        if(this.howHi < (this.size+10)*-1) {
            this.howHi = window.innerHeight;
        }
    }.bind(this);
    
    var design = function() {
        circle.id = id;
        circle.style.position = "absolute";
        circle.style.width = this.size+"px";
        circle.style.height = this.size+"px";
        circle.style.left = parseInt(Math.random()*(this.howLong-this.size))+"px";
        circle.style.top = this.howHi+"px";
        circle.style.border = "5px solid "+this.color;
        circle.style["border-radius"] = "100%";
    }.bind(this);
};

Stripes - Sep 8 2015

var stripes = function () {
    var theCanvas;
    var howLong = window.innerWidth;
    var howHi = window.innerHeight;
    
    var init = function () {
        theCanvas = document.createElement("canvas");
        theCanvas.id = "thecanvas";
        theCanvas.width = howLong;
        theCanvas.height = howHi;
        document.body.appendChild(theCanvas);
        stripe(howLong/40);
    };
    
    var stripe = function (spacing) {
        var ctx = document.getElementById("thecanvas").getContext("2d");
        for(var i = 0;i < howLong;i += spacing) {
            ctx.fillStyle = "rgb("+makePretty()+", "+makePretty()+", "+makePretty()+")";
            ctx.fillRect(i, 0, spacing, howLong);
        }
    };
    
    var makePretty = function() {
        return parseInt(Math.random()*255);
    };
    
    init();
};

Web on the Move - Sep 8 2015

var spinner = function() {
    var objects = document.getElementsByTagName("div");
    var counter = 0;
    var timer;
    
    for(var i=0;i < objects.length;i++) {
        objects[i].speed = parseInt(Math.random()*5)+1;
        objects[i].rotPos = 0;
    }
    
    this.spin = function() {
        for(var i = 1;i < 9999;i++) {
            window.clearInterval(i);
        }
        timer = setInterval(adjust, 100);
    };
    
    var adjust = function() {
        for(var i=0;i < objects.length;i++) {
            objects[i].rotPos += objects[i].speed;
            objects[i].style.transform = "rotate("+objects[i].rotPos+"deg)";
        }
        counter++;
    };   
};

White On White - Aug 29 2015

var whiteOnWhite = function () {
    this.color = "#ffc";
    this.offset = 100;
    this.howLong = window.innerWidth;
    this.howHi = window.innerHeight;
    this.wowdiv;
    
    this.drawWOW = function() {
        wowdiv = document.createElement("div");
        setWOW();
        document.body.appendChild(wowdiv);
    };
    
    var setWOW = function() {
        wowdiv.id = "wowdiv";
        wowdiv.style["margin-top"] = this.offset+"px";
        wowdiv.style["margin-left"] = this.offset+"px";
        wowdiv.style.width = this.howLong-(this.offset*2)+"px";
        wowdiv.style.height = this.howHi-(this.offset*2)+"px";
        wowdiv.style["background-color"] = this.color;
        wowdiv.style.transform = "rotate(3deg)";
    }.bind(this);
};