Month: October 2017

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-09

var underlyingImage;
var locations = [];
var squares = [];


function preload() {
    var myImageURL = "https://i.imgur.com/uCMUDGO.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(200, 250);
    noStroke();

    underlyingImage.loadPixels();
    frameRate(60);
    for( var i = 0; i < width / 5; i++ )
    {
        locations.push( [] );
        for( var j = 0; j < height / 5; j++ )
        {
            locations[i].push(0);
        }
    }
}

function draw()
{
    for( var i = 0; i < len(squares); i++ )
    {
        squares[i].draw();
    }
}

function squareStep()
{
    if( this.y == this.targetY ) return;
    this.y += 1;
}

function squareDraw()
{
    push();
    fill( this.color );
    rect( this.x, this.y, 5, 5 );
    pop();
}

function makeSquare( sx, sy, stargetY, scolor )
{
    s = { x: sx, y: sy, targetY: stargetY, step: squareStep, draw: squareDraw, color: scolor };
    return s;
}

function draw() {
    background(0);
    var targetX = int(random((width-1)/5))*5;
    var test = false;
    for( var i = 0; i < locations.length; i++ )
    {
        if( locations[i][0] == 0 ) test = true;
    }
    for( var i = 0; i < squares.length; i++ )
    {
        squares[i].step();
        squares[i].draw();
    }
    if( !test ) return;
    while( locations[targetX/5][0] )
    {
      targetX = int(random((width-1)/5))*5;
    }
    for( var i = 0; i < height / 5; i++ )
    {
        if( locations[targetX/5][i] == 1 )
        {
            locations[targetX/5][i-1] = 1;
            squares.push( makeSquare( targetX, 0, (i-1)*5, underlyingImage.get( targetX, (i-1)*5 ) ) );
            break;
        }
        if( i == height/5 - 1 )
        {
            locations[targetX/5][i] = 1;
            squares.push( makeSquare( targetX, 0, i*5, underlyingImage.get( targetX, i*5 ) ) );
        }
    }

    
}

It’s a picture of me from highschool made out of falling blocks.

sketch

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/Q9MzvBG.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(400, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

function draw() {
	var lineStartX = random(width);
    var lineStartY = random(height);
    var lineStartX2 = random(width);
    var lineStartY2 = random(height);
    var ix = constrain(floor(lineStartX), 0, width-1);
    var iy = constrain(floor(lineStartY), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    stroke(theColorAtLocationXY);
    line(lineStartX, lineStartY, lineStartX + 20, lineStartY + 20);
    line(lineStartX2, lineStartY2, lineStartX2 + 20, lineStartY2 - 20);

}

I wanted to do something with lines, so I started by just making the line from one random point to another. The problem was it was only using the color from the starting point, so it just made this big blob with no actual portrait. So I shortened the distance of the lines so that the colors wouldn’t stray from their rightful spots too much.