Category: Uncategorized

After I saw Sarita Chen’s 8 bit pixel art work, I wanted to explore and learn how this worked. So I chose my favorite character minion, and I decided to explore them and make it into a wall paper.

sketch

//Jiyoung Ahn
//Section A
//jiyounga@andrew.cmu.edu
//Assignment -05-project


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

function draw() {

  background('pink');

  for(var x = 0; x < width ; x +=70){  
    for(var y = 0; y < height; y += 70){
      heartminion(x,y); 
    }
  } 
}
  function heartminion(x,y){

    noStroke();
    var outline = ('black');
    var heart = ('red');
    var minionskin = ('yellow');
    var goggle = (150);
    var clothes = ('blue');
    var eye = ('white');
    var onepixel = 2.5;

      //line1
    fill(outline);
    rect(x+5*onepixel,y,onepixel*2,onepixel);
    rect(x+8*onepixel,y,onepixel*2,onepixel);

      //line2
    fill(outline);
    rect(x+4*onepixel,y+onepixel,onepixel,onepixel);
    fill(heart);
    rect(x+5*onepixel,y+onepixel,onepixel*2,onepixel);
    fill(outline);
    rect(x+7*onepixel,y+onepixel,onepixel,onepixel);
    fill(heart);
    rect(x+8*onepixel,y+onepixel,onepixel*2,onepixel);
    fill(outline);
    rect(x+10*onepixel,y+onepixel,onepixel,onepixel);

      //line3
    fill(outline);
    rect(x+4*onepixel,y+onepixel*2,onepixel,onepixel);
    fill(heart);
    rect(x+5*onepixel,y+onepixel*2,onepixel*5,onepixel);
    fill(outline);
    rect(x+10*onepixel,y+onepixel*2,onepixel,onepixel);

      //line4
    fill(outline);
    rect(x+5*onepixel,y+onepixel*3,onepixel,onepixel);
    fill(heart);
    rect(x+6*onepixel,y+onepixel*3,onepixel*3,onepixel);
    fill(outline);
    rect(x+9*onepixel,y+onepixel*3,onepixel,onepixel);

      //line5
    fill(outline);
    rect(x+6*onepixel,y+onepixel*4,onepixel,onepixel);
    fill(heart);
    rect(x+7*onepixel,y+onepixel*4,onepixel,onepixel);
    fill(outline);
    rect(x+8*onepixel,y+onepixel*4,onepixel,onepixel);

      //line6
    fill(outline);
    rect(x+7*onepixel,y+onepixel*5,onepixel,onepixel);


      //line8
    fill(minionskin);
    rect(x+5*onepixel,y+onepixel*8,onepixel*6,onepixel);

      //line9
    fill(minionskin);
    rect(x+4*onepixel,y+onepixel*9,onepixel*3,onepixel);
    fill(goggle);
    rect(x+7*onepixel,y+onepixel*9,onepixel*2,onepixel);
    fill(minionskin);
    rect(x+9*onepixel,y+onepixel*9,onepixel*3,onepixel);

      //line10
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*10,onepixel*3,onepixel);
    fill(goggle);
    rect(x+6*onepixel,y+onepixel*10,onepixel,onepixel);
    fill(eye);
    rect(x+7*onepixel,y+onepixel*10,onepixel*2,onepixel);
    fill(goggle);
    rect(x+9*onepixel,y+onepixel*10,onepixel,onepixel);
    fill(minionskin);
    rect(x+10*onepixel,y+onepixel*10,onepixel*3,onepixel);

      //line11
    fill(outline);
    rect(x+3*onepixel,y+onepixel*11,onepixel*2,onepixel);
    fill(goggle);
    rect(x+5*onepixel,y+onepixel*11,onepixel,onepixel);
    fill(eye);
    rect(x+6*onepixel,y+onepixel*11,onepixel,onepixel);
    fill(outline);
    rect(x+7*onepixel,y+onepixel*11,onepixel*2,onepixel);
    fill(eye);
    rect(x+9*onepixel,y+onepixel*11,onepixel,onepixel);
    fill(goggle);
    rect(x+10*onepixel,y+onepixel*11,onepixel,onepixel);
    fill(outline);
    rect(x+11*onepixel,y+onepixel*11,onepixel*2,onepixel);

      //line12
    fill(outline);
    rect(x+3*onepixel,y+onepixel*12,onepixel*2,onepixel);
    fill(goggle);
    rect(x+5*onepixel,y+onepixel*12,onepixel,onepixel);
    fill(eye);
    rect(x+6*onepixel,y+onepixel*12,onepixel,onepixel);
    fill(outline);
    rect(x+7*onepixel,y+onepixel*12,onepixel*2,onepixel);
    fill(eye);
    rect(x+9*onepixel,y+onepixel*12,onepixel,onepixel);
    fill(goggle);
    rect(x+10*onepixel,y+onepixel*12,onepixel,onepixel);
    fill(outline);
    rect(x+11*onepixel,y+onepixel*12,onepixel*2,onepixel);

      //line13
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*13,onepixel*3,onepixel);
    fill(goggle);
    rect(x+6*onepixel,y+onepixel*13,onepixel,onepixel);
    fill(eye);
    rect(x+7*onepixel,y+onepixel*13,onepixel*2,onepixel);
    fill(goggle);
    rect(x+9*onepixel,y+onepixel*13,onepixel,onepixel);
    fill(minionskin);
    rect(x+10*onepixel,y+onepixel*13,onepixel*3,onepixel);

      //line14
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*14,onepixel*4,onepixel);
    fill(goggle);
    rect(x+7*onepixel,y+onepixel*14,onepixel*2,onepixel);
    fill(minionskin);
    rect(x+9*onepixel,y+onepixel*14,onepixel*4,onepixel);

      //line15
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*15,onepixel*10,onepixel);

      //line16
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*16,onepixel*10,onepixel);

      //line17
    fill(clothes);
    rect(x+3*onepixel,y+onepixel*17,onepixel,onepixel);
    fill(minionskin);
    rect(x+4*onepixel,y+onepixel*17,onepixel*8,onepixel);
    fill(clothes);
    rect(x+12*onepixel,y+onepixel*17,onepixel,onepixel);

      //line18
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*18,onepixel,onepixel);
    fill(clothes);
    rect(x+4*onepixel,y+onepixel*18,onepixel,onepixel);
    fill(minionskin);
    rect(x+5*onepixel,y+onepixel*18,onepixel*6,onepixel);
    fill(clothes);
    rect(x+11*onepixel,y+onepixel*18,onepixel,onepixel);
    fill(minionskin);
    rect(x+12*onepixel,y+onepixel*18,onepixel,onepixel);

      //line19
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*19,onepixel*2,onepixel);
    fill(clothes);
    rect(x+5*onepixel,y+onepixel*19,onepixel*6,onepixel);
    fill(minionskin);
    rect(x+11*onepixel,y+onepixel*19,onepixel*2,onepixel);

      //line20
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*20,onepixel*2,onepixel);
    fill(clothes);
    rect(x+5*onepixel,y+onepixel*20,onepixel*6,onepixel);
    fill(minionskin);
    rect(x+11*onepixel,y+onepixel*20,onepixel*2,onepixel);

      //line21
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*21,onepixel,onepixel);
    fill(clothes);
    rect(x+4*onepixel,y+onepixel*21,onepixel*8,onepixel);
    fill(minionskin);
    rect(x+12*onepixel,y+onepixel*21,onepixel,onepixel);

      //line22
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*22,onepixel,onepixel);
    fill(clothes);
    rect(x+4*onepixel,y+onepixel*22,onepixel*8,onepixel);
    fill(minionskin);
    rect(x+12*onepixel,y+onepixel*22,onepixel,onepixel);

      //line23
    fill(outline);
    rect(x+3*onepixel,y+onepixel*22,onepixel,onepixel);
    fill(clothes);
    rect(x+4*onepixel,y+onepixel*22,onepixel*8,onepixel);
    fill(outline);
    rect(x+12*onepixel,y+onepixel*22,onepixel,onepixel);

      //line24
    fill(outline);
    rect(x+2*onepixel,y+onepixel*23,onepixel*2,onepixel);
    fill(outline);
    rect(x+5*onepixel,y+onepixel*23,onepixel*2,onepixel);
    fill(outline);
    rect(x+9*onepixel,y+onepixel*23,onepixel*2,onepixel);
    fill(outline);
    rect(x+12*onepixel,y+onepixel*23,onepixel*2,onepixel);

      //line25
    fill(outline);
    rect(x+4*onepixel,y+onepixel*24,onepixel*3,onepixel);
    fill(outline);
    rect(x+9*onepixel,y+onepixel*24,onepixel*3,onepixel);


  }

Alison Hoffman

var petalD = 65; // petal depth
var petalW= 60; // petal width
var rotation = 60; // standard rotation
var xspacing = 380; // space between flowers
var yspacing = 270;
function setup() {
    createCanvas(800, 400);
    background(0);
}

function draw() {
    // draw white stripes
    for(var i = 40; i <height; i +=100){
        stroke(255);
        strokeWeight(50);
        line(0,i,width,i);
    }

    //draw the flowers
    for(var y = 0; y < height; y+= yspacing){
        for(var x = 0; x < width; x+= xspacing){
            flower(x,y);
        }
    }

    noLoop();
}

function flower(x,y){     // function to make flower
    noStroke();

    push();
    translate(x,y);
    
    // leaves           
    fill(179,253,181);
    ellipse(petalD,0,120,20);
    rotate(radians(143));
    ellipse(petalD,0,120,20);
    rotate(radians(230));
    ellipse(petalD,0,120,20);
    rotate(radians(195));
    ellipse(petalD,0,120,20);
    
    rotate(radians(0));  // reset to no rotation
    for (var i=0; i<9; i++){     // makes up to nine petals
        if(i%2==0){
            fill(255,191-i,229-i);  // make every other petal darker 
            petalW = 90;  // vary petal width 
            petalD = 80; //vary petal depth
        }else{
            fill(255,200+i,230+i); // make every other petal lighter
            petalD = 75;  // vary petal depth
            petalW = 90; // vary petal width
        }
        rotate(radians(rotation));
        ellipse(petalD/2,0,petalD,petalW); // makes a petal
        rotation += i;   // makes rotations less uniform and circular
        fill(0);
        ellipse(10,0,15); // center circles 
    }

    pop();

}

For this project I wanted to try to create a wallpaper that combined geometric elements and more organic one. I have been seeing a lot of designs that have been combining stripes with florals, so I decided to try to recreate that in this project.

sketch

//Seth Henry

//Tuesday at 10:30

//sehenry@andrew.cmu.edu

//Assignment-05 Wallpaper




function setup() {
    createCanvas(660, 340);
    }

function draw() {
	  background(128, 0, 32); //Burgundy
	  blackDot(); 
	  fill('orange'); //Color of Ball
	  Bball();
	  fill(240, 248, 255); //Color of Diamonds
	  diamond();

	 }


function Bball(){ //Basketball Layout
	var x = 90;
	var y = 50;
	for(x = 90; x < 660; x += 120){
	
	for(y = 50; y < 340; y += 80){
		ellipse(x, y, 60, 60)
		
	  beginShape(); // left curve on basketball
	  
	  curveVertex(x - 19.5, y - 22.5);
	  curveVertex(x - 19.5, y - 22.5);
	  curveVertex(x - 12.5, y - 10);
	  curveVertex(x - 12.5, y + 10);
	  curveVertex(x - 19.5, y + 22.5);
	  curveVertex(x - 19.5, y + 22.5);
	  endShape();
   	  beginShape(); // right curve on basketball
	  
	  curveVertex(x + 19.5, y - 22.5);
	  curveVertex(x + 19.5, y - 22.5);
	  curveVertex(x + 12.5, y - 10);
	  curveVertex(x + 12.5, y + 10);
	  curveVertex(x + 19.5, y + 22.5);
	  curveVertex(x + 19.5, y + 22.5);
	  endShape();
		line(x, y + 30, x, y-30); //vertical line on basketball
		line(x - 30, y, x + 30, y); //horizontal line on basketball
}

}
noLoop();
}


function diamond(){ //Diamond Layout Plus Number 4 Text

var a = 0; //starter variables
var b = 0;


for(a = 0; a < 650; a += 120){ //moves over the diamonds/4 in rows
for(b = 0; b < 340; b += 50){ //moves over the diamonds/4 in columns
quad(a + 30, b + 5, a + 45, b + 20, a + 30, b + 35, a + 15, b + 20);
textAlign(CENTER);

text("#4", a + 30, b + 50); //#4
}	
} 
noLoop(); //end loop
}

function blackDot(){ //Makes black dots behind the balls, numbers, and diamonds
	var v = 0;
	var w = 0;

	for(v=0; v<660; v+=5){ //moves over the dots in rows
		for(w=0; w<340; w+=5){ //moves over the dots in columns
		ellipse(v,w,1,1);
		}
		
	}
	noLoop();
}

	

I decided to cut off one row of the basketballs because when I embed the wallpaper into my post, it cannot capture all of the extra row. So I decided to just remove it from the preview even though it is in my code.

Making this project would have actually been finished relatively fast if I didn’t have a hard time with the curves on the basketball and getting the diamonds to move over by certain amounts without distorting their shape. I drew a sketch to begin with and toyed with the idea of having basketballs all over the picture. I later added the number 4 to the wallpaper because it is my current number on the basketball team and I decided to add the black dots because I thought it would make the wallpaper pop out even more! I had fun with this project and it showed me that I am actually getting better at coding.