Archive

Monthly Archives: July 2017

sonora

The Town

When a curious onlooker first explores an aerial view of Sonora, Northern California, Pop. 4,903, perhaps idly browsing Google Maps, one might notice the cattle pastures, wineries and pit mines tucked amongst the wildrye, blue oak encrusted hills, but when looking upon the town proper, surrounding the antique shops, bars and the plethora of churches, there remains a rather large slice of real estate devoted to cemeteries. Along the front walk to St. Patrick’s Parish ancient donors bless the mass; behind the prison, a major industry, the City Cemetery sprawls under willows, amid brambles and thyme and the most historic mausoleums; and past Cemetery Lane mossed granite tombstones lie uncared for, unowned it seems, for there’ve been no outcries when land developers move their coffins, acre by acre, to new homes. The largest by far is Mountain Shadow Cemetery, which can be seen as a great meadow overlooking downtown Sonora from all street corners, chapels and hospital windows; the knoll where this author’s father lies.

To be sure, most of Sonora is comprised of retirement communities built by the aforementioned developers which feature gates, winding roads to cul-de-sacs, clubhouses and reedy ponds with actual ducks, going by names like “Quail Hollow,” “Belleview Acres,” “Crystal Falls” and “Peaceful Valley.” This author grew up in “Phoenix Lake Estates,” which suggests an exciting new adventure in retirement filled with wine-tastings, pleasure cruises to Alaska and narrow escapes from native traders during tours of upper Cambodia: Rise from ashy office doldrums to a new life… in reality the golf course is overgrown, the nearby creek takes more of the hillside away with every spring rain, and each house, though different in design, shelters the very same old lady, the kind with cats, ornate throw-pillows and a checkbook only used to pay the boy that mows the lawn every other Sunday.

The author’s mother recently became one of their number: weeds entwine the rusted Chevrolet trailer in the side yard, the shrubs sag, and the bookshelves full of geology texts and business how-to’s collected over thirty years gather dust and random clutter in her home. She and her neighbors are an essential fixture of rural America: through the nation, a fourth of those women older than sixty-five live alone and more than half of those eighty-five and older also live quite alone. Those same women of eighty-five years, who’ve survived everything the United States can throw at them, outnumber their male counterparts two to one, and three-fourths are widowed.

la.png

The City

When one arrives in Los Angeles the first things one notices (above the apartment blocks, artist alleys, boutique shops and ethnic centers pocketed away in vale corners) are the skyscrapers, sparkly, translucent glass in heady grays, where thousands go to work in every day. Monuments to something, certainly, they can be seen from every block of town though the names atop them are corporate and impersonal, somehow timeless in that there are no dates below the names.

The Baby Boomer’s kids live here—and they visit their elders when they can—but they live for jobs in the city where there’s employment and opportunity and excitement. The kids pay their taxes into Social Security despite the common, subvocal worry that it’d be a better investment to throw it down a large hole in Siberia; they pay what they can into the 401k, the Roth IRA, their pensions, annuities, life insurance… Distracted as they are by pressing present issues like car payments and christmas presents, they forget that in the dream of retirement only half of them are present, that most of them, like those Baby Boomers, won’t have adequate savings, that student loans will likely dismiss a chance of having a pleasant fifties-suburb house to retire in, that the future still lingers, lonely, poor and long, stretched out before them and not free from work entirely.

The things killing the male retirees, heart disease and cancer, are caused, ostensibly, indirectly, by lifestyle, whether it be the excess bacon or long hours at work and stresses brought home to the family, and nowadays instead of falling away from that lifestyle, more than ever this generation expands it: emails, texts are checked first thing in the morning, most work overtime every week and technology makes the office mobile, present at dinner and bed in the form of pings and messages, LED-bright and deathless. In retirement they’ll supplement their income working at convenience stores and gift shops, as consultants and club-members, and if lucky chairmen of the board—just as Baby Boomers do today, that is, if they don’t perish from the stresses of the workplace before that time (though for this generation, those deaths will be egalitarian, gender-neutral, the life-gap disappearing with the wage-gap).

When this young generation enters into retirement, moves to rural areas and begins to vote conservatively, it will be a shock to have to work, yes, but the greatest shock will be the cemeteries. There are no cemeteries in the city by the ocean, no Skyline Luxury Retirement, no antique shop selling old estate sale finds, no: they won’t save for retirement because they don’t see the future before them: it has been compartmentalized, shrouded, hidden by geography and time, not only by human mental machinations. There’s a whole life-cycle of death in life going unnoticed by those that are destined to participate in it, away from the skyscrapers, apartment blocks and universities. Out of sight, out of mind, gone with the past.

the-good-the-bad-and-the-ugly-sad-hill-cemetery

The Old and the New

The solution is to teach about death, to embrace it not only in rural areas, where the elderly go to die, but where the youth live, too. City-folk not only miss the reminder of the future but the lessons of the past as well: if the elderly are away in the hills, sequestered, their free time and experience go wasted when they could stand as a testament to contemporary society not only in their existence, mostly female and still working, but in their memories, recorded and passed down to their underlings and apprentices of sorts; how to not make the same mistakes, how to save for the last chapter in one’s life, how to plan for a future that will exist, not an idealist image conjured by lack of exposure to reality.

The author’s grandmother lives in Sonora, too, affectionately nicknamed Gaga. She teaches norwegian swear-words, how to push an enemy in an icy lake and get away with it, and what to put in gingerbread dough to make it strong for roofs and walls. She also teaches her grandchildren how to reach alcoholics, how to make sniffles better, how to read books often and how to entertain guests with simple revelry. When her friend Fran died from falling out a window she laughed uproariously in fits of giggles at the thought of Fran’s feet in the air like flagpoles, her knitted socks flags. Not long ago she once drove all the way to Monterey to see another friend, just to arrive right on time for the funeral, walked in, “who died?” “Oh, really? Well I guess picked a good time to get here then!” And when her son-in-law died she taught by example how to accept it, through well-placed jokes here and there, through feasts and mimosas and celebrations of the life lived, through acceptance of her own time, whereas those saddest were the families up from the city who hardly knew the man, made outsiders by their own choice, and who returned to the city never to speak of it again.

Advertisements

To celebrate the upcoming 4th of July holiday I made a project called Conway’s Fireworks:

If the above embed isn’t working, you can also check it out here

In this post, I’d like to take you through some of my thinking when creating this project, and also some of the technical details of how it was coded. I’ll be talking about the following parts of the project:


Conceptualizing the Project

I wanted to make an animation to celebrate the 4th of July.  Of course the first thing anyone thinks of when they think of the 4th of July is fireworks. There’s a large volume  of great fireworks canvas animations out there already. I wanted to do something special to make mine stand out.

gospel gliders from Conway’s Game of Life

Now, If you’re not familiar with the famous automaton algorithm “Conway’s Game of Life”, (pictured above) definitely go check it out here: https://bitstorm.org/gameoflife/. The game of life is part of a class of algorithms called cellular automatons, and it has some pretty interesting behavior. The basic rules for the algorithm are fairly simple:

A great illustration of the rules of the Game of Life from

Although the simulation works off of just these 4 rules, lots of really interesting and complex behavior comes out of these simple rules. Conway’s game of life is a textbook example of emergence.

Even though John Conway himself is not too fond of the algorithm, It has always captured my imagination. So when I sat down to work on this project, the Game of Life was one of the first things that popped into my head as something different I could try out. The way the shapes tend to sort of explode outwards seemed like the perfect fit for how a firework behaves.


Ideas into Reality:

So I had my basic idea down. I would make each individual firework its own tiny Game of Life simulation. The trick now was to turn this idea into code. As with many of my projects, I used the P5 processing library and the html5 canvas. I like to work in this library because it speeds up development and makes drawing to the canvas easy. I like to work in JavaScript because then I can share my projects on the web.

The first step was to make on object prototype for my fireworks. I appropriately named this object “Conway” and filled it out with some basic fields to control the color, position, size, and so on. The grid variable simply contains a 2d array of values, true/false, for if a cell is on or off.

function Conway(){
  this.x = floor(random()*width);
  this.y = floor(random()*height*.7);
  this.type = floor(random()*3);
  this.size = random()*2;
  this.baseHue = random()*360;
  this.hueSwap = random()*30 + 60;
  this.gridSize = 61;
  if (this.gridSize%2 == 0) this.gridSize;
  this.center = floor(this.gridSize/2);
  this.numTicks = 0;
  this.finished = false;
  this.grid = [];
}

Here I’m hardcoding a lot of values, which is generally bad practice. I think in the future I will come back and make some global variables for things like the grid size or how much hue variance there should be.

Now that we have the skeleton of a Game of Life simulation we need to add two more components – a way to update it, and a way to display it to the screen. For me, I usually add these as functions in the object prototype in the form of a tick and render function. This is nice because it pushes the responsibility for updating and drawing the object to the object itself. When it comes time to run the project, all we have to do is call tick and render for each object currently in a list of drawables like so:

function draw(){
  for (var i = 0; i < drawables.length; i++){
    drawables[i].tick();
    drawables[i].render();
  }
}

The render function for our game is fairly simple to write. we simply draw a rectangle for each cell in our 2d array that has a value of true. The update function took a little bit more thought. To properly update the simulation, we need to apply the rules of the Game of life to each cell in the grid. One mistake I made early on was only having a single 2d array to store the values. In actuality we need 2 separate grids, because we can’t be overwriting the data from our first array with the new values until we have looked through the entire array. The final update function looked something like this:

this.tick = function(){
  var ind = (this.numTicks%2);
  for (var i = 0; i < this.gridSize; i++){
    for (var j = 0; j < this.gridSize; j++){
      var neighbors = 0;
      for (var k = 0; k < dirs.length; k++){                  
        var dx = i+dirs[k][0];                  
        var dy = j+dirs[k][1];                  
        if (dx >= 0 && dy >= 0 && 
          dx < this.gridSize-1 && dy < this.gridSize-1){
          if (this.grid[ind][dx][dy]) neighbors++;
        }
      }
      if ((this.grid[ind][i][j] && 
          (neighbors == 2 || neighbors == 3)) ||
          (!this.grid[ind][i][j] && neighbors == 3)){
        this.grid[(ind+1)%2][i][j] = true;
      } else {
        this.grid[(ind+1)%2][i][j] = false;
      }
    }
  }
  this.numTicks++;
}

This looks pretty complicated, but really all its doing is going through each cell in the grid and applying our 4 basic rules of the Game of Life simulation to them. the “ind” variable (short for “index”) simply lets me switch between which of my 2d arrays I’m looking at when I check which cells are alive or dead. The “numTicks” variable updates by one each time the tick function is called.

To make checking the 8 neighbors of each cell easier, I created a global array called “dirs” (short for “directions”) which contains the dx, dy values for each of the 8 neighboring cells.

The final hurdle was to get the “fireworks” to behave like an actual firework. This means that the fireworks have to be symmetrical about the center point. I had to think a little bit on how to do this. The trick is to separate the grid into quadrants, then randomly speckle alive cells into one of the quadrants (I picked the upper left quadrant). To make it look symmetrical, I then “flip” or “rotate” this quadrant onto the other 3 quadrants to make the “seed” for the shape. To do this, I simply added a bit of code that generates these quadrants when the object is created:

for (var i = 0; i < 10; i++){
  for (var j = 0; j < 10; j++){          
    if (random() > .5){
      this.grid[0][this.center-i][this.center-j] = true;
      this.grid[0][this.center+i][this.center+j] = true;
      this.grid[0][this.center+i][this.center-j] = true;
      this.grid[0][this.center-i][this.center+j] = true;
    }
  }
}

The great thing about this is that because of the nature of the Game of Life, when you create a symmetrical seed, the rest of the game of life is naturally symmetrical about that center point!

Success!

That seemed to do the trick!


Touch-ups and Visuals:

Now that the core of the project is working, its time to start cleaning up the visuals. I find that this is always the most time consuming part of the project. I can spend hours making little tweaks to the look and feel of a canvas animation.

For starters, My fireworks felt really unrealistic. The Game of Life simulation naturally expands outwards, but it didn’t have that “pop and fade” feeling of a real firework.

To add that in, I added a couple of rules to my render function. I made the size and opacity values of the firework a function of how long it was on the screen for. A linear transition felt pretty unnatural, so I used the built in P5 pow function to create a quadratic curve for my size and opacity. By doing this, The fireworks expand outward really quickly in the beginning, and then have a slow fade out as their expansion slows down. Here’s what that looks like in code:

this.render = function(){
  this.numTicks++;
  var mod = pow(((48-this.numTicks)/40),2);
  this.size += mod*.5;
  var ind = this.numTicks%2;
  translate(this.x, this.y);
  scale(this.size);
  for (var i = 0; i < this.gridSize; i++){
    for (var j = 0; j < this.gridSize; j++){
      if (this.grid[ind][i][j]){
        fill(this.baseHue + random()*this.hueSwap, 
             100, 100, mod*100);
        rect(i-this.center, j-this.center, 1, 1);
      }
    }
  }
}

In this case the “mod” variable is doing the heavy lifting of offsetting the size and opacity

Once I had that down the fireworks felt pretty natural, but I didn’t like that they were just sort of free floating in a black void.

To add some decoration to the scene, I added in some stars and hills to sort of round out the visuals and give it some aesthetics. The hills are simple sine curves with some offset by distance. For the stars, I decided to make them little squares and to make them “sparkle” a little by randomly changing the intensity and hue of the color by a little bit.

Conclusion:

I hope you all enjoyed reading this post! Let me know in the comments if you liked this and you would like to see more of these types of posts. Also let me know if you found my explanations useful or if there is anything I can do to improve my code or writing.

Whenever you are doing creative work, there will always be some things that you aren’t completely happy with. I think if I come back to this project I will clean up the code a little and change some of those hard-coded values into global variables. Also, I think I would spend a little bit of time tweaking the visuals for the fireworks, maybe changing how the curves work for the expansion and fade out animations.

All in all though, I’m pretty happy with this project. I think it was a neat idea, and I’m really pleased with how it turned out!

Thanks for reading!

— Ben