Note of An Image Synthesizer

Ken Perlin. An Image Synthesizer.

The paper proposes the initial algorithm of Perlin Noise, and a few variations of the algorithm to simulate a variety of randomnesses in nature.

The technique produces organic randomness appears in nature. It proposes an algorithm to produce random look, which is made uniformly distributed by a narrow bandpass limit in frequency. This statistic character of the randomness maintains unchanged with varying domains. Because the algorithm satisfies statistical invariances under rotation and translation.

The most beautiful part of the paper is the description of Perlin Noise: an organized array, when associated with the gradient of the organized array and an augmentation value, both are stochastic, is transformed to a stochastic value which is used together with the gradient to interpolate areas between the stochastic value of the current organized array and the ones of other organized arrays. NOTE: the augmentation arguments for all organized arrays determines the generated stochastic values. The distribution of the augmentation arguments of all organized arrays determines the uniformness of the generated stochastic values.

Note of Simulating and Analyzing Jackson Pollock’s Painting

Sangwon Lee, Sven C. Olsen, Bruce Gooch. Simulating and Analysing Jackson Pollock’s Painting

The paper devises a system to allow user create Pollock-like painting with a painting material simulator which allows user paint without using real material, and with real-time feedback of fractal properties of the ongoing painting, which gives user an awareness of the similarity between the fractal dimension of the ongoing painting and those of Pollock’s painting. That means, the user is capable of creating Pollock-like painting by keeping the similarity high.

The paper points out that fractal dimension is incapable of distinguishing fractal and nonfactual images, and proposes an new metric, uniformity, to alleviate the limitation. Uniformity indicates the similarity between the fractal dimension of a subregion and those of the entire painting. But, in what way does uniformity distinguish fractal and nonfactual images better than fractal dimension does?

Notes of Empathic Painting: Interactive Stylization Through Observed Emotional State

Maria Shugrina, Margrit Betke, John Collomoss. Empathic Painting: Interactive stylization through observed emotional state

Emotion is majorly expressed from a combination of color and stroke. The paper analyzes color, stroke denotation style, and region turbulence to transform them to emotions. It can be found in Section 4.2 Rendering Parameters:

Express Emotion in Region Turbulence

  • Section 4.2.1 Region Turbulence

Express Emotion in Color

  • Section 4.2.2 Tonal Variation, and

Express Emotion in Stroke Denotation Style

  • Section 4.2.3 Stroke Denotation Style

Notes of The Art of Journey

Characters are segmented to make it possible to animate.

Scary faces comes from a question that “what if the character you control is on the dark side?”

Principles of expressing emotions using landscape composition:

  • Openness, happiness: if the fog is pushed away from the player, the view becomes clear, which makes player feel happier; on the other hand, if the fog is close to the player, the blurry view makes the player feel scary
  • Blue sky is used to award the player at the end of the game. Green skies were used earlier as a random alternative of the blue sky, from what the artist said
  • Dreamy and high quality light is used to make the player feel magical at the end of the game

Book link:

https://www.amazon.com/Art-Journey-Matthew-Nava/dp/0985902213

Case Study: Debug HTTP ERROR 500 of Azure Web App Which Works Locally

The purpose of this blog is to record the turning points of fixing a crashed web app on Azure, which works locally.

Background

The web app is built with ExpressJS as the backend, sequelize as the ORM, Azure PostgreSQL as the database, React and Redux as frontend. It’s hosted on Azure.

Problem

The web app runs on local browser, but crashes on Azure after it’s deployed. The broken website on Azure shows “HTTP ERROR 500”.

Turning Points

  • Azure log stream

Log stream printed out a detailed error when the deployed web app is browsed from azure portal: “TypeError: Cannot read property ‘use_env_variable’ of undefined”. This error happens on the first line of the following code block on model/index.js:

if (config.use_env_variable) {
var sequelize = new Sequelize(process.env[config.use_env_variable], config);
} else {
var sequelize = new Sequelize(config.database, config.username, config.password, config);
}

  • Debug var values with console.log

The real issue was unveiled by seeing different value of the same var `env` when assessing var values related to “config” in the import-header section:

var env = process.env.NODE_ENV || ‘development’;
var configFile = require(__dirname + ‘/../config/config.json’);
var config = configFile[env];
var db = {};

console.log(“[DEBUGGING] __dirname”, __dirname);
console.log(“[DEBUGGING] configFile: “, configFile);
console.log(“[DEBUGGING] env: “, env);
console.log(“[DEBUGGING] config: “, config);

Specifically, `var` is `development` on local machine, but is `production` on Azure. Whereas the config.json file specifying database configuration doesn’t have the `production` key.

Thoughts

Looking back, I realize the key to fix the “HTTP ERROR 500” error of the Azure web app is precisely identifying the problem. That means, I needed to figure out on which line of code and which vars didn’t work as expected. This statement holds firmly because that’s the nature of an application wrote by a programming language.

Then, what’s the most effective way of precisely identifying the problem? Turns out using debugging tool to log as much related values of the application as possible is the right way, at least for this case.

However, I didn’t take the most effective approach at the first sight! Specifically, for “HTTP ERROR 500”, I searched online, and got hints of logging application states. That directed me to check Azure’s log stream. But for “TypeError: Cannot read property ‘use_env_variable’ of undefined”, I had wrong guess of the cause of the issue: I imagined the compilers on Azure and on my local machine are different – the compiler on local machine ignores the TypeError detected on Azure. Even worse, I firmly believed my imagination of the cause of the issue is true.. It was me randomly logged the var values that helped me unveiling the real issue.

The native approach I took to fix the problem unveils some mistakes I made for solving tech problems:

  • I should’ve directly check Azure’s diagnostic tools when saw “HTTP ERROR 500”. But understanding and learning “HTTP ERROR 500” was necessary.
  • I should’ve realized “TypeError: Cannot read property ‘use_env_variable’ of undefined” means “config” is undefined, and should’ve logged out related vars of “config”, instead of imagining the difference between local machine and Azure compiler. I think what I really miss here is that for a web app, the first priority of debugging is logging out vars, then consider system and compilers issues. But learning “TypeError: Cannot read property ‘use_env_variable’ of undefined” was necessary too.

So, a couple lessons here to solve an issue

  • Learn the error by googling
  • Use the right debugging tool to precisely identify the issue – it should be specific to code level

Aesthetics Possibilities of Real-Time Sky Rendering

With GLSL implementation of atmospheric scattering, it’s easy to change aesthetics of sky and see the effect on the fly.

Normal Sky:

normal

Dreamy Sky with Aesthetic Changes:

  • Sky color: red and yellow
  • Painting layers: two layers with one red sky and one yellow sky mixed together. Math operation: add
  • Painting effect: turbulent view directions
  • Sky pattern: big blocks
dreamy

Lastly, a sunrise animation created in a few seconds benefited from the real-time performance of GLSL:

纯净 明亮 清晰 clean, bright, and clear

沉浸于 稀稀疏疏 飘升的乐符 sinking, in the scattered, rising musical notes

开始附着于 飘渺的声线 being attached to, the flying voice

渐渐的 飘起 slowly, floating up

自由的 滑翔 gliding..

尘埃消失 dust.. is falling away.. fading..

世界变得清晰 明亮 the world becomes clear, bright

透彻又纯净 thorough and clean

心底的能量 the warmth underneath the heart

冉冉出现 starts to spread..

发出热量 emitting energies

舞蹈 with the rhythm

滑翔 rising up and rising down

朝着明亮温暖的方向 along the bright and warm way

React + Redux and HTTP Request

It’s a bit confusing for starters to get how does React + Redux and HTTP Request work together. For example, how does the HTTP Request influence registered app states? How is it related to action?

It all melted down to fully understand what is each of React, Redux and HTTP Request designed for, and how does it work. So here we go:

React renders the UI with states and props.

Redux manages the states of React.

HTTP Request fired by an action doesn’t necessarily affect the states in Redux’s store. There’re two cases here:

  • If the action firing a HTTP Request changes the UI, we need to design app states, register them to Redux store, dispatch them to change the UI
  • If the action firing a HTTP Request doesn’t change any UI, we don’t need to add app states related to the HTTP Request. We can directly fire the HTTP Response from React

二十六岁生日

生日这天,

与过去和解。

 

给一切道谢。

 

为做过的错事流泪,

给一切道歉。

 

也原谅一切。

 

吹灭蜡烛,

许下2018年的心愿。

 

就这么简单。

 

也感激,

自己那么幸运。

 

IMG_0931

Singing

Dust and rains,

Dropping down.

To the surface of diamond.

Not moving away.

 

How to get wind to wash away?

 

Should the diamond keep flashing?

Should the diamond keep flashing?

 

It doesn’t need protection.

It doesn’t need protection.

 

It is flashing.