Month: September 2017

I wanted to make something simple and cute that would allow for a bit of an unnaturalness to it too. By putting the smile and adding random circles around it, it creates this uneasiness.

Lrospigl Sketch

//Laura Rospigliosi
//Section C
//lrospigl@andrew.cmu.edu
//Project-04-String art

var distw = 50; // x spacing
var disth = 50; // y spacing
var circlex = 25; // x start
var circley = 25; // y start
var circle = 10; // number of circles per row
var c = (230, 180, 230);
var angle = 1;

function setup() {
    createCanvas(450,450);
}

function draw() {
    background(250);

    for (var row = 0; row < 9; row++) {
        if (row % 2 ===1){
            circlex +=25; //spacing of odd rows + start
            circle = 8; // number of circles

        }
        else {
            circlex = 25; //start of circles
            circle = 9; //
        }
        for (var col = 0; col < circle; col++) {
            var cx = 0;
            var cy = row * disth;
            lines (cx, cy);
        }

    for (var col = 0; col < circle; col++) {
        var px = circlex + col * distw;
        var py = circley + row * disth;
        smiley (px, py);
        }
    noLoop();
}
}

function lines(cx, cy) {
    push();
    translate (cx, cy);
    strokeWeight (10)
    stroke (100, 100, 200);
    curve (0, 0, 0, 0, 450, 10, 450, 0, 450, 0);
    pop();
}

function smiley(px, py) {
    push();
    stroke (0)
    translate(px, py);
    fill(255, 255, 0);
    ellipse (0, 0, 40, 40);
    fill (0);
    ellipse (-6,-5, 5, 5);
    ellipse (6, -5, 5, 5);
    fill (c);
    arc(0, 3, 20, 20, 0, PI);
    noFill ();
    ellipse (-2, 0, 41, 40);
    ellipse (2, 0, 40, 39);

    pop();
}

Before beginning to code my wallpaper, I looked around online for inspiration. A lot of the online patterns I found incorporated organic and complex shapes. For my wallpaper, I wanted to focus on the use of for loops and repetition of simple shapes. I made a few rough sketches to help visualize what I needed to code.

I decided to use the last thumbnail sketch as a basis for my actual coded wallpaper design. After coding the shapes, I then went and played around with different colors.

sketch

function setup() {
    createCanvas(480, 480);
    background(121, 128, 113);

    //creating circular pattern
    var cdiam = width/5; //diameter of circles
    var spacex = 3 * cdiam / 4; //space between in x direction
    var spacey = 4 * cdiam / 3; //space between in y direction
    var ox = (width - (spacex * 6))/2; //x position
    var oy1 = (height - (spacey * 3))/2; //y position for every odd column
    var oy2 = oy1 - 2 * cdiam / 3; //y position for every other column

    for(var x = 0; x < 7; x++){ 

        var posx = ox + x * spacex; //x position consistent

        if(x % 2 == 1){
            for(var y = 0; y < 4; y++){ //4 circles
                fill(210, 213, 221);
                strokeWeight(10);
                stroke(153, 154, 198);

                var posy1 = oy1 + y * spacey; //y position of odd columns

                ellipse(posx, posy1, cdiam, cdiam);
            }
        } else {
            for(var y = 0; y < 5; y++){ //5 circles
                fill(184, 186, 207);
                strokeWeight(10);
                stroke(153, 154, 198);

                var posy2 = oy2 + y * spacey; //y position of even columns

                ellipse(posx, posy2, cdiam, cdiam);
            }
        }
    }

    //creating line pattern
    var lineox = ox + spacex/2; //original x position of lines
    var lineoy = oy1 - spacey/4; //original y position of lines

    for(var xline = 0; xline < 6; xline++){ // 6 vertical lines
        strokeWeight(5);
        stroke(232, 235, 228);

        var posVline = lineox + spacex * xline; // position of vertical lines

        line(posVline, 0, posVline, height);
    }

    for(var yline = 0; yline < 8; yline++){ // 8 horizontal lines
        strokeWeight(5);
        stroke(232, 235, 228);

        var posHline = lineoy + spacey/2 * yline; //position of horizontal lines

        line(0, posHline, width, posHline);
    }

    //creatings dots
    for(var dotsx = 0; dotsx < 6; dotsx++){
        for(var dotsy = 0; dotsy < 8; dotsy++){

            var posxdots = lineox + spacex * dotsx; //position of dots in x direction
            var posydots = lineoy + spacey/2 * dotsy; //position of dots in y direction

            noStroke();
            fill(121, 128, 113);
            ellipse(posxdots, posydots, 15, 15);
        }
    }

    noLoop();
}

function draw(){

}