Category: Project-05-Wallpaper

sketch

// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 5 - Wallpaper

var diamondH = 10; // height of the diamonds
var diamondW = 10; // width of the diamonds
var diaMargin = 5; // space between a diamond and its outline
var thickStripe = 20; // stroke weight of the thick stripe
var thinStripe = 3; // stroke weight of the thin stripe

function setup(){
    createCanvas(500, 500);
    angleMode(DEGREES);
}

function draw(){
    background("skyblue");

    // drawing the diamonds
    // controling rows
    for(x = 0; x < 550; x += 25){
        // controlling number of diagonal lines
        for(y = -500; y < 500; y += 175){
            drawDiamond(x + y , x);
        }
    }

    // drawing the stripes
    for(x = -100; x < 550; x += 175){
        for(y = 0; y < 500; y += 175){
            drawStripes(x, y);
        }
    }
    noLoop();
}

// draws one diamond and its outline
function drawDiamond(x, y){
    strokeWeight(1);
    stroke("black")
    push();
    translate(x, y);

    rotate(135);
    // diamond
    fill("orange");
    rect(diaMargin, diaMargin, diamondW, diamondH);

    // outline
    // makes the rectangle transparent
    fill(0, 0, 0, 0);
    rect(0, 0, diamondW, diamondH);

    pop();
}

// draws big and little stripes to fill gaps of the diamonds
function drawStripes(x, y){
    // drawing first big stripe
    stroke("white");
    strokeWeight(thickStripe);
    line(x, y, x + 500, y + 500);

    // little stripe
    stroke("orange");
    strokeWeight(thinStripe);
    line(x + 30, y, x + 530, y + 500)

    // other big stripe
    stroke("white");
    strokeWeight(thickStripe);
    line(x + 60, y, x + 560, y + 500);
}

I originally sketched this to include less frequent diagonals of the diamonds, but upon creation I really liked the contrast between the horizontal positioning of the diamonds and the diagonal positioning of the stripes. I also wanted to implement a vibrant color palette, which manifested itself as light blue, orange, and white. My biggest difficulty in creating this wallpaper was dealing with replicating the diagonals. Particularly, the diamonds were difficult because I rotated them upon drawing them, so their coordinate system became harder to keep track of.

Below is my original sketch:

My Wallpaper

/* 
Emma Nicklas-Morris
Section B
enicklas
Project-05
Wallpaper
*/

// width and height of diamonds (squares)
var big = 100;
var med = 90;
var sm = 80;
var smaller = 70;
var smallest = 60;
var tiny = 20;

// space between diamonds (based off the large one)
var space = 20; 

function setup() {
    createCanvas(500, 500);
    background("#F5DEBB");
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            noStroke();
            rectMode(CENTER);
            drawBig(i, j);
            drawMed(i, j);
            drawSm(i, j);
            drawSmaller(i, j);
            drawSmallest(i, j);
            tinyDiamond(i, j);
            blueDiamond(i, j);
        }
        
    }
    noLoop();

}

// Draws large purple diamond (square rotated)
function drawBig(i, j) {
    push();
    translate(width/2, -height/2);
    rotate(radians(45));
    fill("#581845")
    rect(big * i + space * i, big * j + space * j, big, big);
    pop();
}

// Draws medium purple-pink diamond (square rotated)
function drawMed(i, j) {
    adj = 7.5;
    push();
    translate(width/2, -height/2 - adj);
    rotate(radians(45));
    fill("#900C3F");
    nSpace = big - med + space
    rect(med * i + nSpace * i, med * j + nSpace * j, med, med);
    pop();
}

// Draws small magenta diamond (square rotated)
function drawSm(i, j) {
    adj = 15;
    push();
    translate(width/2, -height/2 - adj);
    rotate(radians(45));
    fill("#C70039");
    nSpace = big - sm + space
    rect(sm * i + nSpace * i, sm * j + nSpace * j, sm, sm);
    pop();
}

// Draws smaller orange diamond (square rotated)
function drawSmaller(i, j) {
    adj = 22.5;
    push();
    translate(width/2, -height/2 - adj);
    rotate(radians(45));
    fill("#FF5733");
    nSpace = big - smaller + space
    rect(smaller * i + nSpace * i, smaller * j + nSpace * j, smaller, smaller);
    pop();
}

// Draws smallest yellow diamond (square rotated)
function drawSmallest(i, j) {
    adj = 30;
    push();
    translate(width/2, -height/2 - adj);
    rotate(radians(45));
    fill("#FFC30F");
    nSpace = big - smallest + space
    rect(smallest * i + nSpace * i, smallest * j + nSpace * j, smallest, smallest);
    fill("#F5DEBB");
    rect(nSpace * i * 2, 0, space, height * 3); // split the diamonds into smaller ones
    rect(0, nSpace * j * 2, width * 3, space); // split the diamonds into smaller ones
    pop();
}

// Draws blue diamond on top of big diamond 
function blueDiamond(i, j) {
    push();
    translate(width/2, -height/3);
    rotate(radians(45));
    fill("#13B9BD");
    b = tiny /2;
    nSpace = big - b + space
    rect(b * i + nSpace * i, b * j + nSpace * j, b, b);
    pop();
}

// Draws tiny green diamond on top 
function tinyDiamond(i, j) {
    adj = 58.5
    push();
    translate(width/2, -height/2 - adj);
    rotate(radians(45));
    fill("#88D840");
    nSpace = big - tiny + space
    rect(tiny * i + nSpace * i, tiny * j + nSpace * j, tiny, tiny);
    pop();
}

I knew I wanted to do something geometric and repetitive with the use of a nice color palette. I started with the idea of creating squares that would be rotated to look like diamonds. From there, I knew I wanted to create a bullseye-like effect where all of the diamonds start at the top corner. Once that was created, I played with the idea of creating more diamonds inside those larger diamonds. Finally, I created my color palette based the rainbow and incorporated smaller diamonds to add to the complexity.

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-05-wallpaper

function setup() {
    createCanvas(400, 400);
    background(236, 214, 180);
    
}

function draw() {
	//use Nested Loop to create shapes
	for (var j = 0; j < 13; j++) {
        for (var i = 0; i < 12; i++) {

        //maroon circles
        noStroke();
        fill(185, 88, 84);
        circle(i * 46 + 15, j * 30 + 15, 20);

        //yellow triangles
        fill("yellow");
        triangle(i*40+65, j*40+20, i*40+5, j*40+50, i*40+35, j*40+50);
        
        //white verticle lines
        fill("white");
        rect(i*46+15, 0, 3, 400);

        }
    }

    noLoop();
}

Nested loop is a very useful tool when creating repetitive patterns. It was fun to design an aesthetically pleasing image by balancing the colors and shapes of different elements.

I researched wallpaper or tablecloth patterns on the internet first, then tried to design my own image. I set the overall color to be soft and harmonious, by using a combination of pink, maroon, light yellow and white. The shapes I used include triangles, circles and rectangles, which overlap on each other to create a harmonious pattern.