Project 5: Wallpaper

Red Textile Design

The most challenging part of the project was getting the gradients and the for loops to work properly.

sketch – Copy
// Ana Furtado 
// Section E
// Project 5 Textile



function setup() {
    createCanvas(570, 600);
    background(255); // white background
}

function draw() {
    noStroke();
    fill(0,0,0);
    rect(0,0,600,20);
    fill(0,0,0);
    rect(0,580,600,20);
    long()
    lines()
    whitecircles()
    whitecircles_1()
    circles()
    noLoop();
}


function long() { //black to red to black ellipses 
    var red = 20

    for (var y = 40; y < 600; y += 40) {
        if (y <= 300){
            red+=20
        } if (y>= 300) {
            red -= 20;
        } 
        for (var x = 0; x < 600; x += 95*2) {
            //noStroke()
            stroke(0);
            strokeWeight(7);
            fill(red, 0, 0);
            ellipse(x,y,190,40);
        }
    }
}

function circles() { //red to black to red circles and random red smaller circles
    var red2 = 255
    for (var y = 0; y < 700; y += 40) {
        if (y <= 300){
            red2-=35;
        } if (y>= 300) {
            red2 += 35;
        } 
        for (var x = 0; x < 600; x += 95) {
            stroke(0);
            strokeWeight(1);
            fill(red2, 0, 0);
            circle(x, y, 30);
            fill(random(0,255),0,0);
            circle(x,y,15)
        }
    }

}

function whitecircles() { //white inbetween circles 
    for (var y = 60; y < 700; y += 40) {
        for (var x = 50; x < 600; x += 95) {
            stroke(0);
            strokeWeight(.75);
            fill(255);
            circle(x, y, 12);
        }
    }

}
function whitecircles_1() { //row 1 white inbetween circles
    for (var y = 20; y < 60; y += 40) {
        for (var x = 50; x < 600; x += 95) {
            stroke(0);
            strokeWeight(.75);
            fill(255);
            circle(x, y, 12);
        }
    }

}
function lines() { //white lines and thin black lines to make grid 
    for (var x = 50; x < 600; x += 95) {
        stroke(255);
        strokeWeight(2);
        line(x,0, x, 600);
        stroke(0);
        strokeWeight(.25);
        line(x,0, x, 600);
        for (var y=60; y<600; y+=40){
            //stroke(255);
            //strokeWeight(2);
            //line(0,20,570,20);
            //line(0,y,570,y);
            //stroke(0);
            //strokeWeight(.25);
            //line(0,20,570,20);
            //line(0,y,570,y);
        }
    }
}

Leave a Reply