Generative Typography by Q

Typographic music by Dina Silanteva

Both projects are an exploration of generative typography. Typographic music is similar to one of the approaches in the final project. Several modules create one letter. Also, Generative typography by Q could be a good inspiration source for the final project. There is a lot of generative type exploration included in his work. In comparison to ‘Generative Typography’ and ‘Typographic Music’, ‘Generative Typography’ has more variety of type exploration which is visually inspiring. Also, ‘Typographic Music’ has much clearer parameters for each visual element than ‘Generative Typography’. I admire both projects because they have very interesting visualizations of data and generative type with an algorithm.

Generative Greeting Card

For the final project, I and my classmate Bettina collaborate to make generative greeting cards. Each of us will create a few different visual styles of cards (This will be the way we split up the work). Even if there are different styles and approaches, we are mainly focusing on creating typography with the techniques that we learned in the class so far. These are some approaches/styles that I am considering:

1. Creating custom typefaces with geometric elements.
2. Creating type with depicting pixels with lines, circle or any simple graphic elements. I used this approaches in my previous project
3. Creating a graphic pattern.

In addition, I am considering that make data visualization approach with this card generator. For example, based on who is receiving this card, what is the purpose, what is the relationship between sender and receiver or etc, visual elements could be differentiated. I think some parameters should be clarified.

Iamus by Iamus

Iamus is a computer in the University of Málaga that composes contemporary classical music without any human help. Its first studio album ‘Iamus’ was released in 2012. This album was composed by only a computer and recorded and played by London Symphony Orchestra. This album is composed utilizing ‘melodics’ which is a computational system based on bioinspired algorithm generating musical composition without human input. Also, Iamus evolves composition in itself.

I was surprised that this computer composes full pieces of complex classical music not just a piece of some melodies. Because it is so good at composing music without human input, people can easily think that computer would replace human musicians in the future. But, it also might be a really nice tool for human musicians to develop a new musical invention.

Iamus

Merry Christmas

var myTurtle;
var num;
var length = 20;

function setup() {
    createCanvas(480, 480);
    background(5, 60, 50);
    myTurtle = makeTurtle(width/2, height/2);
    flower(40);
}

function flower(angle) { //draw red flower
    for (j = 0; j <= 360/angle; j++) {
        myTurtle.penDown();
        myTurtle.x = width/2;
        myTurtle.y = height/2 - 20;
        myTurtle.setColor((color(255, 0, 0)));
        myTurtle.setWeight(6);
        drawhex(85);
        myTurtle.back(30);
        myTurtle.right(angle);
        myTurtle.penUp();
    }
}

function drawhex(length) { //draw hexagon which is a part of flower
    for (i = 0; i < 6; i++) {
        myTurtle.forward(length);
        myTurtle.right(60);
    }
}

function draw() {
    //snow flakes
    myTurtle.penDown();
    myTurtle.setWeight(1);
    myTurtle.setColor(color(255));
    drawhex(mouseX/70);
    myTurtle.x = random(0, width);
    myTurtle.y = random(0, height);
    myTurtle.penUp();
    
}

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: 45, 
                  penIsDown: true,
                  color: color(255, 0, 0),
                  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;
}

function mousePressed() {
    //it stops snowflakes
    noLoop();
    //draw ellipse
    fill(255);
    stroke(255);
    ellipse(width/2, height/2 - 20, 110, 110);
    //redraw red flower
    myTurtle.x = width/2;
    myTurtle.y = height/2;
    flower(40);
    stroke(5, 60, 50);
    //text
    textAlign(CENTER);
    textSize(28);
    strokeWeight(5);
    textFont('Trebuchet MS');
    text('M E R R Y  C H R I S T M A S', width/2, height - 40);
    
}

I made it because Christmas is coming! I created snowflakes and Christmas flower with multiple hexagons.

Generative Landscape

var angle = 0; //initial angle
var trees = [];
var bwTrees = 0;
var hillSpeed;

function setup() {
    createCanvas(480, 320);
    frameRate(10);
    hillSpeed = random(0.0001, 0.0005); 
    
    for (var i = 0; i < 10; i++){ //display 10 trees at the beginning
        var rx = random(width);
        trees[i] = makeTree(rx);
    }
}

function draw() {
    background(202, 244, 235);
    drawHill(); 
    drawTree();
    addTree();
}


function drawHill() {
    beginShape();
    stroke(252, 242, 40);
    for (var x = 0; x < width; x++) {
        
        var y = 90 + sin(angle) * 30; //used sin graph shape
        line(width - x, y, width - x, height);
        angle = angle + PI/121; //increment of angle
    }
    endShape();
    
    stroke(255, 210, 200);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = x * 0.003 + (millis() * hillSpeed);
        var y = map(noise(t), 0, 0.8, 0, height);
        line(x, y, x, height);
    }
    endShape();
    
    beginShape();
    stroke(24, 44, 160);
    for (var x = 0; x < width; x++) {
        var y = 240 + sin(angle) * 30; //used sin graph shape
        line(width - x, y, width - x, height);
        angle = angle + PI/240; //increment of angle
    }
    endShape();
}

function drawTree() {
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

function makeTree(x) {
    var tree = {
        birth: x,
        size: random(20, 60),
        speed: -2.0,
        move: TreeMove,
        display: TreeDisplay,
        height: random(30, 60),
        color: [255, 62, 54]
    }
    
    return tree;
}

function TreeMove() {
    this.birth += this.speed;
}

function TreeDisplay() {
    var treeHeight = 50; 
    fill(this.color); 
    noStroke();
    push();
    translate(this.birth, height - this.height);
    ellipse(0, 0, this.size, this.size);
    stroke(255);
    strokeWeight(2);
    line(0, 0, 0, this.height);
    line(0, this.size/5, this.size/6, this.size/20);
    if (this.size > 30) {
        line(0, this.size/3, -this.size/6, this.size/6);
    }
    pop();
}

function addTree() {
    var newTree = 0.85; //percentage
    if (random(0,1) > newTree) {
        bwTrees = bwTrees + 1;
        if (bwTrees == 4) { // it controls distance between. Two trees are not too close to each other
            trees.push(makeTree(width)); //add a tree
            bwTrees = 0; //reset
        }
    }

}

This landscape consists of 3 layers of hills and trees. For 3 layers of hills, Perlin noise and sin graph were utilized as disciplines to depict the shape of hills. Trees are executed with a javascript object and have random sizes and heights. I added more branch based on the size of the tree. It is really fun to keep watching how it continuously changes and create different landscape be each second. Here is one of the nice screenshots below. Also, for color combination, I try not to use typical green colors of hill and tree. I rather explore more experimental colors for this landscape. I think people can clearly see that they are hill/mountain and trees even if it is not with the typical green colors.

Changing Waters by Nathalie Miebach

Nathalie Miebach is a women data artist who is usually working with weather data with interdisciplinary execution. She incorporates data, science, visualization, and music. She visually articulates weather data into complex weaved sculptures. Then, she makes these sculptures into musical scores. Changing Water is a series of sculpture that visualizes seasonal variation in marine life based on the data about meteorological and oceanic interactions within the Gulf of Maine. She gathered these data from weather stations along the coast and buoys within the Gulf of Maine. Information about geographical location and relationship between ecosystem and weather are plotted on all the installations. I admire her because she combined multiple disciplines in translating data. Incorporation of the data, scientific knowledge, sculpture, and music composing is very unique.

Changing Waters

Wind Map by Fernanda Viegas & Martin Wattenberg

This wind map is generated based on a nearly real-time data from National Digital Forecast Database. It is revised by one hour. Two creators, Fernanda Viegas and Martin Wattenberg implement entire map only with using HTML and Javascript. With this map, people can immediately read the continuously changing flow, density, and direction of winds over all areas of the United States. Also, it highlights a region with the high-speed wind. They depicted the movement of air simply with the visual motion. I admire their work because it is able to communicate the specific types of information to audiences. People might understand what it tells about without many explanations. Also, the quality of quite simple but elegant visualization with motion and black and white color scheme looks really nice and makes me very intriguing to this work.

Wind Map

Computational Portrait

var img;
var x;
var y;
var blue_range;
var red_range;
var yellow_range;

function preload() {
    img = loadImage("https://i.imgur.com/boCvJXd.jpg");
}

function setup() {
    createCanvas(360, 480);
    img.loadPixels();
    noFill();
    yellow_range = 7; //initial value;
}

function draw() {
    background(255);
    blue_range = map(mouseX, 0, width, 0, 8);
    red_range = map(mouseY, 0, height, 0, 10);
    
    for (y = 0; y < height; y+=6) {
        for (x = 0; x < width; x+=6) {
            var i = y * width + x;
            //color
            var redness = (255 - img.pixels[i*4]) / 255;
            var yellowness = (255 - img.pixels[(i+1)*4]) / 255;// I just decide to represent green value among RGB as yellow color
            var blueness = (255 - img.pixels[(i+2)*4]) / 255;
            
            //blue diagonal line
            stroke(20, 20, 255);
            strokeWeight(blueness * blue_range);
            line(x - 3, y - 3, x + 3, y + 3);
            //red diagonal line
            stroke(255, 20, 20);
            strokeWeight(redness * red_range);
            line(x + 3, y - 3, x - 3, y + 3);
            //yellow ellipse
            noStroke();
            fill(245, 220, 0);
            ellipse(x, y, yellowness * yellow_range, yellowness * yellow_range);

        }
    }
}

function mousePressed() {
    yellow_range = random(1, 12); //yellow range changes when you press mouse
}
    

In this project, I learned that there are many ways to depict pixels. I represent this portrait with dividing each R, G, B value (Later, I represent green value with yellow color). Based on each R, G, B value, size and stroke weight are determined. Also, this can be played around with the mouse behaviors. There are several variations based on mouse behavior below.

Kyle McDonald

Kyle McDonald is a Los Angeles based media artist who is working with code. He is one of a contributor of Openframeworks which is the open source arts-engineering toolkit for artists who utilize code in their creative practice. With his strength of proficiency in coding, he had worked on many projects such as computer vision, 3D sensing, and interactive media installation. In many cases, he had worked in collaboration with several other professionals and learns through the experiences with them. Also, in videos, he introduced a lot of his projects and shared the work-in-progress for each and what he learned so far in the project. His sharing about his own learning and progress shows how he builds his interests, skills, and his career as a media artist. One of the projects that he showed is ‘Missing’ which is an interactive installation. It explores the concept of The xx’s new Album named coexist through the relationship of human and machine. In this installation, 50 speaker players follow visitors while it is playing the song of The xx ‘Missing’. I think it is a very effective installation to deliver new musical experiences.

Kyle Mcdonald Website

INSTINT 2014 – Kyle McDonald from Eyeo Festival // INSTINT on Vimeo.

Composition with Curves

var x;
var y;
var r;
var nPoints = 300;

function setup() {
    createCanvas(480, 480);
    strokeJoin(ROUND);
    smooth();
    stroke(255, 200, 200, [255]);
}

function draw() {
    background(240);
    noFill();
    
    push();
    translate(width / 2, height / 2);
    roseCurve();
    astroidCurve();
    pop();

}

function roseCurve() {
    strokeWeight(2);
    
    beginShape();
    for (i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var a = map(mouseY, 0, height, 40, height/2); //change its size depending on y coordinate of mouse
        var n = map(mouseY, 0, height, 0, 4); //change its shape depending on y coordinate of mouse
        r = a * sin(n*t);
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
        
    }

    for (i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var a = map(mouseY, 0, height, 40, height/2); //change its size depending on y coordinate of mouse
        var n = map(mouseY, 0, height, 0, 4); //change its shape depending on y coordinate of mouse
        r = a * sin(n*t);
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(-x, y);
        
    }

    for (i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var a = map(mouseY, 0, height, 40, height/2); //change its size depending on y coordinate of mouse
        var n = map(mouseY, 0, height, 0, 4); //change its shape depending on y coordinate of mouse
        r = a * sin(n*t);
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, -y);
        
    }

    for (i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var a = map(mouseY, 0, height, 40, height/2); //change its size depending on y coordinate of mouse
        var n = map(mouseY, 0, height, 0, 4); //change its shape depending on y coordinate of mouse
        r = a * sin(n*t);
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(-x, -y);
        
    }
    endShape(CLOSE);

}


function astroidCurve() {
    noFill();

    beginShape();
    for (i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var a = map(mouseX, 0, width/2, 20, nPoints/2); //change its size depending on x coordinate of mouse
        x = a*pow(cos(t),3);
        y = a*pow(sin(t),3);
        
        vertex(x, y);
        ellipse(x, y, 100, 100); //create ellipse along the curve line
    }
    endShape();
}

Before starting to code my program, I explored various curve equation in Mathworld curve site. I think this site is a very useful reference. Also, it was interesting to see all the different curve shapes. At the beginning, I had no idea how to apply polar form. But, I finally realized (x = r cos(θ) and y = r sin(θ)). I chose ‘Rose Curve’ and ‘Astroid Curve’ for my project. Personally, I really like rose curve because of the way it changes shape. I played with a combo of two different curves. You can see some of the nice examples below.