JPH05324855A - Shading display system - Google Patents
Shading display systemInfo
- Publication number
- JPH05324855A JPH05324855A JP4126994A JP12699492A JPH05324855A JP H05324855 A JPH05324855 A JP H05324855A JP 4126994 A JP4126994 A JP 4126994A JP 12699492 A JP12699492 A JP 12699492A JP H05324855 A JPH05324855 A JP H05324855A
- Authority
- JP
- Japan
- Prior art keywords
- color
- component
- shading
- shade
- data table
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Image Generation (AREA)
Abstract
Description
【０００１】[0001]
【産業上の利用分野】本発明は、部品の陰影を表示する
陰影表示方式に関するものである。BACKGROUND OF THE INVENTION 1. Field of the Invention The present invention relates to a shadow display system for displaying shadows of parts.
【０００２】[0002]
【従来の技術】対話型アプリケーションは、ボタン、ス
ライダなどの部品をディスプレイ上に表示し、これをポ
インティングデバイスで選択するなどの方法で操作を行
う、グラフィカルユーザインタフェイスが採用されてき
ている。グラフィカルユーザインタフェイスは、ユーザ
に判り易い、感覚的な操作を可能にするために使用され
ており、ボタンなどをより現実的に表示し、感覚的な視
認性を高める必要がある。2. Description of the Related Art Interactive applications have adopted a graphical user interface in which parts such as buttons and sliders are displayed on a display and operated by a method such as selecting them with a pointing device. The graphical user interface is used in order to enable the user to perform intuitive sensory operations, and it is necessary to display buttons and the like in a more realistic manner to enhance sensory visibility.
【０００３】現在では、情報処理装置にカラービットマ
ップディスプレイという、色々な絵を自由に表示できる
装置が標準的に利用されており、グラフィカルユーザイ
ンタフェイスをよりリアルにする環境が整ったといえ
る。そこで、スイッチやボタン、入出力のための矩形領
域などをリアルに表示し、視認性を高めるためには、こ
れらの表示部品に陰影を付け、立体的に見えるようにす
ることが効果的である。At present, a color bit map display, which is an apparatus capable of freely displaying various pictures, is used as a standard in an information processing apparatus, and it can be said that an environment for making a graphical user interface more realistic has been established. Therefore, in order to display switches, buttons, rectangular areas for input and output in a realistic manner and to improve visibility, it is effective to shade these display parts so that they appear three-dimensional. ..
【０００４】従来、このような立体的陰影づけは、左上
方から光が到達すると、例えば凸である部品の場合、図
７のように上辺と左辺を白、下辺と右辺を黒で縁取りす
ることによって実現していた。Conventionally, in such a three-dimensional shading, when light reaches from the upper left side, for example, in the case of a convex part, as shown in FIG. 7, the upper and left sides are white and the lower and right sides are black. Was realized by.
【０００５】[0005]
【発明が解決しようとする課題】上述のように表示し、
部品を立体的に見せるために陰影を付け、図７に示すよ
うに、白と黒を使用した縁取りを行うのであるが、この
縁となる部分の幅を適度にして効果的にする必要があ
る。左のボタンは縁の部分の幅を狭くし、右のボタンは
縁の部分を広くした例を示す。また、部品の色が灰色で
はなく、例えば赤いボタンであった場合、このボタンの
縁の部分の上辺、左辺を白、下辺、右辺を黒とするとい
った陰影を白と黒の２色で塗ったのでは、不自然であっ
て綺麗に見えないという問題があった。このため、ボタ
ンなどの部品の基本色に対応した陰影を自動的に表示す
ることが望まれている。[Problems to be Solved by the Invention]
The parts are shaded in order to make them appear three-dimensional, and white and black are used for edging as shown in FIG. 7. However, it is necessary to make the width of the part that is the edge appropriate and effective. .. The left button shows an example in which the width of the edge part is narrowed, and the right button shows the example in which the edge part is widened. Also, if the color of the part is not a gray color but a red button, for example, the shading such as the upper side, left side of the edge of the button is white, the lower side, and the right side are black, and the shade is painted in two colors, white and black. So, there was a problem that it was unnatural and didn't look beautiful. Therefore, it is desired to automatically display a shade corresponding to the basic color of parts such as buttons.
【０００６】本発明は、これらの問題を解決するため、
部品の基本色をもとに部品の辺の上方などから光を照射
したときの陰影色を自動的に生成して表示し、部品の陰
影表示をより現実的でリアルに行い、使用感の良いグラ
フィカルユーザインタフェイスを提供することを目的と
している。The present invention solves these problems.
Based on the basic color of the part, the shade color when light is emitted from above the side of the part is automatically generated and displayed, and the shade display of the part is made more realistic and realistic, and the usability is good. It aims to provide a graphical user interface.
【０００７】[0007]
【課題を解決するための手段】図１を参照して課題を解
決するための手段を説明する。図１において、陰影表示
部３は、部品２に基本色に対応した陰影色を表示するも
のである。[Means for Solving the Problems] Means for solving the problems will be described with reference to FIG. In FIG. 1, the shade display unit 3 displays a shade color corresponding to the basic color on the component 2.
【０００８】部品形状データ４は、部品２の形状、基本
色および輪郭幅を予め設定したものである。陰影色演算
用データテーブル（１）５は、部品２の陰影色を生成す
る比率を予め設定したものである。The part shape data 4 is data in which the shape, basic color and outline width of the part 2 are preset. The shadow color calculation data table (1) 5 has a preset ratio for generating the shadow color of the component 2.
【０００９】陰影色演算用データテーブル（２）６は、
光源の方位ベクトルおよび部品の辺の角度θを予め設定
したものである。The shade color calculation data table (2) 6 is
The direction vector of the light source and the angle θ of the side of the component are set in advance.
【００１０】[0010]
【作用】本発明は、図１に示すように、陰影表示部３が
部品形状データ４から取り出した基本色をもとに、陰影
色演算用データテーブル（１）５から取り出した比率に
従って、部品２の各辺の色（例えばＲＢＧ値）を演算
し、表示するようにしている。According to the present invention, as shown in FIG. 1, based on the basic color extracted from the component shape data 4 by the shadow display unit 3, the component is calculated in accordance with the ratio extracted from the shadow color calculation data table (1) 5. The color of each side of 2 (for example, RBG value) is calculated and displayed.
【００１１】また、陰影表示部３が部品形状データ４か
ら取り出した基本色をもとに、陰影色演算用データテー
ブル（２）６から取り出した光源の方位ベクトルおよび
部品の辺の角度θに従って、部品の各辺の色（例えばＲ
ＢＧ値）を演算し、表示するようにしている。Further, based on the basic color extracted from the component shape data 4 by the shadow display unit 3, according to the direction vector of the light source extracted from the shadow color calculation data table (2) 6 and the angle θ of the side of the component, Color of each side of the part (eg R
The BG value) is calculated and displayed.
【００１２】この際、部品形状データ４に予め設定した
輪郭幅だけ、演算した陰影色で表示するようにしてい
る。従って、部品２の基本色をもとに辺の左上方などか
ら光を照射したときの陰影色を自動的に生成して表示す
ることにより、部品２の陰影表示をより現実的でリアル
に行い、使用感の良いグラフィカルユーザインタフェイ
スを提供することが可能となる。At this time, only the contour width preset in the component shape data 4 is displayed in the calculated shade color. Therefore, the shade display of the component 2 is made more realistic and realistic by automatically generating and displaying the shade color when light is emitted from the upper left side of the side based on the basic color of the component 2. It is possible to provide a graphical user interface with a good usability.
【００１３】[0013]
【実施例】次に、図１から図６を用いて本発明の実施例
の構成および動作を順次詳細に説明する。DESCRIPTION OF THE PREFERRED EMBODIMENTS Next, the structure and operation of an embodiment of the present invention will be described in detail with reference to FIGS.
【００１４】図１は、本発明の１実施例構成図を示す。
図１において、ウィンドウ１は、ボタンやスイッチなど
の部品２をグラフィカルに表示するウィンドウであっ
て、これらの部品２を押下などして所定の処理（コマン
ド起動）を行ったりなどするためのウィンドウである。FIG. 1 shows a block diagram of an embodiment of the present invention.
In FIG. 1, a window 1 is a window for graphically displaying components 2 such as buttons and switches, and is a window for performing predetermined processing (command activation) by pressing these components 2 or the like. is there.
【００１５】部品２は、ボタンやスイッチなどの各種操
作を指示したり、その結果を表示したりするものであっ
て、グラフィカルユーザインタフェイスを実現するため
の各種部品である。The component 2 is for instructing various operations such as buttons and switches and displaying the results thereof, and is various components for realizing a graphical user interface.
【００１６】陰影表示部３は、部品２に陰影色を自動的
に生成して表示するものであって、部品形状データ４、
陰影色演算用データテーブル５、６を参照し、部品２の
辺の陰影色を生成して表示するものである。The shadow display unit 3 is for automatically generating and displaying a shadow color on the component 2, and the component shape data 4,
The shading color calculation data tables 5 and 6 are referred to, and the shading colors of the sides of the component 2 are generated and displayed.
【００１７】部品形状データ４は、部品の形状、位置、
基本色、輪郭幅などを予め設定したものである。ここ
で、形状は、部品の形状であって、矩形、三角形などの
形状である。位置は、部品のウィンドウ上の相対的な位
置である。基本色は、部品の色であって、例えばＲＧＢ
値によって表現する色である。輪郭幅は、部品の縁に陰
影を付与する辺の輪郭幅であって、例えば８ピクセル
（８画素）である。The part shape data 4 includes the shape, position, and
The basic color, contour width, etc. are set in advance. Here, the shape is a shape of a part, such as a rectangle or a triangle. The position is the relative position of the part on the window. The basic color is the color of the part, such as RGB.
It is a color represented by a value. The contour width is the contour width of the side that gives a shadow to the edge of the component, and is, for example, 8 pixels (8 pixels).
【００１８】陰影色演算用データテーブル（１）５は、
部品の陰影色を生成する比率を予め設定したテーブルで
ある。ここで、上辺用内分比率は上辺（上段の部品２の
説明参照）の内分比率であって、白色（Ｒ＝Ｇ＝Ｂ＝
１．０）と基本色との間の色を按分するものである（図
３、図４を用いて後述する）。左辺用内分比率、下辺用
内分比率、右辺用内分比率も同様である。これら各内分
比率で按分した色で、上辺、左辺、下辺、右辺を表示す
る。これにより、部品２の基本色に対応した陰影色を付
与して表示でき、リアルな立体表示を行うことが可能と
なる。The shade color calculation data table (1) 5 is
9 is a table in which a ratio of generating a shade color of a part is preset. Here, the internal division ratio for the upper side is the internal division ratio of the upper side (see the description of the upper part 2), and is white (R = G = B =
1.0) and the basic colors are proportionally divided (described later with reference to FIGS. 3 and 4). The same applies to the left side internal division ratio, the lower side internal division ratio, and the right side internal division ratio. The upper side, the left side, the lower side, and the right side are displayed in colors proportional to each of these internal division ratios. As a result, a shade color corresponding to the basic color of the component 2 can be added and displayed, and a realistic three-dimensional display can be performed.
【００１９】陰影色演算用データテーブル（２）６は、
光源の方位ベクトルおよび部品の辺の角度θを予め設定
したものである。ここで、光源の方位ベクトルは、図６
に示すように、光源の方位を表すベクトルである。ベー
スに対する立ち上がり角度θは、既述した部品２の辺の
角度θに対応し、図６の（ａ）に示すように、ベースに
対する辺（上辺、下辺、左辺、右辺）の角度θである。
このベースに対する立ち上がり角度θとしたときの各辺
の法線と、光源の方位ベクトルとが一致するときに最も
明るく当該辺を色表示する。The shadow color calculation data table (2) 6 is
The direction vector of the light source and the angle θ of the side of the component are set in advance. Here, the direction vector of the light source is as shown in FIG.
Is a vector representing the direction of the light source. The rising angle θ with respect to the base corresponds to the angle θ of the side of the component 2 described above, and is the angle θ of the side (upper side, lower side, left side, right side) with respect to the base as shown in FIG. 6A.
When the normal line of each side when the rising angle θ with respect to the base coincides with the azimuth vector of the light source, the side is displayed brightest in color.
【００２０】まず、陰影色演算用データテーブル（１）
５を用いたときの図１の構成の動作を、図２から図４を
用いて詳細に説明する。図２は、本発明の動作説明フロ
ーチャートである。First, a shade color calculation data table (1)
The operation of the configuration shown in FIG. 1 when using No. 5 will be described in detail with reference to FIGS. FIG. 2 is a flowchart for explaining the operation of the present invention.
【００２１】図２において、Ｓ１は、部品全体を指定の
部品色で塗りつぶす。これは、図１のウィンドウ１内の
部品２を基本色で全体を塗りつぶす。具体的に言えば、
ウィンドウ１内の、例えば図１のボタンの部品形状デー
タ４を参照し、位置情報で指定された、左上座標（１０
０、１５０）、右下座標（２００、２５０）に形状情報
で指定された矩形内の全体を、基本色情報で指定された
“Ｒ＝０．７、Ｇ＝０．５、Ｂ＝０．２”の基本色によ
って塗りつぶす。In FIG. 2, S1 fills the entire part with a specified part color. This fills the entire part 2 in the window 1 of FIG. 1 with the basic color. Specifically,
For example, referring to the part shape data 4 of the button in FIG. 1 in the window 1, the upper left coordinates (10
0, 150) and the lower right coordinates (200, 250) within the rectangle specified by the shape information, the entire area specified by the basic color information is “R = 0.7, G = 0.5, B = 0. Fill with 2 "basic color.
【００２２】Ｓ２は、部品色（基本色）のＲＧＢ値を３
次元空間内の点とし、ｏに格納する（図３の（ａ）、
（ｂ）の基本色のＲＧＢ値をｏに格納する）。Ｓ３は、
白色のＲＧＢ値（Ｒ＝Ｇ＝Ｂ＝１）を３次元空間内の点
とし、ｗに格納する（図３の（ａ）の白色（Ｗｈｉｔ
ｅ）のＲ＝Ｇ＝Ｂ＝１値をｗに格納する）。In S2, the RGB value of the component color (basic color) is set to 3
It is a point in the dimensional space and is stored in o ((a) in FIG. 3,
The RGB value of the basic color of (b) is stored in o). S3 is
White RGB values (R = G = B = 1) are set as points in the three-dimensional space and stored in w (white (Whit in FIG. 3A) (Whit).
Store the R = G = B = 1 value of e) in w).
【００２３】Ｓ４は、黒色のＲＧＢ値（Ｒ＝Ｇ＝Ｂ＝
０）を３次元空間内の点とし、ｂに格納する（図３の
（ｂ）の黒色（Ｂｌａｃｋ）のＲ＝Ｇ＝Ｂ＝０値をｂに
格納する）。S4 is the RGB value of black (R = G = B =
0) is set as a point in the three-dimensional space and stored in b (the R = G = B = 0 value of black (Black) in FIG. 3B is stored in b).
【００２４】以上によって、図３の（ａ）、（ｂ）の 基本色＝ｏ 白色＝ｗ 黒色＝ｂ となる。From the above, the basic color of FIG. 3A and FIG. 3B = o white = w black = b.
【００２５】Ｓ５は、ｏとｗを上辺用の比率で内分する
点をＲＧＢ空間内の点とみなし、Ｕとする。ここで、 Ｕ＝（３ｗ＋ｏ）／４・・・・・・・・・・・・・・・・・・・・・（１） である。これは、図１の陰影色演算用データテーブル
（１）５から、上辺用内分比率が３：１であるので、図
３の（ａ）で求める内分点の色Ｕとすると、 （Ｕ−ｏ）：（ｗ−Ｕ）＝３：１ となり、この内分点の色Ｕを、上式（１）と求めたもの
である。In S5, a point that internally divides o and w at the ratio for the upper side is regarded as a point in the RGB space, and is set to U. Here, U = (3w + o) / 4 (1). This is because the internal division ratio for the upper side is 3: 1 from the shade color calculation data table (1) 5 in FIG. 1, and the color U of the internal division point obtained in FIG. −o) :( w−U) = 3: 1, and the color U at this internally dividing point is obtained by the above equation (1).
【００２６】Ｓ６は、ｏとｗを左辺用の比率で内分する
点をＲＧＢ空間内の点とみなし、Ｌとする。ここで、 Ｌ＝（２ｗ＋ｏ）／３・・・・・・・・・・・・・・・・・・・・・（２） である。これは、図１の陰影色演算用データテーブル
（１）５から、左辺用内分比率が２：１であるので、図
３の（ａ）で求める内分点の色Ｌとすると、 （Ｌ−ｏ）：（ｗ−Ｌ）＝２：１ となり、この内分点の色Ｕを、上式（２）と求めたもの
である。In step S6, a point that internally divides o and w by the ratio for the left side is regarded as a point in the RGB space and is set to L. Here, L = (2w + o) / 3 ... (2). This is because the left side internal division ratio is 2: 1 from the shade color calculation data table (1) 5 in FIG. 1, and the color L of the internal division point obtained in FIG. −o) :( w−L) = 2: 1, and the color U at this internal division point is obtained by the above equation (2).
【００２７】Ｓ７は、ｏとｂを下辺用の比率で内分する
点をＲＧＢ空間内の点とみなし、Ｄとする。ここで、 Ｄ＝（３ｂ＋ｏ）／４・・・・・・・・・・・・・・・・・・・・・（３） である。これは、図１の陰影色演算用データテーブル
（１）５から、下辺用内分比率が３：１であるので、図
３の（ｂ）で求める内分点の色Ｄとすると、 （ｏ−Ｄ）：（Ｄ−ｂ）＝３：１ となり、この内分点の色Ｄを、上式（３）と求めたもの
である。In S7, a point that internally divides o and b at the ratio for the lower side is regarded as a point in the RGB space, and is set as D. Here, D = (3b + o) / 4 (3). This is because the lower side internal division ratio is 3: 1 from the shade color calculation data table (1) 5 in FIG. 1, and the color D of the internal division point obtained in FIG. -D) :( D-b) = 3: 1, and the color D at this internally dividing point is obtained by the above equation (3).
【００２８】Ｓ８は、ｏとｂを右辺用の比率で内分する
点をＲＧＢ空間内の点とみなし、Ｒとする。ここで、 Ｒ＝（２ｂ＋ｏ）／３・・・・・・・・・・・・・・・・・・・・・（４） である。これは、図１の陰影色演算用データテーブル
（１）５から、右辺用内分比率が２：１であるので、図
３の（ｂ）で求める内分点の色Ｒとすると、 （ｏ−Ｒ）：（Ｒ−ｂ）＝２：１ となり、この内分点の色Ｒを、上式（４）を求めたもの
である。In S8, a point that internally divides o and b by the ratio for the right side is regarded as a point in the RGB space, and is set as R. Here, R = (2b + o) / 3 (4). This is because the right-side internal division ratio is 2: 1 from the shade color calculation data table (1) 5 in FIG. 1, so that the color R of the internal division point obtained in FIG. -R) :( R-b) = 2: 1, and the color R at this internally dividing point is obtained by the above equation (4).
【００２９】Ｓ９は、色Ｕによって部品２の上側の指定
された幅の領域を塗りつぶす。これにより、図１のウィ
ンドウ１内の部品２の上辺と記載した部分を、色Ｕで塗
りつぶし、陰影をつける。In step S9, the area of the designated width above the component 2 is filled with the color U. As a result, the portion described as the upper side of the component 2 in the window 1 of FIG. 1 is filled with the color U and shaded.
【００３０】Ｓ１０は、色Ｌによって部品２の左側の指
定された幅の領域を塗りつぶす。これにより、図１のウ
ィンドウ１内の部品２の左辺と記載した部分を、色Ｌで
塗りつぶし、陰影をつける。In step S10, the area of the designated width on the left side of the component 2 is filled with the color L. As a result, the portion described as the left side of the component 2 in the window 1 in FIG. 1 is filled with the color L and shaded.
【００３１】Ｓ１１は、色Ｄによって部品２の下側の指
定された幅の領域を塗りつぶす。これにより、図１のウ
ィンドウ１内の部品２の下辺と記載した部分を、色Ｄで
塗りつぶし、陰影をつける。In step S11, the area of the specified width on the lower side of the component 2 is filled with the color D. As a result, the portion described as the lower side of the component 2 in the window 1 of FIG. 1 is filled with the color D and shaded.
【００３２】Ｓ１２は、色Ｒによって部品２の右側の指
定された幅の領域を塗りつぶす。これにより、図１のウ
ィンドウ１内の部品２の右辺と記載した部分を、色Ｒで
塗りつぶし、陰影をつける。In step S12, the area of the specified width on the right side of the component 2 is filled with the color R. As a result, the portion described as the right side of the component 2 in the window 1 of FIG. 1 is filled with the color R and shaded.
【００３３】以上によって、部品色（基本色）で部品２
の全体を塗りつぶし、次に上辺、左辺、下辺、右辺の色
Ｕ、Ｌ、Ｄ、Ｒについて、図１の陰影色演算用データテ
ーブル（１）５を参照して上辺用内分比率、左辺用内分
比率、下辺用内分比率、右辺用内分比率をもとに算出
し、これら色Ｕ、Ｌ、Ｄ、Ｒによって、部品形状データ
４の輪郭幅（ここでは８ピクセル）分の上辺、左辺、下
辺、右辺の部分を塗りつぶし、図１の部品２に示すよう
に表示する。これにより、陰影色演算用データテーブル
（１）５に各辺の内分比率を設定および部品形状データ
４に輪郭幅を設定すると、陰影表示部３が自動的に部品
２に陰影を付与して表示することとなる。As described above, the component 2 is colored in the component color (basic color).
For the upper side, the left side, the lower side, and the right side colors U, L, D, and R, refer to the shade color calculation data table (1) 5 in FIG. It is calculated based on the internal division ratio, the internal division ratio for the lower side, and the internal division ratio for the right side, and by these colors U, L, D, R, the upper side of the contour width (8 pixels in this case) of the part shape data 4, The left side, the lower side, and the right side are painted out and displayed as shown in the part 2 in FIG. As a result, when the internal division ratio of each side is set in the shade color calculation data table (1) 5 and the contour width is set in the component shape data 4, the shade display unit 3 automatically gives a shade to the component 2. It will be displayed.
【００３４】図３は、本発明の各辺の色の算出説明図を
示す。図３の（ａ）は、上辺、左辺の色の算出説明図を
示す。ここで、Ｒ（Ｒｅｄ）、Ｂ（Ｂｌｕｅ）、Ｇ（Ｇ
ｒｅｅｎ）を座標系とし、部品２の色を基本色ｏ、白色
ｗ（Ｗｈｉｔｅ）とし、内分点の上辺の色Ｕ、左辺の色
Ｌとして算出するときのものである（式（１）、式
（２）参照）。FIG. 3 is a diagram for explaining calculation of colors on each side according to the present invention. FIG. 3A shows a diagram for explaining calculation of colors on the upper side and the left side. Here, R (Red), B (Blue), G (G
reen) is the coordinate system, the color of the component 2 is the basic color o and the white w (White), and the upper side color U of the interior division point is the color U and the left side color L is the formula (1), See formula (2)).
【００３５】図３の（ｂ）は、下辺、右辺の色の算出説
明図を示す。ここで、Ｒ（Ｒｅｄ）、Ｂ（Ｂｌｕｅ）、
Ｇ（Ｇｒｅｅｎ）を座標系とし、部品２の色を基本色
ｏ、黒色ｂ（Ｂｌａｃｋ）とし、内分点の下辺の色Ｄ、
右辺の色Ｒとして算出するときのものである（式
（３）、式（４）参照）。FIG. 3 (b) shows a diagram for explaining calculation of colors on the lower side and the right side. Here, R (Red), B (Blue),
G (Green) is the coordinate system, the color of the component 2 is the basic color o and black b (Black), and the color of the lower side of the interior division point is D,
This is when the color R on the right side is calculated (see equations (3) and (4)).
【００３６】図４は、本発明の内分説明図を示す。図４
の（ａ）は、上辺の色Ｕの内分の様子を示す。これは、
図１の陰影色演算用データテーブル（１）５から上辺用
内分比率が３：１を取り出したときのものであって（図
３の（ａ）参照）、 （Ｕ−ｏ）：（ｗ−Ｕ）＝３：１ となる。従って、既述した式（１）が得られる。FIG. 4 shows a diagram for explaining the internal division of the present invention. Figure 4
(A) shows the state of the inner part of the color U on the upper side. this is,
When the upper side internal division ratio of 3: 1 is extracted from the shade color calculation data table (1) 5 of FIG. 1 (see (a) of FIG. 3), (U−o) :( w -U) = 3: 1. Therefore, the above-mentioned formula (1) is obtained.
【００３７】図４の（ｂ）は、左辺の色Ｌの内分の様子
を示す。これは、図１の陰影色演算用データテーブル
（１）５から左辺用内分比率が２：１を取り出したとき
のものであって（図３の（ａ）参照）、 （Ｌ−ｏ）：（ｗ−Ｌ）＝２：１ となる。従って、既述した式（２）が得られる。FIG. 4B shows a state of the inner part of the color L on the left side. This is when the left side internal division ratio of 2: 1 is taken out from the shade color calculation data table (1) 5 of FIG. 1 (see (a) of FIG. 3), (Lo) : (W−L) = 2: 1. Therefore, the above-mentioned formula (2) is obtained.
【００３８】図４の（ｃ）は、下辺の色Ｄの内分の様子
を示す。これは、図１の陰影色演算用データテーブル
（１）５から下辺用内分比率が３：１を取り出したとき
のものであって（図３の（ｂ）参照）、 （ｏ−Ｄ）：（Ｄ−ｂ）＝３：１ となる。従って、既述した式（３）が得られる。FIG. 4C shows a state of the inner part of the color D on the lower side. This is when the lower side internal division ratio of 3: 1 is taken out from the shade color calculation data table (1) 5 of FIG. 1 (see (b) of FIG. 3), (o-D) : (D−b) = 3: 1. Therefore, the above-mentioned formula (3) is obtained.
【００３９】図４の（ｄ）は、右辺の色Ｒの内分の様子
を示す。これは、図１の陰影色演算用データテーブル
（１）５から右辺用内分比率が２：１を取り出したとき
のものであって（図３の（ｂ）参照）、 （ｏ−Ｒ）：（Ｒ−ｂ）＝２：１ となる。従って、既述した式（４）が得られる。FIG. 4D shows a state of the inner part of the color R on the right side. This is when the right side internal division ratio of 2: 1 is taken out from the shade color calculation data table (1) 5 of FIG. 1 (see (b) of FIG. 3), (o-R) : (Rb) = 2: 1. Therefore, the above-mentioned formula (4) is obtained.
【００４０】次に、陰影色演算用データテーブル（２）
６を用いたときの図１の構成の動作を、図５および図６
を用いて詳細に説明する。図５は、本発明の他の動作説
明フローチャートである。Next, a shade color calculation data table (2)
6 is used, the operation of the configuration of FIG.
Will be described in detail. FIG. 5 is a flowchart for explaining another operation of the present invention.
【００４１】図５において、Ｓ２１は、部品全体を指定
の部品色（基本色）で塗りつぶす。これは、図１のウィ
ンドウ１内の部品２を基本色で全体を塗りつぶす。具体
的に言えば、ウィンドウ１内に、図１のボタンの部品形
状データ４を参照して、位置情報で指定された、左上座
標（１００、１５０）、右下座標（２００、２５０）に
形状情報で指定された矩形内の全体を、基本色情報で指
定された“Ｒ＝０．７、Ｇ＝０．５、Ｂ＝０．２”の基
本色によって塗りつぶす。In FIG. 5, in S21, the entire part is painted in the specified part color (basic color). This fills the entire part 2 in the window 1 of FIG. 1 with the basic color. Specifically, referring to the part shape data 4 of the button in FIG. 1 in the window 1, the shape is specified at the upper left coordinates (100, 150) and the lower right coordinates (200, 250) specified by the position information. The entire rectangle specified by the information is filled with the basic color of “R = 0.7, G = 0.5, B = 0.2” specified by the basic color information.
【００４２】Ｓ２２は、上辺に対応する面の法線ベクト
ルを、ベースに対する立ち上がり角度θから求める。こ
れは、図６の（ｂ）に示すように、図１の陰影色演算用
データテーブル（２）６から取り出したベースに対する
立ち上がり角度θ＝４０°のときに、この立ち上がり角
度θ＝４０°の面の法線ベクトルを図示のように求め
る。In S22, the normal vector of the surface corresponding to the upper side is obtained from the rising angle θ with respect to the base. As shown in FIG. 6B, when the rising angle θ = 40 ° with respect to the base extracted from the shade color calculation data table (2) 6 in FIG. 1, the rising angle θ = 40 ° Find the normal vector of the surface as shown.
【００４３】Ｓ２３は、上辺に対応する法線ベクトル
と、光源の方位ベクトルから面の明るさを求める。これ
は、光源の方位ベクトルと、求めた上辺の法線ベクトル
とが一致したときに最大の明るさとし、ずれるに従い暗
くするように面（辺）の明るさを求める。In step S23, the brightness of the surface is obtained from the normal vector corresponding to the upper side and the azimuth vector of the light source. This is the maximum brightness when the azimuth vector of the light source and the calculated normal vector of the upper side are the same, and the brightness of the surface (side) is calculated so that it becomes darker as it shifts.
【００４４】Ｓ２４は、上辺に対応する面の明るさと基
本色から上辺の陰影色を求める。これは、Ｓ２３で求め
た上辺の面の明るさをもとに、基本色と白色を内分した
陰影色を求める。In step S24, the shaded color of the upper side is obtained from the brightness and the basic color of the surface corresponding to the upper side. This is to obtain a shaded color by internally dividing the basic color and white based on the brightness of the upper surface obtained in S23.
【００４５】同様に、Ｓ２５、Ｓ２６、Ｓ２７によっ
て、左辺の陰影色を求める。Ｓ２８、Ｓ２９、Ｓ３０に
よって、下辺の陰影色を求める。Similarly, the shadow color of the left side is obtained by S25, S26 and S27. The shadow color of the lower side is obtained by S28, S29, and S30.
【００４６】Ｓ３１、Ｓ３２、Ｓ３３によって、右辺の
陰影色を求める。Ｓ３４は、求めた陰影色で部品の輪郭
の指定された幅の領域（辺）を塗りつぶす。これは、図
６の（ａ）のウィンドウ１内の部品２について、図１の
部品形状データ４の輪郭幅分の幅を持つ上辺、左辺、下
辺、右辺の領域をそれぞれの陰影色で塗りつぶし、陰影
をつける。The shadow color of the right side is obtained by S31, S32 and S33. In S34, the area (side) of the specified width of the contour of the part is filled with the obtained shade color. This is to fill the areas of the upper side, the left side, the lower side, and the right side having the width corresponding to the contour width of the part shape data 4 of FIG. 1 for the part 2 in the window 1 of FIG. Add a shade.
【００４７】以上によって、部品色（基本色）で部品２
の全体を塗りつぶし、次に光源の方位ベクトルと、ベー
スに対する立ち上がり角度θによって決まる部品２の各
辺の法線ベクトルとによって各面の明るさを求め、これ
ら各面の明るさに対応する各辺の陰影色をそれぞれ求
め、これら陰影色によって、部品形状データ４の輪郭幅
（ここでは８ビクセル）分の上辺、左辺、下辺、右辺の
部分を塗りつぶし、図６の（ａ）の部品２に示すように
陰影表示する。これにより、陰影色演算用データテーブ
ル（２）６の光源の方位ベクトルおよびベースに対する
立ち上がり角度θ、更に部品形状データ４に輪郭幅を設
定すると、陰影表示部３が自動的に部品２に陰影を付与
して表示することとなる。As described above, the component 2 is colored in the component color (basic color).
Of the light source and the normal vector of each side of the component 2 determined by the rising angle θ with respect to the base to obtain the brightness of each surface, and each side corresponding to the brightness of each surface. Of the outline shape width (here, 8 vixels) of the part shape data 4 is filled with these shade colors, and the parts on the upper side, the left side, the lower side, and the right side are filled, and shown in the part 2 of FIG. To display shadows. As a result, when the azimuth vector of the light source in the shade color calculation data table (2) 6 and the rising angle θ with respect to the base and the contour width are set in the component shape data 4, the shade display unit 3 automatically shades the component 2. It will be given and displayed.
【００４８】図６は、本発明の他の動作説明図を示す。
図６の（ａ）は、ウィンドウ１内に部品２を陰影表示し
た例を示す。ここで、座標を右側に記載したように、
Ｘ、Ｙ、Ｚとする。FIG. 6 shows another operation explanatory diagram of the present invention.
FIG. 6A shows an example in which the component 2 is shaded in the window 1. Here, as shown on the right side of the coordinates,
X, Y, Z.
【００４９】図６の（ｂ）は、ベースに対する立ち上が
り角度θを示す。これは、図１の陰影色演算用データテ
ーブル（２）６に設定する、ベースに対する立ち上がり
角度θを模式的に表したものであって、部品２のベース
に対して図示θをベースに対する立ち上がり角度とす
る。また、部品形状データ４に設定する輪郭幅は、図示
のように、Ｘ方向（Ｙ方向）の幅である。FIG. 6B shows the rising angle θ with respect to the base. This is a schematic representation of the rising angle θ with respect to the base set in the shade color calculation data table (2) 6 of FIG. And The contour width set in the component shape data 4 is the width in the X direction (Y direction) as shown in the figure.
【００５０】[0050]
【発明の効果】以上説明したように、本発明によれば、
部品２の基本色をもとに辺の左上方などから光を照射し
たときの陰影色を自動生成して表示する構成を採用して
いるため、部品の基本色に従った明るい色および暗い色
の陰影色を付与して表示でき、より現実的でリアルな表
示を行い、使用感の良いグラフィカルユーザインタフェ
イスを提供することができる。特に、 （１） 部品形状データ４に輪郭幅を設けて任意に設定
可能としているため、部品の陰影色を表示する辺の幅を
容易に調整できる。As described above, according to the present invention,
Since a shade color is automatically generated and displayed when light is radiated from the upper left of the side based on the basic color of the component 2, bright and dark colors according to the basic color of the component are used. It is possible to provide a graphical user interface with a good usability by providing a shaded color for the display. In particular, (1) since the contour width is provided in the component shape data 4 and can be arbitrarily set, the width of the side displaying the shade color of the component can be easily adjusted.
【００５１】（２） 陰影色演算用データテーブル
（１）５に上辺、左辺、下辺、右辺など毎に内分比率を
任意に設定可能としているため、陰影を付与する光線の
方向を容易に調整できる。(2) Since the interior ratio can be arbitrarily set for each of the upper side, the left side, the lower side, the right side, etc. in the shade color calculation data table (1) 5, it is possible to easily adjust the direction of the ray to be shaded. it can.
【００５２】（３） 陰影色演算用データテーブル
（２）６に光源の方位ベクトルおよびベースに対する立
ち上がり角度θなどを設定し、部品を疑似的に３次元構
造としたときに、光源の方位ベクトルの方向から照射し
たときの明るさに対応する陰影色で、部品の陰影表示を
行っているため、３次元感覚のよりリアルな陰影表示を
簡単な演算処理によって実現できる。(3) When the azimuth vector of the light source and the rising angle θ with respect to the base are set in the shade color calculation data table (2) 6 and the parts are pseudo-three-dimensionally structured, Since the shade display of the part is performed with the shade color corresponding to the brightness when the light is emitted from the direction, a more realistic shade display with a three-dimensional feeling can be realized by a simple calculation process.
【図１】本発明の１実施例構成図である。FIG. 1 is a configuration diagram of an embodiment of the present invention.
【図２】本発明の動作説明フローチャートである。FIG. 2 is a flowchart for explaining the operation of the present invention.
【図３】本発明の各辺の色の算出説明図である。FIG. 3 is an explanatory diagram of color calculation of each side according to the present invention.
【図４】本発明の内分説明図である。FIG. 4 is an explanatory diagram of internal contents of the present invention.
【図５】本発明の他の動作説明フローチャートである。FIG. 5 is a flowchart for explaining another operation of the present invention.
【図６】本発明の他の動作説明図である。FIG. 6 is another operation explanatory view of the present invention.
【図７】従来技術の説明図である。FIG. 7 is an explanatory diagram of a conventional technique.
１：ウィンドウ ２：部品 ３：陰影表示部 ４：部品形状データ ５：陰影色演算用データテーブル（１） ６：陰影色演算用データテーブル（２） ｏ：部品の基本色 ｗ：白色 ｂ：黒色 Ｕ：上辺の陰影色 Ｄ：下辺の陰影色 Ｌ：左辺の陰影色 Ｒ：右辺の陰影色 1: Window 2: Component 3: Shade display part 4: Component shape data 5: Shade color calculation data table (1) 6: Shade color calculation data table (2) o: Basic color of parts w: White b: Black U: Shade color of upper side D: Shade color of lower side L: Shade color of left side R: Shade color of right side
Claims (3)
て、 部品の形状、基本色を予め設定する部品形状データ
（４）と、 部品の陰影色を生成する比率を予め設定する陰影色演算
用データテーブル（５）とを備え、 上記部品形状データ（４）の基本色をもとに、上記陰影
色演算用データテーブル（５）から取り出した比率に従
って、部品の各辺の色（例えばＲＢＧ値）を演算し、表
示するように構成したことを特徴とする陰影表示方式。1. A shading display method for displaying shading of a part, for part shape data (4) for presetting a shape and basic color of a part, and for shading color calculation for presetting a ratio for generating a shading color of a part. A data table (5), and based on the basic color of the component shape data (4), the color of each side of the component (for example, RBG value) according to the ratio extracted from the shadow color calculation data table (5). ) Is calculated and displayed.
て、 部品の形状、基本色を予め設定する部品形状データ
（４）と、 光源の方位ベクトルおよび部品の辺の角度θを予め設定
した陰影色演算用データテーブル（６）とを備え、 上記部品形状データ（４）の基本色をもとに、上記陰影
色演算用データテーブル（６）から取り出した光源の方
位ベクトルおよび部品の辺の角度θに従って、部品の各
辺の色（例えばＲＢＧ値）を演算し、表示するように構
成したことを特徴とする陰影表示方式。2. A shadow display method for displaying a shadow of a part, wherein part shape data (4) for presetting a shape and basic color of the part, and a shadow for which a direction vector of a light source and an angle θ of a side of the part are preset. A color calculation data table (6), and based on the basic color of the component shape data (4), the direction vector of the light source and the side angle of the component extracted from the shadow color calculation data table (6). A shade display method characterized in that the color (for example, RBG value) of each side of the component is calculated and displayed according to θ.
基本色の他に輪郭幅を予め設定しておき、上記演算した
色で当該輪郭幅だけの辺を表示するように構成したこと
を特徴とする請求項１記載および請求項２記載の陰影表
示方式。3. The shape of the part in the part shape data (4),
The shade display method according to claim 1 or 2, characterized in that a contour width is set in advance in addition to the basic color, and a side corresponding to the contour width is displayed in the calculated color. ..
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP4126994A JPH05324855A (en) | 1992-05-20 | 1992-05-20 | Shading display system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| JP4126994A JPH05324855A (en) | 1992-05-20 | 1992-05-20 | Shading display system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| JPH05324855A true JPH05324855A (en) | 1993-12-10 |
Family
ID=14949035
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| JP4126994A Pending JPH05324855A (en) | 1992-05-20 | 1992-05-20 | Shading display system |
Country Status (1)
| Country | Link |
|---|---|
| JP (1) | JPH05324855A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US4863085A (en) * | 1986-06-06 | 1989-09-05 | Noritsu Kenkyu Center Co., Ltd. | Apparatus for transporting a strip of photographic printing paper in a printer |
| WO2023032956A1 (en) * | 2021-08-31 | 2023-03-09 | 日本精機株式会社 | Display control device, head-up display device, and display control method |
-
1992
- 1992-05-20 JP JP4126994A patent/JPH05324855A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US4863085A (en) * | 1986-06-06 | 1989-09-05 | Noritsu Kenkyu Center Co., Ltd. | Apparatus for transporting a strip of photographic printing paper in a printer |
| WO2023032956A1 (en) * | 2021-08-31 | 2023-03-09 | 日本精機株式会社 | Display control device, head-up display device, and display control method |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP0313796B1 (en) | Computer display color control and selection system | |
| US5369736A (en) | Texture mapping method | |
| US5870098A (en) | Method for rendering shadows on a graphical display | |
| US5103407A (en) | Apparatus and method for color selection | |
| US6971071B1 (en) | System and method for implementing an image ancillary to a cursor | |
| JPH0714031A (en) | Drawing method of scalerable three-dimensional boundary line | |
| WO1998038591A9 (en) | Method for rendering shadows on a graphical display | |
| KR101058612B1 (en) | Color correction method of image using multi-touch touch screen | |
| JPH0285970A (en) | Picture forming device and system of continuous tone to which smooth shadow is formed | |
| US7671871B2 (en) | Graphical user interface for color correction using curves | |
| JPH07254072A (en) | Texture mapping method and device therefor | |
| JPH05324855A (en) | Shading display system | |
| US20040119723A1 (en) | Apparatus manipulating two-dimensional image in a three-dimensional space | |
| JPH04127279A (en) | Device and method for kinetic path generation of object | |
| Naiman | Color spaces and color contrast | |
| JP2591189B2 (en) | Color image processing method and apparatus | |
| US5185596A (en) | Electronic image modification | |
| JP2795083B2 (en) | Creating the same material appearance image in image processing | |
| Kohtani et al. | Displacement Projection Mapping: a Projection Method to Add Geometric Features beyond the Boundary of the Real Object | |
| JP2701056B2 (en) | Secondary representation method for three-dimensional objects | |
| JPH09146753A (en) | Method and device for displaying multiwindow | |
| JP2847740B2 (en) | Coloring method for achromatic objects | |
| JP3268667B2 (en) | Interactive polygon selection device | |
| JPH04213174A (en) | Computer graphics device | |
| JP2000067266A (en) | Method for displaying and editing raster image and computer aided graphic processing system utilizing the method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| A521 | Written amendment |
Effective date: 20031222 Free format text: JAPANESE INTERMEDIATE CODE: A523 |
|
| TRDD | Decision of grant or rejection written | ||
| A01 | Written decision to grant a patent or to grant a registration (utility model) |
Free format text: JAPANESE INTERMEDIATE CODE: A01 Effective date: 20040127 |
|
| A61 | First payment of annual fees (during grant procedure) |
Free format text: JAPANESE INTERMEDIATE CODE: A61 Effective date: 20040209 |
|
| LAPS | Cancellation because of no payment of annual fees |