shariqs-05-project

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// Project - 05




function setup() {
    createCanvas(640, 400);
    background(200, 50, 0);
    noStroke();

    var w = 60;
    var h = 60;



    for (var y = 0; y < height; y ++) {

       // using modulus operator to determine even or odd row



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

            // using spacing multipliers to get accurate spacing

            var py = y * h;
            var px = x * w;

            stroke(180, 200 - py * 0.5, 300 - py * 0.5);
            strokeWeight(2)
            noFill();
            rectMode(CENTER);


            rect(px, py, 50, 50);


            //coinciding geometries based on positions by changing rectMode to center
            //applying gradient to wallpaper

            stroke(180, 200 - py * 0.5, 300 - py * 0.5);
            rect(px, py, 35, 35);
            ellipse(px, py, 50, 50);
            stroke(200, 30, 50);
            ellipse(px, py, 60, 60);

      }

    }
    noLoop();
}

In this project, I explored using nested for loops to create a wallpaper from coinciding geometries, which created interesting overlapping shapes. By doing this and applying a color gradient, the different geometries created through the for loop develop into an interesting pattern design.

jjpeng project 5

var type;
var color;
var bigness;

function setup() {
    createCanvas(600, 480);
    background('#BFDDDA');
    noStroke();
}

function draw() {
    for (var c = 0; c < 12; c ++) {
        for (var r = 0; r < 8; r ++) {
            type = random([1, 2, 3]);
            color = random(['#92B2C0', '#79A594', '#467E9B'])
            bigness = random(20, 80)
            pattern (c * 60, r * 70, bigness, type, color);
        }
    }
    for (var col = 0; col < 8; col ++) {
        for (var row = 0; row < 6; row ++) {
            // draw grapes
            var wide = random(7, 12);
            var high = random(10, 14);
            if (((col + row) % 2) === 0){
                grapes(col * 85, row * 90, wide, high, '#FF5061');
            } else {
                grapes(col * 85, row * 90, wide, high, '#FF6A4D');
            }
        }
    }
    noLoop();
}

function grapes(x, y, h, w, color) {
    // leaf and stem
    fill('#4B4F4E');
    push();
    translate(x + w / 2, y - h * 1.5)
    rotate(radians(15));
    rect(0, 0, h / 3, w / 1.5);
    pop();

    fill('#F7CD62');
    push();
    translate(x, y - h)
    rotate(radians(300));
    ellipse(0, 0, h / 1.5, w);
    pop();

    // grape
    fill(color);
    for (var i = 0; i < 4; i++) {
        // first and third row
        if ((i === 0) || (i === 2)){
            for (var j = 0; j < 2; j++) {
                ellipse(x + w * j, y + h * i, w, h);
            }
        } else if (i === 1) {
            for (var j = 0; j < 3; j++) {
                ellipse(x + w * (j - 0.5), y + h * i, w, h);
            }
        } else {
            ellipse(x + w * 0.5, y + h * i, w, h);
        }
    }
}

function pattern(x, y, s, type, color) {
    fill(color);
    // oval
    if (type === 1) {
        ellipse(x, y, s * 1.3, s);
    // arc
    } else if (type === 2) {
        arc(x, y, s * 2, s, QUARTER_PI, PI + QUARTER_PI, CHORD);
    // other arc
    } else {
        arc(x, y, s, s, PI + QUARTER_PI, PI * 2 + QUARTER_PI, CHORD);
    }
}

I started by thinking of a theme. I decided I wanted to do fruit and make it feel playful. Then I came up with some ideas for foreground designs and some abstract shapes for background designs. When making the fruit, the raspberries looked like grapes so I made them grapes instead.