zoë's itp blog

ICM, Wk 4: Here We Go Again

This week, our assignment was to take a previous drawing and try to use the new object and function formatting to clean it up.

I thought back to my Sol LeWitt 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 – 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.

I started by conceptually thinking of the code.

The overall square is 200×200, including 400 squares with lines or no lines. I’m thinking I’d write an object that would have variables for the parameter

var square: {
x: 200
y: 100
w: 10
h: 10

(parameters for first square in the upper right hand corner).

and then I’d execute the object in draw() …and 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 we explored last week.

The next part would be to figure out how to randomize what is drawn in the interior of each of those 400 squares, or have it be blank. Would I use that mysterious array thing I’ve heard about?

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…

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.

var cell = {
x: 0,
y: 0.
w: 10,
h: 10,
dir: 0
}

You could have a variable like “dir” which could have a value of 0 or 1 depending on the line direction. Then you could add a function like:

var cell = {
x: 0,
y: 0.
w: 10,
h: 10,
dir: 0,
display: function() {
rect(this.x,this.y,this.w,this.h);
if (this.dir == 0) {
// line one way
} else {
// line other way
}
}
}

Try making this object and then changing dir to false manually and see if it works!

Then you could have dir set randomly:

function setup() {
cell.dir = floor(random(2));
}

floor() converts the random decimal number to a whole number so you get only 0 or 1.

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.

Taking Shiffman’s 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:

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).

Then in the draw() function I added a background and wrote cell.dispaly(); and voila! (I’m starting to realize I use this in almost every blog post) – I have a square with a line!

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!

********

So now, I wanted my squares/cells in a grid…10 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…I added in his variables and the for loops and got this:

I started to play around with it to try and get it to do what I wanted – basically, have the squares repeat 20 across and 20 down, starting from 200, 100. I don’t 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…and was pretty lost. I tried adding some code, but wasn’t exactly sure what I was doing.

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

**********

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 – how many squares, how far apart they would be, etc. We also converted the original 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’t recognize floor() if it comes before setup()).

Now with a better understanding of arrays, Shiffman tasked me with trying to get a horizontal and a vertical line of cells – 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.

https://gist.github.com/zoebachman/98d408dcffa415903b6b

I thought I’d try and see what would happen if I had i*10 simultaneously in x and y…This, however, it gave me a diagonal line:

I attempted to do another conditional statement, but with a new variable (j) and then repeating the array/object block again but switching all the i to j.

I got 30: Uncaught RefrenceError: floor is not defined. Can I not use floor more than once?

It was clear that this additional array/variable did not make for happy code. So, since it’s 11:59, I’ll stop my tinkering and clean up this blog post. The hope is that next week I’ll have a fully functioning sketch!

30. September 2015 by zoe.bachman.itp
Categories: ICM | Tags: array, function, object, p5, Sol Lewitt | Leave a comment