Optical Illusions in Processing (Java)

Simon created three optical illusions in Processing (Java) playing with color. For better effect, you can download Simon’s code on GitHub: https://github.com/simon-tiger/colorIllusions

The Part 1 video is about the first two illusions. The third (and the coolest) illusion is in Part 2.

 

Simon writes:
Illusion 1: A checkerboard with blue and yellow squares, but if you move away from it, you see white.
Illusion 2
Mode 1: A disk with red and green, but when you spin it, it becomes yellow.
Mode 2: A disk with red and cyan, but when you spin it, it disappears.
Illusion 3: A rainbow of colors, but when you pause it from flickering, you only see red, green, and blue.

If Illusion 2 Mode 2 doesn’t work, change the background from 255 to between 128 and 135.
If any of the other illusions don’t work, try doing them on a different screen.

Inspired by Physics Girl videos.

 

 

Advertisements

Muredo in JavaScript

Simon programmed this game a couple of weeks ago but I have waited to publish the video as I hoped he would finish it and get in on GitHub. Unfortunately he got stuck and didn’t return to the project since then, this why I’m now publishing an unfinished game. The unfinished code is on Simon’s GitHub: https://github.com/simon-tiger/muredo

Link to the current version of the game (try playing it online): https://simon-tiger.github.io/muredo/muredo/

Simon writes: “The game board is ready, you can move the game pieces on to the board and roll the die. As the next step, I want to have a feature of highlighting the correct tile – how can I do that?

I also don’t have the following things yet: the multiplying feature, choosing one of multiple options and the winning condition.”

I love Simon’s color choice and the whole interface. Originally, it’s a Japanese game and I think he has made it look very much like spring in Japan.

The objective of the game is to fill in the little square making a 3×3 grid. A player throws the dice and puts one game piece on the corresponding place on the board. When she throws again, she can multiply the value on the die by the value of the place where she has her game piece (or game pieces) if the product of the hat multiplication sum can be found among the nine numbers on the 3×3 grid. If not, the player either puts another game piece on the board, to fill the value of the last throw, or misses a turn.

Simon’s Decision Tree Library

Simon has just created a decision tree library, called “Decision”, that is helpful in building decision trees/forests (Machine Learning). He has also tried performing unit tests for the first time, and passed several of them! Once Simon’s library is in GitHub he also plans to link it to the testing hub CircleCI so that no merging can happen without passing tests. In this video, Simon explains what a decision tree is, shows his library and his test decision trees.

Simon’s library on GitHub (with a huge Readme that Simon wrote himself): https://github.com/simon-tiger/decision

Simon’s library on CircleCI: https://circleci.com/gh/simon-tiger/decision/3

Simon’s unit tests:

Screen Shot 2018-02-20 at 16.59.12

Simon made his own speech library: Speechjs

Simon has just finished working on his first library,  a #speechlibrary Speechjs. You can find Simon’s library on GitHub: https://github.com/simon-tiger/speechjs

Simon also added a reference page at: https://github.com/simon-tiger/speechjs/wiki/Reference

You can use this library for any project that uses #speechrecognition and/or speech synthesis. Simon has put it under the MIT (permissive) license, to make sure everyone can use it for free, he emphasized.

While writing the library, Simon also recycled various code he found online, but essentially this library is his own code. He calls the library “just a layer on top of the web speech API” (that means you’re limited to what your browser supports).

 

Simon writing a Matter.js textbook

Simon is currently working on a “Matter.js textbook”, a set of tutorials on how to use Matter.js (a physics library) that he writes on GitHub. Simon writes everything himself, not copying from anywhere. Sometimes he forgets some coding syntax and looks it up in the documentation, but for the rest this is his own text. He explains: “The reason why I am making this textbook is because there are Matter.js tutorials but they are really short and there aren’t many of them. And the only video tutorials are by Daniel Shiffman and they are using P5.js.” If it proves possible, Simon might add video to his GitHub textbook later.

It’s great to observe him type away and when I look over his shoulder, I see that he makes very decent sentences, with a nice tint of humour every now and then.

The link to the textbook:

https://github.com/simon-tiger/matter-js-tutorial/blob/master/README.md

Simon contributes to the p5.Speech library

Simon has made a pull request to the p5.Speech GitHub repo (a milestone!) and hopes his request gets merged. In this video he explains what he wants to improve with his contribution.

Later it turned out that someone else made a similar request (with more extras) and that request will probably be merged, so Simon was definitely thinking in the right derection. He got positive response from Daniel Shiffman and it looked like Simon’s comments have sparked a discussion on GitHub.

 

Simon contrubuted to p5.Speech library. Pull request 14 Oct 2017

Simon writing on GitHub: 

This github issue is referring to pull request #7.

As you can see in commit a2a5d38, there are some comments. Which look like 
this:

// this one 'start' cycle.  if you need to recognize speech more

// than once, use continuous mode rather than firing start()

// multiple times in a single script.

The comments are right before the start() function in the p5.SpeechRec 
object. But the commit adds arguments to this function:

p5.SpeechRec.prototype.start = function(continuous, interimResults) {

  if('webkitSpeechRecognition' in window) {

    this.rec.continuous = continuous;

    this.rec.interimResults = interimResults;

    this.rec.start();

  }

}

And before, that piece of code looked like this:

p5.SpeechRec.prototype.start = function() {

  if('webkitSpeechRecognition' in window) {

    this.rec.continuous = this.continuous;

    this.rec.interimResults = this.interimResults;

    this.rec.start();

  }

}

Are the comments "unnecessary" now? In other words, Should we remove 
them or leave them there?

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).

 

 

Binary Tree Coding Challenge, Simon’s version

Simon followed up on Daniel Shiffman’s Binary Tree Coding Challenge and made his own version: he flipped the tree so that it grows from the bottom (and not from the top) and got rid of the numbers. “Could we please, please send this to Daniel?” he pleaded. I said he could create an issue on Daniel’s GitHub page, which he did:

https://github.com/CodingTrain/Rainbow-Topics/issues/526

Code: https://github.com/simon-tiger/binary-tree

The tree (refresh to get a new tree every time): https://simon-tiger.github.io/binary-tree/index.html

 

 

 

 

 

Flipping the tree:

Binary Tree 30 Apr 2017

 

Spring Animation Tool (Simon’s own code)

The next exciting step in writing his own code about spring force: Simon actually created an interface to allow anyone to build his own shape made of springs and particles! Simon put this project on GitHub and hosted it to make it accessible online.

The code: https://github.com/simon-tiger/spring-animation-tool

The online interface to play with: https://simon-tiger.github.io/spring-animation-tool/

He also wrote the instructions himself and placed them in the GitHub Wiki: https://github.com/simon-tiger/spring-animation-tool/wiki/Intro

Intro Spring Animation Tool 24 Apr 2017

Videos of the project step by step:

Simon doesn’t consider this project finished. He wants to come up with a way to apply spring force to all the springs simultaneously to make sure the shape’s sides are equal in the final stage.

Simon’s Plinko

 

Simon loved Daniel Shiffman’s simulation of the Plinko game and added some extra features to Daniel’s code, like a button to make new chips appear. He also saw a television version of Plinko where people were trying to win money, so he added the figures below to indicate your score.

Simon put this project on GitHub, too!

Code: https://github.com/simon-tiger/plinko

Direct link to the game: https://simon-tiger.github.io/plinko/

You can also both the code and play with the animation via the p5.js web editor (hit Download to get the animation on your computer): http://alpha.editor.p5js.org/simontiger/sketches/Sk23OkW6x