RGB Project in Codea using SVG Color Map

On Monday this week Simon spent hours converting hexadecimals into RGBA values for the 140 colors supported by all modern browsers and creating a color file in Codea. He used the w3schools color map available at https://www.w3schools.com/colors/colors_groups.asp and an html color codes converter http://html-color-codes.info/ 

Some of the color names were quite exotic (like Chartreuse or Bisque ), and we looked those up together in the dictionary. We also took a very close look at the relation between red, green and blue values and found out that red was added every time to make colors lighter, even in shades where you would not expect any red.

Simon later made a nice design pattern in Codea using the color file:

 

 

Modulus Counting in Processing

Simon wrote a modulus counting program in Processing after we were discussing why

1 % 2 = 1 and why 2 % 4 = 2. He basically told me he simply knew 1 % 60 equals 1, but he didn’t know why.  We realized later that the strange result comes from the fact that if a number (the divisor) fits into another number (the numerator) zero times then, in modulus counting, that numerator becomes the excess.

 

DSC_0407

Infinite Line in Processing. Simon’s own code.

A beautiful project in Processing (Java), Simon’s own code, resembling  an El Lissitzky painting that you can control and change with the mouse (without Simon knowing El Lissitzky). Resulted from thinking about and playing with infinite line and line segments. Simon used the following formula: slope times x plus yIntercept.

Infinite Speceship 13 Jun 2017 2

Infinite Speceship 13 Jun 2017 1

 

 

 

DSC_0410

Color Box in Processing. Simon’s own code.

“This one doesn’t have that much code inside!” – Simon explains. It’s still a fun idea though: drawing a box (a cube) that “has all of the colors you can possibly see” in it! And you can make it change colors by moving the mouse. Every face of the cube is a different set of colors (the vertices are quite blur, so you might not be able to see the cube shape immediately). By moving the mouse to the left you get black, red, yellow, green, and by moving to the right – blue, magenta, white, cyan.

Pinball Dilemma. Simon’s own code.

Simon heard the word “pinball” and looked it up on Google (never played it himself). He then decided to write a pinball program in Processing (Java), but soon encountered a mathematical dilemma: the flippers at the bottom of the canvas (their role is to protect the ball from falling) didn’t stop rotating the way Simon wanted. This slowly unfolded into a real drama.

Here Simon explains the problem:

As his math tutor came to give Simon his regular math lesson, Simon turned to him for help and they thought to have solved the problem by applying cosine and setting it to 1. But after the teacher left Simon realized that the angular velocity of the flipper was too high for the cosine to reach 1, which would mean the flipper wouldn’t stop. Unless approximate values could be programmed, which Simon said he doubted. Simon was crying hard. We just sat there hugging after we recorded this:

Then Simon tried writing an approximate function.

I’m not sure he will come back to this unfinished project. It is all part of his learning experience and learning to apply math/ physics though.

DSC_0030

DSC_0031

Approximate cosine:

Pinball cos solution 22 Mei 2017

Approximate Function and 1D distance function:

Pinball. Approximate Function and 1D distance function 22 Mei 2017

Rose Petals with Attraction Repulsion Algorithm. Simon’s own code.

Simon wrote his own code in Processing (Java) to draw flowers using the attraction and repulsion algorithm with the ToxicLibs library. He also put this project on GitHub:

https://github.com/simon-tiger/rosepettels_toxiclibs_verletphysics

2048

We had a great Sunday visiting friends in The Netherlands whose kids resemble Simon in many ways. Simon made his signature bubble solution:

and learned about ray tracing in Java:

After I asked him that evening, what he loved most from the past weekend (that also involved sleeping over at grandparents’ house in Friesland), he said: trying to write code for 2048! I was surprised to hear that as I saw him do several projects in the course of the weekend but no “2048”. What is 2048? It turned out that, after he got tired of playing and snuggled with his laptop in the living room at our friends’ home, Simon tried to write his own code for a game he had played almost two years ago, involving the powers of 2. “It just got into my head!” he explained in the car on the way back. The video below is how far Simon got coding the game:

 

The Nature of Code Forces example translated into Lua

Another translation involving the Codea app, only this time Simon decided to translate an example from Daniel Shiffman’s book The Nature of Code (Java) into Lua. The example comes from Chapter 2 of the book, Forces, and focuses on creating forces in the Processing world. Forces are vectors that can be applied to objects, those can be either some forces made up specifically for a project or forces modelling those already present in the real world. The chapter discusses Newton’s second law in detail (Net Force equals mass times acceleration). I have noticed that, thanks to Daniel Shiffman, Simon knows the three Netwon laws very well by now.

Simon introduced gravity, restitution, mass (many objects of varying mass) and wind to his Lua sketch:

 

 

Here is a photo of Simon’s code after he added restitution (velocity times -0.8):

IMG_4718

In the second video, Simon also briefly talks about the force of friction (Frictio=µNv). He read about friction in the same chapter and became fascinated with it. Since he was telling me about it when we were outside today, I asked him to repeat it in the video.

 

 

Simple Physics. Translating from Lua (the language in the Codea app) into Java

Simon came up with an idea to translate a physics visualization from the Codea app (using a language called Lua) into Processing (Java) by applying Box2D. The first two videos below show him working on that project.

As he got stuck later, Simon decided to do the same project in p5.js instead, applying Matter.js:

This turned out to be quite difficult as well: he got stuck while trying to calculate the exact coordinates for all the shapes involved in the visualization (it was supposed to resemble bricks falling down and rolling down two slopes). So what Simon did as the next step in this “exercise” was switch back to Processing and create a grid with numbered coordinates. When I asked him, why he didn’t make the same grid in p5, he answered that he just loved Processing so much. Eventually though, this grew into a different project:

Confusing as these sidesteps may seem I’m sure Simon got a lot of practice out of this.

Here is a game Simon tried translating from Lua into Processing, it’s called Brickout: