Creators: Crawlers with a talent for Art

What did we do?

This week in the Creators, our code was full of bugs, but that was okay :)!  We created another project with classes and lists, this time creating an insect-like creature with a very simple mind – which we decided to call a “Crawler”.  We wrote a program where every time you click on the screen, a new crawler is created with a mind of its own!

We then experimented with a variety of colours, shapes, strokes and backgrounds to let our army of crawlers doodle up some really interesting patterns and trails!  As usual, all the code is up on our github repository.

Key skills used:

  • Class was used to hold the code for the crawler – our Crawlers needed the following items:
    • Properties (things unique to each crawler):
      • x and y: position coordinates for the bug
      • stepSize: how long the crawlers legs would be & how fast they crawl
      • size: (how BIG is the bug)
    • Operations (things Crawlers can do)
      • A “move()” operation which would decide the next position for the Crawler.  We programmed a very simple brain here!
      • a “show()” operation which drew the crawler on the screen.  We started with a circle and then experimented like crazy here!
  • Arrays (which we also call lists sometimes): we used one of these to store our army of crawlers
  • mouse interaction:
    • mouseClicked() this function runs whenever a mouse is clicked
    • mouseX and mouseY variables to hold the x and the y position of the mouse.
  • code organization
    • Another thing we did was move the Crawler code to a different file – this really helped us to keep our code tidy!

Organizing our code!

This time we created our class as a different file.  We added a new javascript file called “Crawler.js” into our project with the following skeleton content:

class Crawler {
    constructor(){
    }

    move(){
        // .. the brains will go here
    }

    show(){
        // .. the looks will go here!
    }
}

We then had to let the web page know we wanted to include this javascript by including it in our index.html:

<head>
<title>Crawlers!</title>
<script language="javascript" src="sketch.js"></script>
<script language="javascript" src="Crawler.js"></script>
<script language="javascript" src="p5/p5.js"></script>
</head>

Crawler Class Brains and looks

Bug properties

Properties are the things that make each bug unique and can vary from bug to bug.  We decided that x, y, stepSize and size were good things to make our bugs unique so added a constructor operation to the class so we can set them up for each new Crawler.  We remembered that because properties can be different for every bug, we put a “this” before the variable name.

constructor(x, y, stepSize, size){
    this.x = x;
    this.y = y;
    this.stepSize = stepSize;
    this.size = size;
 }

 

Bug Brains

For the first version of the Crawler, we decided to use a very simple brain which picked a random direction and took one step in that direction each frame. This is sometimes called a “random walker”. We talked about other things we could to, such as tending to move mostly up, or bugs that tend to walk in the same direction relative to the sun (just like many real bugs do) or bugs with real intelligence to avoid predators, find food, etc. However this is just week 8 so a random walker is a good idea for now!!

Luckily we have used random a few times now so we were able to do this pretty quickly:

    move(){
        // pick a direction
        let dir = random();
        if(dir < 0.25){
            this.x = this.x + this.stepSize;
        }
        else if (dir < 0.5){
            this.x = this.x - this.stepSize;
        }
        else if (dir < 0.75){
            this.y = this.y + this.stepSize;
        }
        else {
            this.y = this.y - this.stepSize;
        }
    }

Bug Looks

We first just decided to draw an ellipse wherever the bug happened to be.. later we experimented with larger ellipses, transparent ellipses, randomly colored ellipses, rectangles, even random shapes, etc.

Creating the bugs: the controlling sketch

When it came to creating our bugs, we created an array and added new bugs to it in the mouseClicked event. In the draw function, we drew all the bugs in the array. The full sketch code is below:

let bugs=[];

function setup(){
    createCanvas(innerWidth, innerHeight);
    background(50);
}

function draw(){
    // background(100);
    for(let x=0; x<bugs.length; x++){
        bugs[x].move();
        bugs[x].show();
    }
}

function mouseClicked(){
    bugs.push(new Crawler(mouseX, mouseY, 20, 20));
}

The Results!

We were able to achieve lots of interesting results.. here are just a few!

Bugs that are just eating a green field (step size 1, bug size 5):

bugs1 (Small)

By changing the step size to 5 we got a totally different effect:

bugs_step10_size5 (Small)

By switching to random colors and step size 10, bug size 10 it was different again:

bugs_step_10_size_10_color_random (Small)

Another thing to try is to increase the size (e.g. size 100) is like:

bugs_size100 (Small)

Also cool in black and white:

bugs_size100_bw (Small)

Or by changing “ellipse” to “rect”:

bugs_square_size50

Coding Challenge: Bug-powered Seaweed farm!

Here’s another interesting variant – see if you can do it!  You can turn your bugs into a seaweed farm by making them appear at the bottom of the screen (either by clicking or with code) and changing the “move” code so will only grow upwards, and slowly (i.e. more likely to go left or right than up) …  and the “show” code so they are a shade of green or brown.  You should see something like the below but you can do better with more fiddling with the size, stroke, etc – See if you can solve this one for next week – happy coding!

bugs_seaweed (Small)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s