aboyle-Project-05-Wallpaper

aboyle wallpaper

function setup() {
    createCanvas(400, 400);
    noLoop();
}

function draw() {
    background(191, 220, 249);
//creates light lines in the background
    for(x=10; x<width+50; x+=100){
      strokeWeight(4);
      stroke(238,245,247)
      line(x,0,x,400)
      strokeWeight(2);
      stroke(222,245,252);
      line(x+50,0,x+50,400)
    }
//jellyfish tentacles
    noFill();
    oneTentacles();
    twoTentacles();
    threeTentacles();
    fourTentacles();
//jellyfish bodies
    strokeWeight(0);
    jellyfishOne();
    jellyfishTwo();
    jellyfishThree();
    jellyfishFour();
  }

//orange jellyfish
function jellyfishOne(){
    for (var x=10; x<width+50; x+=100){
      for(var y=25; y<height+50; y+=100){
      //body
      fill(236, 190, 130);
      ellipse(x,y,15);
      triangle(x,y,x-2,y-10,x+12,y-2)
      //highlight
      fill(247, 222, 188);
      ellipse(x-1,y-1,7)
    }
  }
}

//purple jellyfish
function jellyfishTwo(){
  for (var x=15; x<width+50; x+=100){
    for(var y=50; y<height+50; y+=100){
      //body
      fill(182, 137, 212);
      ellipse(x,y,20);
      triangle(x,y,x,y+15,x+15,y+4);
      //highlight
      fill(216, 182, 239);
      ellipse(x, y-4, 9);
    }
  }
}

//large lavender jellyfish
function jellyfishThree(){
  for (var x=65; x<width+50; x+=100){
    for(var y=40; y<height+50; y+=100){
      //body
      fill(212,137,209);
      ellipse(x,y,30);
      triangle(x,y,x-20,y+5,x-12,y-18)
      //highlight
      fill(236,191,235);
      ellipse(x-1,y-6,13);
    }
  }
}

//pink jellyfish
function jellyfishFour(){
  for (var x=-10; x<width+50; x+=100){
    for(var y=-20; y<height+50; y+=100){
      //body
      fill(242, 146, 178);
      ellipse(x,y,25);
      triangle(x,y,x-18,y+3,x-5,y+17)
      //highlight
      fill(250,199,216);
      ellipse(x-3,y-3,11)
    }
  }
}

//orange tentacles
function oneTentacles(){
  for (var x=10; x<width+50; x+=100){
    for(var y=25; y<height+50; y+=100){
      stroke(159,87,24);
      curve(x-85,y+20,x,y,x+5,y-25,x-85,y-20);
      curve(x-90,y+20,x-3,y,x-1,y-25,x-90,y-20);
      curve(x-95,y+20,x-6,y,x-7,y-25,x-95,y-20);
}
}
}

//purple tentacles
function twoTentacles(){
  for (var x=15; x<width+50; x+=100){
    for(var y=50; y<height+50; y+=100){
      stroke(102, 51, 102);
      curve(x-95,y-20,x,y,x+20,y+40,x-95,y+50);
      curve(x-100,y-20,x-5,y,x+14,y+40,x-100,y+50);
      curve(x-105,y-20,x-9,y,x+8,y+40,x-105,y+50);
}
}
}

//large lavender tentacles
function threeTentacles(){
  for (var x=65; x<width+50; x+=100){
    for(var y=40; y<height+50; y+=100){
      stroke(129,73,128);
      bezier(x-15,y-70,x+30,y-60,x-95,y-10,x,y)
      bezier(x-10,y-75,x+35,y-60,x-85,y-15,x+5,y)
      bezier(x-5,y-80,x+40,y-60,x-75,y-20,x+10,y)
    }
}
}

//pink tentacles
function fourTentacles(){
  for (var x=90; x<width+50; x+=100){
    for(var y=-20; y<height+50; y+=100){
      stroke(134,67,89);
      bezier(x,y,x-60,y+20,x+30,y+50,x-12,y+80)
      bezier(x+6,y,x-55,y+20,x+35,y+50,x-7,y+80)
      bezier(x+10,y,x-50,y+20,x+40,y+50,x-2,y+80)
}
}
}

For some reason, when I thought of wallpaper my mind immediately went to jellyfish. I sketched out a grid and mapped four different jellyfish onto it, seen below.

While the bodies of the jellyfish end up in roughly the same position, I changed the position of the tentacles while I was coding. Although I could’ve put the code for the tentacles under the jellyfish body functions, it helped me mentally to organize them separately.

In the end, I had less space than I thought I would so I couldn’t include any shells for decoration. I tried to pick colors that were light and cartoony; I was going for a “child’s bathroom” kind of vibe. I also added some light lines in the background to make it more visually interesting. Overall, I’m pretty happy with how it turned out!