Matter.js is one of the libraries for physics

Final Image


There were several libraries for arithmetic processing of squares, circles, and other shapes, but I couldn’t find a sample with text, so I’m going to research and post it as a reminder. As for the library selection, there were several libraries for physical operations, but I’m using Matter.js, which is lightweight and smartphone-compatible.

Custom Render

Matter.js uses a default render for displaying shapes. If you add a Body object to the **world**, this render will automatically display the body along with the physics operations. However, this default render does not support text display. …

Video texture can manipulate as 3D blocks by mouse


The example I made a choice from Three.js repository is a video material. Using the material, We can import the video image into a 3D world. In this article, I will explain how I customize the example to my own idea. The key logic is a UV map for a geometry. Therefore, It may be informative at this example as well.

3D model consist of triangle faces.

The final outcome of my idea

I have been learning Three.js from a lot of examples in its repository. In this time, I pick up two examples and regenerate into new visualization. I am excited to publish my tiny demonstration. Basically, this effect comes from the following images.

camera follows a path

Mixed idea from examples in Three.js repository

My story

Recently, I have been reading examples in Three.js repository. I dedicate to comprehensive whole the code meanings. After I understand it, I customise the references into my own idea. In this post, I’m going to explain my new visualization that I hit on as a top of the image. The core logic in my code is affected from the previous post that explains an example. What I’m inspired by is the following links.

Code Reading in Three.js Example

Today’s Example

Today’s Example

I have been practising to quickly read an example code in three.js repository. The example that I have scanned is to load numerous objects with infinite repetitive animation on a particular geometric object.

The logic to animate is broadly the following procedure.

1. Set up Scene, Camera, Mesh placed on a scene
2. load flower model.
3. set up flower objects using model
4. render
* reset and replace the flower if it has been dead
* update scale

In this article, I will pick up how the flower object is regenerated at constant.

Get Object from Object Name

There are many flowers when launching…

Inspired by GANTZ from Japanese animation.

In my previous post, I mention to create stencil seal on the object. In that, invisible planes crop the object off. You can see the example in this site quickly as I referred to the code. This means something inside the content come out by slashing it. While learning Three.js from the example, I figured out that the resulting image looked like Japanese animation called GANTZ. You can see my inspired vision in the following official tweet.

In the above scene, a guy’s body is being cut off and it is gradually fading out. The astonishing effect got me…

Generative Coding Drill


I have been learning of Three.js, and I would like to put forth my code with a great idea someday. Therefore I have started to read and understand by Thee.js Examples. Through this challenge, I would make progress for a creative coder.

First of all, I picked up the following example.

Sample image

In this example, the originating object is cropped by invisible planes in surrounding. Besides, the cut mouth is coloured with specific colour material, magenta. They call this technic that applying materials to the cut face a stencil because the behaviour is similar to seal the content on the object…

The intrinsic face attributes Japanese girls to entice subconsciously.

Photo by Jonathan Borba on Unsplash

The definition of the verb and its traits

European, American or many people except Asian people might be difficult to distinguish our face type, especially in this post, Japanese guy’s face type. We’re also confused to guess which face is from German and which look is from England and so on. The faces among European or American seem alike for us.

ソース顔 (Sauce Face)

The first feature is a deep curving face between eyes that most European or American have this trait. We, Japanese people, admire such a dense appearance. Our nose is basically flat. As soon as we see foreign people, we have a bit jealous.

This is similar to…

With incorrect headers, the response returns 401.

Photo by Ashwini Chaudhary on Unsplash

Failure in my case

I was trying to post image data from local PC area as well as from Smartphone. I have been using XMLHttpRequest by adding an extra header with queries so that server-side can catch them. All is fine if I post metadata such a string, however when I have to post image data, server-side, that is PHP, could not parse the sent data. Thus, I researched how to upload image data. In this post, I’m going to expose the result of my struggling.


First of all, I will put a couple of code below when I post metadata to server but…

KENDAMA is one of my recommend gift in Japan

History of KENDAMA

The origin of KENDAMA started in French around 16th century, which is called Cup and Ball at modern century. In those days upper-class people, especially among aristocrats, played with it.

Etching (16th century in French) : Quatation

The Cup and Ball was introduced into Japan around 19th century with the Cup customised as a Japanese Sake container.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store