Category: SectionD

sketch

//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Project 05 - Wallpaper

function setup() {
    createCanvas(600, 480);
    background("black");
    }
//Calling pattern function in consistent intervals by using for loop
function draw() {
    for (var x = 0; x < width + 50; x += 100) {
        for (var y = 0; y < height + 50; y += 70) {
            pattern(x + 50, y + 30);
        }
    }
}
function pattern(x, y){
    //variables controlling each shape's size
    var size = 50;
    var smallSize = 15;
    var rectSize = 30;

    noStroke();
    //pink ellipse
    fill("pink");
    ellipse(x, y, size, size);
    rectMode(CENTER);
    //rotated center black square to make diamond shape
    push();
    translate(x, y)
    rotate(radians(45));
    fill("black");
    rect(0, 0, rectSize, rectSize);
    pop();
    //inner red diamond inside the black diamond
    push();
    translate(x, y)
    rotate(radians(45));
    fill(255, 125, 122);
    rect(0, 0, size * 0.3, size * 0.3);
    pop();
    //tiny left black ellipse
    fill("black");
    ellipse(x - 20, y, smallSize, smallSize);
    //tiny top black ellipse
    fill("black");
    ellipse(x, y - 20, smallSize, smallSize);
    //tiny right black ellipse
    fill("black");
    ellipse(x + 20, y, smallSize, smallSize);
    //tiny bottom black ellipse
    fill("black");
    ellipse(x, y + 20, smallSize, smallSize);
    //vertical white lines
    stroke("white");
    line(x + 50, 0, x + 50, height);
  }

This project combined the materials I have learned so far in lecture regarding for loop and calling a function. I first created the pattern drawing of circles and squares as function “pattern” which I then embedded in the for loop to create repetition. Once again I realized how much more efficient it is to use this for loop rather than drawing all these elements numerous times.

ikaneko wallpaper

var sx = 100; // Horizontal position of first column center
var dH = 50; // Height of diamonds
var dW = 50; // Width from center of diamond to outside edge

function setup(){
    createCanvas(600, 600);

}

function draw() {
    background(250, 230, 230);
    noStroke();

    fill(230, 100, 100);

    for (var a = 0; a < 3; a ++) { // Creates small circles behind the diamonds
        for (var b = 0; b < 12; b ++) {
            ellipse(sx + 200 * a, (dH / 2) + (dH * b), dW, dH);
        }
    }

    // This creates 3 columns of diamonds
    for (var x = 0; x < 3; x ++) {
        for (var y = 0; y < 12; y ++) {
            fill(25 * y, 150, 220);
            quad(sx + 200 * x, dH * y, sx - dW + (200 * x), 
                dH / 2 + dH * y, sx + 200 * x, dH + dH * y,
                 sx + dW + (200 * x), dH / 2 + dH * y); 
        }
    }

    rectMode(CENTER);
    
    for (var z = 0; z < 4; z ++) { // 4 pink stripes
        rect(z * 200, 0, 50, height * 2);
    }

    
    for (var c = 0; c < 4; c ++) { // This creates the lumpy bubble pattern
        for (var d = 0; d < 30; d ++) {
            fill(220, 100, 15 * d);
            circle(c * 200, d * 25, 30);  
        }
        
    }


    noLoop();
}

For this project I was very inspired by the colors of the vaporwave backgrounds. I wanted to keep my design very vertical in nature, so I opted out of creating anything that draws the eyes horizontally. While the background color stays the same, the gradient of the diamonds can sometimes trick the eyes into seeing the lower half of the design as lighter.

sketch

//Raymond Pai
//Section D
//rpai@andrew.cmu.edu
//Project-05

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

function draw() {
    background(200, 150, 160);
    fill('yellow');
    for (var y = 7; y < height - 5; y += 30) {
        drawRow(y, 30);
    }
}


function drawRow(y, spacing) {
    spacing = max(2, spacing);
    for (var x = 7; x < width - 5; x += spacing) {
        strokeWeight(0);
        fill(y, x + 50, x + 100);
        rect(x, y, 25, 25);
    }
}

I wanted to make a tile wallpaper that resembled the walls of a shower from the 90’s, with more contemporary colors.

sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 05-Wallpaper

function setup() {
  createCanvas(590, 480);
  //navy blue for right quad
  //that peeks out
  background('#25363e'); 
}

function draw() {
  
//left triangle
  //repeat every 100 pixels down the canvas
  for (var y = 0; y < height; y += 100) { 
    //repeat every 60 pixels across the canvas 
    for (var x = 0; x < width; x += 60) {
      //fill with lighter brown
      fill('#af9477'); 
      triangle(x, y, x + 30, y + 20, x, y + 40);
    }
  }

//right triangle
  //repeat every 100 pixels down the canvas
  //
  for (var y = 0; y < height; y += 100) {
    //repeat every 60 pixels across the canvas
    //with additional 50 pixels off screen
    for (var x = 60; x < width + 50; x += 60) {
      //fill with darker brown
      fill('#7e5535');
      triangle(x, y, x - 30, y + 20, x, y + 40);
    }
  }
  
//center quad
  //repeat every 100 pixels down the canvas
  for (var y = 20; y < height; y += 100) {
    //repeat every 60 pixels across the canvas
    for (var x = 30; x < width; x += 60) {
      //fill with cream color
      fill('#fbe8bd');
      quad(x, y, x + 30, y + 20, x, y + 40, x - 30, y + 20);
    }
  }
  
//lower left quad
  //repeat every 100 pixels down the canvas
  for (var y = -60; y < height; y += 100) {
    //repeat every 60 pixels across the canvas
    for (var x =0; x < width; x += 60) {
      //fill with ochre color
      fill('#dcae56');
      quad(x, y, x + 30, y + 20, x + 30, y + 80, x, y + 60);
    }
  }
noLoop();
}

I wanted my wallpaper to be more geometric and include a bold, aesthetic color palette, but I didn’t want it to be a simple geometric design. I came up with this design that combined triangles and quadrilaterals, and that combination of shapes was the repeated image. I love the combination of ochre and blue, so I decided to revolve my palette around those two. This code relies solely on math and how the coordinates of each shape correlate with one another.