Intro to Computational Media: HW #1 Pattern Study

IMG_3713

 

Screen Shot 2018-09-12 at 8.40.13 AM.png

Screen Shot 2018-09-12 at 1.56.03 PM

Link to code for sketch [p5.js editor view]

Full Screen view [in browser]

For my screen drawing – I thought i’d be fun to try and recreate the geometric patterns found in a Persian rug we have at home. It’s originally from my partner’s grandmother in Tehran, and have always been really drawn to the shapes and rhythm of it.  Some trial & error notes from trying to create the sketch:

  • I had experienced some difficulty visualizing how to plot triangles / hope to keep practicing / filing in the pattern. Would love to look more into simple math tricks for helping with plotting them, verses by  ❤
  • Most errors flagged in the console were from accidental capitalizing the functions when coding? I think it’s due to muscle memory from starting a new sentence while writing.
  • I like the ability in P5.js to round the corners of rectangles/quadrilaterals!
  • I think it would be cool to do this same design utilizing a loop / increase by 1 to create a pattern?
  • Would like to learn/try to do a certain amount of elements evenly within known  canvas dimensions. Ex:  5 circles evenly distributed within the height of the canvas, or 16 rectangles with a constrained size.
  • I enjoyed using the editor in high contrast mode/
  • hope to keep working on it some to try out more shapes : )

One issue I’ve had is when trying to adjust the strokeWeight to give the green triangle a blue edge / it affects the strokeWeight of one of the first detail rows?  I’m unsure why the function strokeWeight at the bottom of the code would affect the weight of something called earlier?

 

 

 

 

Screen Shot 2018-09-12 at 10.11.42 PM.pngScreen Shot 2018-09-12 at 10.11.54 PM.png

 

 

Screen Shot 2018-09-12 at 10.12.15 PM.pngScreen Shot 2018-09-12 at 10.16.50 PM.png

 

Final Code Sketch:

// Becca Moore
// Color swatches
// green-tan (203,200,179)
// lighttan (239,242,205)
// navyblue (53,69,94)
// brickred (130, 82, 70)
// skyblue (167,207,209)
// green (141,142,89
// orange (196, 94, 0)
function setup() {
createCanvas(525, 225);
}
function draw() {
background(220);
//green-tan stripe
fill(203,200,179);
noStroke();
rect(0, 0, 100, 525);

//blue circle row 1
//circle 1
stroke(53,69,94);
line(0,0, 0,525);
line(0,15, 5,15);
line(0,20, 10,20);
line(0,25, 15,25);
line(0,30, 20,30);
line(0,35, 15,35);
line(0,40, 10,40);
line(0,45, 5,45);

//circle 2
line(0,65, 5,65);
line(0,70, 10,70);
line(0,75, 15,75);
line(0,80, 20,80);
line(0,85, 15,85);
line(0,90, 10,90);
line(0,95, 5,95);

//circle 3
line(0,115, 5,115);
line(0,120, 10,120);
line(0,125, 15,125);
line(0,130, 20,130);
line(0,135, 15,135);
line(0,140, 10,140);
line(0,145, 5,145);

//circle 4
line(0,165, 5,165);
line(0,170, 10,170);
line(0,175, 15,175);
line(0,180, 20, 180);
line(0,185, 15,185);
line(0,190, 10,190);
line(0,195, 5,195);

//half-circle 5
line(0,210, 5,210);
line(0,215, 10,215);
line(0,220, 15,220);
line(0,225, 20,225);

//navy circle row 2
stroke(53,69,94);
strokeWeight(7);

//circle 1
line(40,15, 50,15);
line(35,20, 54,20);
line(30,25, 60,25);
line(0,30, 66, 30);
line(30,35, 60,35);
line(35,40, 54,40);
line(40,45, 50,45);

//circle 2
line(40,65, 50,65);
line(35,70, 54,70);
line(30,75, 60,75);
line(0,80, 66, 80);
line(30,85, 60,85);
line(35,90, 54,90);
line(40,95, 50,95);

//circle 3
line(40,115, 50,115);
line(35,120, 54,120);
line(30,125, 60,125);
line(0,130, 66, 130);
line(30,135, 60,135);
line(35,140, 54,140);
line(40,145, 50,145);

//circle 4
line(40,165, 50,165);
line(35,170, 54,170);
line(30,175, 60,175);
line(0,180, 66, 180);
line(30,185, 60,185);
line(35,190, 54,190);
line(40,195, 50,195);

//half-circle 5
line(40,210, 50,210);
line(35,215, 54,215);
line(30,220, 60,220);
line(0,225, 66, 225);

//light tan stripe
noStroke();
fill(239,242,205);
rect(205,0,95,525);

//skyblue stripe
noStroke();
fill(167,207,209);
rect(114,0,100,525);

//orange stripe
noStroke();
fill(196, 70, 0);
rect(299,0,300,525);

//brick-red stripe
noStroke();
fill(130, 82, 70);
rect(97, 0, 18, 525);

//brick-red zipper
stroke(130,82,70);
strokeWeight(9);
line(92,0,120,0);
line(91,18,120,20);
line(93,39,120,40);
line(92,60,120,58);
line(90,70,120,71);
line(90,90,120,91);
line(90,108,120,107);
line(90,121,120,122);
line(90,142,120,141);
line(90,158,120,155);
line(90,169,120,167);
line(90,186,120,187);
line(90,200,120,202);

//Navy Triangle (top)
noStroke();
fill(53,58,94);
triangle(190, 155, 140, 100, 190, 55)

//Navy Triangle (bottom)
noStroke();
fill(53,69,94);
triangle(144, 250, 140, 130, 185, 180)

//Green Trinagle (top)
noStroke();
fill(141,142,18);
triangle(275, 180, 225, 125, 275, 75)
//Green Triangle (bottom)
noStroke();
fill(141,142,89);
triangle(224, 250, 285, 210, 225, 180)

//Orange area detail – Navy border
//strokeWeight(7);
//stroke(53,69,94);
triangle(580, 300, 360, 110, 580, -90)

}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s