Category: Project-05-Wallpaper

Project 05: Wallpaper/Floor Tiles

Inspired by the South Indian – Chettinad’s Athangudi tiles

sketch

//Name: Hari Vardhan Sampath
//Section: E
//eMail address: harivars@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(600, 550);
    background(0); // black
}

var r = 10; // initialize red 
var g = 10; // initialize green 
var b = 10; // initialize blue 

function draw() {
    drawGrid();
    noLoop(); // to mainitain gradient
}



function drawGrid() {
    var s = 50; //side of the cube
    for (var y = 0; y <= height; y += s + s/2) {
        var green = 5; //initialize green
        for (var x = 0; x <= width; x += s) {
            fill(r, g, b);
            cube(x, y, s);
            r += 3 //increment red
            g += 2 //increment green 
            b += 1 //increment blue
        }
    r += 2 //increment red
    b += 3 //increment blue
    }
}

function cube(x, y, s){
    // first face of the cube with colormix of r & g
    push();
    translate(x, y);
    noFill();
    rotate(radians(30));
    stroke(2);
    fill(r, g, 0);
    quad(0, 0, s, 0, s/2, s*sqrt(3)/2, 
            -s/2, s*sqrt(3)/2) ;
    pop();
    // second face of the cube with colormix of g & b
    push();
    translate(x, y);
    rotate(radians(30 + 120));
    stroke(2);
    fill(0, g, b);
    quad(0, 0, s, 0, s/2, s*sqrt(3)/2, 
            -s/2, s*sqrt(3)/2) ;
    pop()
    // third face of the cube with colormix of r & b
    push();
    translate(x, y);
    rotate(radians(30 + 120 + 120));
    stroke(2);
    fill(r, 0, b);
    quad(0, 0, s, 0, s/2, s*sqrt(3)/2, 
            -s/2, s*sqrt(3)/2) ;
    pop()
}

Wallpaper/fabric

fabric sketch
function setup() {
    createCanvas(620, 600);
    background('skyblue');
}

function draw() {
    //blue patches
    for(let x=10; x<width; x+=240){
        for(let y=0; y<height; y+=240){
            patch(x,y);
        }
    }

    //other blue lol
    for(let x=130; x<width; x+=240){
        for(let y=120; y<height; y+=240){
            patchtw(x,y);
        }
    }

    //pig moving etc
    for(let x=70; x<width; x+=120){
        for(let y=50; y<height-50; y+= 120){
            pigg(x, y);       
        }
    }

    //rows of stitch up and down
    for(let x=10; x<width; x+=120){
        for(let y = 10; y<height; y+=20){
            cross(x, y);
        }
    }

    //row of stitch across
    for(let y =120; y<height; y+=120){
        for(let x=10; x<width; x+=20){
        cross(x,y);
        }
    }

}



function pigg (x, y){
    strokeWeight(1);
    stroke('black');
    fill('pink');
    //legs
    rect(x - 30, y, 10, 60);
    rect(x + 20, y, 10, 60);
    //bod
    ellipse(x, y, 100, 80);
    //ears
    triangle(x-10, y-20, x-20, y-15, x-20, y-30);
    triangle(x+10, y-20, x+20, y-15, x+20, y-30);
    //head
    ellipse(x, y, 50);
    //snout
    push();
    fill('plum');
    ellipse(x, y+10, 20, 10); 
    pop();
    //eyes
    push();
    fill('black');
    ellipse(x-10, y-5, 5);
    ellipse(x+10, y-5, 5);
    //nose hole
    ellipse(x-5, y+10, 2);
    ellipse(x+5, y+10, 2); 
    pop(); 
 
}


function cross(x,y){
    strokeWeight(1);
    stroke('yellow');
    line(x-10, y-10, x+10, y+10);
    line(x-10, y+10, x+10, y-10);
}

function patch(x,y){
    noStroke();
    fill('darkcyan');
    rect(x, y, 120, 120);
}

function patchtw(x,y){
    noStroke();
    fill('lightseagreen');
    rect(x, y, 120, 120);
}

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);
        }
    }
}

Project 5 – Wallpaper

I was inspired by fruit slices and the cute illustrator aesthetic of fun summery-y wallpapers. There are 4 main types of types, when combined with various colors create a visually appealing pattern.

Sketches of the tile patterning + tesselation
sketch
// Tsz Wing Clover Chau
// Section E

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

var nX;
var nY;
var n = 5;
var size;

var count1;
var count2 = 0;
var count3;
var swap = true;

let colors1 = [[230, 57, 70], [252, 213, 206], [255, 183, 3], [249, 220, 196], [231, 111, 81]];

let colors2 = [[254, 250, 224], [233, 237, 201], 
                            [236, 248, 248], [250, 237, 205], [255, 255, 255]];

function draw() {
    size = width/n;
    strokeWeight(3);

    ellipseMode(CENTER);

    for (var j = 0; j < n; j++){
        if (j %2 == 0){
            swap = false;
            count1 = 1;
            countUp = true;

            for (var i = 0; i < n; i++){
                fill(colors2[count1]);
                noStroke();
                rect(i*size, j*size, (i+1)*size, (j+1)*size);

                firstRow(i*size, j*size, size, i);

                if (countUp){
                    count1 += 1;
                } else {
                    count1 -= 1;
                }
                count1 = count1%5;
                swap = !swap;
            }

        } else {
            swap = true;
            count1 = 4;
            
            countUp = false;
            for (var i = 0; i < n; i++){
                fill(colors2[count1]);
                noStroke();
                rect(i*size, j*size, (i+1)*size, (j+1)*size);

                count2 += 1;
                count2 = count2%5;
                count3 = count2;

                secondRow(i*size, j*size, size, i, j);

                if (countUp){
                    count1 += 1;
                } else {
                    count1 -= 1;
                }

                count1 = count1%5;
                swap = !swap;
            } 
        }
    noLoop();
    }
}


function firstRow(x, y, r, i){
    if (swap){
        fill(colors1[count2]);
        if (i == 3){
            arc(x+r, y, r*(4/5), r*(4/5), HALF_PI, PI, PIE)


            push();
            noFill();
            stroke(50);
            arc(x+r, y, r, r, HALF_PI, PI, OPEN);
            pop();

            count2 += 1;
            count2 = count2 % 5;

            fill(colors1[count2]);
            arc(x+(r*0.05), y+(r*0.95), r, r, -HALF_PI, 0, PIE);

        } else {
            arc(x+(r*0.95), y+(r*0.95), r*0.75, r*0.75, PI, -HALF_PI, PIE);

            push();
            noFill();
            stroke(50)
            arc(x, y, r, r, 0, HALF_PI, OPEN);
            pop();

            count2 += 1;
            count2 = count2 % 5;

            fill(colors1[count2]);
            arc(x, y, r*(4/5), r*(4/5), 0, HALF_PI, PIE);
        }
    } else {
        fill(colors1[count2]);
        arc(x, y+r/2, r, r, -HALF_PI, HALF_PI, PIE);

        count2 += 1;
        count2 = count2 % 5;

        fill(colors1[count2]);
        arc(x+r, y+r/2, r*(4/5), r*(4/5), HALF_PI, -HALF_PI, PIE);

        push();
        noFill();
        strokeWeight(3);
        stroke(50);
        arc(x+r, y+r/2, r, r, HALF_PI, -HALF_PI, OPEN);
        pop();
    } 
}

function secondRow(x, y, r){
    if (swap){
        noFill();
        stroke(50);

        ellipse(x+r/2, y+r/2, r/3, r/3);

        noStroke();
        fill(colors2[count2]);
        ellipse(x+r/2, y+r/2, r/5, r/5);

    } else {
        fill(colors1[count3]);
        arc(x+r/2, y, r, r, 0, PI, PIE);
        count3 += 1;
        count3 = count3%5;
        fill(colors1[count3]);
        arc(x+r/2, y+r, r, r, PI, 0, PIE);
    }
}

Project 05 / Wallpaper

sketchDownload
// Kyli Hilaire - Project 05
// khilaire@andrew.cmu.edu 
// Section B 

var x = 0;
var y = 0;
var beeWidth = 30;
var beeLength = 38;
var stripeY = 0;

function setup() {
    createCanvas(400, 300);
    background(247, 183, 191);
}

function draw() { 
    bgStripes();
    // draw background stripes

    push();
    translate(-45, -18); 
    // move bees in the canvas
    for(x = 0; x <= 500; x += 75) {
        for(y = 0; y <= 400; y += 75) {
            bee(); 
        }
    } pop();
    // draw bees

    for(x = 0; x <= 500; x += 75){
        for(y = 0; y <= 400; y += 75){
            greenCircles();
        }
    } 
    // draw green circles
}

function bee() {
    beeWings();
    beeBody();
}

function beeBody() {
    stroke(245, 242, 158);
    strokeWeight(1);
    fill(255, 255, 188);
    ellipse(x + 50, y + 50, beeWidth, beeLength);
    // yellow oval 
    stroke(80);
    strokeWeight(4);
    line(x + 39, y + 42, x + 61, y + 42);
    line(x + 38, y + 52, x + 62, y + 52);
    line(x + 41, y + 62, x + 59, y + 62);
    // draw bee stripes
    noStroke();
    fill(95)
    triangle(x + 44, y + 68, x + 56, y + 68, x + 50, y + 74);
    // stinger 
}

function beeWings() {
    noStroke();
    fill(255, 255, 240);
    arc(x + 50, y + 50, 65, 50, 11*PI/6, PI/6);
    arc(x + 50, y + 50, 65, 50, 5*PI/6, 7*PI/6);
    // bee wing arcs
    stroke(0);
    strokeWeight(1);
    line(x + 50, y + 50, x + 75, y + 50);
    line(x + 25, y + 50, x + 50, y + 50);
}

function bgStripes() {
    for(let i = 0; i <= 300; i += 10) {
        stroke(255, 251, 236);
        strokeWeight(0.75);
        line(0, stripeY + 2, 400, stripeY + 2);
        stripeY += 16 
        // space lines 16px apart 
    }   
}

function greenCircles() {
    noStroke();
    fill(216, 238, 219);
    circle(x + 14, y + 61, 5);
    circle(x + 20, y + 54, 8);
    circle(x + 22, y + 63, 3);
    // bottom right of bee 

    circle(x + 60, y + 10, 5);
    circle(x + 65, y + 7, 3);
    // upper left of bee
    
    stroke(216, 238, 219);
    strokeWeight(2);
    point(x + 61, y + 3);
    // small point upper left
}

Project-05-Wallpaper

I tried to draw flowers that’s connected

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
function setup() {
    createCanvas(600, 600);
    rectMode(CENTER);
}

function draw() {
    background('gold');

    for (var i=1;i<=6;i++){
        for (var j=1;j<=6;j++){
    repeatingPattern(i*200-150,j*200-50,100);
    repeatingPattern(i*200-50,j*200-150,100);
    repeatingPatternX(i*200-150,j*200-150,100);
    repeatingPatternX(i*200-50,j*200-50,100);
        }
    }
    repeatingPatternY(2*100-50,2*100-50,100);
    repeatingPatternY(2*100-50,6*100-50,100);
    repeatingPatternZ(5*100-50,4*100-50,100);
    repeatingPatternZ(4*100-50,1*100-50,100);
    noLoop();
}

function repeatingPattern(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('tomato')
    circle(x,y,r*0.7);
    pop();
    push();
    fill('khaki')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flower(x,y,r);
    littleCircles(x,y,r)
}

function repeatingPatternX(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('tomato')
    circle(x,y,r*0.7);
    pop();
    push();
    fill('khaki')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flowerX(x,y,r);
    littleCircles(x,y,r)
}


function repeatingPatternY(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('green')
    circle(x,y,r*0.7);
    pop();
    push();
    fill('cyan')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flowerX(x,y,r);
    littleCirclesY(x,y,r)
}

function repeatingPatternZ(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('green');
    circle(x,y,r*0.7);
    pop();
    push();
    fill('cyan')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flower(x,y,r);
    littleCirclesY(x,y,r)
}


function flower(x,y,r){
    //leaves
    push();
    fill("lime");
    triangle(x-r*0.03,y+r*0.14,x-r*0.1,y+r*0.18,x-r*0.15,y+r*0.13);
    triangle(x+r*0.03,y+r*0.24,x+r*0.11,y+r*0.26,x+r*0.15,y+r*0.20);
    pop();
    //stems
    push();
    fill('gold');
    bezier(x,y,x-r*0.1,y+r*0.2,x+r*0.1,y+r*0.2,x,y+r*0.3)
    pop();
    //petals
    push();
    fill('crimson');
    ellipse(x-r*0.1,y-r*0.1,r*0.17,r*0.15);
    ellipse(x+r*0.1,y-r*0.1,r*0.14,r*0.15);
    ellipse(x,y-r*0.2,r*0.15,r*0.15);
    ellipse(x-r*0.05,y,r*0.15,r*0.15);
    ellipse(x+r*0.05,y,r*0.15,r*0.15);
    pop();
    //middle
    push();
    fill('orange');
    circle(x,y-r*0.1,r*0.15);
    pop();
}

function flowerX(x,y,r){
    //leaves
    push();
    fill("lime");
    triangle(x-r*0.03,y+r*0.14,x-r*0.1,y+r*0.18,x-r*0.15,y+r*0.13);
    triangle(x+r*0.03,y+r*0.24,x+r*0.11,y+r*0.26,x+r*0.15,y+r*0.20);
    pop();
    //stems
    push();
    fill('gold');
    bezier(x,y,x-r*0.1,y+r*0.2,x+r*0.1,y+r*0.2,x,y+r*0.3)
    pop();
    //petals
    push();
    fill('white');
    ellipse(x-r*0.1,y-r*0.1,r*0.17,r*0.15);
    ellipse(x+r*0.1,y-r*0.1,r*0.14,r*0.15);
    ellipse(x,y-r*0.2,r*0.15,r*0.15);
    ellipse(x-r*0.05,y,r*0.15,r*0.15);
    ellipse(x+r*0.05,y,r*0.15,r*0.15);
    pop();
    //middle
    push();
    fill('orange');
    circle(x,y-r*0.1,r*0.15);
    pop();
}

function littleCircles(x,y,r){
    doubleCircle(x-42,y-30,r*0.1);
    doubleCircle(x-30,y-42,r*0.1);
    doubleCircle(x+42,y+30,r*0.1);
    doubleCircle(x+30,y+42,r*0.1);
    doubleCircle(x+42,y-30,r*0.1);
    doubleCircle(x+30,y-42,r*0.1);
    doubleCircle(x-42,y+30,r*0.1);
    doubleCircle(x-30,y+42,r*0.1);
}

function doubleCircle(x,y,r){
    push();
    fill('bisque');
    circle(x,y,r);
    circle(x,y,r/2);
    pop();
}

function littleCirclesY(x,y,r){
    doubleCircleY(x-42,y-30,r*0.1);
    doubleCircleY(x-30,y-42,r*0.1);
    doubleCircleY(x+42,y+30,r*0.1);
    doubleCircleY(x+30,y+42,r*0.1);
    doubleCircleY(x+42,y-30,r*0.1);
    doubleCircleY(x+30,y-42,r*0.1);
    doubleCircleY(x-42,y+30,r*0.1);
    doubleCircleY(x-30,y+42,r*0.1);
}

function doubleCircleY(x,y,r){
    push();
    fill('purple');
    circle(x,y,r);
    circle(x,y,r/2);
    pop();
}

function fourLines(x,y,r){
    line(x-r/2,y-r/2,x-r*0.25,y-r*0.25);
    line(x+r/2,y+r/2,x+r*0.25,y+r*0.25);
    line(x+r/2,y-r/2,x+r*0.25,y-r*0.25);
    line(x-r/2,y+r/2,x-r*0.25,y+r*0.25);
}

Project-05-Wallpaper

Wallpaper

sketch
//Brody Ploeger
//jploeger
//Section C

function setup() {
    createCanvas(600, 600);
    background(220);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}
var x=0;
var y=0;


function draw() {
background(200);
//loop 
for(var i = 0; i<=width; i+=100){
    for(var j = 0; j<=height; j+=200){
   Pattern(x+i,y+j,100); 
}
}
//offset loop
for(var i = -50; i<=width; i+=100){
    for(var j = 100; j<=height; j+=200){
   Pattern(x+i,y+j,100); 
}
}


}

function Pattern(x,y,w){

//base square
strokeWeight(2);
fill('tan');
square(x,y,w);

//pruple lines
strokeWeight(3);
stroke('purple');
line(w/8+x,0+y,w/8+x,w+y);

strokeWeight(3);
stroke('purple');
line(w/8+w/2+x,0+y,w/8+w/2+x,w+y);

//black line
stroke(0);
strokeWeight(2);
line(0+x,w/2+w/4+y,w+x,w/2+w/4+y);

noStroke()
//shape 1 
fill(200,10,0);
beginShape();
vertex(w/4+w/2+x,0+y);
vertex(w/4+w/2+x, w/8+y);
vertex(w/8+w/4+x, w/8+y);
vertex(0+x,w/2+y);
vertex(0+x,w/4+w/2+y);
vertex(w/8+w/4+x, w/8+w/4+y);
vertex(w+x,w/4+w/8+y);
vertex(w+x,0+y);
vertex(w/4+w/2+x,0+y);
endShape();


//shape 2 shadow
fill(0,99);
rect(w/4+w/16+x,0+y,w/4,w);

//shape 2
fill(200,10,0);
rect(w/4+x,0+y,w/4,w);



//shape 3 shadow
fill(0,99);
rect(x,w/2+y,w/16,w/2);

//shape 1 shadow
fill(0,99);
rect(x,y,w/16,w/4+w/8);
//shape 3
fill(200,10,0);
rect(w/4+w/2+x,w/2+y,w/4,w/2);
}

Project 05- Pacman Wallpaper

Initially, I wanted to make a wallpaper that resembled Pacman. I approached the assignment by using for loops to create 2 sets of grids, the first was the dots that Pacman eats, and the second is the grid for the blue squares.

asu_sketch

// Your name: Ashley Su
// Your andrew ID: ashleysu
// Your section (C):  


function setup() {
  createCanvas(450,590);
  background('Black');

}

function dotGrid() {
  var PADDING = 20;
  var ROWS =19;
  var COLUMNS =13;
  var CELL_COLOR = 'Blue'


  for (var col=0;col<COLUMNS;col++) {
    for (var row=0;row<ROWS;row++) {
      var left = PADDING+(col*34);
      var top = PADDING+(row*34.3);
      fill(random(255),random(255),random(255))
      circle(left,top,10);
    }
  }
}

function blueBaracades() {

  var PADDING = 40;
  var ROWS = 4;
  var COLUMNS = 3;
  var CELL_SIZE = 140;
  var CELL_COLOR = 'Blue'


  fill(0);
  stroke('Blue')
  strokeWeight(3);


  for (var col=0;col<COLUMNS;col++) {
    for (var row=0;row<ROWS;row++) {
      var left = PADDING+(col*CELL_SIZE);
      var top = PADDING+(row*CELL_SIZE);
      var size = CELL_SIZE - 50;
      rect(left,top,size,size);
    }
  }
}

function pacmans(){
  
  fill('yellow');
  noStroke();

    push()
    translate(width/5,height/4+7);
    rotate(radians(310));
    arc(0,0,35,35,radians(80),radians(35)/2);
    pop();

    push();
    translate(width/3*2,height/2);
    rotate(radians(140));
    arc(0,0,35,35,radians(80),radians(20)/2);
    pop();
   
    push();
    translate(width/3+4,height-height/6);
    rotate(radians(230));
    arc(0,0,35,35,radians(80),radians(20)/2);
    pop();

    push();
    translate(width-width/7,height-20);
    rotate(radians(140));
    arc(0,0,35,35,radians(80),radians(20)/2);
    pop();

    push();
    translate(width-20,height/26);
    rotate(radians(45));
    arc(0,0,35,35,radians(80),radians(20)/2);
    pop();

}



function draw(){
  dotGrid();
  blueBaracades();
  pacmans();
  noLoop();
}

Project 5 – Wallpaper

I had a really hard time doing this one, the array functions were giving me difficulty and at one point I created a file that just crashed the html file permanantly so I kept having to make more files but I figured them out in the end and ended there.

sketchDownload
var s = [10,15,20,25,20,15];
var x=20;
var y=20;
var c=0;
function setup(){
    createCanvas(600, 600);
    background(255);
}

function draw() {
fill(0); 
for(var l = 0;l <= 5;l += 1){
    y = 20
    for(var h = 0; h <= 5;h += 1){
    x = 20+c;
     for(var i = 0;i < 6;i ++){

        circle(x,y,s[i]);
        x += 15;
        y += 15;
     }
     y += 5;
    }
    c += 90;
}
noLoop();
}