Translating Car On Terrain project from Phaser.io into Processing

Today Simon spent hours translating this Car On Terrain project from Phaser.io (where it appears in JavaScript) into Processing (Java). He loved doing it in a form of a lesson for me, while I was filming him and asking questions about loops, arrays, fixtures, shapes and bodies (and there are many things I don’t understand). Simon also spoke about “the three most important properties: density, friction and restitution”. The project involved a lot of Physics, using many Box2D sub-libraries and translating between pixels and mm.

In the end, he got tired of writing all the coordinates for the terrain vertices, but he did get quite far.

 

 

 

 

 

Applying Box2D to translate from pixels into mm:

CarOnTerrain translating from pixels into mm

Translating Bit Invader from Codea into JavaScript

Simon tried to reconstruct Bit Invader game (from Codea.io) in JavaScript, but got stuck at a certain point when he was programming the enemy to recognize the hero and the bullets. Here is how far he got. The project is available on Simon’s page in Codepen:

https://codepen.io/simontiger/project/editor/AdyVmr/

 

Thoughts on Fidget Spinner Simulation

DSC_0420-1
In his recent Live Stream, Daniel Shiffman announced he would make a fidget spinner simulation in the near future. Inspired by this idea, Simon has jotted down some code for the fidget spinner project. The code and part of the code description both come from The Nature of Code, Example 2.6. Simon explains that the code below has a non-static radius, because he is dealing with x and y coordinates and not angles (i.e. not spinning but moving to where the mouse is). He says he is going to use that code as a foundation. The second step will be to rely on angles instead of x and y coordinates. The third step will be to rotate have the fidget spinner keep rotating and to apply a friction force to make it stop eventually.
Simon recorded this video, where he ponders on the possibilities for the fidget spinner code:
Simon wrote the rest of this post:
Description:
This is the code for clicking and dragging an object around the screen.
To do that, you need the following data:
  • mass (radius of the object)
  • location (position of the object)
  • dragging (Is the object being dragged?)
  • rollover (Is the mouse over the object?)
  • dragOffset (offset for when the object is clicked on)

And the following functionality:

  • clicked (checks if the object is hovered over and sets dragging to true)
  • hover (checks if the object is hovered over and sets rollover to true)
  • stopDragging (sets dragging to false)
  • drag (moves the object around the screen according to the mouse)
Code and Pseudocode:
Fidget Spinner Simulation
 – Prepare mouse interaction code
  – Data (mass, location, dragging, rollover, dragOffset)
  – Functionality (clicked, hover, stopDragging, drag)
  – Code (Mover)
   – Variables
float mass;
PVector location;
boolean dragging = false;
boolean rollover = false;
PVector dragOffset;
– Functions
void clicked(int mx, int my) {
  float d = dist(mx,my,location.x,location.y);
  if (d < mass) {
    dragging = true;
    dragOffset.x = location.x-mx;
    dragOffset.y = location.y-my;
  }
}

void hover(int mx, int my) {
  float d = dist(mx,my,location.x,location.y);
  if (d < mass) {
    rollover = true;
  }
  else {
    rollover = false;
  }
}

void stopDragging() {
  dragging = false;
}



void drag() {
  if (dragging) {
    location.x = mouseX + dragOffset.x;
    location.y = mouseY + dragOffset.y;
  }
}
  – Code (Main)
   – Variables
Mover m;
   – Functions
void draw() {
  m.drag();
  m.hover(mouseX,mouseY);
}

void mousePressed() {
  m.clicked(mouseX,mouseY);
}

void mouseReleased() {
  m.stopDragging();
}

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.

Polar to Cartesian converter (Simon’s own code)

Simon built a Polar to Cartesian converter (Simon’s own code). You can enter the radius in pixels and the angle in degrees, click “convert” and you get the coordinates in x and y and a circle appears n that spot.

You are welcome to play with Simon’s converter online in CodePen at: https://codepen.io/simontiger/pen/MmdodP

Simon is also planning to make a similar converter for Spherical to Cartesian (where you would enter radius, latitude and longitude and convert those into x,y,z).

 

 

Here Simon explains the formulas to convert between Polar and Cartesian coordinates:

 

Plinko game translated into Processing (Java) and Box2D

Simon translated Daniel Shiffman’s Plinko game coding challenge from JavaScript and Matter.JS into Processing (Java) and Box2D:

Simon adds that he didn’t actually do part 4 of the coding challenge, because part 3 is recorded after part 4.

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

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:

 

MotorAttractor with Box2D in Processing (Java)

In this project Simon combined two exercises and one example from Daniel Shiffman’s Nature of Code book, Chapter 5 – Physic Libraries. The specific physics library used here is Box2D. Simon combined exercises 5.6 (Bridge) and 5.10 (Attraction Apply Force), and example 5.7 (Create a windmill) to create a motor that catapults particles towards an attractor. If the particles fly past the attractor, “bricks” can be added to the canvas by clicking the mouse – the weight of the bricks helps regulate the motor in the right direction. For this project, both gravitational attraction and global gravity force were applied: