Last week I finished the little course HTML5 Canvas - From Pixels to Animation on Udacity. While the technical details were not really new to me, as I have used the canvas before, it was a good refresher on the use of graphics and videos on the canvas without using any libraries.

Being occupied with a lot of other stuff that happened in my life and with other topics to learn, I somehow lost sight of making progress with the curriculum of FreeCodeCamp. But when I encountered the medium-post about the 100 Days of Code challenge, I realized, that it is time to go and get my Front-End-Certificate.

It looks as if it is possible to create sound just with the capabilities of the browser, using JavaScript to access the Web Audio API. I take a first look into it.

This is kind of a new version of my old post about Processing and will cover the things I learned while writing my last post to make a P5JS-sketch work on this blog.

Daniel Shiffman surprised me yesterday in his course “The Nature of Code” with a most simple concept of a physics engine in two lines of JavaScript:

1
2

pos.add(vel);
vel.add(acc);

Yesterday I finished the course “Advanced Styling with Responsive Design” on Coursera. It is the fourth course of the “Web Design for Everybody” specialization from the University of Michigan and it is taught by Colleen van Lent like the other three courses. Despite the fact, that the technical knowledge this course provides was not all new to me, I think I still have learned a lot.

A few days ago I was inveted to take part in a project, that is going to be a platform for online art. Although I am not a digital artist, at most I want to become one in the course of my studies, I was glad about the invitation and quickly took a look at the website of this project. The design was quite unique, featuring elements of a Windows 95 desktop between the presented art and fonts that remind the visitor of the computers of the 80ies or 90ies. At the first visit, I just simply liked the look, probably mostly out of nostalgia and the remembrance of seemingly simpler times, but at the second visit (which was on e newer version, but with similar elements), I started to think more about the choice of design.

Last weekend I played through the course “Adventures in Web Animations” on Codeschool.com. This was my first Codeschool.com course and I mostly took it, because it was the free weekend, I had nothing else to do, being sick and at home, and because web animation was a topic, that I knew not very well.

The lessons have been rather simple, with easy multiple choice questions and very guided coding excercises, but the instructor managed to explain the different parts of animation in great detail. While one cannot expect to learn this topic to the bone in one very short course, I have the impression that I now have a good overview how to animate with css and where to look for helpful resources on the way.

What I really liked was that this course has an accompanying screencast called “Soup to Bits: Adventures in Web Animations”. Usually I am not that much of a fan of screencasts for learning, but this one hit the right spot: I shows the instructor of the course Alyssa Nicoll together with another Codeschool.com developer Dan Denney working on an example website that is somewhat complete, but as they conclude, missing animations. So you can follow them for around an hour, how they put together the animations an this website, how they make mistakes and debug them, how they come to decide on the specifics of the animations and so on, until the website is ready. And if you really want to try your new skills, you can do the same, because the website they work on is available as a github repository.

These two parts, the course and the screencast, really work well together. The course sets the ground on which it is possible to go through the screencast without explaining everything and the screencast gives some meat the the bones of still dry and untested knowledge from the course.

This week was the start of two courses (Creative Coding on Futurelearn and Creative Programming for Digital Media & Mobile Apps on Coursera.org about creative programming in Processing) and I blogged about them in my main blog. Since I have already done some of the assignments some time ago, I focused on some things that I knew about, but did not do so far.

Creating gifs

There are basically two simple ways to create gifs from Processing sketches (that’s what the single programs are called in the Processing world) and both are explained by Jerome Herr on his Tumblr:

1. Save single frame images and combine them later with other tools or
2. use a library that creates the gif while the program is running.

I tried both and both worked fine, at least in part. I was able to install gifsicle, but it would not run properly so I did what anyone would do who already has some experience with ImageMagick, I used the usual convert to do the trick.

I will need some more tries to determine, which method to use more because they seem to have different effects on the speed of execution of the sketches. This doesn’t really matter, when the animations are generated by code alone, because the framerate will be the same for the exection as for the gif, but it produces much different output when human interaction is part of the sketch.

So probably there will be more here about Processing in the near future. By the way, the mentioned Tumblr from Jerome also has a nice list of learning ressources for Processing.

In the last weeks, I had some reasons to think about privacy issues and social networks. I stopped using Facebook and began using Diaspora* and GNU/Social more than before. So when I found a sharing service earlier today, to share webpages into the Diaspora * Federation, I used it as an excuse to get rid of the Twitter button and the Disqus comments and put in the Code to share to Diaspora * .

If you want to do the same, you will find the part of Octopress, that covers the sharing codes in “source/_includes/post/sharing.html”. Just put in the code from the sharing site and you are good to go:

1
2
3

<a href="http://sharetodiaspora.github.io/?title=Your title here&url=http://www.example.com/some/path" target="_blank">
<img src="http://sharetodiaspora.github.io/favicon.png" style="border: 0px solid;" />
</a>

I only changed it a little, of course filling in the template code for the post-title and post-url:

1

<a href="https://sharetodiaspora.github.io/?title={{ page.title }}&url={{ site.url }}{{ page.url }}" target="_blank" style="font-size: 0.85;">Share on Diaspora<img src="http://sharetodiaspora.github.io/favicon.png" style="border: 0px solid;" /></a>