Category: Project-05-Wallpaper

sketch

function setup() {
    createCanvas(640, 480);
    background(224, 255, 255);

 	var constant = (sqrt(3)/2)*20; // value for the width
    var row = 8;
    var w = 65; //spacing
    var th = constant;
    var oy = 10; // original y
    var ox = 2; // original x

    for (var y = 0; y < 8; y++) {
        for (var x = 0; x < row; x++) {
            var py = oy + y * th;
            var px = ox + x * w;
            if (y%2 == 0){
            	noStroke();
            	fill (112, 128, 144);
            	rect(px+w*0.3, py*8, 10, 10); //smaller rectangles (top n bottom)
            	row = 10; 
            } else {
            	noStroke();
            	fill (176, 192, 222);
            	rect(px, py+119, 50, 50); //larger rectangle in middle
            	row = 10;
            }
        }
    }
    noLoop();
}

function draw(){
	for (var i =0; i<800+40; i+=30) {
		stroke (30, 144, 225);
		strokeWeight (2);
    	line(i-2, 35, i+5, 40); //shorter line top
    	line (i-2, 35, i+5, 50); //longer line bottom
    	stroke (245, 255, 250, 80);
    	line (2, 3*i, 5*i, 1);
    	stroke (30, 144, 225);
    	strokeWeight (2);
    	translate (-5, 0);
    	line (i+40, 400, i+25, 405);
    	line (i+40, 400, i+25, 420);
    }
}

This project was pretty low-key for me and I wanted to keep my project mostly geometric/basic. I liked playing around with the colors and I chose to do a blue-guided color palette. If I had more time, I definitely would want to make it a little more complex.

For this project, I took inspiration from the color gradient lab that we did on Tuesday. I wanted to experiment with more textured shapes than I had been using previously, and I think this turned out really interesting.

Jdbrown Proj 5

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 5: Wallpaper

var i = 0;
var fuck = 150;
var shit = 50;
var flash = 10;

function setup () {
    createCanvas (600, 480);
    stroke (255);
    strokeWeight (3);
}

function draw () {

    background (255);
 
    for (var y = 50; y < height + 50; y += 100) {
        rect (x + 50, y - 25, 50, 50);
        
        for (var x = 50; x < width + 50; x += 100) {
            fill (y/2, x/2, 0, x*y);
            ellipse(x - 25, y - 10, 25, 150);   // vertical grid
            ellipse(x - 25, y - 10, 50, 50);    // big circles at each nexus point
            ellipse(x + 25, y + 45, 20, 20);    // little dot in the center of each square
            ellipse(x, y, 30, 30);              // lower bump
            ellipse(x - 25, y - 10, 30, 30);    // lower bump
            ellipse(x - 10, y - 10, 35, 35);    // bee body (big)
            ellipse(x - 10, y - 10, 115, 15);   // horizontal grid
            ellipse(x - 25, y - 10, 25, 25);    // central circle
        }
    }

    for (var y = 0; y < height+25; y += 50) {       // Draws columns (just Y)
        for (var x = 0; x < width+25; x += 50) {    // Draws rows (just X)
            fill(150, 200);
            ellipse(x + 1000, y, 25, 25);
        }
    }
    for (var  x = 5; x < width + 25; x += 10) {
        for (var y = 5; y < height + 25; y += 10) {
        fill(255, 120);
        ellipse(x, y, 5, 5);
        }
    }
}

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(){

}