Wallpaper

mbk-wallpaper

I started by wanting to explore additive coloring with simple circles and see how nice I could get it to look. After I mapped the colors to the width and height, I liked the effect of overlaps and the subtle gradient, but I thought I could add something. I had overheard someone mention noise function. When I realized that it was a three dimensional continuous perlin noise function, I realized I could make a nice flowy effect with it. I like the results. I tried this in blue as well, but I liked the red more. I tried using additive color blending, but went with dodging due to a p5.js error.

Iteration

wallpaper thing

I wish I could say something really interesting about how this project evolved into what it is, but really what it comes down to is that I have very little programming experience and as such this was born out of me trying things and keeping them if I liked how they looked, and deleting them if I didn’t. It was more of an exercise into “let’s see if this generates something cool” instead of a “let’s actively set out with a plan to make something” kind of a project.

It’s pretty though. And I’m actually relatively proud of myself because this is the first time I’ve ever successfully programmed something and had it turn out a) functioning properly and b) nice.

edit: forgot the code oops here

 

//copyright 2014 natroze
//electronic media studio: interactivity

size(1080,720);
background(242,230,173);
noStroke();

//larger squares
for(int y = 5; y < =height; y+=60) {
  for(int x = 5; x <= width; x +=60) {
    float t2 = random(70,140);
    float t1 = map(y,0,height, t2,0);
    fill(138,217,245, t1);
    rect(x,y, 50,50);
  }
}
//smaller squares
for(int y = 15; y <=height; y+=60) {
  for(int x = 15; x <= width; x +=60) {
    float squareRed = map(y,0,height, 80,200);
    float squareGreen = map(y,0,height, 190,220);
    float t2 = random(20,90);
    float t1 = map(y,0,height, t2,0);
    fill(squareRed,squareGreen,245, t1);
    rect(x,y, 30,30);
  }
}
//circles
for (int y = 0; y<=height; y+=60) {
  for (int x = 0; x<=width; x+=60){
    float circleRed = map(x,0,width, 255,130); 
    float circleGreen = random(135,185); 
    float r1 = map(y,0,height, 10,60);
    float t3 = random(60,130);
    fill(circleRed,circleGreen,223, t3);
    ellipse(x,y, r1,r1);
  }
}

//offset circles
for (int y = 0; y<=height; y+=30) {
  for (int x = 0; x<=width; x+=30){
    float circleRed = map(x,0,width, 255,130); 
    float circleGreen = random(135,185); 
    float r1 = map(y,0,height, 10,30);
    float t5 = random(10,30);
    float t4 = map(y,0,height, 0,t5);
    fill(circleRed,circleGreen,223, t4);
    ellipse(x,y, r1,r1);
  }
}

CSB — Iteration Wallpaper — P5JS

My goal was to use the geometric primitives built into processing to make an unpredictable set of patterns, layered on one another. I was interested in using the built-in gradients to see if i could something 3d looking also. Different gradient “layers” (low opacity) are introduced sequentially as a function of the # of mouse clicks.

CSBWALLPAPER

I also included screenshots of some earlier attempts, some of which which how the nested for loop functions/malfunctions.

Screen Shot 2014-09-22 at 10.59.42 AM

Screen Shot 2014-09-22 at 11.23.02 AM

Screen Shot 2014-09-22 at 11.23.06 AM

Screen Shot 2014-09-22 at 11.23.36 AM

Screen Shot 2014-09-22 at 11.30.29 AM

Screen Shot 2014-09-17 at 9.13.03 PM

Screen Shot 2014-09-18 at 7.04.27 PM

Miss America Generator

The source of all Miss Americas!

I was unable to convert it to p5.js. It would have been better to click yourself to generate a Miss America. This was put together with a lot of brute force coding, I used the random function for every variable. Some of the random numbers were randomly choosing a type of object or string to put (like the type of bangs, or the names) and the other way I used random numbers were to change the size of something (like the slight change in the shape of the eyes, or the hair length)

missamericas1

//cc Charlotte Stiles 
//Miss America Generator

float sideFace = 0, chin = 0;
color bgColor = color(int(random(200)),int(random(200)),int(random(200)));
String [] issueOne = {"Human ", "Youth ", "Senior ", "Homeless ", "Animal ","Disease ", "Prison ","World Peace ","Global Climate Change "};
String [] issueTwo = {"Rights", "Brought to Justice", "Awareness", "Abuse Pervention", "Help","Problems","Rescue","Fund","Appreciation"};
String [] name = {"Sophia","Emma","Olivia","Stephanie","Ava","Mia","Emily","Abigail","Madison","Vanessa","Nina","Avery","Sofia",
"Chloe","Ella","Harper","Amelia","Aubrey","Addison","Evelyn","Natalie","Grace"};
int nameNum = int(random(name.length));
int i1 = int(random(1,9));
int i2 = int(random(1,9));
int bangsNum = int(random(1,4));
color hairColor;
color skinColor;
int hairColorNum = int(random(8));
int hairLength = int(random(20));
float eyeNum = random(-3,3);
float mouthNum = random(-3,3);
float ex=0,ey=0;
void setup(){
size(400,400);
ellipseMode(CENTER);
}

void draw(){
noStroke();
fill(bgColor);
rect(0, 0, width, height);
hair();
face();
hairColorFun();
skinColorFun();
eyes();
bangs();
platformIssue();
name();
mouth();

}

void face(){
fill(skinColor);
beginShape();
curveVertex(252,142);
curveVertex(158,129);
curveVertex(131,126);
curveVertex(112,150);
curveVertex(120-sideFace,223);//left cheak
curveVertex(200,279+ chin); //chin
curveVertex(280+sideFace,218 );// right cheak
curveVertex(287,155);
curveVertex(257,118);
curveVertex(130,127);
curveVertex(156,219);
endShape(); 
}

void hairColorFun(){

if (hairColorNum < = 5) {
hairColor = color(231,235,153) ;
}
else if (hairColorNum == 6) {
hairColor = color(80,10,2) ;
}
else if (hairColorNum == 7){
hairColor = color (200,127,33);
}

}

void skinColorFun(){

if (hairColorNum <= 5) { skinColor = color(255,218,186) ; } else if (hairLength >= 20) {
skinColor = color(138,93,33) ;
}
else if (hairLength < = 19){
skinColor = color (250,194,145);
}

}

void bangs(){
fill(hairColor);
if (bangsNum == 1) {
beginShape();
curveVertex(97,89);
curveVertex(157,82);
curveVertex(258,175);
curveVertex(313,170);
curveVertex(310,157);
curveVertex(278,96);
curveVertex(239,178);
endShape();

}

else if (bangsNum == 2) {
beginShape();
curveVertex(250,35);
curveVertex(138,71);
curveVertex(108,137);
curveVertex(290,142);
curveVertex(297,100);
curveVertex(246,74);
endShape();
}

else if (bangsNum == 3) {
beginShape();
curveVertex(239,112);
endShape();
}


}

void name(){
textSize(30);
textAlign(CENTER);
text(name[nameNum],width/2,30);
}


void hair(){
fill(hairColor);
ellipse(201,142,220,-176);
rect (94,137,216,224 - hairLength,32);
}

void eyes(){
fill(0);
beginShape();
curveVertex(ex+120,ey+249);
curveVertex(ex+127+eyeNum,ey+186);
curveVertex(ex+145,ey+177);
curveVertex(ex+159,ey+184);
curveVertex(ex+163+eyeNum,ey+192);
curveVertex(ex+137,ey+195);
endShape();

triangle(119,170,134,186,127,187);
triangle(123,162,142,187,132,184);
triangle(130,161,149,182,139,183);

triangle(277,164,264,181,268,184);
triangle(273,162,259,187,248,184);
triangle(265,161,252,182,241,183);

beginShape();
curveVertex(ex+153,ey+210);
curveVertex(ex+262-eyeNum,ey+188);
curveVertex(ex+257,ey+177);
curveVertex(ex+232,ey+184);
curveVertex(ex+233-eyeNum,ey+192);
curveVertex(ex+246,ey+195);
endShape();

}

void mouth(){
noStroke();
fill(200 + (hairColorNum*7) ,50,50);
beginShape();
curveVertex(width/2+157, height/2+10);
curveVertex(width/2+9, height/2+22);
curveVertex(width/2+-2, height/2+25);
curveVertex(width/2+-19, height/2+23);
curveVertex(width/2-47, height/2+37);
curveVertex(width/2+-3, height/2+(61+mouthNum));
curveVertex(width/2+39, height/2+33);
curveVertex(width/2+11, height/2+-13);
endShape();
fill(255);
beginShape();
curveVertex(width/2+207, height/2+10);
curveVertex(width/2+15, height/2+35);
curveVertex(width/2+0, height/2+37);
curveVertex(width/2+-23, height/2+36);
curveVertex(width/2-46, height/2+37);
curveVertex(width/2+0, height/2+47);
curveVertex(width/2+40, height/2+33);
curveVertex(width/2+11, height/2+37);
endShape();
}


void platformIssue(){
textSize(13);
fill(0);
text("Platform Issue: " + issueOne[i1] + issueTwo[i2],width/2,380); 
//I'm putting i1 and i2 as global variables so it choses one random 
//number for each time the program runs, and sticks with it
}

void mouseClicked(){
sideFace = random(-10,10);
chin=(random(-5,15));
bgColor = color(int(random(200,255)),int(random(200,255)),int(random(200,255)));
i1 = int(random(1,9));
i2 = int(random(1,9));
bangsNum = int(random(1,4));
hairColorNum = int(random(8));
hairLength = int(random(48));
eyeNum = random(-3,3);
mouthNum = random(-3,3);
nameNum = int(random(name.length));
}

Alex Wallpaper

Wallpaper

For this assignment, I had trouble thinking of an end result so I just tweaked around with different numbers and variables. I started off with the template. Then, I decided to change the size of the rects and add a gradient of color to them. Then, I began playing around with the number in “gridSize”. I found that as the number in creased, the amount of rects decreased and vise versa. So I set the size to 10 and a beautiful patterning occurred with the lines. So, I decided to add random coloring to the lines and rects. However, I switched the green and blue variables in the rects and found that different colors appeared for the lines and the rects. I then proceeded too add ellipses and messed around with their size so many times until I got the interesting randomized striations.

size(600,300);
background(0);



int gridSize = 10;
float r= random(0,255);
float g= random(0,255);
float b= random(0,255);

for (int x = gridSize; x < = width - gridSize; x += gridSize) {
  for (int y = gridSize; y <= height - gridSize; y += gridSize) {
    
    float p= random(0,600);
    noStroke();
    fill(x*r,b,g);
    rect(x-1, y-1, 10, 10);
    
    stroke(r*x,g,b);
    line(x, y, width/2, height/2);
    
      fill(0);
    ellipse(p,y, x,2);
  }
}
fill(0);
noStroke();
rect(0,0, width/2, height);

Alex Chaos

Chaos

For this project, I wanted to create grid similar ti the lines that were the example.  and as you moved left to right, the squares got more randomized.  However, in class, we were taught how to randomize color and create a “vibrating” shape in the mouse cursor.  My idea then developed into creating a organized greyscale grid of squares that were “activated” (motion and color) only when the mouse was on top of one square.  After making it, I came to realize that it resembles pretty much my life motto, standing out from a crowd. However, that only standing out if activated part adds an interesting twist to the moto and makes me think about if I am “activated” at certain times and am not truly a person who stands out on their own.

 

 

void setup() {
  size(600, 200);
}

void draw() {
  fill(50,50,50,20);
  rect(0,0,600,200); 
  frameRate(25);
  float dx=random (-15, 15);
  float dy=random (-15, 15); 
  float r=random(0,255);
  float g=random(0,255);
  float b=random(0,255);
  float s=random(1,10);
  
  for (int y=0; y< =height; y+=30) {
    for (int x=0; x<=width; x+=25) {       if ((mouseX > x) && (mouseX < (x+20)) && (mouseY > y) && (mouseY < (y+20))){
        fill(r,g,b);
        strokeWeight(s);
        stroke(r,g,b);
        rect (x+dx, y+dy, 20, 20);
      } 
        else {
        fill(155);
        strokeWeight(1);
        stroke(0);
        rect (x, y, 20, 20);
      }
    }
  }
}

Alex Face Changer

Face Changer

This was the assignment I decided to start out with. It was quite a challenge and more of an experience/ experimental piece. Fun fact: I figured out how to randomize the color on my own before we were taught it in class. so, that was a very proud accomplishment of mine, which is kind of sad. My second modification was adding a mouth to the example face. For this used a triangle to stick to the simple geometric shape aesthetic. I then continued to have the mouth shape randomize. My third modification was adding pupils and getting the position of the eye and pupils to move with ever frame.

float eyeSize = 20; 
float eyePlace = height/2;
float faceWidth = 100; 
float faceHeight = 120; 
float mouthWidth = 50;
float mouthHeight = 200;
int red=255;
int blue=255;
int green=255;

void setup(){
  size(300,300); 
 frameRate (2); 
}
 
void draw(){
  background(180);
  float clampedX = constrain(mouseX, faceWidth, faceWidth);
  fill(red, green, blue);
    ellipse (width/2, height/2, faceWidth, faceHeight); 
    
 fill(red/2,green/2, blue/2);
  float eyeLX = width/2 - faceWidth*0.25;
  float eyeRX = width/2 + faceWidth*0.25;
  ellipse (eyeLX, eyePlace, eyeSize, eyeSize); 
  ellipse (eyeRX, eyePlace, eyeSize, eyeSize);
  
   float mouthLX = width/2 - faceWidth*0.25;
  float mouthRX = width/2 + faceWidth*0.25;
  float mouthHX = mouthHeight + faceHeight*0.25;
  triangle (mouthLX/2,170, mouthRX+70, 170, width/2+70, mouthHX);
  
  fill(0);
  ellipse (eyeLX, eyePlace, eyeSize/2, eyeSize/2); 
  ellipse (eyeRX, eyePlace, eyeSize/2, eyeSize/2);
  
 
  
   faceWidth  = random (75,  150); 
  faceHeight = random (100, 200); 
  eyeSize    = random (10,  30); 
  mouthWidth = random (25, mouthHeight);
  mouthHeight = random (150, 225);
  eyePlace = random (100, 150);
}
 
void mousePressed(){
  red = int(random(0,256));
  blue = int(random(0,256));
  green = int(random(0,256));
 
}

Generating Darwin’s Galapagos Finches

BirdFaceGeneratorDarwinFinch

For the face generator project, I decided to create a program that generates finches, based off of the beak permutations found in Darwin’s finches of the Galapagos Islands (see images below). I pretty much eyeballed the parameters for the finches’ basic beak shapes, but I think this project would be worth revisiting with accurate mathematical data reflecting each beak’s dimensions. With regards to my completed program, I’d like to find a way to make the curvature of the beak less prominent in the smaller beak permutations.

Darwin's Finches Darwin's_finches_by_Gould

//Miranda Jacoby
//majacoby@andrew.cmu.edu
//EMS INTERACTIVITY SECTION A
//Copyright Miranda Jacoby 2014

//Variable Bird Faces

float headX = 25;
float headY = -50;
float headBeakAnchorX1 = random(100, 110);
float headBeakAnchorY1 = random(175, 200); //range of randdomness to atleast 200
float headBeakAnchorX2 = 150;
float headBeakAnchorY2 = 350; //Throat control. Currently unused, see headBeakAnchors

//Anchor the eye x and y pos to some dimension of the beak
float eyeX = 200 + headBeakAnchorX1/10;
float eyeY = 140 + headBeakAnchorY1/10;
float eyeH = 30;
float eyeW = 35;

float beakX = 0;
float beakY = 0;
float beakHeight = 100; //Currently unsued, see headbeakAnchors
float beakWidth = random(25, 60); //10 is a long beak, 100 is a short beak
float beakAnchorX = 200;
float beakAnchorY = 200;

void setup() {

  size(400, 400);
  //Values for messing about with tweak
  headX = 25;
  headY = -50;
  headBeakAnchorX1 = 99;
  headBeakAnchorY1 = 175; //range of randdomness to atleast 200
  headBeakAnchorX2 = 138;
  headBeakAnchorY2 = 333; //Currently unused, see headBeakAnchors
  beakHeight = 100; //Currently unsued, see headbeakAnchors
  beakWidth = 49; //25 is a long beak, 70 is a short beak
  beakAnchorX = 200;
  beakAnchorY = 200;
}

void draw() {



  background(255);

  //birdhead  
  noStroke();
  fill(0);
  beginShape();
  curveVertex(headX + 50, headY + 275);
  curveVertex(headX + 150, headY + 350);
  curveVertex(headX + 350, headY + 375);
  curveVertex(headX + 250, headY + 175);
  curveVertex(headX + headBeakAnchorX1, headY + headBeakAnchorY1); //Link this to the top of the beak
  curveVertex(headX + headBeakAnchorX2, headY + headBeakAnchorY2);
  curveVertex(headX + 200, headY + 400);
  endShape(CLOSE);
  
  //birdbody
  fill(0);
  ellipse(310, 340, 300, 250);

  //birdbeak
  //Change headbeakAnchors, subtract beakHeight from them
  fill(234, 188, 152);
  beginShape();
  vertex(beakX + beakAnchorX, beakY + beakAnchorY    );
  
  vertex(headX + headBeakAnchorX1, headY + headBeakAnchorY1);
  
  //curveVertex(819, 572);
    curveVertex(beakAnchorX + 639, beakAnchorY + 185);
    curveVertex(beakX + beakAnchorX, beakY + beakAnchorY    );
    curveVertex(beakX + beakWidth, beakY + beakAnchorY);
    curveVertex(beakAnchorX + 58, beakAnchorY + -43);
  //vertex(beakX + beakWidth, beakY + beakAnchorY    );
  
  
  //vertex(beakX + headBeakAnchorX2, beakY + headBeakAnchorY2);//(beakAnchorY + beakWidth/3));
  vertex(beakX + headBeakAnchorX2, beakY + (beakAnchorY + beakWidth/3));
  endShape(CLOSE);

  //Line seperating top and bottom of beak
  //Averages highest and lowest point, connects to beak tip and beak anchor
  stroke(245, 229, 210);
  strokeJoin(ROUND);
  strokeWeight(2);
  line(beakX + beakAnchorX, beakY + beakAnchorY, (beakWidth/2)+(headBeakAnchorX1 + headBeakAnchorX2)/2, (beakHeight/5) + (headBeakAnchorY1 + headBeakAnchorY2)/3 );
  line( (beakWidth/2) + (headBeakAnchorX1 + headBeakAnchorX2)/2, (beakHeight/5) + (headBeakAnchorY1 + headBeakAnchorY2)/3, beakX + beakWidth, beakY + beakAnchorY);
  noStroke();

  //birdeye
  fill(255);
  //Eye Ring
  ellipse(eyeX, eyeY, eyeW, eyeH);
  //Eye Iris
  fill(88, 48, 18);
  ellipse(eyeX, eyeY, eyeW - 5, eyeH - 5);
  //Eye Pupil
  fill(0);
  ellipse(eyeX, eyeY, eyeW - 20, eyeH - 15);
  //Highlight
  fill(255);
  ellipse(eyeX - 5, eyeY - 5, eyeW -28, eyeH -27);

  
}
////Make Bird's beak change randomly by clicking
void mousePressed(){
  
  headBeakAnchorX1 = random(100, 110);
  headBeakAnchorY1 = random(175, 220);
  beakWidth = random(35, 80);
  eyeX = 200 + headBeakAnchorX1/8;
  eyeY = 140 + headBeakAnchorY1/8;
}