{"id":200,"date":"2015-09-30T04:58:45","date_gmt":"2015-09-30T04:58:45","guid":{"rendered":"http:\/\/www.zoebachman.net\/itp\/?p=200"},"modified":"2015-09-30T04:58:45","modified_gmt":"2015-09-30T04:58:45","slug":"icm-wk-4-here-we-go-again","status":"publish","type":"post","link":"http:\/\/www.zoebachman.net\/itp\/?p=200","title":{"rendered":"ICM, Wk 4: Here We Go Again"},"content":{"rendered":"

This week, our assignment was to take\u00a0a previous drawing and try to use the new object and function formatting to clean it up.<\/p>\n

I thought back to my Sol LeWitt<\/a> drawing from the first week and I wondered how I could transform the individual square (the sketch is comprised of 400 of them) to create an object that can have one of four interiors\u00a0\u2013 either a line is drawn diagonally from bottom left to top right, or diagonally from bottom right to top left, has both lines, or is blank.<\/p>\n

I started by conceptually thinking of the code.<\/p>\n

The overall square is 200\u00d7200, including 400 squares with lines or no lines. I\u2019m thinking I\u2019d write an object that would have variables for the parameter<\/p>\n

var square: {
\nx: 200
\ny: 100
\nw: 10
\nh: 10<\/p>\n

(parameters for first square in the upper right hand corner).<\/p>\n

and then I\u2019d execute the object in draw() \u2026and add a conditional statement so that it redraws the squares every 10 pixels, until it reaches the edge of the large rectangle, and repeat through the next 19 lines. So, something along the lines of the nested loops that\u00a0we explored last week.<\/p>\n

The next part would be to figure out how to\u00a0randomize what is drawn in the interior of\u00a0each of those 400 squares, or have it be blank. Would I use that mysterious array thing I\u2019ve heard about?<\/p>\n

I put all of those thoughts in an email to Shiffman. He wrote back and made a few modifications as well as suggesting some hints\u2026<\/p>\n

To answer your question, I think what I might start out doing is create an object for an individual cell of the full grid, i.e.<\/p>\n

var cell = {
\nx: 0,
\ny: 0.
\nw: 10,
\nh: 10,
\ndir: 0
\n}<\/p>\n

You could have a variable like \u201cdir\u201d which could have a value of 0 or 1 depending on the line direction. Then you could add a function like:<\/p>\n

var cell = {
\nx: 0,
\ny: 0.
\nw: 10,
\nh: 10,
\ndir: 0,
\ndisplay: function() {
\nrect(this.x,this.y,this.w,this.h);
\nif (this.dir == 0) {
\n\/\/ line one way
\n} else {
\n\/\/ line other way
\n}
\n}
\n}<\/p>\n

Try making this object and then changing dir to false manually and see if it works!<\/p>\n

Then you could have dir set randomly:<\/p>\n

function setup() {
\ncell.dir = floor(random(2));
\n}<\/p>\n

floor() converts the random decimal number to a whole number so you get only 0 or 1.<\/p>\n

Try to see if you can get this to work and then the next step is to make an array of these objects! Which we will discuss in class this week or I can help you with another e-mail or in person.<\/p><\/blockquote>\n

Taking Shiffman\u2019s suggestions, I wrote out the code as suggested, then went in to make the edits. I did some simple math to figure out the relationship between the lines and their corresponding rectangles:<\/p>\n

For rect(x, y, w, h) a line that goes from the [bottom right to top left] (R2L) would look like line1(x, y, x + 10, y + 10), and a line that went from the [bottom left to top right](L2R) would look like line2(x + 10, y, x, y + 10).<\/p>\n

Then in the draw() function I added a background and wrote cell.dispaly(); and voila! (I\u2019m starting to realize I use this in almost every blog post) \u2013 I have a square with a line!<\/p>\n

adding this line of code: cell.dir = floor(random(2)) to the setup() function got me a square with a line in it that would change every time!<\/p>\n

\"My<\/a>

My single square with a randomized line!<\/p><\/div>\n

********<\/p>\n

So now, I wanted my squares\/cells in a grid\u202610 pixels apart, not exceeding 200 in width and height. I went back to the code my partner Xiqiao did last week to look at how he made his grid\u2026I added in his variables and the for loops and got this:<\/p>\n

\"nested<\/a>

nested loop square grid!<\/p><\/div>\n

I started to play around with it to try and get it to do what I wanted \u2013 basically, have the squares repeat 20 across and 20 down, starting from 200, 100. I don\u2019t want to bore you, but suffice to say I tried out a couple variations on conditional statements and loops. I thought an array might have something to do with it, so I (metaphorically) cracked open Getting Started with p5.js and went to the chapter on arrays\u2026and was pretty lost. I tried adding some code, but wasn\u2019t exactly sure what I was doing.<\/p>\n

I also tried to play around with creating constructor functions, which I read about in p5 but we hadn\u2019t gotten into yet. The more I looked at Getting Started, the more I wondered about the best way to create one thing\u00a0<\/strong>and then get it to repeat in a specific pattern.<\/p>\n

**********<\/p>\n

Tuesday morning I met with Shiffman to go over the code. He explained arrays more in depth and I finally realized that in order to get the repetition I wanted I would need a variable. We played around with parameters \u2013 how many squares, how far apart they would be, etc. We also converted the\u00a0original cell object into part of an array. We were also now able to add the floor() function to this portion of code, since that information is now in setup() (mostly a note to self: p5 doesn\u2019t recognize floor() if it comes before setup()).<\/p>\n

Now with a better understanding of arrays, Shiffman tasked me with trying to get a horizontal and a vertical line of cells \u2013 which I was able to do! Separately, that is. They also had been further apart when we tried out the code and I was able to line them up one after the other.<\/p>\n

\"Horizontal<\/a>

Horizontal line with randomized interior lines<\/p><\/div>\n

https:\/\/gist.github.com\/zoebachman\/98d408dcffa415903b6b<\/p>\n

\"Vertical<\/a>

Vertical line with randomized interior lines<\/p><\/div>\n