Category: SectionB

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu;
//Project-05

var density = 20;     //grid density
var tile;

function setup() {
    createCanvas(600, 600); 
    noLoop();
    tile = width / density;   //find tile dimension
}

function draw() {
    background(200);

    //create a grid 
    for (var gridY = 0; gridY <= density; gridY++) {
        for (var gridX = 0; gridX <= density; gridX++) {

            //random color generator
            array = ["DarkSalmon", "DarkSeaGreen", "LightCoral", "MediumAquaMarine"];
            colorSeed = int(random(0, 4));
            var color = array[colorSeed];
            stroke (color);
            strokeWeight(1);

            //define the grid's X and Y positions
            var posX = tile * gridX;
            var posY = height / density * gridY;

            //randomizer
            var toggle = int(random(0, 3));
            //randomize which direction the diagonal is drawn
            //whether it's (\) or (/)
            if (toggle == 0) {
                line(posX, posY, posX + tile, posY + height / density);
            }
            if (toggle == 1) {
                strokeWeight(2);
                line(posX, posY + tile, posX + height / density, posY);
            }
            // if it's not / or \ then draw a dot
            if (toggle == 2) {
                noStroke();
                fill(color);
                circle(posX, posY, tile / 4)

            }
            // if it's not / or \ or a dot then it becomes a torus flower
            else {
                noFill();
                stroke(color);
                strokeWeight(1);
                circle(posX, posY, tile / 3);                
                push();
                translate(posX, posY);
                for (i = 0; i < 6; i++) {
                    fill(255, 100);
                    circle(tile / 6, 0, tile / 3);
                    rotate(radians(60));
                }
                pop();
            }
        }
    }
}

function mousePressed() {
    //redraw the wallpaper when you click your mouse
    redraw();
}

I started by creating a grid and then creating a maze like pattern based on a random toggle (i.e. if the line goes \ or /). I wanted to create a more fun pattern so I added to the conditional to add a flower or a dot in the places where there was no line. I was challenging myself to find a balance between structure and randomness. There’s also a random color associated with each graphic that is placed in the grid. Hence, every time you click your mouse a completely new wallpaper is drawn unlike the one before.

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.