Month: September 2019

sketch

When I first started this project, I was thinking about fruits, particularly oranges. So I created a design that had half oranges everywhere. While doing so, I played around with the color and other ellipses and tried something else.

In the end, I added on to the old design by making it seem more similar to  power buttons. In addition, the colors that I chose gives a tropical feeling that I was looking for. 

//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-05

var x;
//random colors
var r;
var g;
var b;

function setup() {
    createCanvas(600,600);
    //light blue
    background(119, 158, 203);
}

function draw () {
    //dark green line inbetween the circles
    for (x = 0; x < 5; x ++) {
        stroke(30, 70, 45, 200);
        strokeWeight(5);
        line((x * 100) + 100, 0, (x * 100) + 100, height);
    }

    //vertical forloop for y
    for (var y = 50; y <= height; y += 70) {
        //horizantal forloop for x
        for (var x = 50; x <= width; x += 100) {
            //call drawMain shape which are the circles
            drawMain (x,y);
        }
    }
    noLoop();
}

// cirlces, x y variable coordinates to be called in for loop
function drawMain ( x, y) {
    //r is a random number between 0 - 255
    r = random(255);
    //g is a random number betwen 100 - 200
    g = random(100,200);
    //b is a random number between 0 - 100
    b = random(100);
    //main circles
    noStroke();
    fill(r, g, b);
    ellipse(x, y, 60, 60);
    fill(255);
    ellipse(x, y, 45, 45);
    strokeWeight(3);
    stroke(r, g, b);
    line(x, y - 25, x, y + 25);
    line(x - 20, y - 20, x + 20, y + 20);
    line(x - 20, y + 20, x + 20, y - 20);
    //circles inside the bigger one
    noStroke();
    fill(r, g, b);
    ellipse(x, y, 30, 30);
    //dots on the line
    for (var x = 50; x <= 500; x += 100) {
        noStroke();
        fill(r, g, b);
        ellipse(x + 50, y + 30, 25, 25);
    }
}

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 5 Wallpaper
 */

// spacing between circles
var spacing = 200;

function setup() {
    createCanvas(600, 600);
    var orangeBack = color(241, 94, 39); // orange color
    var blueBack = color(69, 95, 172); // blue color
    setGradient(orangeBack, blueBack); // background gradient
}

function draw() {
    // y position for loop
    for (var y = 50; y <= height - 50; y += spacing) {
        // x position for loop
        for (var x = 50; x <= width - 50; x += spacing) {
            // calling the two functions for drawing the circles
            orangeCircles(x, y);
            blueCircles(x, y);
        }
    }
}

// Function for creating my gradient background
function setGradient(color1, color2) {
    for(var a = 0; a <= height; a++) {
      var amount = map(a, 0, height, 0, 1);
      var back = lerpColor(color1, color2, amount);
      stroke(back);
      line(0, a, width, a);
    }
}

// Orange circle function
function orangeCircles(x, y) {
    noStroke();
    //outer circle
    fill(241, 94, 39);
    ellipse(x, y, 100, 100);

    // second-most outer circle
    fill(243, 109, 66);
    ellipse(x, y, 75, 75);

    // third-most outer circle
    fill(241, 135, 101);
    ellipse(x, y, 50, 50);

    // inner circle
    fill(248, 161, 117);
    ellipse(x, y, 25, 25);
}

// Blue circle function
function blueCircles(x, y) {
    noStroke();
    // blue circles are shifted right and down
    x = x + 100;
    y = y + 100;

    //outer circle
    fill(69, 95, 172);
    ellipse(x, y, 100, 100);

    // second-most outer circle
    fill(87, 114, 183);
    ellipse(x, y, 75, 75);

    // third-most outer circle
    fill(114, 141, 199);
    ellipse(x, y, 50, 50);

    // inner circle
    fill(147, 173, 218);
    ellipse(x, y, 25, 25);
}

I personally love playing with complementary colors, so I wanted to experiment more with complementary contrasts in the wallpaper. In my initial plan, I sketched out semicircles, but I didn’t like how they created harsh edges in the composition. I chose the colors blue and orange and created circular patterns with them. I also wanted to try playing with gradients, so for the background, I created a smooth gradient and for the circles, I created gradient intervals of colors. I alternated between orange and circle to create a balance of colors.