Category: Section A

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 05 - WallPaper


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

function draw() {
    background(255, 206, 233);
    for (var i = -1; i < 6; i++) { //for loop to make grid of "tiles"
        for (var j = -1; j < 4; j++) { 
        rX = i * 100; // tile spacing
        rY = j * 100;// tile spacing
        tile(); //runs "tile" function where all my actual components are
        }
    }
}

function tile() {
    squiggle(); //runs two arc functions to make "squiggle"
    triangles(); //draws 2 triangles offset
    circles(); //draws 2 circles offset
}

function squiggle() {
    strokeWeight(6);
    stroke(0);
    noFill();
    arc(rX + 30, rY, 30, 30, PI, 3 * HALF_PI); // upper curve
    arc(rX + 30, rY + 70, -30, 30, 0, 3 * HALF_PI); // lower curve
}

function triangles() {
    noStroke();
    fill(0); // background triangle always black
    triangle(rX + 80, rY + 5, rX + 35, rY + 55, rX + 80, rY + 55);

    fill(random(255), random(255), random(255)); // makes front triangle fun colors!
    triangle(rX + 85, rY + 10, rX + 40, rY + 60, rX + 85, rY + 60);
}

function circles() {
    noStroke();
    fill(0); //background circle always black
    ellipse(rX + 30, rY + 25, 15, 15);

    fill(random(255), random(255), random(255)); //makes front circle fun colors!
    ellipse(rX + 25, rY + 20, 15, 15);
}

My inspiration was that I wanted my wallpaper to look like a fun 90s pattern. I made the objects in separate functions and tiled them using a for-loop. A neat thing is the triangle and circles are random fills so everytime you refresh it is a color!

sketch

/*
Jamie Dorst
jdorst@andrew.cmu.edu
Section A
Project-05
*/

var xPosition = -25;
var yPosition = -10;
var r = 133;
var g = 198;
var b = 199;

function setup() {
    createCanvas(600, 400);
    background(255);
}

function concentricCircle() {
    // draw concentric circles with diameter 50
    var diam = 50;
    // draw circles inside the previous circle until 0
    for(var i = 50; i > 0; i -= 10) {
        fill(r, g, b);
        ellipseMode(CENTER);
        ellipse(xPosition, yPosition, diam, diam);
        diam -= 10;
    }
}

function draw() {
    // make an offset grid of concentric circles
    for(var j = 0; j < 625; j += 50) {
        xPosition += 25;
        r += 5;
        g -= 2;
        for(var k = 0; k < 825; k += 50){
            concentricCircle()
            yPosition += 25;
            b -= 1;
        }
        yPosition = -10;
    }
}

This project was pretty cool once I started going. I drew inspiration from this picture, and the scale-like texture it has.

I had trouble figuring out how to get the for loops to work at first, but once I figured that out it went pretty smoothly. I took the concept from the lab this week of making a color gradient, and then also tried defining my own variable to actually make the concentric circles. Overall I’m happy with how it turned out, and I think I learned from this.

judyli: Wallpaper Project 05

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-05
*/

function setup() {
    createCanvas(480, 480);
    background("pink");
    noStroke();
}

function draw() {
    var tw = 60;
    var th = 60;
    var oy = 60;
    var ox = 60;
    for (var i = 0; i < width; i = i + 5) {
		stroke(255);
		line(i, 0, i, height);
    }
    for (var y = 0; y < 8; y++) {
    	noStroke();
        for (var x = 0; x < 7; x++) {
            var py = oy + y * (sqrt(3) * (th / 2));
            var px = ox + x * tw;
            for (var x = 0; x < 6; x++) {
                var py = oy + y * (sqrt(3) * (th / 2));
                var px = ox + x * tw;
                if (y % 2 != 0) {
                    py = oy + y * (sqrt(3) * (th / 2));
                    px = ox + x * tw;
                    fill(128, 206, 214);
                    arc(px + (tw / 2), py, 50, 50, PI - QUARTER_PI, TWO_PI - QUARTER_PI);
                    fill(213, 244, 230);
                    arc(px + (tw / 2), py, 50, 50, TWO_PI - QUARTER_PI, PI - QUARTER_PI);
                }
                else {
                	fill (97, 134, 133);
	                arc(px, py, 50, 50, QUARTER_PI, PI + QUARTER_PI);
	                fill (254, 251, 216);
	                arc(px, py, 50, 50, PI + QUARTER_PI, QUARTER_PI);
	            }
            }
            if (y % 2 == 0) {
            	fill(97, 134, 133);
                arc(px + tw, py, 50, 50, QUARTER_PI, PI + QUARTER_PI);
                fill (254, 251, 216);
	            arc(px + tw, py, 50, 50, PI + QUARTER_PI, QUARTER_PI);
            }
        }
    }
    noLoop();
}

I found two wallpapers from Pinterest that I really liked. But, the goals of this project was to create one static wallpaper. So, I wanted to combine the two I found to create my own wallpaper. I think that the base of my project can serve to be useful for adding more details to the wallpaper such as making the arcs divide into different rings so that it’s more intricate. I also referred to the code from the assignment to help me with this project. I attached the two inspirations I got from Pinterest below.