Intro to Computational Media: HW #1 Pattern Study

 

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  ❤
  • https://www.youtube.com/watch?v=DCm_jWWFt1w
• 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?

 

 

 

 

 

 

 

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)

}