For my project I was looking at twitter bots: specifically art bots and poetry bots.

@pixelsorter is an art bot that utilizes pixel sorting. The pixels of a base image are sorted and rearranged according to some value of the pixels, such as how much green is in each pixel, to create a new composition.

@a_quilt_bot is a bot that takes images submitted by followers and recreated them by editing visually similar photo snippets of fabric into place, creating what looks like the submitted image were it made into a quilt.

I’m interested in this kind of art because I think it makes use of a medium (in this case twitter) in a way that the medium wasn’t intended for originally. I view these projects as starting points, and want to include a generative element in addition to reorganization of the original content.

Other inspiration!

Nonsense Haikus, Using the Tweets of Donald Trump

http://botpoet.com/

For my final project I am interested in making a twitter bot that either randomly generates abstract art by having the code run through a series of conditionals to represent different choices an artist would make, or takes tweets or images chosen by the user, and rearranges the pixels/words of the input and rearranges them to form abstract art/poetry. I did a bit of research and once you make an account for your twitter bot you can create an application that links to a url, or in my case, an index.html file. I think that twitter bots are interesting because a lot of times what seems to be randomly generated content turns out to be thoughtfully done to produce a comprehensible (or humorously uncomprehensible) outcome. I think the most difficult aspect of this project would be breaking down art and language down to its most basic parts, so that when reassembled according to how the code dictates, it is not completely nonsensical.
While it’s difficult for me to provide a sketch without actually writing the code, here are some inspirations that I expand upon in my looking outwards post

sketch

var t1;
var startFrame;

function setup() {
    createCanvas(400, 400);
    background(0);
    //initializes and sets the weight and color of 6 turtles
    t1 = makeTurtle(width / 2, height / 2);
    t1.setColor(color(255, 200, 200));
    t1.setWeight(2); 
    t1.penDown();
    t2 = makeTurtle(width/2, height/2);
    t2.setColor(color(0,0,255));
    t2.setWeight(2);
    t2.penDown();
    t3 = makeTurtle(width/2, height/2);
    t3.setColor(color(255,0,0));
    t3.setWeight(2);
    t3.penDown();
    t4 = makeTurtle(width/2, height/2);
    t4.setColor(color(0,255,0));
    t4.setWeight(1);
    t4.penDown();
    t5 = makeTurtle(width/2, height/2);
    t5.setColor(255);
    t5.setWeight(2);
    t5.penDown();
    t6 = makeTurtle(width/2, height/2);
    t6.setColor(color(255,255,0));
    t6.setWeight(1);
    t6.penDown();
    resetCanvas();
    frameRate(10);
}

function draw() {
    var s = second(); // makes a time based variable
    var step = (frameCount - startFrame)/30.0;//creates a varying amount to move forward
    var angle1 = -100/s;//creates different angles based on the second (time)
    var angle2 = 50/s;
    var angle3 = -100/(s * 2);
    var angle4 = 200/(s * 2);
    var angle5 = -180/(s * 3);
    var angle6 = 400/(s * 3);
    t1.forward(step);
    t1.left(angle1);
    t2.forward(step);
    t2.left(angle2);
    t3.forward(step);
    t3.left(angle3);
    t4.forward(step);
    t4.left(angle4);
    t5.forward(step);
    t5.left(angle5);
    t6.forward(step);
    t6.left(angle6);
}

function resetCanvas() {
    background(0);
    startFrame = frameCount;
}


function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

I originally started this by modifying my abstract clock project from week 6, because I had wanted to make an element like this but hadn’t known how to. Because the angle of the turtle is determined by a time based variable, as opposed to a for loop, the composition will generate differently based on what time you load it, which I found interesting. The screenshots below are the same code generated at different times.

sketch

var lamps = [];
var stars = [];


function setup() {
    createCanvas(480, 280); 
    
    // create an initial collection of objects
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        lamps[i] = makeLamp(rx);
        stars[i] = makeStar(rx);
    }
    frameRate(10);
}


function draw() {
    background(37, 33, 90); 
    noStroke();
    fill(209, 215, 41);
    rect(0,height - 100,width,100);//ground
    fill(195,206,60);
    rect(0,height - 70, width, 70);
    fill(181,200,52);
    rect(0,height - 40, width, 40);

    updateAndDisplayLamps();
    removeLampsThatHaveSlippedOutOfView();
    addNewLampsWithSomeRandomProbability();
    
    updateAndDisplayStars();
    removeStarsThatHaveSlippedOutOfView();
    addNewStarsWithSomeRandomProbability(); 
    for(var i = 190; i < height; i+=10){//draws lines in the foreground
      stroke(181,200,52);
      strokeWeight(1.5);
      line(0, i, width, i);
    }
}


function updateAndDisplayLamps(){
    // Update the building's positions, and display them.
    for (var i = 0; i < lamps.length; i++){
        lamps[i].move();
        lamps[i].display();
    }
}

function updateAndDisplayStars(){
    // Update the building's positions, and display them.
    for (var i = 0; i < stars.length; i++){
        stars[i].move();
        stars[i].display();
    }
}

function removeLampsThatHaveSlippedOutOfView(){
    // takes away lamps once they leave the frame
    var lampsToKeep = [];
    for (var i = 0; i < lamps.length; i++){
        if (lamps[i].x + lamps[i].breadth > 0) {
            lampsToKeep.push(lamps[i]);
        }
    }
    lamps = lampsToKeep; // remember the surviving buildings
}

function removeStarsThatHaveSlippedOutOfView(){
//removes stars from array stars and puts them in new array
//once they've moved off the edge of frame
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].breadth > 0) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep; // remember the surviving stars
}

function addNewLampsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newLampLikelihood = 0.013; 
    if (random(0,1) < newLampLikelihood) {
        lamps.push(makeLamp(width));
    }
}

function addNewStarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newStarLikelihood = 0.02; 
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStar(width));
    }
}

// method to update position of building every frame
function lampMove() {
    this.x += this.speed;
}

function starMove() {
    this.x += this.speed;
}

// draws lamps
function lampDisplay() {
    fill(255,255,0,45);
    noStroke()
;    ellipse(this.x, height -100 - this.h,this.r,this.r); //halo of light from lamp
    fill(102,166,218);
    rect(this.x-1.5, height - 100 - this.h, this.breadth, this.h); //lamp post
    fill(255);
    ellipse(this.x, height - 100 - this.h, this.r2, this.r2); //lightbulb
    stroke(255);
    strokeWeight(0.5);
    noFill();
    quad(this.x - 1.5, height - 97 - this.h,
        this.x - 5, height - 110 - this.h,
        this.x + 5, height - 110 - this.h, 
        this.x + this.breadth - 1.5, height - 97 - this.h); //draws the lamp box
}

function starDisplay(){
  //halo of light around star
  noStroke();
  fill(255, 255, 0, 30);
  ellipse(this.x + this.breadth/2, this.h, this.breadth * 5, this.breadth * 5);
  stroke(255,255,0);
  strokeWeight(0.5);
  noFill();
  //draws diamonds that make up star
  quad(this.x, this.h,
       this.x + this.breadth / 2,this.h - this.tall / 2,
       this.x + this.breadth, this.h,
       this.x + this.breadth / 2,this.h + this.tall / 2);
  //quad(this.x - this.breadth / 2, this.h,
       //this.x + this.breadth, this.h + this.tall / 2,
       //this.x + this.breadth / 2, this.h,
       //this.x + this.breadth / 2, this.h - this.tall/2);
}


function makeLamp(posX) {
    var lamp = {x: posX,
                breadth: 3,
                speed: -1.5,
                h: random(40,60),
                r: random(20,35),
                r2: 4,
                move: lampMove,
                display: lampDisplay}
    return lamp;
}

function makeStar(posX) {
    var star = {x: posX,
                breadth: 3,
                speed: -0.5,
                tall: random(5,10),
                h: random(20, 100),
                move: starMove,
                display: starDisplay}
    return star;
}

this was my original mock up in illustrator, but I struggled to get the building code to do what I wanted it to, so I decided to add other elements to supplement my lamps, so I added star objects, and made the foreground more detailed.

Inside The Flower Matrix from Claudia Hart on Vimeo.

Inside the Flower Matrix is a virtual reality environment created by Claudia Hart in 2016. She examines the idea of identity through the lens of technology through virtual imaging and simulations technology.

The wallpaper in the physical space changes rapidly in the virtual reality space, meant to make a statement about the Internet. I’m currently studying environments in my design classes, and this venture into the virtual/digital space interested me because in making a statement the artist wanted to make something visually alarming and headache inducing, which is opposite in intent from what I am usually instructed to do. I think creating something alarming can be extremely impactful when the artist/designer wants to send a strong message.

I looked at what jwchou’s Looking Outwards assignment on generative art. He looked at the Postmodernist Art Generator by Don Relya, which took into account choices that artists make when creating art and used code to generate random postmodernist art instantaneously. With every iteration, the code is altered to take more factors into account. The last such iteration was in 2010.When responding to the piece, jwchou was interested in the artist’s statement where he said that while an artist’s actions can never be computationally reproduced completely, this parsed their actions, with constraints in order to create an algorithm for postmodernism.

I find this concept to be extremely interesting. The way it looks into the artistic process in an analytical way is very appealing to me, and I think presents an interesting counter argument to those who look down on modern and postmodern art as not being “real art” by presenting the complexity of the decisions that go into said art. I especially liked the final screenshot attached of the most recent iteration of the code, which I attached below.
Link to jwchou’s post

Link to artist’s website

sketch

var photo;

function preload(){
  photo = loadImage("https://i.imgur.com/3TDt7Za.jpg");
}

function setup() {
  createCanvas(480, 480);
  background(255);
  photo.loadPixels();//load the pixels of the underlying photo
}

function draw() {
  for(var x = 0; x < width;x+=10){
    for(var y = 0; y < height; y+=10){
        var c = photo.get(x,y);//stores RGB value of pixel at (x,y) in array c
        noStroke();
        fill(c);
        rect(x,y,10,10);//draw rectangle at (x,y)
        var r = c[0];//assign items from the array c to variables
        var g = c[1];
        var b = c[2];
        noStroke();
        fill(r-40, g-40, b-40);
        rect(x,y,8,8);//draw circle inside the rectangle
        noStroke();
        fill(r+20, g+20, b+20);
        ellipse(x +5,y+5,4,4);
    }
  }
}

For this assignment I was inspired by Chuck Close’s portraits made up of squares with detail inside them, and wanted to recreate this effect within my portrait. I like how the end result looks a bit like a lego portrait.

L05, also known as Carlos Garcia, is a member of the Detroit based collective, Complex Movements, a group that aims to address social justice issues through multimedia performance art. Their current project “Beware of Dandelions” is a mobile art installation made up of a 400 square foot dome like structure. Viewers go inside the dome as the piece, which combines performance, hip hop, and generative design. This piece seeks to communicate about community organization, function as an oral history archive and as performance art. I was interested in Complex Movement’s work because of the approach Beware of Dandelions took to local social justice, turning it into an artistic attraction that allows visitors and locals to engage in the issue in a captivating manner.

Link to Complex Movement’s website

sketch

function setup() {
  createCanvas(400, 400);
  frameRate(10);
}


function draw() {
  background(245, 252, 99);
  // draw the frame
  fill(0);
  noStroke();
  stroke(1);

  // draw the curve
  push();
  translate(width / 2, height / 2);
  drawNeoid();
  pop();
}

function drawNeoid(){
  var x;
  var y;
  var ac = mouseX/50;
  var a = constrain(ac, 0.4, 80);//constrains variable to keep curve from scrunching too small
  var b = mouseY/100;
  noFill();
  stroke(0,0,255);
  strokeWeight(2);
  beginShape();
  for(var i = 0; i < width; i+=5){
    var t = map(i, 0, -10, 10, TWO_PI);//maps theta so curve expands and contracts smoothly
    x = cos(t) * (a * t + b);//parametric equation for neoid
    y = sin(t) * (a * t + b);//parametric equation for neoid
    vertex(x,y);
  }
  endShape(OPEN);
}

I started by playing with the epichondroid curve example code. By using the vertex command twice with differently ordered variables, I was able to render the curves in interesting ways. I then moved to playing around with a neoid curve, and by adjusting the for loop I was able to achieve the curve I ended up with.

These are examples of what the curve would have looked like if my for loop had added 5, 10, and 15 to i.

I find data visualization to be an interesting intersection between programming and graphic design/art as the better it is executed, the more likely people are to try to absorb the information given.

I chose to look at Fernanda Viegas’ chromogram, a data visualization piece that tracks what Wikipedia users (editors, not readers) search for. The algorithm tracks the first three letters of Wikipedia searches, and assigns a color to the string, resulting in a series of lines of blocked color that allows viewers to pick out repeated trends in editor activity.

The above photo is an example of this, tracking the searches of a single editor who focused on naval centric articles. The purple is the string “USS”.

Link to the project