Lines: A face

For this project, I tried to make a face out of simple lines. When constructing faces, it is always interesting to see how simplistic or complicated you could make it through the assumptions of what is considered a face.

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

function setup() {
    createCanvas(400, 400);
    background(200);
    line(50, 50, 150, 300);
    line(300, 300, 350, 100);
    line(10,380,180,300);
    line(280,260,370,390);
    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines;
}

function draw() {
    fill(0);
    triangle(200,0,140,100,180,110);
    triangle(180,140,200,120,280,145);
    triangle(190,145,200,160,240,150);
    var x1 = 50;
    var y1 = 50;
    var x2 = 300;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    } for (var i = -150; i <= numLines * 2; i += 4) {
        line(x1, y1, x2, y2);
        x1 += dx1 / 2;
        y1 += dy1 / 2;
        x2 += dx2 / 2;
        y2 += dy2 / 2;
        //eyelashes i think
    } for (var i = 1; i <= numLines * 2; i += 4) {
        line(x2 * 5, y1 , x1 -50, y2 + 40);
        var x1 = 0;
        var x2 = 200;
        var y1 = 300;
        var y2 = 350;
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        //random lines for texture
    } for (var i = 0; i <= numLines; i += 2) {
        line(x1, y1 - 300, x2, y2 - 300);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        //hair
    } for (var i = 0; i <= numLines; i += 2) {
        x2 = 80;
        y2 = 30;
        line(x1, y1 - 300, x2, y2 - 300);
        x1 -= dx1;
        y1 -= dy1;
        x2 += dx2;
        y2 += dy2; }
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;  }
    x1 = 10;
    y1 = 380;
    x2 = 280;
    y2 = 260;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;  }
    noLoop();
}

Leave a Reply