Project-05-Wallpaper

da ‘working on 104 for tonight’ wallpaper

wallpapercompDownload

function setup() {
    createCanvas(600, 600);
    background(30);
    rectMode(CENTER);
    angleMode(DEGREES);
    noLoop();
}

function draw() {
    for(let i=-100; i<800;i+=200){
        for(let j=-300; j<800;j+=400){
            push();
            translate(j,i);
            patterndraw();
            pop();
        }
    }
for(let i=-200; i<800;i+=200){
        for(let j=-100; j<800;j+=400){
            push();
            translate(j,i);
            patterndraw();
            pop();
        }
    }
}

function patterndraw(){
    linebg();
    cord();
//display cord
    stroke(0);
       beginShape();
        curveVertex(0,-30);
        curveVertex(0,-30);
        curveVertex(40,-30);
        curveVertex(40,30);
        curveVertex(50,45);
        curveVertex(50,45);
    endShape();
    noStroke();
//table legs
    fill(60);
    rect(-60,30,5,60);
    rect(60,30,5,60);
//tabletop
    fill(75);
    rect(0,0,150,10);
//display
    fill(20);
    rect(0,-35,70,40);
    fill(210);
    rect(0,-35,65,35);
//lines on display
    strokeWeight(2);
    stroke(80);
    for(let r=0; r<26; r+=4){
        line(-30,-48+r,random(-27,27),-48+r);
    }
    noStroke();
//coffee cup
    //cup
        fill(120);
        rect(-50,-12,10,14,0,0,4,4);
    //handle
        noFill();
        stroke(120);
        strokeWeight(2);
        arc(-46,-12,8,8,-90,90);
        noStroke();
    //steam
        fill(60);
        beginShape();
            curveVertex(-50,-20);
            curveVertex(-50,-20);
            curveVertex(-52,-23);
            curveVertex(-47,-28);
            curveVertex(-50,-32);
            curveVertex(-50,-32);
        endShape();
//floor
      fill(255,255,255,20);
        beginShape();
            curveVertex(-63,60);
            curveVertex(-63,60);
            curveVertex(0,85);
            curveVertex(63,60);
            curveVertex(63,60);
        endShape();
//light casting
    fill(156,196,255,60);
    beginShape();
        curveVertex(0,-75);
        curveVertex(0,-75);
        curveVertex(85,0);
        curveVertex(0,85);
        curveVertex(-85,0);
        curveVertex(0,-75);
        curveVertex(0,-75);
    endShape();
//lamp shade
    fill(160);
    beginShape();
        vertex(-10,-75);
        vertex(10,-75);
        vertex(20,-65);
        vertex(-20,-65);
    endShape();
//person/chair
    //head
        fill(20);
        ellipse(0,-30,20,25);
    //humanarms
            ellipse(-26,-2,10,13);
            ellipse(26,-2,10,13);
            triangle(-31,-4,-20,-2,-20,-20);
            triangle(31,-4,20,-2,20,-20);
    //chairbase
        //vert part
            rect(0,40,6,35);
        //supports
            triangle(0,60,-30,60,0,50);
            triangle(0,60,30,60,0,50);
    //human legs
        beginShape();
            vertex(-18,60);
            vertex(-10,60);
            vertex(-6,30);
            vertex(-16,30);
        endShape();
        beginShape();
            vertex(18,60);
            vertex(10,60);
            vertex(6,30);
            vertex(16,30);
        endShape();
    fill(35);
    //seatback
        beginShape();
            vertex(-23,-22);
            vertex(23,-22);
            vertex(20,30);
            vertex(-20,30);
        endShape();
    //chairarms
        rect(-26,5,10,5);
        rect(26,5,10,5);
//computer
    fill(110);
    rect(50,45,18,30);
//power symbol on computer
    noFill();
    stroke(255);
    strokeWeight(1);
    arc(50,45,8,8,-60,-120,OPEN);
    line(50,40.5,50,44);
}

function linebg(){
    fill(85,88,77);
    noStroke();
    beginShape();
        curveVertex(-80, 50);
        curveVertex(-80, 50);
        curveVertex(-20,30);
        curveVertex(20,-30);
        curveVertex(120, -50);
        curveVertex(120, -50);
    endShape();
}

function cord(){
    noFill();
    strokeWeight(3);
    stroke(110);
    beginShape();
        curveVertex(-150, -40);
        curveVertex(-150, -40);
        curveVertex(-150,-41);
        curveVertex(-110,0);
        curveVertex(-45,-100);
        curveVertex(0,-71);
        curveVertex(0, -70);
        curveVertex(0, -70);
    endShape();
}

I used a quick drawing to understand how the pieces that connected from tile to tile, as well as the layering of all the objects because some were semi-translucent. I tried to add a little visual intrigue with randomized text lengths.