Category: Project-05-Wallpaper

This week’s project asked us to make a wallpaper, so I decided to make my work based on african textiles. Attached is a sketch of my initial idea and my final product. Enjoy!

sketch

var num = 6; //number of itterations of everything

function setup() {
    createCanvas(600, 400);
    background(250, 249, 246);
}

/*let eyeBrown = color(165,42,42);
let bgBrown = color(255, 200, 168);
let branchGreen = color(63, 146, 65);
let turq = color(64,224,208);*/

function drawBackground() {
    //random lines from ex 4 but in for loop
    stroke(255, 200, 168);
    strokeWeight(1);
    for (var y = 0; y < height; y+=20) {
        for (var x = 0; x < width; x+=20) {
            if (random(1) > 0.5) {
              line(x, y, x+20, y+20);
            }
            else {
              line(x, y+20, x+20, y);
            }
        }
    }

    //ornaments
    for (var j = 0; j <= width; j+=width/num) {
        var colors = [color(145,205,211), color(234,204,84)]
        noStroke();
        fill(random(colors));
        circle(random(j, j+(width/num)), random(height/2), random(40,60));
        circle(random(j, j+(width/num)), random(height/2,height), random(40,60));

        push();
        fill(200,74,55);
        translate(random(j,j+(width/num)), random(height));
        for (var r = 10; r < 60; r+=10) {
            for (var i = 0; i < 360; i+=30) {
                push();
                scale(0.3);
                circle(r*cos(radians(i)), r*sin(radians(i)), r/3);
                pop();
            }
        }
        pop();
    }



}

function drawEye(a, b, side) {
    push();
    translate(a, b);

    //alternates side of branch
    if (side == 1) {
        rotate(degrees(-.009));
    } else if (side == -1) {
        rotate(degrees(.009));
    }


//eye arcs
    //blue filling
    push();
        scale(0.7);
        noFill();
        strokeWeight(10);
        stroke(52,173,193);
        arc(0, -45, 100, 100, radians(65), radians(180-65));
        push();
            rotate(radians(180));
            arc(0, -45, 100, 100, radians(65), radians(180-65));
            pop();
    pop();

    //green arcs
    strokeWeight(3);
    noFill();
    stroke(50, 118, 112);
    arc(0, -45, 100, 100, radians(65), radians(180-65));
    push();
        rotate(radians(180));
        arc(0, -45, 100, 100, radians(65), radians(180-65));
    pop();

    //gold arcs
    push();
        scale(0.9);
        noFill();
        strokeWeight(2);
        stroke(234,178,57);
        arc(0, -45, 100, 100, radians(65), radians(180-65));
        push();
            rotate(radians(180));
            arc(0, -45, 100, 100, radians(65), radians(180-65));
            pop();
    pop();

    fill(165,42,42);
    noStroke();
    circle(0, 0, 10); //eyeball

    //lashes
    strokeWeight(1);
    push();
    translate(0, 45);
    rotate(radians(-35));

    stroke(0);
    for (var i = 0; i <= 50; i+=10) {
        rotate(radians(10));
        line(0, -52, 0, -54);
    }

    pop();
    pop();
}

function drawBranches() {
    stroke(63, 146, 65);
    for (var x = 0; x <= width; x+= width/num) {
        push();
        translate(x, random(-50,50));

        var side = 1;
        for (var y = -100; y < height+100; y += 1) {
            //draw alternating eyes
            if ((y%50) == 0 & side == 1) {
                drawEye(cosy+19,y-10,side);
                side = -1*side;
            } else if ((y%50) == 0 & side == -1){
                drawEye(cosy-19,y-10,side);
                side = -1*side;
            }

            //draw branches (vertical cosine curves)
            var cosy = 40-30 * cos(radians(y));

            stroke(50, 118, 112);
            strokeWeight(5);
            point(cosy, y);
        }
        pop();
    }

}

var count = 0;

function draw() {
    drawBackground();

    drawBranches();

    noLoop();
}

During my process of making this wallpaper, I got inspiration from the Studio Ghibli film Spirited Away. The ducklings taking a bath with a towel on top. I wanted to represent the rolled-up towel on the duck’s head on some, and the rolled-up towel loosened on the head on others which created a pattern.

function setup() {
    createCanvas(400, 600);
    background(182, 217, 214);
}

function draw() {
    noStroke();
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 6; j++) {
          fill(140, 110, 60);
          square(20+(i*100), 60+(j*100), 30);
          rect(20+(i*100), 20+(j*100), 5, 40);
          triangle(20+(i*100), 60+(j*100), 50+(i*100), 60+(j*100), 50+(i*100), 40+(j*100));
          circle(55+(i*100), 45+(j*100), 30);
          triangle(40+(i*100), 45+(j*100), 50+(i*100), 20+(j*100), 55+(i*100), 45+(j*100));
          triangle(70+(i*100), 45+(j*100), 60+(i*100), 20+(j*100), 55+(i*100), 45+(j*100));
          fill(255, 222, 33);
          ellipse(50+(i*100), 45+(j*100), 5, 10);
          ellipse(60+(i*100), 45+(j*100), 5, 10);
          fill(56, 83, 130);
          ellipse(70+(i*100), 80+(j*100), 25, 10);
          triangle(80+(i*100), 80+(j*100), 90+(i*100), 70+(j*100), 90+(i*100), 90+(j*100));
        }
    }
    noLoop();
}

I knew immediately that I wanted to do a cat patterned wallpaper. First I tried to break down what shapes I needed to represent a cat. Everything went well and I was able to draw it with p5js. I felt like it was missing something, so I added a fish for the cat to snack on. Once I drew the first cat and fish combo, put it in a nested for loop and changed the coordinates for each iteration. This quickly drew all of my cats for the complete wallpaper.

sketchDownload

/*
Yanina Shavialenka
Section B
yshavial@andrew.cmu.edu
Project 5: Wallpaper
*/

var x = 100;
var y = 45;
var s = 8;

var xS1 = 193;
var yS1 = 60;
var xS2 = 193;
var yS2 = 115;


function setup() {
  createCanvas(600, 600);
  background(0, 0, 51);
  text("p5.js vers 0.9.0 test.", 10, 15);
} 

function draw() { 
    background(0, 0, 51);
    
    //Hexagonal background
    for(var xH = 0; xH <= 600; xH += 15){
        for (var yH = 0; yH <= 600; yH += 2*s*sqrt(3)/2){
            fill(0, 0, 51);
            hexagon(xH, yH);
        }
    }
    for (var xH = 10; xH <= 600; xH += 15){
        for (var yH = s*sqrt(3)/2; yH <= 600; yH += 2*s*sqrt(3)/2){
            fill(0, 0, 95)
            hexagon(xH, yH);
        }
    }


    //Solar Systems
    for(x = 100; x <= width; x += 200){
        for(y = 85; y <=height; y += 300){
            solarSystem();
        }
    }
    for(x = 0; x <= width; x += 200){
        for(y = 235; y <= height; y += 300){
            solarSystem();
        }
    }

    //Yellow Stars
    for(xS1 = -7; xS1 <= width; xS1 += 200){
        for(yS1 = 45; yS1 <=height; yS1 += 300){
            star();
        }
    }
    for(xS1 = 93; xS1 <= width; xS1 += 200){
        for(yS1 = 195; yS1 <= height; yS1 += 300){
            star();
        }
    }

    //Pink Stars
     for(xS2 = -7; xS2 <= width; xS2 += 200){
        for(yS2 = 115; yS2 <=height; yS2 += 300){
            star();
        }
    }
    for(xS2 = 93; xS2 <= width; xS2 += 200){
        for(yS2 = 265; yS2 <= height; yS2 += 300){
            star();
        }
    }
}

function star() {
    /*
    This function draws yellow and pink stars.
    The star is made out of a square in the middle and 4
    triangles that surround that square.
    */

    //Yellow Star
    noStroke();
    fill(255, 255, 102);
    rect(xS1, yS1, 13, 13);
    triangle(xS1, yS1, xS1+6.5, yS1-13, xS1+13, yS1);
    triangle(xS1, yS1, xS1-13, yS1+6.5, xS1, yS1+13);
    triangle(xS1, yS1+13, xS1+6.5, yS1+26, xS1+13, yS1+13);
    triangle(xS1+13, yS1, xS1+26, yS1+6.5, xS1+13, yS1+13);

    //Pink Star
    noStroke();
    fill(255, 178, 153);
    rect(xS2, yS2, 13, 13);
    triangle(xS2, yS2, xS2+6.5, yS2-13, xS2+13, yS2);
    triangle(xS2, yS2, xS2-13, yS2+6.5, xS2, yS2+13);
    triangle(xS2, yS2+13, xS2+6.5, yS2+26, xS2+13, yS2+13);
    triangle(xS2+13, yS2, xS2+26, yS2+6.5, xS2+13, yS2+13);
}

function solarSystem() {
    /*
    This function draws Solar System with sun in the middle
    and planets rotating around the sun on their orbits.
    */
    
    //Orbits
    stroke(255);
    fill(0, 0, 0, 0);
    ellipse(x, y, 25, 25);
    ellipse(x, y, 45, 45);
    ellipse(x, y, 65, 65);

    push();
    strokeWeight(3);
    stroke(180);
    ellipse(x, y, 85, 85);
    pop();
    ellipse(x, y, 105, 105);

    ellipse(x, y, 125, 125);
    ellipse(x, y, 145, 145);
    ellipse(x, y, 165, 165);


    //Sun
    noStroke();
    fill(255, 255, 0);
    ellipse(x, y, 12, 12);

    //Venus
    noStroke();
    fill(160, 160, 160);
    ellipse(x+8, y+10, 8, 8);

    //Earth
    noStroke();
    fill(0, 102, 204);
    ellipse(x+10, y-20, 13, 13);
    fill(0,220,0);
    ellipse(x+11, y-22, 8, 4);
    ellipse(x+11, y-17, 4, 2.5);
    ellipse(x+7, y-19, 5, 2);

    //Mars
    noStroke();
    fill(204, 65, 0);
    ellipse(x-30, y-10, 12, 12);

    //Jupiter
    noStroke();
    fill(255, 155, 0);
    ellipse(x+40, y+35, 18, 18);
    stroke(195, 0, 0);
    line(x+35, y+28, x+48, y+34);
    stroke(205, 50, 0);
    line(x+32, y+33, x+46, y+40);

    //Saturn
    stroke(255);
    fill(0, 0, 0, 0);
    ellipse(x+37, y-50, 30, 9);
    noStroke();
    fill(190, 190, 190);
    ellipse(x+37, y-50, 16.5, 16.5);

    //Uranus
    noStroke();
    fill(153, 204, 255);
    ellipse(x-53, y+50, 15, 15);

    //Neptune
    noStroke();
    fill(10, 76, 153);
    ellipse(x-45, y-70, 15, 15);
}


function hexagon(xH,yH){
    /*
    This function draws one hexagon with a side of 8 pixels 
    that is made out of 8 triangles.
    */
    push();
    translate(xH,yH)
    noStroke();
    triangle(0,0,-s,0,-s/2,-s*sqrt(3)/2)
    triangle(0,0,-s/2,-s*sqrt(3)/2,s/2,-s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,-s*sqrt(3)/2)
    triangle(0,0,-s,0,-s/2,s*sqrt(3)/2)
    triangle(0,0,-s/2,s*sqrt(3)/2,s/2,s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,s*sqrt(3)/2)
    pop();
}

This project was very interesting in the fact that I get to design whatever I want which also made this project hard as if it was hard to stop on one idea only. I came up with the idea of Solar system with planets surrounding a sun in the middle. All of the systems are identical and are separated by yellow and pink stars.

My Work

//cbtruong;
//Section B;

function setup() {
    createCanvas(600, 600);
    //cream background color that goes with the wallpaper-esque idea;
    background(248, 241, 196);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(248, 241, 196);
    //two for loops to draw repeated versions of pattern 1;
    //inner loop is the x coordinate while the outer is the y coordinate;
    //both i and j are initialized as width/height /4 to allow for centering;
    for (var j = height/4; j < height*2; j += 300){
        for (var i = width/4; i < width*2; i += 300){
            pattern1(i, j);
        }
    }
    //two for loops to draw repeated versions of pattern 2;
    //inner loop is the x coordinate while the outer is the y coordinate;
    //both l and m are intialized as width/height /2 to allow for centering;
    //between pattern 1;
    for (var m = height/2; m < height*2; m += 300){
        for (var l = width/2; l < width*2; l += 300){
            pattern2(l, m);
        }

    }
}


function pattern1 (x, y) {
    //scaled it down by 0.5 by encasing;
    //the entire pattern in a push/pop;
    push();

    scale(0.5);
    strokeWeight(1);
    noFill();
    //connecting lines;
    line(x, y, x - 50, y);
    line(x, y, x + 50, y);
    curve(x + 50, y, x - 50, y, x - 50, y - 50, x + 50 , y);
    curve(x - 50, y, x + 50, y, x + 50, y + 50, x - 50, y);
    //white circle;
    fill(255);
    circle(x, y, 15);
    //muted blue color rectangle;
    fill(92, 143, 191);
    rect(x - 50, y - 70, 20, 40);
    //muted red color rectangle;
    fill(182, 30, 40);
    rect(x + 30, y + 30, 20, 40);
    //reddish lines;
    fill(196, 59, 62);
    strokeWeight(4);
    line(x - 40, y - 10, x - 5, y - 40);
    line(x - 35, y - 5, x, y - 35);
    line(x + 5, y + 40, x + 40, y + 10);
    line(x, y + 35, x + 35, y + 5);
    //muted green triangles;
    strokeWeight(1);
    fill(62, 167, 32);
    triangle(x + 45, y + 50, x + 25, y + 70, x - 15, y + 60);
    triangle(x - 45, y - 50, x - 25, y - 70, x + 15, y - 60);
    //second set of connecting lines;
    line(x, y, y - 40, y + 40);
    line(x, y, y + 40, y - 40);
    noFill();
    curve(x, y, x - 40, y + 40, x - 50, y, x, y);
    curve(x, y, x + 40, y - 40, x + 50, y, x, y);
    //yellow ellipse tilted using push/pop;
    push();
    translate(x - 30, y + 50);
    rotate(radians(45));
    fill(217, 227, 10);
    ellipse(0, 0, 20, 50);
    pop();
    //orange ellipse tilted using push/pop;
    push();
    translate(x + 30, y - 50);
    rotate(radians(45));
    fill(226, 160, 29);
    ellipse(0, 0, 20, 50);
    pop();

    pop();
    noLoop();
}

function pattern2 (x, y){
    //scaled it down by 0.5 as well;
    //also encased it in a push/pop to allow scaling;
    push();
    scale(0.5);

    //draws aquamarine rectangle;
    fill(69, 166, 159);
    rectMode(CENTER);
    rect(x, y, 30, 30);
    //draws connecting lines;
    line(x - 20, y + 15, x - 35, y + 35);
    line(x + 20, y - 15, x + 35, y - 35);
    line(x + 35, y - 35, x - 15, y - 35);
    line(x - 35, y + 35, x + 15, y + 35);
    line(x - 20, y + 15, x - 20, y - 15);
    line(x + 20, y - 15, x + 20, y + 15);
    //draws muted pink circles;
    fill(153, 139, 102);
    circle(x - 35, y - 35, 40);
    circle(x + 35, y + 35, 40);
    //draws muted reddish triangles;
    fill(196, 59, 62);
    triangle(x - 20, y - 15, x - 30, y + 20, x - 60, y);
    triangle(x + 20, y + 15, x + 30, y - 20, x + 60, y);
    //draws tilted muted yellow rectangles;
    fill(187, 164, 91);
    push();
    translate(x - 10, y + 40);
    rotate(radians(315));
    rect(0, 0, 20, 30);
    pop();
    push();
    translate(x + 10, y - 40);
    rotate(radians(315));
    rect(0, 0, 20, 30);
    pop();

    pop();
}

I based it off of the early 20th Century Russian Art Movement known as Suprematism. I had the most fun so far creating this Program. Overall, it is very simple in terms of its creation. I just used pre-defined shapes and muted colors. I also used push/pop transformations to angle somethings and to make the main two patterns fit better on the 600×600 canvas.

var s = 50;
function hexagon(xCenter,yCenter,color,col) {

    var canvas = document.getElementById('hexagons');
    var ctx = canvas.getContext('2d');
    
    ctx.beginPath();

    ctx.moveTo(xCenter - s, yCenter);
    ctx.lineTo(xCenter - (s/2), yCenter - s*Math.sqrt(3)/2);
    ctx.lineTo(xCenter + (s/2), yCenter - s*Math.sqrt(3)/2);
    ctx.lineTo(xCenter + s, yCenter);
    ctx.lineTo(xCenter + (s/2), yCenter + s*Math.sqrt(3)/2);
    ctx.lineTo(xCenter - (s/2), yCenter + s*Math.sqrt(3)/2);
    ctx.lineTo(xCenter - s, yCenter);

    ctx.closePath();
    ctx.stroke();
    if (col) {
        if (color % 3 == 1) {
            ctx.fillStyle = '#f00';
        } else if (color % 3 == 2) {
            ctx.fillStyle = '#0f0';
        } else {
            ctx.fillStyle = '#00f';
        }
    } else {
        if (color % 3 == 1) {
            ctx.fillStyle = '#00f';
        } else if (color % 3 == 2) {
            ctx.fillStyle = '#f00';
        } else {
            ctx.fillStyle = '#0f0';
        }
    }
    
    ctx.fill();
}

function draw() {

    var above = true;
    for (var i = 1; i <= 6; i++) {

        for (var j = 1; j <= 5; j++) {
            hexagon(150 * j - 100, (25 * Math.sqrt(3) * 2 * i),i,true);
        }
        
    }

    for (var i = 1; i <= 5; i++) {

        for (var j = 1; j <= 4; j++) {

        hexagon(150 * j - 25,(25 * Math.sqrt(3) * 2 * i) + 25 * Math.sqrt(3),i,false);
        }
    }

}
draw();