Uncategorized
No this is not the GoF. You won’t find Singletons or Factories or anything like that here.
What I am attempting to define and describe are patterns used in Processing (p5) which could also be used in similar languages, libraries or applications that use OOP and have a game style loop.
So what is the Agent and what is it used for?
The Agent is a way of abstracting the idea of a physical object, or rather something that is a representation of a physical object within our 2d/3d graphical world created in Processing. This Agent is self aware and supporting and contains everything it needs in order to interact with its world. It is often placed in an ArrayList with many tens, hundreds or thousands of its kind. It is the building block for many patterns in Processing and is similar to that of the Movie Clip from old school Adobe Flash.
Lets take a look at the basic Agent pattern:
class Agent {
PVector location;
PVector velocity;
PVector target;
Agent() {
location = new PVector();
}
Agent(float _x, float _y) {
this();
location.x = _x;
location.y = _y;
}
void calc() { }
void display() { }
}
The keystone of our Agent class are the PVector location, velocity, target variables. These hold the current location of our Agent as well as its current velocity and targeting vector, if used.
Next we define our constructors. Another pattern you might see used a lot in Processing and Processing Libraries is chaining of multiple constructors. Basically, you can call this() or super() in the case of an inherited class to call the main constructor, usually where you instantiate objects contained within the class. In this case are going to instantiate our PVector location.
At the end we have two skeleton methods void calc() and void display(). The plan here is to call each method once per frame in our Processing / game style loop.
You might be thinking, why have the calc() method? It seems easy enough to just do our calculations within our display() method. The reason you want to keep these methods separate is that it allows more flexibly in how your objects can be used. For example, if you want to do a time lapse video of your sketch, you can just call calc() n times for every frame.
Now lets take a look at how this works with a simple example. In this series I will be using an iterative approach by adding functionality and behavior by sometimes experimenting outside the Agent class followed by refactoring desired traits within Agent.
First, we must create some agents and place them somewhere on our grid.
class Agent {
PVector location;
PVector velocity;
PVector target;
Agent() {
location = new PVector();
}
Agent(float _x, float _y) {
this();
location.x = _x;
location.y = _y;
}
void calc() {
// do nothing, yet
}
void display() {
pushMatrix();
translate(location.x, location.y);
// draw stuff
ellipse(0,0,50,50);
popMatrix();
}
}
// globals
ArrayList<Agent> agents;
int numberOfAgents = 100;
void setup(){
size(512, 512);
agents = new ArrayList<Agent>();
for (int i = 0; i < numberOfAgents; i++) {
Agent a = new Agent(random(0,width), random(0,height));
agents.add(a);
}
}
void draw(){
background(127);
for (Agent a: agents) {
a.display();
}
}
At this point we haven’t really gone too much further but it is important to explain how we would use our Agent class out in the wild. You might be thinking that the array is the best place to keep them. Even though this is what they teach in countless books and classes on Processing it is the wrong approach. You are almost always better off to use an ArrayList right from the start.
Let explain to you why this is the case:
- ArrayLists allow for concise iteration that is much more readable
- ArrayLists allow for quick and easy removal of elements via ArrayList.remove(0) or ArrayList.remove(n)
- ArrayLists allow for quick and easy expansion of elements via ArrayList.add()
- ArrayLists can be accessed non-sequentially using ArrayList.get(n)
- ArrayLists have been known to mutate and create amazing emergent art completely on their own
Okay, this is all true except for that last point. Lets take a look at both approaches side-by-side to better understand the differences and to hopefully cast aside our bad array habits once and for all:
// init
ArrayList<Agent> agents;
// instantiate
agents = new ArrayList<Agent>();
for (int i = 0; i < n; i++) {
Agent a = new Agent();
agents.add(a);
}
// iterate
for (Agent a: agents) {
a.display();
}
// remove last element
agents.remove(agents.size());
// remove first element
agents.remove(0);
// add one additional element
agents.add(new Agent());
vs.
// init
Agent[] agents;
// instantiate
agents = new agents[n];
for (int i = 0; i < n; i++) {
Agent a = new Agent();
agents[i] = a;
}
// iterate
for (int i = 0; i < agents.length; i++) {
agents[i].display();
}
// remove last element
agents = (Agent[]) shorten(agents);
// remove first element
agents = (Agent[]) subset(agents, 1, agents.length);
// add one additional element
agents = (Agent[]) expand(agents, agents.length + 1);
agents[agents.length] = new Agent();
Although things start off looking pretty similar one can easily identify the complexity of the syntax and the repetition of having to use the processing helper methods (not to knock these, they are great if you are in a pinch and stuck with an array to deal with) along with constantly casting your arrays can be less than ideal.
Lets continue our journey by adding some simple behavior and also tune our performance along the way. Take our next example:
class Agent {
PVector location;
PVector velocity;
PVector target;
float agentSize;
int agentColor;
Agent() {
location = new PVector();
velocity = new PVector();
agentSize = 50;
agentColor = 255;
}
Agent(float _x, float _y) {
this();
location.x = _x;
location.y = _y;
}
Agent(float _x, float _y, float _vx, float _vy) {
this(_x, _y);
velocity.x = _vx;
velocity.y = _vy;
}
Agent(float _x, float _y, float _vx, float _vy, float _agentSize) {
this(_x, _y);
velocity.x = _vx;
velocity.y = _vy;
agentSize = _agentSize;
}
void calc() {
location.add(velocity);
// bounds
if (location.y > height) {
velocity.y *= -0.75; // flip vector to 75% of previous
}
if (location.x > width || location.x < 0) {
velocity.mult(-1); // flip vector
}
velocity.y += 0.25;
if ((abs(velocity.y) < 0.5) && (height - location.y < 3)) {
velocity.y = 0;
velocity.x = 0;
}
}
void display() {
pushMatrix();
translate(location.x, location.y);
noStroke();
fill(agentColor);
rect(0,0,agentSize, agentSize);
popMatrix();
}
}
// globals
ArrayList<Agent> agents;
int numberOfAgents = 7000;
void setup(){
size(displayWidth, displayHeight, OPENGL);
noSmooth();
agents = new ArrayList<Agent>();
for (int i = 0; i < numberOfAgents; i++) {
Agent a = new Agent(random(0,width), -20, random(-3, 3), random(-12, 3), random(5,20));
a.agentColor = floor(random(127,255));
agents.add(a);
}
}
void draw(){
background(127);
for (Agent a: agents) {
a.calc();
if (random(0,1) < 0.0001) a.velocity.mult(2); // 0.01% chance of 2x boost
a.display();
}
}
Uncategorized
date: 2013/09/06
featured_image: /blog/featured-images/top-10-web-design.jpg
—
I am someone that is pretty excited and passionate about modern web development. Today I will share with you some of my top tools that I use on a daily basis developing responsive sites with Zurb Foundation 4.
SPLIT_SUMMARY_BEFORE_THIS
On macosx the default terminal application is okay. If you spend most of your day in and out of a terminal it is time to look for a better solution. I have mine set up to automatically go full screen, using Incosolata (my favorite programming font), and use a variation of solarized dark theme. I also have a light one that I can switch between if I find myself blinded by the sun.
Although I use tmux with tmuxinator (more below) extensively I love being able to press cmd-t to spawn new terminal windows full screen and hit cmd-# (1-9) to quickly move between them.
2. LiveReload (commercial $9.99, macosx only, available on the mac app store)
This program does many things but I use it only for one thing, automatically refreshing browsers when files are modified. It is pretty easy to set up, just choose a folder to watch, install the plugins in your favorite browsers and turn them on. NOTE: you need to serve the pages (not display directly from files) on Chrome so that it works correctly.
I know there are other options for this, grunt et al, however this was the easiest for me to implement and continues to work great.
Also, when I preview on a mobile device like ipad, there is an option to inject a javascript reloader. This works flawlessly and allows me to do the same thing on browsers without the plugin (mobile browsers, iPhoney, etc.)
3. Sublime Text 2/3 (commercial, $69 direct from developer)
I have been an avid VIM user for years and continue to use VIM when I don't have this available, but ST2/3 is simply amazing. How can I compare it. It is like the difference between modern languages like Ruby and less modern languages like Java. Sure you can get things done in VIM but ST is just a pleasure to use. ST Looks great, very fast, great plugin architecture. Specific features like multiple cursors just makes more sense to me. Maybe because I am a more visually oriented person.
I also use the same tool set in Firefox but I have to say I just prefer the tools available in Chrome. They are quickly available cmd-opt-j and provide me the tools I need quickly 90% of the time. Like, did my files load, I can tell quickly by looking at source tree. I can open each file and see what error message was returned.
Some people start editing the code within chrome which I guess could be a good strategy but I prefer to just switch back to ST where I have a more advanced text editing tool kit.
Defacto standard to see if your front end is lacking. I love that it gives you specific strategies and tells you where to get started for implementation.
Just learned about this recently but it is now part of my daily set of tools. Lets you interact with pages and apis very quickly. You can POST or GET and pass parameters or json data. Really speeds things along when you can see exactly what is going on quickly with an api and the returned data.
7. Sketch 2 (commercial, $49.99 on the mac app store)
Sketch 2 is like Illustrator for the web. It does one thing very well. Pixel perfect vector graphics that can be output as either SVG or rasterized PNGs or JPGs along with their double resolution retina cousins. If you don't know what I mean by pixel perfect, I mean that the vector elements are aligned to a grid of "pixels" so you don't get anti-aliased lines for example on the edge of a rectangle.
There is some extra goodness with being able to play with elements quickly and visually and export the CSS. I never copy the CSS directly but it can be a good starting point.
8. Middleman (gem middleman)
Middleman is a static website generator written in ruby that is fantastic. I have tried a bunch, octopress, piecrust, etc. What does middleman do right? One thing, a simple templating structure. Many of the others work great if you use one of their templates, but creating your own can be a real hassle. Middleman is great because you can use partials and templates and it is somewhat flexible. Save time by putting your navigation into a _header.html.erb file. Use .markdown for your blog posts. It is a pretty robust solution although the documentation can be lacking at times.
The other reason I love middleman, middleman-s3\_sync. After you build you can push everything to s3 with one command midddleman s3\_sync. This is exactly how I built and maintain this site at the momement. It is hosted through AWS S3 and AWS Cloudfront with an apache server that just redirects / alaises manofstone.com to www.manofstone.com.
I started using Tmux a while back and could never really get into it. I do a lot of front end work using Zurb Foundation in ST and this allows me to automate the generation and serving of files. I have a standard .tmuxinator file that I have created where I just change the directory name. Then I have a shell set up at that directory, compass watch on a second, a web server on port 8k and localtunnel amongst other things as well.
It is very quick for me to check what is going on. I changed the default command to ctrl-a (great for dvorak) and just hit a number 0-5 which allows me to quickly switch through the commands.
I also have it fire up LiveReload and the specific ST project file so one command tmuxinator projectName recreates my entire workspace in a matter of seconds. To switch to another project I just close down all the tmux windows and run the same command with a different project name.
Local Tunnel is another new addition to my kit but one that is here to stay. It does one thing but does it perfectly. It allows you to push your local host connection (on one port) to the outside world. I use this to allow myself to preview pages automatically (see javascript injection in LiveReload above) on my iPad. I can also get an iPhone sized site by using Dolphin Browser for iPhone (more below) which allows me to quickly check responsive sites both at my firewalled wifi setup at home as well as the local starbucks.
The other benefit is when working with rails or node projects it allows me to share my dev server with a client which removes the process of having to push to a staging server for quick demonstrations.
A big thanks to Twillio for putting this one out.
Honerable Mentions
Didn't quite make it into the list but definitely worth being aware of. Some of these I don't quite use daily but I definitely turn to at least once a week or more. Using Git is kind of like brushing your teeth. Everyone should be doing it several times per day.
Pixelmator (commercial, $14.99 available on the app store)
My Photoshop replacer. I do all of my pixel based image editing and creation here. Does 99% of what I used to use Photoshop for and does it with a smile. It is fast and lightweight and the UI/UX makes it fun to edit photos again. I think the price is about one month of Adobe Photoshop in their new Creative Cloud pricing structure.
Marked (commercial $3.99, available on the app store)
All this does is render markdown file beautifully and automatically refresh them. It is my web browser of sorts for markdown files. I use it to generate beautiful pdf files from markdown for documentation and other projects.]
Dolphin Browser for iPhone (free (with in app purchases), available on the app store)
I use this to preview web pages in an iPhone style browser on my Retina iPad 4th gen. If you are like me and have an iPad but no iPhone. This is the best way to simulate a preview on a smaller device.
Just remember to hit cmd-0 after you load it. Once you do that you should have a preview similar to an old school 360px wide iPhone. Good for spot checking your designs. You can use the javascript injection with LiveReload for automatic reloading. If I forget my iPad at home this is what I turn to.
The easy way to generate .zip files quickly and easily on the mac.
Has saved my life more than once by providing backups and versioning.
This is a no brainer. I also use a git repo (private on bit bucket, public on github) for all of my projects out side of simple demos and prototypes. I have on more than one occasion deleted an entire days work by not being careful trying to roll commits back so be careful and keep a secondary backup. I suggest dropbox.
Paparatzi (free, macosx only)
Takes full length screenshots for web pages. You can set the width to 360px wide to get nice mobile layouts in Zurb Foundation or other responsive frameworks. I use this to generate all of the screenshots for my books, screencasts and other materials.
Uncategorized
date: 2011/10/22
—
I have been searching around for a good code snippet plugin for word press. I really like the style of codecolorer, however, I wanted something with a clean style and also would allow for the copy to clipboard functionality. A lot of the time I refer to my website in class and have students use processing or arduino code and having the copy button really simplifies things.
Today I came across Easy Google Syntax Highlighter by Neil Burlock. It is incredibly easy to use, but not automatic, as codecolorer was.
SPLIT_SUMMARY_BEFORE_THIS
You use it in the following way:
<pre class="brush: java">
void setup() {
size(300,300);
}
void draw() {
background(0);
fill(255);
rect(0,0,floor(random(width)),floor(random(height)));
}
</pre>
and you are provided with something like this:
void setup() {
size(300,300);
}
void draw() {
background(0);
fill(255);
rect(0,0,floor(random(width)),floor(random(height)));
}
There is also some additional documentation for the plug-in here on Neil's Website.
Uncategorized
date: 2010/09/23
—
The first device, activating a shattered LCD panel was created by Randy Sarafan and the remaining two devices were created by myself with the help of Ez Cothran.
SPLIT_SUMMARY_BEFORE_THIS
Ticket Machine by Kaho Abe )
A ticket for a trip is an object that gives you exclusive access to an unexplored place. It is a mere piece of paper, but it carries imagination and anticipation of the future, of what new world it can unlock. The Ticket Machine is a Rube Goldberg type collaborative installation which is triggered with a drop of a coin. The machine then unveils different worlds, created by the collaborators, and finally produces a printed ticket. This installation was created during the Eyebeam Roadshow 2010 at 01SJ in San Jose.
Press:
Uncategorized
date: 2010/07/17
—
This summer I am trying to decompress and analyse my decision to go to graduate school and also explore the career option of staying in academia. I have been scouring the net looking for books that explain how to “survive” grad school, what to expect, or what the career of teaching is like and the transition into such a career, etc. Here are a couple of the books I have been reading and some of my notes about each one. Most tend to be focused on Ph.D. students in either Science or Humanities but I believe there is a lot of valuable information available if you are looking for it. I would love to find a book specific to fine art MFA’s but I haven’t found any. There is a ton of books about creative writing MFA’s. (no irony there)
SPLIT_SUMMARY_BEFORE_THIS
Graduate Study for the 21st Century
by Gregory Colón Semenza
eBook available at SJSU Library
Ch. 1 The Culture of a Graduate Program
The first chapter offers valuable insight to the hierarchy of a typical humanities grad program. It explains who everyone is, what they do, how they interact, and gives some tips to grads. Biggest one, be very, very, very nice to the secretaries of the department. This tip has been echoed to be by T. Asmuth as well, and in my experience as an undergrad at SJSU was critical to my development as student. It also breaks down the different classifications of teachers there are at a college, what tenure track is, and how modern trends, such as hiring many adjunct professors and graduate teaching assistants are creating less and less tenure track positions. They cite a change of 40% since 1988. Other interesting facts are that teaching 4 classes per year (with maybe 1 as a grad seminar) is preferred for researchers. It suggests it takes 20 hours per week for each class, though often more, especially in the case of a grad seminar.
The latter part of the chapter talks about the political pitfalls that a grad or new professor can make. One example is a MFA that wrote the school paper criticising the program. Basically that person ousted themselves from future opportunities. The authors advice: “Try and make it a personal policy to sit back and try to understand the way that things work.” This chapter also gives a breakdown of the “characters”: The High Priests and Priestesses (people to follow), Deadwood (usually older and contribute nothing), The Black Sheep (someone that annoys everyone, usually they will approach you first to win you to thier way of thinking, beware), the Careerists, Service Slaves, the Curmudgeons, the Young Turks (new hires), the Grad Student or Faculty Hall Talker, Theory Boys or Girls (talk to them but never date them), Life Long “Learners,” and the Everyman and Everywoman.
Here are some other basic things learned in chapter 1:
- Read the Chronical of Higher Education one hour per week
- Go to as many department talks and functions as possible
- Become a historian, learn why the department operates the way it does.
- If your professors work a 65 hour week, then work 70. if they work saturdays, so should you.
- “Act like your professors, not like your students.”
- Best Grad students = excelent work habits and organization rather than intellegence or immagination.
- don’t be lazy or disorganized.
Chapter 2, The Structure of your graduate career
The only part of this chapter that seemed to really pertain to fine art MFA’s is about selecting advisors. A lot of it seems like common sense, but there was some decent advice to consider such as what type of personality do you want to work with. For example, do you need a task master that is going to stay on top of you and make sure you hit deadlines.
Ch. 3 Organization and Time Management
This chapter is broken down into 5 sections, with a 6th describing the academic CV. Part 1 is about establishing a daily schedule. He suggests to figure out what works for you and stick to it. For example, a 10 hour day is good, because you can “work” most of it, unlike other office workers that slack off, take hour lunches, etc. As a grad you can come in at 7am or at 2pm, as long as you are consistant. This way if you stay out on the town, the pattern cannot be broken.
Part 2 is about prioritizing responsibilities. Keep your high energy times for important tasks. One can grade papers in low energy states and spend the bulk of your time on research activities. Try to avoid distraction. Don’t take calls and try to meet with students at other times. He has a whole section about working with students. Basically grading can be a time suck. 15 minutes per paper is ideal. Grading isn’t about time, but rather creating an efficient system for approaching papers with a sense of energy and purpose as apposed to dread. Try to meet with students by appointment. Never encourage someone to stop by during your office hours. Schedule your hours with one on each track, TuTh and MWF and suggests that students should go out of their way to meet with you, not the other way around. Working with your students can be rewarding, but be careful, this can be a huge time suck and burden.
Part 3 is about “Family Planning.” Plan your weekends so you can spend more time with family. Either while your spouse is sleeping in or in little pockets if you can manage that (grading).
In response to family that doesn’t understand your career you can a) educate them, b) compromise, split the weekend visit it half. c) create a workplace there like the local library or starbucks. and d) propose that they visit you, reducing stress for you. He suggests that married grads can be better but it is best to coordinate schedules to maximize time spent together.
He gives some valuable advice about summers and “breaks”. Work on your research. Stay near your university. Jump on summer teaching and research opportunities like your life depended on it, and if left with nothing make sure you complain loudly. Also, try to budget your money so you can make it through the summer with less working hours.
Part 5 is about filing and storage or organization. Get at least one filing cabinet. Check the univ. surplus. Label the drawers, research, teaching, other and start right away. Also file “other peoples stuff” with cvs, exams, proposals, portfolios, etc. from your peers and professors. Secondly, get a bookshelf. Collect all the materials from a single class, in a Binder. Get a tack board. Have a calendar and make sure to put every assignment from the syllabi on it right away.
He also makes a suggestion about a personal computer. It seems a little dated, but suggests to a) keep syllabi organized, b) have bookmarks for the university and chronicle, calls for papers, etc. and c) clean up your files every semester or at least every year.
Basically, keep everything clean and organized.
He also suggests that daily exercise can help you structure your day. You can schedule it anytime as long as you are consistant. It could even be in the afternoon. It relieves stress, improves the immune system, clears a space in your day for deep thinking, and will provide you more quality work time. Additionally it is good to have a hobby that makes you happy: a garden, university games, or buy a dvd when you finish a paper.
The chapter ends with a section about CV’s. The important advice is to start one early and maintain it.
Chapter 4 has some good tips such as: don’t ever miss a seminar, make sure you find out what is required and exceed it, make sure you meet with professors during office hours to learn how to improve your seminar grades, etc. but most of it seemed less relevant to a fine arts MFA program.
Uncategorized
date: 2010/07/15
—
The public art project that I am a partner in is getting closer to the fabrication phase. There is a tentative installation date of August 9 – 11 where I should be onsite, helping with the electrical components of the piece. There is also discussion of projecting the flood video that I worked on with Robin Lasser during the Zero 1 Festival, September 16 – 19.
SPLIT_SUMMARY_BEFORE_THIS
www.afloatingworld.com
