Simon Proposes a Community Project in Procedural Design

Inspired by the Processing Community Day projects, Simon came up with an idea to launch his own community project – in procedural design. He used the Coding Train Community Cloud page as inspiration, trying to guess the code used to build it. The videos below show Simon in process of creating the interface.

Simon later presented his project on the Coding Train Slack channel where other members (including Daniel Shiffman) suggested that Simon narrowed down the theme (originally, it was procedural design projects in general and that was too broad). Simon was very upset as he was afraid his “big project” would become too small and couldn’t come up with a theme. Two days later we agreed that he would make several examples for the projects and publish them on the project’s website to give everyone a better idea of what he was looking for.

At the moment, Simon has already published the first example but there seems to be a bug in it, so please view it as work in progress. (Simon originally wrote the code for the Community Cloud project and it worked when he shared it in Processing JS, but on his own project page, using instance mode, the cloud looks like a circle).

Simon writes: Everybody is welcome to contribute to my community project called *Procedural Designs*!
Link to GitHub rep (for this community project: https://github.com/simon-tiger/procedural-designs/ (link to github pages site in the README).

 

 

Advertisements

Wikipedia Crawler

Simon has made his version of Daniel Shiffman’s Wikipedia Crawler, graphing the relatedness between Wikipedia articles.

Play with it yourself online at: https://simon-tiger.github.io/wikipedia-crawler/wikipedia/

Code: https://github.com/simon-tiger/wikipedia-crawler/

Simon writes:

How it Works

Enter a query (e. g. apple) and either hit Enter or press the button “Query the API”. If an article called “Apple” exists, a circle will pop up with th word “Apple” in it. If an article called “Apple” doesn’t exist, a circle with something alse will pop up. Click the circle (or article) to reveal its related articles. As you might expect, you can click any of those articles to reveal its related articles.

Inspiration

The inspiration comes from Daniel Shiffman and its Coding Train. Link to Daniel’s version here.

Simon’s Superellipse tutorial on Thimble

Superellipse in Thimble 8 Sep 2017 4

Simon has created a beautiful little website with a tutorial (that he wrote completely on his own, from scratch) on how to build a superellipse in JavaScript.

Here is the  link: https://thimbleprojects.org/simontiger/315031/

(it’s on this new thimble.mozilla.org online code editor)

What specially delights me about Simon’s works lately is the subtle sense of humour he writes with (probably acquired through both watching Daniel Shiffman’s videos and reading Murderous Math books):

Superellipse in Thimble 8 Sep 2017 2

Superellipse in Thimble 8 Sep 2017

The project isn’t finished yet as the example Simon is linking to the website is only for an ellipse and a superellipse yet:

Superellipse in Thimble 8 Sep 2017 3

Simon also plans to add other shapes to the website later.

 

Automatic Magformers Table

Magformers (magnetic building sets involving maths) used to be Simon’s greatest passion when he was six (just a year ago!) and this week he has been travelling in time to revisit this old love, after his little sis received a new Magformers set as a present. What Simon did next was to combine Magformers and programming: he created an automatic table listing various Magformers models (in HTML/ JavaScript). The sets that can be used to build those models were to get filled in automatically, depending on the number of specific shapes needed for every model and the number of such shapes available in every set. As you might imagine, this involved many lines of code and a whole lot of computational thinking. At one point, when Simon was nearly done, he realized that the column listing the sets wouldn’t get filled in properly. He had a bug in his program that he couldn’t find, so he turned to his older friends in Slack for help. It’s such a pleasure to see him communicate with these experienced programmers on a regular basis now and unbelievable how eager and resourceful they are. One of Simon’s friends from Slack even created his own version of Simon’s program in CodePen! What makes it even more wonderful is that Simon no longer hesitates to apply the good advice he gets. The next day he wrote some “helper functions” and the table worked!

Simon hasn’t put this project online yet, as he wanted to make it more interactive and hasn’t managed to do that so far.

 

 

 

 

 

 

Simon’s first set of Web Development How To’s: How to make a slideshow

Simon has recorded his first set of web development tutorials, about how to create a slideshow. The original code comes from the w3schools.com website.

 

 

 

Simon got stuck in the previous video, but debugged his code in #1.5:

Update: Simon has recorded the last how to in this Slideshow series, about hoe to make the slideshow automatic:

Simon trying out the D3 library

Simon spent hours studying the D3 library on Sunday, it’s a very popular JavaScript library using SVG images he had never tried before. He also found it great how the annotations are in English, Russian, Chinese and Japanese and showed it to his Chinese teacher today.

He also created an account on the library website, but couldn’t figure out how to create a new project. We should look at it together this week when I finally have more time.

These are two small videos of Simon trying the D3 library out:

 

 

D3 16 Jul 2017