Author: Nako

How To Embed CodePen in Your Website.

I tried CodePen belatedly.

GOAL

To embed CodePen viewer in my WordPress web site as below.

What is CodePen?

CodePen is a web service to build, test, share and discover front-end code such as html, css and JavaScript.

CodePen is a social development environment for front-end designers and developers. 

from CodePen

Start Coding

In my case, I’ve signed up at first, but you can just start coding by clicking “Start Coding” button.

Embed CodePen

Click “Embed” button at the lower bottom of the page after coding.

Select the style of editor and change the size of the window. you can use anything you like. I chose “HTML (recommended)” and copy the code.

Paste the copied code in the Custom HTML block as below.

See the Pen watching by HanakoSonobe (@s-nako) on CodePen.

How to delete unnecessary materials in Blender.

GOAL

To delete unnecessary materials in Blender.

Environment

  • Windows 10
  • Blender 2.80

Method

In this scene there are 3 materials that has 3 colors, red, green and blue. The red material and green material are set to objects.

The blue material is not used now, but how to delete unnecessary material, the blue one?

Method 1. Find the material from “Blender File” and delete it.

Change the Display Mode of the Outliner into “Blender File”.

Open Material tab and right-click the material to delete.

Method 2. delete materials in “Orphan Data”.

Change the Display Mode of the Outliner into “Orphan Data”. The items displayed in the display mode “Orphan Data” are items that are not used or connected to any other items.

Open Material tab and right-click the material to delete.

Method 3. Reload the blender file.

Save the file and reopen it. All orphan data are automatically deleted when the file is reloaded.

[Tips]Use monochrome images as alpha map in Blender.

GOAL

To use monochrome images as alpha map in Blender, for example hair or eyelash.

hair texture for base color
hair texture for alpha map
rendered result

Method

Create new material for hair object. Select Principled BSDF as surface.

Set Image Texture to Base Color socket.

Open hair texture for base color.

Set Image Texture to Alpha socket.

Open hair texture for alpha map.

This procedure is insufficient because the alpha channel of the image is used for alpha map. Open Node Editor and reconnect nodes.

Use Color socket of the image.

[error]No such file or directory (header file)

Error Detail

When I compile c++ file using g++ command as below, the fatal error: numpy/arrayobject.h: No such file or directory occurred.

>g++ filename.cpp -std=c++11 -IC:\Python27\include -lpython2.7
In file included from filename.cpp:1:
../libs/matplotlibcpp.h:17:12: fatal error: numpy/arrayobject.h: No such file or directory
   17 | #  include <numpy/arrayobject.h>

matplotlibcpp.h in the source code is c++ header file to plot a graph.

numpy/arrayobject.h is in the directory C:\Python27\Lib\site-packages\numpy\core\include\numpy.

Cause

The compiler could not find arrayobject.h because that file is not included in the include search path.

Solution

Add the path to arrayobject.h using -I command line option as follows.

>g++ filename.cpp -std=c++11 -IC:\Python27\include -lpython2.7 -IC:\Python27\Lib\site-packages\numpy\core\include

How to make Blender UI look like Maya UI

Though I always use Maya, I got a chance to use Blender. So I tried to make Blender UI look like Maya’s one.

GOAL

To make Blender UI look like Maya’s one.

Environment

WIndows10
Blender2.80

Method1: Change Keymap

Click Edit > Preferences

from Blender

Open Preferences and select Keymap menu. Change the setting of the keymap from “Blender” to “Industry Compatible”.

from Blender

You can use some keys on Blender like on Maya. If there are any other points you don’t like, customize Keymap on this window.

You can’t use pie menu by pressing space key in this method. When you need pie menu, method2 “Maya Config Addon” is suitable.

Method2: Maya Config Addon

Download “Maya Config Addon For Blender 2.8”

You can get “Maya Config Addon For Blender 2.8” from gumroad.com. It’s an addon to change UI of Blender and add original menu and tools allow users to use Blender like Maya.

Unzip downloaded folder.

Install “Maya Config Addon For Blender 2.8

Reference : Maya Config Installation for Blender Builds

At first copy Blender for saving the current environment (Download .zip file of Blender from official site). Then place the unzipped file in the appropriate directory. I create a directory named “blender2.81maya”.

Copy MayaConfig_V3_4\config folder into the created directory(blender2.81maya\2.81).

Copy all python files in MayaConfig_V3_4 into blender2.81maya\2.81\scripts\startup to add some menu and functions.

Copy files in MayaConfig_V3_4\Theme into blender2.81maya\2.81\scripts\presets\interface_theme to change interface theme.

Start Blender

Click blender.exe in blender2.81maya folder when you use Maya-like Blender.

Import Maya-like keymaps

Open Edit>Preference.

from Blender

Select Keymap menu and click Import button.

from Blender

Select blender2.81maya\2.81\scripts\startup\fa_hotkeys.py. Then set the keymap to “Fa Hotkeys”

from Blender

Right-click or press space to open pie menu

from Blender

Postscript: How to invert zoom function in Blender

In Maya drag back is used to zoom, but in Blender it’s only drag in to zoom in.

Open Edit > References… menu and check “Invert Mouse Zoom Direction” on in Navigation section.

from Blender

The Environment for After Effects Plugin Development

GOAL

To set up the environment for After Effects plugin. To build sample plug-in and execute it.

Environment

Adobe CC2019 v16.0.0
Windows10 with environment for C++ compile
Microsoft Visual C++ 2017 ver15.8.4

Method

1 Download The After Effects SDKs

Access Adobe Web site and click “Get the SDKs” button to get After Effects SDKs. Select “After Effects Plug-in SDK” for your AE version.

2 Set build path as environment variable

Add environment variable “AE_PLUGIN_BUILD_DIR” and set output directory. If it doesn’t exist, the error “fatal error LNK1104: cannot open file ‘***.aex” will occur.

3 Build sample plug-in

Unzip “After+Effects+CC+16.0+Win+SDK.zip” and put the unzipped directory “AfterEffectsSDK” into appropriate location.

Open AfterEffectsSDK\Examples\BuildAll.sln then Visual studio will start.

Right Click on “SDK Noise” and Build it.

from Visual Studio

If the error “C2220: warning treated as error – no ‘object’ file generated” occurred, fix the project configuration not to treat warning as error.

from Visual Studio

4 Put the plugin into AE Directory

Put the “SDK_Noise.aex” file into “C:\Program Files\Adobe\Adobe After Effects CC 2019\Support Files” Directory.

5 Add plug-in Effect

Open AE project and click Effect>Sample Plug-ins>SDK_Noise

from Adobe AfterEffects

A noise effect is added to the video.

How to create C++ Plugin for Maya

GOAL

To set up the environment for C++ Maya plugin. To build sample plug-in and execute it.

Environment

Maya 2018
Maya 2018 Update 6 win64 DevKit
Windows10 with environment for C++ compile
Microsoft Visual C++ 2017 ver15.8.4

Method

Get Maya DevKit

Access Maya Developer Center. And scroll down to click “Maya <version> Update 6 win64 DevKit”. Then unzip the file.

Setting up the build environment

Refer to Autodesk Maya Document “Setting up your build environment“.

Add the 3 directories, \devkit , \mkspecs in devkitBase into Maya installation directory (e.g. C:\Program Files\Autodesk\Maya2018).

* To compile custom plug-ins, you can also find the C++ API header files(\include\maya ) and libraries(\lib).

Build enclosed plug-ins in Visual Studio

Open devkit/plug-ins folder( either maya installation folder or newly created folder where plug-in folder is copied and put would be fine). I create a folder named “maya_cpp_plugin” and copy plug-in files to the new folder.

Find “Hello World Cmd” and open it.

Add folder “include” into the list of include directories for Visual Studio. Right Click the name of project name and open Properties.

Then, add ” C:\Program Files \ Autodesk\Maya2018\include” into the Additional Include Directories.

Add ” C:\Program Files\Autodesk\Maya2018\lib” into Additional Library Directories.

Open solution file *.sln, then Visual Studio will start up. Click Build > Build Solution.

The output files are in the directory maya_cpp_plugin\helloWorldCmd\x64\Release(or Debug). “helloWorldCmd.mll” is the main plugin file.

Plug-in installation

Refer to Autodesk Maya Document “Installing a Maya plug-in“.

Add plugin helloWorldCmd.mll to the plug-in directory defined as MAYA_PLUG_IN_PATH in <username>\Documents\maya\<version>\Maya.env file. If Maya.env doesn’t exist, create it according to “Setting environment variables using Maya.env“.

Start Maya and open Plug-in Manager.

Click a check mark next to helloWorldCmd.mll

Execute the Plug-in with command

Open Script Editor and execute the Command “helloWorld”.

The message “helloWorld” is displayed on the console, upper side of the Script Editor.

Installing g++ in Windows 10

GOAL

To install g++ in Windows10 and compile a c++ file. g++ is included in

What is g++?

g++ is the command to compile c++ and the name of C++ compiler included in GCC, the GNU Compiler Collection. You can use g++ on GNU such as Cygwin and MinGW.

Method

I’ll use MinGW

Get mingw-get-setup.exe

Access the MinGW web site and go to the Downloads page. Click and downloads mingw-get-setup.exe.

from MinGW web site

Run the downloaded file.

Click “Install” an “Continue” with your preference.

Install Basic MinGW and GCC(g++).

Mark “mingw32-base-bin” and “mingw32-gcc-g++-bin” on MinGW Installation Manager.

from MinGW Installation Manager

Click Installtion > Apply Changes

from MinGW Installation Manager

Export path

Add C:\MinGW\bin into environment variables Path.

Operation check

Open Command Prompt and input the command “g++ -v”.

Command to compile C++ file

g++ helloWorld.cpp

You can see command line options at the die.net g++(1) – Linux man page.

Appendix

Additionally install msys if you’d like to use shell with MinGW.

First After Effects Effects-Plug-In Development

GOAL

Develop my first After Effects Plugin, ColorChange effect.

Environment

Adobe CC2019 v16.0.0
Windows10 with environment for C++ compile
Microsoft Visual C++ 2017 ver15.8.4

Method

Environment setup

Set up the environment for After Effects plugin with reference to “The Environment for After Effects Plugin Development.”

Copy Template

Copy Skeleton template from “AfterEffectsSDK\Examples\Template\Skeleton” , with directory hierarchies of “Skeleton”, “Headers”, “Resources” and “Util” preserved .

Rename file names and replace “Skeleton” with “Color Change” in it. DON’T rename “SkeletonPiPL.rc” because binary .rc file is automatically generated from .r file (AE Plugin SDK Guide “PiPL Resources”).

EffectMain Function

Main function is defined in SkeletonPiPL.r as follows.

#ifdef AE_OS_WIN
	#ifdef AE_PROC_INTELx64
		CodeWin64X86 {"EffectMain"},
	#endif
#else
	#ifdef AE_OS_MAC
		CodeMacIntel64 {"EffectMain"},
	#endif
#endif

EffectMain is the Function accepts PF_Cmd cmd as a parameter and call functions using cmd as a selector such as “PF_Cmd_ABOUT”, “PF_Cmd_PARAMS_SETUP” and “PF_Cmd_RENDER”. Refer to “AE Plugin SDK Guide command selectors.”

PF_Err EffectMain(
	PF_Cmd			cmd,
	PF_InData		*in_data,
	PF_OutData		*out_data,
	PF_ParamDef		*params[],
	PF_LayerDef		*output,
	void			*extra)
{
  PF_Err err = PF_Err_NONE;
  try {
    switch (cmd) {
    case PF_Cmd_ABOUT:
      err = About(in_data,
		  out_data,
		  params,
		  output);
	break;
    case PF_Cmd_GLOBAL_SETUP:
      err = GlobalSetup(in_data,
                        out_data,
                        params,
                        output);
      break;
    case PF_Cmd_PARAMS_SETUP:
      err = ParamsSetup(in_data,
                        out_data,
                        params,
                        output);
      break;
    case PF_Cmd_RENDER:
      err = Render(in_data,
                   out_data,
                   params,
                   output);
      break;
    }
  }
  catch(PF_Err &thrown_err){
    err = thrown_err;
  }
  return err;
}

About Function

About is the function to display a dialog describing the plug-in. Change TableString in ColorChange_Stgrings.cpp as follows.

TableString g_strs[StrID_NUMTYPES] = {
	StrID_NONE,		"",
	StrID_Name,		"ColorChange",
	StrID_Description,	"Change comp color to specified color",
	StrID_Gain_Param_Name,	"Gain",
	StrID_Color_Param_Name,	"Color",
};
Open dialog
The message is displayed

GlobalSetup

Now GlobalSetup function doesn’t need any change.

ParamsSetup

ParamsSetup is the function to setup UI, describe your parameters and register them.

I renamed “SKELETON” to “COLORCHANGE”, delete “GAIN”parameter and added “LEVEL” parameter. Then reset values as follows in ColorChange.h.

/* Parameter defaults */

#define	COLORCHANGE_LEVEL_MIN	0
#define	COLORCHANGE_LEVEL_MAX	100
#define	COLORCHANGE_LEVEL_DFLT	50
enum {
	COLORCHANGE_INPUT = 0,
	COLOECHANGE_LEVEL,
	COLORCHANGE_COLOR,
	COLORCHANGE_NUM_PARAMS
};
enum {
	LEVEL_DISK_ID = 1,
	COLOR_DISK_ID,
};

Accordingly, rename constant names in ColorChange.cpp.

Render

Render function is the function to render the effect into the output, based on the input and parameters.

GainInfo

GainInfo is the structure to handle parameter “GAIN”. Create new structure for passing parameter data “level” and “color” in ColorChange.h.

typedef struct ParamInfo {
	PF_FpLong level;
	PF_Pixel color;
	PF_Pixel16 color16;
} PramInfo, *PramInfoP, **PramInfoH;
//GainInfo          giP;
//AEFX_CLR_STRUCT(giP);
ParamInfo            paramDataP;
AEFX_CLR_STRUCT(paramDataP);
A_long              linesL  = 0;

linesL      = output->extent_hint.bottom - output->extent_hint.top;
paramDataP.level = params[COLOECHANGE_LEVEL]->u.fs_d.value;
paramDataP.color = params[COLORCHANGE_COLOR]->u.cd.value;
iterate

The iterate function scan input flame and calculate output frame as pixel to pixel operation, pixel function. In this case, the pixel function is “MySimpleGainFunc16” or “MySimpleGainFunc8”. Rename and change them into “MyColorChangeFunc16” and “MyColorChangeFunc8”.

if (PF_WORLD_IS_DEEP(output)){
    paramDataP.color16.red = CONVERT8TO16(paramDataP.color.red);
    paramDataP.color16.green = CONVERT8TO16(paramDataP.color.green);
    paramDataP.color16.blue = CONVERT8TO16(paramDataP.color.blue);
    paramDataP.color16.alpha = CONVERT8TO16(paramDataP.color.alpha);
    ERR(suites.Iterate16Suite1()->iterate(
        in_data,
        0,                                          // progress base
        linesL,                                 // progress final
        &params[COLORCHANGE_INPUT]->u.ld,	// src 
        NULL,			                 // area - null for all pixels
        (void*)&paramDataP,      // refcon - your custom data pointer
        MyColorChangeFunc16, // pixel function pointer
        output));
}else {
    ERR(suites.Iterate8Suite1()->iterate(
        in_data,
	0,                            // progress base
	linesL,                   // progress final
	&params[COLORCHANGE_INPUT]->u.ld,	// src 
	NULL,                   // area - null for all pixels
	(void*)&paramDataP,       // refcon - your custom data pointer
	MyColorChangeFunc8,     // pixel function pointer
	output));	
}
MyColorChangeFunc

I changed the pixel function as follows.

static PF_Err MyColorChangeFunc8 (
	void		*refcon, 
	A_long		xL, 
	A_long		yL, 
	PF_Pixel8	*inP, 
	PF_Pixel8	*outP)
{
	PF_Err err = PF_Err_NONE;
	ParamInfo *paramDataP = reinterpret_cast<ParamInfo*>(refcon);
	PF_FpLong levelF = 0;
	float red_diff, green_diff, blue_diff;
			
	if (paramDataP){
		levelF = paramDataP->level/100.0;
		red_diff = (paramDataP->color.red-inP->red)*levelF;
		green_diff = (paramDataP->color.green-inP->green)*levelF;
		blue_diff = (paramDataP->color.blue-inP->blue)*levelF;

		outP->alpha		=	inP->alpha;
		outP->red = MIN(inP->red + red_diff, PF_MAX_CHAN8);
		outP->green = MIN(inP->green +green_diff, PF_MAX_CHAN8);
		outP->blue = MIN(inP->blue + blue_diff, PF_MAX_CHAN8);
	}
	return err;
}
static PF_Err MyColorChangeFunc16 (
	void		*refcon, 
	A_long		xL, 
	A_long		yL, 
	PF_Pixel16	*inP, 
	PF_Pixel16	*outP)
{
	PF_Err err = PF_Err_NONE;
	ParamInfo	*paramDataP	= reinterpret_cast<ParamInfo*>(refcon);
	PF_FpLong	levelF	= 0;
	float red_diff, green_diff, blue_diff;

	if (paramDataP) {
		levelF = paramDataP->level / 100.0;
		red_diff = (paramDataP->color16.red - inP->red)*levelF;
		green_diff = (paramDataP->color16.green - inP->green)*levelF;
		blue_diff = (paramDataP->color16.blue - inP->blue)*levelF;

		outP->alpha = inP->alpha;
		outP->red = MIN(inP->red + red_diff, PF_MAX_CHAN16);
		outP->green = MIN(inP->green + green_diff, PF_MAX_CHAN16);
		outP->blue = MIN(inP->blue + blue_diff, PF_MAX_CHAN16);
	}
	return err;
}

Build and Install

Build solution and put generated .aex file into Adobe AE directory such as “C:\Program Files\Adobe\Adobe After Effects CC 2019\Support Files.”

Appenedix

2020/09/06 Changed source codes to support 16bpc color. Thank you for comments and pointing it out.
Please take a look at the article “How to adapt your AE plugin for 8, 16, 32bit color” as well.

How To Post Formula on Your WordPress Website

GOAL

To add formula on your WordPress posts as below.

$$\frac{A}{B}$$

Method

Install MathJax-LaTeX Plugin

MathJax-LaTeX” is the plugin for rendering of embedded LaTeX or MathML in HTML pages. It convert LaTeX style code ” \int^{ \infty}_{a} f(x) dx = \lim_{n \to \infty} \int^{n}_{a} f(x) dx” into the formula as below.
$$\int^{ \infty}_{a} f(x) dx = \lim_{n \to \infty} \int^{n}_{a} f(x) dx$$

Input shortcode

Input shortcode “mathjax” on your post. (Input mathjax with [ and ])

Input formula

Input LaTex style code of the formula enclosed in $$s.

Trouble shooting

If the shortcode “mathjax” doesn’t work well, open “Plugins” panel and click the setting of “MathJax-LaTeX” on your Dashboard. Check the “Force Load”.