Jono Shields

learning all the things

Goals

Goals are important right? To be successful we need to know what success means.

Defining goals within an organisation is difficult, because goals need to be aligned with strategy. But they also need to be SMART (Specific, Measurable, Agreed Upon, Realistic and Time-Based) right?

There are also different types of goals that you could have…

  • Are your goals based around an outcome? Like for example hitting a 40% app retention rate.
  • Maybe they are performance goals? Like delivering all of the scope on budget and within the time frame.
  • Are they based on processes? Like ensuring quality code, collaborating with customers or maybe continuous delivery.

There are trade offs in all of this though. It is easy to link outcome based goals to strategy, but hard to see and plan exactly how they will be achieved. Process goals are focused, but they may fail to motivate, would you rather celebrate an extra 3% code coverage or being 20% up on app usage?

How do you set your goals?

Tech & Education in New Zealand

Recently I had the honour of attending the annual NZTech Education Technology Summit on behalf of Codeclub Aotearoa.

The summit is a gathering of educators, digital leaders, technologists and innovators. And the purpose is to share expertise and insights on education. There were two streams that ran over the two days, one on Tech and Pedagogy, and the other on Edtech for Export. My focus was on the Tech and Pedogogy, I hoped I could pick up insights for my Codeclub.

And I got some pretty awesome takeaways that I would like to share. The first was the way in which classrooms and the methods of teaching are changing. I kind of wish I was back at school. It was also cool to see the skills, values and content they are teaching. There is a far bigger push to teach the skills like adapability and autonomy that will help them in the future.

Teaching is changing…

And it’s about time, for a long time a teacher stands at the front of the class with rows of desks perfectly arranged. I heard from Nikki Urlich about the ILE (Innovative Learning Environment) they have set up at Campbell’s Bay School. Where the teaching is actually student led.

She talked about students that at the start of a week would go and pick their own learning objectives. Of course some Maths and Literacy is mandatory, but the students have free reign to plan their week. Some like to work with a friend on something fun in the beginning to brighten their Monday. While others will try to slog through the tough ones early to free themselves up later in the week.

In Nikki’s classrooms the teachers act as facilitators. They draw conversation out of students and remove blockers to help students get on with their autodidacticism. The students have a wealth of learning material and utilise tools like Khan Academy, Mathletics and Literacy Shed. The students just provide some evidence of their learning and they can move onto their next challenge.

Preparing the next generation for something that doesn’t yet exist

Right now we are in a time of rapid change and crazy growth. There was a lot of discussion about how to best prepare students for what is ahead. More than 65% of todays children will work in jobs that are yet to be created.

Nick Pattison at Kauri Flats School is preparing for this by teaching real world skills. The students at Kauri Flats turn their learning objectives into projects for the community. They use design thinking to work with their community and iterate to make something that can add value.

These students learn to empathise and define their customers needs. Then use those insights to ideate, prototype and test their ideas. It is important to teach that their is success in failure. You can’t expect to get it right on the first try. And that every failure is a crucial lesson that they learn through first hand experience. Practical knowledge of Stanford’s Design Thinking is sort after in the job market today. These kids half my age have a better looking CV than I do.

In Summary

I don’t know if it was my rose tinted lenses or something else. But everything people were saying was “Agile, we need more Agile”. And I’m not saying that it is the solution to everything. But pretty much everyone there was saying something like “Technology alone won’t solve the problems in the classroom”.

Thanks for reading.

Learning about 3D Printing

One month ago today I received a 3D printer, it was something I have been wanting for ages and I researched a great deal before ordering it.

What I learned

  • Bed adhesion and first layer is everything. If the first layer that goes down isn’t sticking then the print will fail, there is very little chance of recovery.
  • Finishing processes in the world of 3d printing can make things look production like if you put the effort in. Techniques like acetone smoothing or simply lots of sanding can go a long way, and some nice paint will make things look super great.
  • The limitations in 3D printing inspire a lot of creativity. I could write a whole blog post on this itself.

What surprised me

  • I have been printing for weeks now and I still don’t think that I have fully grasped the infiniteness of 3d printing possibilities. Every time I go on reddit there is something crazy being done with 3d printing, whether it be building fullsize houses or making mouse ovaries.
  • Designing mechanical parts isn’t terribly difficult, if you can take measurements you can make things that will fit into other things. Tools like Fusion360 and Tinkercad make designing parts incredibly accessible.

Where am I at

On May 9th my 3d printer would not print, I am writing on May 21st and there has still be no resolution. So I ordered another 3d printer because I have got the bug and can’t stop.

I have printed some seriously cool things in my short 2 weeks.

I made a 3d bust of myself for my boss who recently left the company I work at.

These first two were done using the camera on my phone and using some photogrammetry software called regard3d, however my lighting was pretty poor and the software could only map the front of the model.

There were quite a few iterations and wasted plastic, but I am so happy with the final one.

It was scanned using kscan3d and an xbox360 kinect, then I shaped the resulting model into a bust. Then I printed it in natural PLA and spent copius hours sanding and painting.

I printed a Buddha that my girlfriend painted and used to make a terrarium for her mum.

I have also been making bits and pieces for a custom keyboard build I am working on.

And I have designed a slot together terrarium that uses glass inserts. This will need to be glued together though so that it is water tight.

What is next

My queue of things to print is growing rapidly.

  • I am desperately seeking costume parties to attend so that I can 3d print cool props.
  • I also have an idea for a terrarium using tanks from WoT (World of Tanks) for a friend.
  • My workshop (read bedroom) is steadily growing out of control, so the first thing I print is likely going to be some clips, hooks and shelves for storing tools and what not.

Procedurally Generated Scenes

This week I saw a totally rad twitter bot that posts procedurally generates mountain skylines.

I saw this and was jealous, mainly because last year I tried to make something similar that ended up looking like this…

image

Mine is nice and animated but is not as nice as @muted_mountains creations.

So I figured that I would go ahead and revamp mine to look a bit nicer.

Let’s change those hills from generic looking curves(that kind of look like waves in the sea) to something that looks more like mountains.

In my original I use Perlin Noise to generate the mountain. Perlin Noise is an algorithm that generates random numbers that are close to each other, this means that you can create smooth transitions between numbers and generate all kinds of curves. If you want to know more about Perlin Noise, then I would highly recommend this article by adrian’s soapbox.

The issue I am facing now is that I am struggling to get both the big amplitudes of the rolling mountains as well as the finer details that mountains have, the cracks, crevices and smaller rocks. This can however be acheived by using multiple octaves of Perlin Noise.

This essentially means adding multiple scales of Perlin noise together.

Again, the above blogpost covers this really well and these images were taken from there too. I took the code straight from that article and changed the syntax to javascript, worked like a charm.

function octavePerlin(x, y, z, octaves, persistence) {
    var total = 0;
    var frequency = 1;
    var amplitude = 1;
    var maxValue = 0;  // Used for normalizing result to 0.0 - 1.0
    for(var i=0;i<octaves;i++) {
        total += perlin.noise(x * frequency, y * frequency, z * frequency) * amplitude;
        
        maxValue += amplitude;
        
        amplitude *= persistence;
        frequency *= 2;
    }
    
    return total/maxValue;
}

And bam! We have lovely looking mountains.

I was pretty happy with this and started showing people. My friend Ian(@dentudim) was pretty impressed (obviously) and showed me this picture that he was reminded of (courtesy of chrischernewych).

Gorgeous! I wonder if I could make trees like that?

Lets just make a lovely sawtooth wave.

Easy right? But how?

All my mountains are drawn using Perlin Noise, to do this all the functions take a horizontal location on the screen and spit out the height of that point.

I wanted to do the same thing for the trees, so essentially we need a mathematical function.

We want a line that goes up and down real pointy like. So I started with a sawtooth wave. I achieved this with the modulo function.

Something like height = xPosition%100 and this gives us something that looks pretty deadly.

Next thing was making the waves symmetrical, this could be done by subtracting the modulo number from half of my frequency and aways taking the answer as a positive number. This gives me height = Math.abs(50 - xPosition%100).

Sweet. Now just to get some variation, like the hills, because trees don’t just magically float level, they are on something. For now I just combine the spikes with the mountain function and bam!

And together with the mountains…

And by the time I reached this point, Ian had already sent me another picture of a mountain with lovely low lying clouds.

So that was next, something fluffy to take away from the harsh pointy rigidity of the mountains and trees.

Once again Math to the rescue!

What is round and curvy?

A SINE WAVE!

height = Math.sin(xPosition)

I guess it could be fluffier and less wave like. But what if we took the bottom bits and make them look more like top bits?

Awesome!

And to add some variation I did the same that I did with the trees and pretended they were mountains.

Put it all together and wow!

At this point I was super happy with it. I posted it to my local gamedev facebook page for screenshot saturday and got some awesome feedback.

Add gradients on the mountains!! Its like Bob Ross always says; “they are more distinct at the top than they are at the bottom.”
Sam Batty

Thanks Sam! Now I had more work to do! And I was absolutely sure that this would be more difficult than the other components.

But no need to fear. I figured I could just reuse the exact same mountain, make it bit darker and offset it a bit depending where it is relative to the sun.

This looked better…

But not very realistic, the shadows on mountains aren’t predictable and vary based on the mountains curves. Unfortunately my mountains are only two dimensional and it is impossible to predict how the shadows should fall.

So lets fake it, make it a bit random, and a little more realistic than the above pic.

Using bits and pieces I already had, I threw a sawtooth wave into the mix. I made its amplitude bigger than the trees and the frequency smaller, I also threw some more Perlin Noise in to help vary the sawtooth in the x axis.

And this gives me the final product (at the time of writing this post).

I have a live demo of it here that you can check out. Yes I am sure you can find the source code in my github, but trust me it is not worth looking at.

I have ideas for a game that makes use of something like this, so maybe more of this in the future.

Animated Favicons

So you want to make a super badass animated favicon?

…skip to the code

As per the W3 spec the browser looks for your favicon in the head of your HTML document. All major browsers support .ico and .png filetypes. The highest resolution combatible universally is 32x32 pixels.

This is generally what it will look like.

<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">

Fantastic! So my initial idea was just to change the href attribute of the link element using javascript.

This had two downfalls though…

  • Each new image had to be loaded first and the page would show the loading icon until each image frame of the animation had played.
  • A request is made for every frame of the animation even if it has already loaded it once. The browser doesn’t try to cache them.

So we get something that looks like this…

This isn’t very efficient, unless your intention is to slowly suck at your viewers data plan.

But there is another way to do it. I took inspiration from DEFENDER OF THE FAVICON, a game played entirely in the favicon of the webpage.

They render the game to a 16x16 pixel HTML5 canvas element then export each frame as a data: URI. A data: URI is the same data that makes up a png file, but base64 encoded and stored as a string.

Using a data: URI means that a request doesn’t need to be made because the information is already there. Depending on how complex your animation is, this might be a good solution for you. But since mine was two frames it was much easier to just convert them and stick them straight in the header.

There are a few online tools that can do this, and they are just a quick google away. Or you can render them in a canvas element and call the .toDataURL() method to fetch them.

Code

<link id="animated-favicon" rel="icon" type="image/png" href="">
<script>
    var currentIcon = false;
    function swapIcon(){
        var link = document.getElementById('animated-favicon');
        if(currentIcon){
            link.href = "data:image/png;base64,iVBORw0KGgoAAA.....";
        } else {
            link.href = "data:image/png;base64,iVBORw0KGgo.....";
        }
        currentIcon = !currentIcon;
    }
    setInterval(swapIcon, 1000);
</script>

But should we?

The unwritten rules of the internet declare visual or auditory effects without user consent a big no no. Pop up boxes, autoplaying videos and big splash pages are generally considered to be very annoying.

So where does this stand amongst all that. In my opinion in depends on the context and the site’s intention. Definitely think long and hard about why if you are considering animating your favicon.

PS. I am fully aware how annoying a low battery symbol is as a favicon. Enjoy!