IT-Tude

Rethinking Digital Humans: A Lightweight Approach to Web-Based Interactive Avatars

2026-09-02T20:42:41.012-07:00

Building responsive, interactive 3D avatars for web applications has traditionally been a daunting challenge. Developers often find themselves caught between two complex and costly extremes:

Heavy Game Engine Pipelines: Workflows relying on heavy traditional engines like Unity or Unreal Engine often require dedicated streaming servers, complex WebGL exports, or high client-side hardware requirements, making integration into standard web interfaces overly cumbersome.
Expensive SaaS AI Streaming: Modern cloud-based AI digital human platforms offer quick results, but they introduce significant latency, rely heavily on constant video streaming, and incur expensive per-minute pricing models that scale poorly for high-traffic sites.

Navigating through these trade-offs requires bridging multiple disciplines—3D character rigging, animation state management, real-time audio processing, and web rendering performance.

By deconstructing the digital human pipeline, it becomes possible to achieve dynamic, real-time 3D interaction directly inside the browser using an optimized, hybrid client-side framework.

Key Architectural Pillars

1. Modular 3D Avatar Foundation (Ready Player Me)

Open & Accessible: Utilizes lightweight, pre-rigged humanoid .glb assets designed specifically for web performance.
Standardized Hierarchy: Built on standard bone structures, ensuring full compatibility with custom animation clips authored in external software.
Integrated Morph Targets: Pre-configured with essential facial blendshapes required for expressions and real-time lip-syncing.

2. Decoupled Motion via NLA Actions (Blender & Three.js)

Non-Linear Animation (NLA): Body gestures (e.g., Idle, Wave, Nod, Explain) are authored in Blender as independent NLA Actions and exported within a single binary .glb package.
Contextual Triggering: Three.js processes these clips dynamically via an AnimationMixer. Gestures are triggered programmatically or extracted from context metadata generated during response synthesis (e.g., [ANIM: NOD]).

3. Dual-Layer Facial Synchronization (TTS Visemes & Blendshapes)

Layered Deformation: Morph Targets (Blendshapes) operate independently of Bone Animations. Local mesh deformation for mouth movements occurs seamlessly without disrupting global head or neck rotations.
Timeline-Driven Weighting: Real-time viseme timeline data emitted by Text-to-Speech (TTS) engines directly controls blendshape weights in Three.js, maintaining precise lip-sync while skeletal gesture loops execute simultaneously.

4. Native DOM Overlay & Web Integration

Direct Canvas Rendering: Renders seamlessly within a standard HTML5 <canvas> viewport managed by Three.js.
Layout Synergy: Configured with CSS fixed positioning and high z-index layering, allowing the avatar to operate as an interactive, non-blocking UI widget floating above standard web application layouts.

End-to-End Execution Flow

Input Signal $\rightarrow$ Captured via user text or audio stream.
Response Processing $\rightarrow$ Returns structured text, emotion/gesture metadata, and TTS audio alignment data.
Facial Layer Engine $\rightarrow$ Applies real-time viseme weights to facial morph targets based on audio timestamps.
Skeletal Motion Controller $\rightarrow$ Executes corresponding NLA gesture tracks in parallel.
Client-Side Synthesis $\rightarrow$ Composites motion and audio in real time directly inside the browser canvas.

Regards,

Ian (roytrix@gmail.com)

Blender: Generating Seamless Flag Wave Animation from Base Pose

2026-08-26T09:43:52.704-07:00

Generating Seamless Flag Wave Animation from Base Pose
(7-Bone Setup) Script Blender

Creating natural-looking flag wave animations in Blender often requires manual keyframing across multiple bones, which can be time-consuming to loop perfectly.

This Python script solves that problem by generating a continuous, looping flag wave animation automatically. It works by taking the initial pose of a 7-bone armature at Frame 1 as a baseline profile, sampling that spatial wave profile across the timeline, and applying it smoothly to subsequent keyframes (Frames 25, 50, 75, and 100).

Key Features & How It Works:

Base Pose Sampling: Reads the current Y Location of all 7 bones at Frame 1 to create the initial wave shape.
Traveling Profile Algorithm: Shifts the baseline wave profile along the bone chain across the timeline to simulate wave movement.
Perfect Loop Guarantee: Forces Frame 100 to match Frame 1 exactly, ensuring a 100% seamless looping animation (Frames 1–100).
Automatic Bezier Interpolation: Sets keyframe handles to BEZIER with AUTO handles to provide smooth interpolation without manual graph editing.

Kode Script (Python - Blender API)

import bpy
import math

# ============================================================
# 7-BONE FLAG WAVE FROM FRAME-1 POSE
#
# Armature : Armature.7
# Bones    : Bone.1 - Bone.7
#
# Frame 1   = Reads actual base pose
# Frame 25  = Wave shift
# Frame 50  = Wave shift
# Frame 75  = Wave shift
# Frame 100 = EXACT Frame 1 (Perfect Loop)
#
# Affects Y Location only
# ============================================================

ARMATURE_NAME = "Armature.7"

BONE_NAMES = [
    "Bone.1",
    "Bone.2",
    "Bone.3",
    "Bone.4",
    "Bone.5",
    "Bone.6",
    "Bone.7",
]

KEY_FRAMES = [1, 25, 50, 75, 100]

START_FRAME = 1
END_FRAME = 100

# ============================================================
# GET ARMATURE
# ============================================================

arm = bpy.data.objects.get(ARMATURE_NAME)

if arm is None:
    raise Exception(f"Armature '{ARMATURE_NAME}' not found.")

# ============================================================
# READ FRAME 1 BASE POSE
# ============================================================

bpy.context.scene.frame_set(1)

BASE_Y = []

print("")
print("========================================")
print("FRAME 1 SOURCE POSE")
print("========================================")

for bone_name in BONE_NAMES:
    bone = arm.pose.bones.get(bone_name)

    if bone is None:
        raise Exception(f"Bone '{bone_name}' not found.")

    y = bone.location.y
    BASE_Y.append(y)

    print(f"{bone_name:7s} = {y:+.5f}")

# ============================================================
# PROFILE SAMPLER
#
# Reads 7-bone profile cyclically.
# Can sample positions between two bones.
# ============================================================

def sample_profile(values, position):
    count = len(values)
    position = position % count

    i0 = int(math.floor(position))
    i1 = (i0 + 1) % count
    frac = position - i0

    return values[i0] * (1.0 - frac) + values[i1] * frac

# ============================================================
# DELETE OLD Y ANIMATION
#
# Only targets Bone.1 - Bone.7 Y Location.
# ============================================================

if arm.animation_data and arm.animation_data.action:
    action = arm.animation_data.action

    for fc in list(action.fcurves):
        if fc.array_index != 1:
            continue

        for bone_name in BONE_NAMES:
            target = f'pose.bones["{bone_name}"].location'

            if fc.data_path == target:
                action.fcurves.remove(fc)
                break

# ============================================================
# CREATE WAVE
# ============================================================

BONE_COUNT = len(BONE_NAMES)

for frame in KEY_FRAMES:
    bpy.context.scene.frame_set(frame)

    # Normalized timeline: frame 1 = 0, frame 100 = 1
    t = (frame - START_FRAME) / (END_FRAME - START_FRAME)

    # Profile travels one complete cycle
    shift = t * BONE_COUNT

    for bone_index, bone_name in enumerate(BONE_NAMES):
        bone = arm.pose.bones.get(bone_name)

        if bone is None:
            continue

        # Traveling Profile: "-" moves wave from Bone.1 to Bone.7
        # Change "-" to "+" for reverse direction
        source_position = bone_index - shift
        y = sample_profile(BASE_Y, source_position)

        # APPLY KEYFRAME
        bone.location.y = y
        bone.keyframe_insert(data_path="location", index=1, frame=frame)

# ============================================================
# FORCE FRAME 100 = EXACT FRAME 1
# ============================================================

bpy.context.scene.frame_set(100)

for bone_name, original_y in zip(BONE_NAMES, BASE_Y):
    bone = arm.pose.bones.get(bone_name)

    if bone is None:
        continue

    bone.location.y = original_y
    bone.keyframe_insert(data_path="location", index=1, frame=100)

# ============================================================
# SMOOTH TEMPORAL INTERPOLATION
# ============================================================

if arm.animation_data and arm.animation_data.action:
    action = arm.animation_data.action

    for fc in action.fcurves:
        if fc.array_index != 1:
            continue

        valid = False
        for bone_name in BONE_NAMES:
            if fc.data_path == f'pose.bones["{bone_name}"].location':
                valid = True
                break

        if not valid:
            continue

        for kp in fc.keyframe_points:
            kp.interpolation = 'BEZIER'
            kp.handle_left_type = 'AUTO'
            kp.handle_right_type = 'AUTO'

# ============================================================
# TIMELINE SETUP
# ============================================================

bpy.context.scene.frame_start = 1
bpy.context.scene.frame_end = 100
bpy.context.scene.frame_set(1)

print("")
print("========================================")
print("7-BONE FLAG WAVE CREATED")
print("========================================")
print("Frame 1   = source pose")
print("Frame 25  = traveling wave")
print("Frame 50  = traveling wave")
print("Frame 75  = traveling wave")
print("Frame 100 = exact Frame 1")
print("========================================")

Script Blender: Smooth Auto-Weighting Menggunakan Gaussian Falloff

2026-08-25T17:55:46.710-07:00

Script Blender:
Smooth Auto-Weighting Menggunakan Gaussian Falloff untuk 7 Bone pada Plane
--

Pernahkah Anda merasa kesulitan saat melakukan weight painting manual di Blender, terutama untuk objek seperti bendera, kain, atau tali yang membutuhkan transisi antar bone yang sangat mulus?

Weight painting manual sering kali menghasilkan lekukan yang kaku (sharp/jagged) saat dianimasikan. Metode default Blender (Automatic Weights) pun terkadang kurang presisi jika bentuk mesh kita sederhana seperti Plane.

Artikel ini membagikan script Python khusus untuk Blender yang berfungsi melakukan automatic weight calculation secara presisi menggunakan distribusi kurva Gaussian (Gaussian Falloff). Script ini dirancang untuk mendistribusikan weight secara otomatis pada 7 bone di sepanjang objek Plane, sekaligus memastikan total weight pada setiap vertex selalu ter-normalisasi sempurna (sama dengan 1.0) tanpa mengganggu keyframe atau animasi yang sudah ada.

Cara Kerja Script:

Deteksi Sumbu Otomatis: Membaca posisi awal (Bone.1) hingga akhir (Bone.7) lalu mendeteksi arah sumbu tanpa peduli orientasi objek (X, Y, atau Z).
Kalkulasi Gaussian Falloff: Menghitung pengaruh (influence) tiap bone ke setiap vertex menggunakan fungsi distribusi Gaussian.
Normalisasi Weight: Memastikan penjumlahan seluruh weight dari Bone.1 hingga Bone.7 pada setiap vertex bernilai tepat 1.0.
Proteksi Animasi: Meng-update vertex group tanpa menyentuh data animasi atau keyframe yang sudah tersimpan.

Kode Script (Python - Blender API)

Python
import bpy
import math

# ============================================================
# SMOOTH GAUSSIAN AUTO-WEIGHT
# Plane.005 + Armature.7
#
# Tujuan:
# - Weight Bone.1 ... Bone.7 dibuat sangat smooth
# - Antar bone overlap
# - Total weight per vertex = 1.0
# - Tidak menyentuh animation/keyframe
# ============================================================

MESH_NAME = "Plane.005"
ARMATURE_NAME = "Armature.7"

BONE_NAMES = [
    "Bone.1",
    "Bone.2",
    "Bone.3",
    "Bone.4",
    "Bone.5",
    "Bone.6",
    "Bone.7",
]

# ------------------------------------------------------------
# WIDTH OF INFLUENCE
#
# 0.75 = lebih lokal / tajam
# 1.00 = balanced
# 1.25 = lebih silky / overlap lebar
# 1.50 = sangat lembut
#
# Mulai 1.25 untuk bendera kita.
# ------------------------------------------------------------

SIGMA = 1.25

# ============================================================
# GET OBJECTS
# ============================================================

obj = bpy.data.objects.get(MESH_NAME)
arm = bpy.data.objects.get(ARMATURE_NAME)

if obj is None:
    raise Exception(f"Mesh '{MESH_NAME}' tidak ditemukan")

if arm is None:
    raise Exception(f"Armature '{ARMATURE_NAME}' tidak ditemukan")

if obj.type != 'MESH':
    raise Exception(f"'{MESH_NAME}' bukan Mesh")

if arm.type != 'ARMATURE':
    raise Exception(f"'{ARMATURE_NAME}' bukan Armature")

# ============================================================
# FORCE OBJECT MODE
# ============================================================

if bpy.context.object:
    try:
        bpy.ops.object.mode_set(mode='OBJECT')
    except:
        pass

# ============================================================
# GET BONE POSITIONS
# Kita baca posisi bone dalam LOCAL SPACE mesh.
# ============================================================

bone_positions = []

for bone_name in BONE_NAMES:
    bone = arm.data.bones.get(bone_name)

    if bone is None:
        raise Exception(f"Bone '{bone_name}' tidak ditemukan")

    # bone head -> world
    world_pos = arm.matrix_world @ bone.head_local

    # world -> mesh local
    mesh_pos = obj.matrix_world.inverted() @ world_pos

    bone_positions.append(mesh_pos)

# ============================================================
# DETECT MAIN AXIS
# Cari sumbu sepanjang Bone.1 -> Bone.7.
# Jadi script tidak bergantung apakah mesh memanjang di X/Y/Z.
# ============================================================

start = bone_positions[0]
end = bone_positions[-1]

axis = end - start

if axis.length == 0:
    raise Exception("Bone.1 dan Bone.7 berada di posisi yang sama")

axis.normalize()

# ============================================================
# PROJECT BONE POSITIONS TO 1D
# ============================================================

bone_axis_pos = []

for pos in bone_positions:
    relative = pos - start
    projected = relative.dot(axis)
    bone_axis_pos.append(projected)

print("\n========================================")
print("BONE POSITION ALONG FLAG")
print("========================================")

for name, p in zip(BONE_NAMES, bone_axis_pos):
    print(f"{name:7s}: {p:+.5f}")

# ============================================================
# AVERAGE BONE SPACING
# Digunakan agar SIGMA relatif terhadap jarak antar bone.
# ============================================================

distances = []

for i in range(len(bone_axis_pos) - 1):
    d = abs(bone_axis_pos[i + 1] - bone_axis_pos[i])
    if d > 0.000001:
        distances.append(d)

if not distances:
    raise Exception("Tidak bisa menentukan jarak antar bone")

average_spacing = sum(distances) / len(distances)
sigma_distance = average_spacing * SIGMA

print("\nAverage bone spacing :", average_spacing)
print("Gaussian sigma       :", sigma_distance)

# ============================================================
# CREATE / GET VERTEX GROUPS
# ============================================================

groups = {}

for bone_name in BONE_NAMES:
    vg = obj.vertex_groups.get(bone_name)
    if vg is None:
        vg = obj.vertex_groups.new(name=bone_name)
    groups[bone_name] = vg

# ============================================================
# CLEAR OLD WEIGHTS
# Hanya Bone.1 ... Bone.7.
# Vertex group lain TIDAK disentuh.
# ============================================================

all_indices = [v.index for v in obj.data.vertices]

for bone_name in BONE_NAMES:
    vg = groups[bone_name]
    try:
        vg.remove(all_indices)
    except:
        pass

# ============================================================
# GAUSSIAN FUNCTION
# ============================================================

def gaussian(distance, sigma):
    if sigma <= 0:
        return 0.0
    return math.exp(-0.5 * (distance / sigma) ** 2)

# ============================================================
# CALCULATE WEIGHTS
# ============================================================

print("\nCalculating smooth weights...")

for vertex in obj.data.vertices:

    # vertex position projected along flag axis
    relative = vertex.co - start
    vertex_axis_pos = relative.dot(axis)

    raw_weights = []

    # Gaussian influence from every bone
    for bone_pos in bone_axis_pos:
        distance = vertex_axis_pos - bone_pos
        w = gaussian(distance, sigma_distance)
        raw_weights.append(w)

    # NORMALIZE (Bone.1 + ... + Bone.7 = 1.0)
    total = sum(raw_weights)

    if total <= 0.0000001:
        continue

    normalized = [w / total for w in raw_weights]

    # WRITE WEIGHTS
    for bone_name, weight in zip(BONE_NAMES, normalized):
        # Jangan tulis weight sangat kecil
        if weight > 0.0001:
            groups[bone_name].add([vertex.index], weight, 'REPLACE')

# ============================================================
# UPDATE
# ============================================================

obj.data.update()

bpy.context.view_layer.objects.active = obj
obj.select_set(True)

print("\n========================================")
print("SMOOTH 7-BONE WEIGHT COMPLETE")
print("========================================")
print(f"Mesh       : {MESH_NAME}")
print(f"Armature   : {ARMATURE_NAME}")
print(f"Sigma      : {SIGMA}")
print("Total weight per vertex normalized = 1")
print("Animation untouched")
print("========================================")

Cara Penggunaan di Blender:

Buka tab Scripting di Blender.
Buat file baru (Text -> New) lalu paste kode di atas.
Sesuaikan variabel MESH_NAME dan ARMATURE_NAME dengan nama objek yang kamu miliki di scene.
Kamu juga bisa mengubah nilai SIGMA jika ingin transisi lebih tajam (misal 0.75) atau lebih mulus/lebar (misal 1.50).
Klik ikon Play / Run Script. Hasil weight baru akan langsung di-apply pada objek mesh kamu.

Basic Bone For Flag Animation

2026-08-22T11:38:49.813-07:00

Phase 1

import bpy

# ============================================================

# FLAG WAVE - Y LOCATION ONLY

# Armature : Armature.005

# Bones : Bone.1 - Bone.5

# Frame 1 = Pose A

# Frame 25 = Pose B

# Frame 50 = Pose A

# Frame 75 = Pose B

# Frame 100 = Pose A

# LOOP: 50 frames per cycle

# ============================================================

ARMATURE_NAME = "Armature.005"

arm = bpy.data.objects.get(ARMATURE_NAME)

if arm is None:

raise Exception(f"Armature '{ARMATURE_NAME}' tidak ditemukan.")

# ------------------------------------------------------------

# POSE A

# Pangkal kecil -> ujung bebas besar

# ------------------------------------------------------------

POSE_A = {

"Bone.1": 0.00,

"Bone.2": 0.30,

"Bone.3": -0.60,

"Bone.4": 1.00,

"Bone.5": -1.40,

}

# ------------------------------------------------------------

# POSE B

# Fase berlawanan

# ------------------------------------------------------------

POSE_B = {

"Bone.1": 0.00,

"Bone.2": -0.30,

"Bone.3": 0.60,

"Bone.4": -1.00,

"Bone.5": 1.40,

}

# ------------------------------------------------------------

# KEYFRAME PLAN

# ------------------------------------------------------------

KEYS = {

1: POSE_A,

25: POSE_B,

50: POSE_A,

75: POSE_B,

100: POSE_A,

}

# ============================================================

# APPLY KEYFRAMES

# ============================================================

for frame, pose in KEYS.items():

bpy.context.scene.frame_set(frame)

for bone_name, y_value in pose.items():

bone = arm.pose.bones.get(bone_name)

if bone is None:

print(f"WARNING: {bone_name} tidak ditemukan")

continue

# Hanya ubah Y

bone.location.y = y_value

# Keyframe hanya Y Location

bone.keyframe_insert(

data_path="location",

index=1,

frame=frame

)

# ============================================================

# INTERPOLATION

# Bezier supaya gerakan tidak linear/kaku

# ============================================================

if arm.animation_data and arm.animation_data.action:

action = arm.animation_data.action

for fcurve in action.fcurves:

if 'location' in fcurve.data_path and fcurve.array_index == 1:

for kp in fcurve.keyframe_points:

kp.interpolation = 'BEZIER'

# Handle otomatis untuk transisi smooth

kp.handle_left_type = 'AUTO_CLAMPED'

kp.handle_right_type = 'AUTO_CLAMPED'

# ------------------------------------------------------------

# Timeline

# ------------------------------------------------------------

bpy.context.scene.frame_start = 1

bpy.context.scene.frame_end = 100

bpy.context.scene.frame_set(1)

print("==========================================")

print("FLAG WAVE CREATED")

print("Frame 1 : Pose A")

print("Frame 25 : Pose B")

print("Frame 50 : Pose A")

print("Frame 75 : Pose B")

print("Frame 100 : Pose A")

print("Loop : 50 frames")

print("==========================================")

---------------------------

import bpy

import math

# ============================================================

# TRAVELING FLAG WAVE - EXPLICIT 1..100 LOOP

# Armature : Armature.005

# Bones : Bone.1 - Bone.5

# Keyframes only:

# 1, 25, 50, 75, 100

# Frame 1 == Frame 100

# ============================================================

ARMATURE_NAME = "Armature.005"

START_FRAME = 1

END_FRAME = 100

KEY_FRAMES = [1, 25, 50, 75, 100]

arm = bpy.data.objects.get(ARMATURE_NAME)

if arm is None:

raise Exception(f"{ARMATURE_NAME} tidak ditemukan")

# ============================================================

# AMPLITUDE

# makin jauh dari pangkal -> makin besar

# ============================================================

AMPLITUDE = {

"Bone.1": 0.20,

"Bone.2": 0.80,

"Bone.3": 1.10,

"Bone.4": 1.50,

"Bone.5": 1.90,

}

# ============================================================

# PHASE OFFSET

# dinyatakan sebagai bagian dari 1 siklus

# Bone.1 -> pangkal

# Bone.5 -> ujung

# ============================================================

PHASE_OFFSET = {

"Bone.1": 0.00,

"Bone.2": 0.08,

"Bone.3": 0.16,

"Bone.4": 0.24,

"Bone.5": 0.32,

}

# ============================================================

# START PHASE

# ============================================================

START_PHASE = math.pi / 2.0

# ============================================================

# DELETE OLD Y LOCATION KEYFRAMES

# ============================================================

if arm.animation_data and arm.animation_data.action:

action = arm.animation_data.action

for fc in list(action.fcurves):

if fc.array_index != 1:

continue

for bone_name in AMPLITUDE:

target_path = f'pose.bones["{bone_name}"].location'

if fc.data_path == target_path:

action.fcurves.remove(fc)

break

# ============================================================

# CREATE KEYFRAMES

# ============================================================

for frame in KEY_FRAMES:

bpy.context.scene.frame_set(frame)

# Normalized loop position:

# frame 1 = 0.0

# frame 100 = 1.0

loop_t = (

(frame - START_FRAME)

/ (END_FRAME - START_FRAME)

)

for bone_name, amp in AMPLITUDE.items():

bone = arm.pose.bones.get(bone_name)

if bone is None:

print(f"WARNING: {bone_name} tidak ditemukan")

continue

phase_offset = PHASE_OFFSET[bone_name]

phase = (

2.0 * math.pi * (loop_t - phase_offset)

+ START_PHASE

)

y = amp * math.sin(phase)

bone.location.y = y

bone.keyframe_insert(

data_path="location",

index=1,

frame=frame

)

print(

f"Frame {frame:3d} | "

f"{bone_name:7s} | "

f"Y = {y:+.3f}"

)

# ============================================================

# FORCE FRAME 100 = FRAME 1 EXACTLY

# Floating-point theoretically already gives same result,

# but we explicitly copy it for perfect loop.

# ============================================================

for bone_name in AMPLITUDE:

bone = arm.pose.bones.get(bone_name)

if bone is None:

continue

# Read frame 1

bpy.context.scene.frame_set(START_FRAME)

y_start = bone.location.y

# Set exact same value at frame 100

bpy.context.scene.frame_set(END_FRAME)

bone.location.y = y_start

bone.keyframe_insert(

data_path="location",

index=1,

frame=END_FRAME

)

# ============================================================

# INTERPOLATION

# ============================================================

if arm.animation_data and arm.animation_data.action:

action = arm.animation_data.action

for fc in action.fcurves:

if fc.array_index != 1:

continue

for bone_name in AMPLITUDE:

target_path = f'pose.bones["{bone_name}"].location'

if fc.data_path == target_path:

for kp in fc.keyframe_points:

kp.interpolation = 'BEZIER'

kp.handle_left_type = 'AUTO'

kp.handle_right_type = 'AUTO'

# ============================================================

# TIMELINE

# ============================================================

bpy.context.scene.frame_start = START_FRAME

bpy.context.scene.frame_end = END_FRAME

bpy.context.scene.frame_set(START_FRAME)

print("")

print("==========================================")

print("TRAVELING FLAG WAVE DONE")

print("")

print("LOOP:")

print("Frame 1 == Frame 100")

print("")

print("KEYFRAMES:")

print("1, 25, 50, 75, 100")

print("")

print("AMPLITUDE:")

for bone_name, value in AMPLITUDE.items():

print(f"{bone_name}: {value}")

print("")

print("==========================================")

traveling wave

2026-08-18T15:17:08.758-07:00

import bpy
import math
# ============================================================
# 4-BONE TRAVELING Y WAVE
#
# Mix konsep:
# A = setiap bone naik/turun
# B = wave merambat sepanjang deretan bone
#
# ONLY LOCATION Y
#
# Frame 1 = current Y pose
# Frame 201 = exact frame 1
#
# Playback / render:
# 1 - 200
# ============================================================
ARMATURE_NAME = "Armature.003"
START_FRAME = 1
PERIOD = 200
LOOP_FRAME = START_FRAME + PERIOD

# ============================================================
# BONE ORDER SECARA SPASIAL
#
# Sumber/ujung kanan -> menuju ujung lainnya.
#
# Kalau nanti arah rambat terbalik,
# cukup reverse list ini atau ubah WAVE_DIRECTION.
# ============================================================
BONES = [
"Bone.005",
"Bone.004",
"Bone.002",
"Bone001",
]

# ============================================================
# CONTROLS
# ============================================================
# Besar displacement wave dari bentuk awal.
AMPLITUDE = 1.45
# Berapa banyak gelombang sepanjang 4 bone.
#
# 1.0 = satu cycle penuh dari bone pertama ke terakhir.
# 0.75 = wave lebih panjang / elegan.
# 1.25 = wave lebih rapat.
SPATIAL_CYCLES = 0.85
# +1 / -1 membalik arah rambat.
WAVE_DIRECTION = 1.0

# ============================================================
# SPARSE SAMPLE FRAMES
#
# Bukan tiap frame.
# Masih gampang diedit manual.
# ============================================================
KEY_FRAMES = [
1,
13,
26,
38,
51,
63,
76,
88,
101,
113,
126,
138,
151,
163,
176,
188,
201,
]

# ============================================================
# GET ARMATURE
# ============================================================
arm = bpy.data.objects.get(ARMATURE_NAME)
if arm is None:
raise Exception(
f"Armature '{ARMATURE_NAME}' tidak ditemukan."
)
if arm.type != 'ARMATURE':
raise Exception(
f"'{ARMATURE_NAME}' bukan Armature."
)
scene = bpy.context.scene

# ============================================================
# FRAME 1 = BASE SHAPE
# ============================================================
scene.frame_set(START_FRAME)
BASE_Y = {}
for name in BONES:
pb = arm.pose.bones.get(name)
if pb is None:
raise Exception(
f"Bone '{name}' tidak ditemukan."
)
BASE_Y[name] = pb.location.y

# ============================================================
# BACKUP ACTION
# ============================================================
if arm.animation_data and arm.animation_data.action:
old = arm.animation_data.action
backup = old.copy()
backup.name = old.name + "_BEFORE_TRAVEL_WAVE"
backup.use_fake_user = True

# ============================================================
# CLEAR OLD ANIMATION
# ============================================================
if arm.animation_data:
arm.animation_data_clear()

# ============================================================
# SPATIAL POSITION
#
# 4 bones:
#
# 005 = 0.00
# 004 = 0.33
# 002 = 0.67
# 001 = 1.00
# ============================================================
N = len(BONES)
X = {}
for i, name in enumerate(BONES):
X[name] = (
i / (N - 1)
)

# ============================================================
# WAVE FUNCTION
#
# Traveling wave:
#
# sin(kx - wt)
# ============================================================
def wave(name, time_phase):
x = X[name]
spatial_phase = (
math.tau
* SPATIAL_CYCLES
* x
)
return math.sin(
spatial_phase
-
WAVE_DIRECTION * time_phase
)

# ============================================================
# INITIAL WAVE VALUE
#
# Kita kurangi nilai ini dari seluruh animasi.
#
# Hasilnya:
# displacement pada frame 1 = 0.
# ============================================================
INITIAL_WAVE = {}
for name in BONES:
INITIAL_WAVE[name] = wave(
name,
0.0
)

# ============================================================
# GENERATE
# ============================================================
for frame in KEY_FRAMES:
progress = (
frame - START_FRAME
) / PERIOD
time_phase = (
math.tau * progress
)

for name in BONES:
pb = arm.pose.bones[name]

# ----------------------------------------------------
# displacement dari traveling wave
# ----------------------------------------------------
current_wave = wave(
name,
time_phase
)
wave_delta = (
current_wave
-
INITIAL_WAVE[name]
)

# ----------------------------------------------------
# final Y
# ----------------------------------------------------
y = (
BASE_Y[name]
+
wave_delta
* AMPLITUDE
)

# Exact start/end
if frame == START_FRAME or frame == LOOP_FRAME:
y = BASE_Y[name]

pb.location.y = y

pb.keyframe_insert(
data_path="location",
index=1,
frame=frame
)

# ============================================================
# SMOOTH INTERPOLATION
#
# AUTO handles lebih flowy.
#
# Tidak pakai AUTO_CLAMPED karena di sini sedikit curvature
# antar sample justru membantu rasa gelombang.
# ============================================================
if arm.animation_data and arm.animation_data.action:
action = arm.animation_data.action
action.name = "TRAVELING_Y_WAVE"
for fc in action.fcurves:
for kp in fc.keyframe_points:
kp.interpolation = 'BEZIER'
kp.handle_left_type = 'AUTO'
kp.handle_right_type = 'AUTO'

# ============================================================
# TIMELINE
# ============================================================
scene.frame_start = 1
scene.frame_end = 200
scene.frame_set(1)

# ============================================================
# REPORT
# ============================================================
print("")
print("=" * 70)
print("TRAVELING Y WAVE CREATED")
print("=" * 70)
print("")
print("BASE Y:")
for name in BONES:
print(
f"{name:10s}",
round(BASE_Y[name], 4),
"| x =",
round(X[name], 3)
)
print("")
print("Amplitude :", AMPLITUDE)
print("Spatial cycles :", SPATIAL_CYCLES)
print("Period :", PERIOD)
print("Loop reference :", LOOP_FRAME)
print("")
print("Frame 1 = original Y")
print("Frame 201 = original Y exact")
print("")
print("Only Y Location animated.")
print("=" * 70)
-----

evently
---

import bpy

import math

# ============================================================

# TRAVELING Y WAVE - EVENT BASED SPARSE KEYS

# ONLY LOCATION Y

# Frame 1 = current Y

# Frame 201 = current Y lagi

# Setiap bone hanya dapat key pada:

# START / MAX / CENTER / MIN / CENTER / LOOP

# ============================================================

ARMATURE_NAME = "Armature.005"

START_FRAME = 1

PERIOD = 200

LOOP_FRAME = START_FRAME + PERIOD

AMPLITUDE = 2.10

BONES = [

"Bone.005",

"Bone.004",

"Bone.002",

"Bone001",

]

# ============================================================

# SPATIAL PHASE

# Ini yang bikin wave "jalan" dari bone ke bone.

# ============================================================

SPATIAL_PHASE = {

"Bone.005": math.radians(0),

"Bone.004": math.radians(60),

"Bone.002": math.radians(120),

"Bone001": math.radians(180),

}

# ============================================================

# GET ARMATURE

# ============================================================

arm = bpy.data.objects.get(ARMATURE_NAME)

if arm is None:

raise Exception(

f"Armature '{ARMATURE_NAME}' tidak ditemukan."

)

scene = bpy.context.scene

scene.frame_set(START_FRAME)

# ============================================================

# READ CURRENT Y

# ============================================================

START_Y = {}

for name in BONES:

pb = arm.pose.bones.get(name)

if pb is None:

raise Exception(

f"Bone '{name}' tidak ditemukan."

)

START_Y[name] = pb.location.y

# ============================================================

# BACKUP

# ============================================================

if arm.animation_data and arm.animation_data.action:

old = arm.animation_data.action

backup = old.copy()

backup.name = old.name + "_BEFORE_SPARSE_EVENT"

backup.use_fake_user = True

# ============================================================

# CLEAR OLD ANIMATION

# ============================================================

if arm.animation_data:

arm.animation_data_clear()

# ============================================================

# TIME -> FRAME

# satu cycle 0..2π = 200 frame

# ============================================================

def angle_to_frame(angle):

angle %= math.tau

return (

START_FRAME

(angle / math.tau)

* PERIOD

)

# ============================================================

# CALCULATE PHASE FROM START POSITION

# Kita ingin:

# Y(0) = START_Y

# dengan:

# Y = A sin(theta + phase)

# lalu kita tambahkan spatial phase.

# ============================================================

PHASE = {}

for name in BONES:

normalized = max(

-1.0,

min(

1.0,

START_Y[name] / AMPLITUDE

)

base_phase = math.asin(normalized)

PHASE[name] = (

base_phase

+ SPATIAL_PHASE[name]

) % math.tau

# ============================================================

# EVENT ANGLES

# posisi sinus:

# +MAX = π/2

# CENTER = π

# -MAX = 3π/2

# CENTER = 2π

# lalu siklus lanjut.

# ============================================================

TARGETS = [

("MAX", math.pi / 2, AMPLITUDE),

("CENTER", math.pi, 0.0),

("MIN", 3 * math.pi / 2, -AMPLITUDE),

("CENTER", 2 * math.pi, 0.0),

("MAX", 5 * math.pi / 2, AMPLITUDE),

]

# ============================================================

# BUILD SPARSE KEYS

# ============================================================

ALL_KEYS = {}

for name in BONES:

phase = PHASE[name]

pb = arm.pose.bones[name]

keys = []

# --------------------------------------------------------

# START

# --------------------------------------------------------

keys.append(

(

float(START_FRAME),

START_Y[name],

"START"

)

# --------------------------------------------------------

# FIND NEXT EVENTS

# --------------------------------------------------------

for label, target_angle, target_y in TARGETS:

theta = (

target_angle

- phase

) % math.tau

# kalau persis di start, skip

if theta < 1e-5:

continue

frame = angle_to_frame(

theta

)

# hanya di dalam cycle

if (

frame > START_FRAME

and frame < LOOP_FRAME

keys.append(

(

frame,

target_y,

label

)

# --------------------------------------------------------

# LOOP END

# --------------------------------------------------------

keys.append(

(

float(LOOP_FRAME),

START_Y[name],

"LOOP"

)

# --------------------------------------------------------

# SORT

# --------------------------------------------------------

keys.sort(

key=lambda x: x[0]

)

# ========================================================

# INSERT KEYS

# ========================================================

for frame, y, label in keys:

pb.location.y = y

pb.keyframe_insert(

data_path="location",

index=1,

frame=frame

)

ALL_KEYS[name] = keys

# ============================================================

# BEZIER SMOOTH

# ============================================================

if arm.animation_data and arm.animation_data.action:

action = arm.animation_data.action

action.name = "TRAVELING_Y_WAVE_SPARSE"

for fc in action.fcurves:

for kp in fc.keyframe_points:

kp.interpolation = 'BEZIER'

kp.handle_left_type = 'AUTO_CLAMPED'

kp.handle_right_type = 'AUTO_CLAMPED'

# ============================================================

# TIMELINE

# ============================================================

scene.frame_start = START_FRAME

scene.frame_end = LOOP_FRAME - 1

scene.frame_set(START_FRAME)

# ============================================================

# PRINT RESULT

# ============================================================

print("")

print("=" * 75)

print("TRAVELING Y WAVE - SPARSE EVENT KEYS")

print("=" * 75)

for name in BONES:

print("")

print(name)

for frame, y, label in ALL_KEYS[name]:

print(

f" {label:7s}"

f" frame {frame:7.2f}"

f" Y = {y: .4f}"

)

print("")

print("Frame 201 = Frame 1")

print("=" * 75)

GLOWING EDGE MATERIAL 1

2026-08-15T12:26:02.033-07:00

Membuat Material Glowing Edge Procedural di Blender

Pada objek 3D seperti teks, logo, atau emblem, salah satu cara sederhana untuk memberikan kesan lebih premium adalah membuat bagian pinggir objek terlihat lebih terang dibandingkan permukaan utamanya. Efek ini dapat digunakan sebagai dasar glowing edge, terutama jika hasil render nantinya akan dilanjutkan dengan compositing di After Effects.

Pada eksperimen ini, material dibuat menggunakan satu material procedural bernama Glowing Edge. Tidak diperlukan material terpisah untuk bagian bevel atau edge objek.

Konsep Material

Material menggunakan Principled BSDF sebagai shader utama dengan karakter permukaan metallic berwarna silver.

Efek terang pada pinggir objek dibuat menggunakan nilai Facing dari node Layer Weight.

Secara sederhana, Facing memberikan informasi mengenai orientasi permukaan terhadap kamera. Permukaan yang menghadap langsung ke kamera memiliki nilai berbeda dengan permukaan yang terlihat pada sudut menyamping.

Informasi tersebut kemudian digunakan sebagai mask untuk menentukan bagian mana yang mendapatkan emission.

Alur dasarnya:

Layer Weight
     │
   Facing
     │
     ▼
 ColorRamp
     │
     ▼
 Multiply
     │
     ▼
Emission Strength

Dengan metode ini, edge tidak perlu dipisahkan menjadi geometry atau material tersendiri.

Base Material

Permukaan utama menggunakan Principled BSDF dengan konfigurasi:

Base Color : RGB (0.92, 0.92, 0.95)
Metallic   : 1.0
Roughness  : 0.22

Nilai Metallic 1.0 membuat material bereaksi seperti permukaan logam, sementara Roughness 0.22 mempertahankan refleksi yang cukup tajam.

Warna dasar sedikit kebiruan dibandingkan putih murni sehingga memberikan karakter cold silver.

Membentuk Glowing Edge

Deteksi edge menggunakan:

Layer Weight → Facing

Output tersebut kemudian masuk ke ColorRamp.

ColorRamp pada material ini menggunakan nilai:

White Position : 0.58
Black Position : 0.88
Interpolation  : EASE

ColorRamp berfungsi mengontrol seberapa luas area yang dianggap sebagai edge.

Setelah itu hasil mask diperkuat menggunakan Math Node:

Operation : Multiply
Value     : 3.0

Output akhirnya dihubungkan ke:

Principled BSDF → Emission Strength

Sedangkan warna emission menggunakan warm white:

Emission Color

R : 1.00
G : 0.82
B : 0.55

Perpaduan antara cold silver surface dan warm edge highlight memberikan sedikit pemisahan warna sehingga pinggiran objek terlihat lebih hidup.

Menambahkan Micro Surface

Supaya material tidak terlihat terlalu sempurna atau flat, ditambahkan detail permukaan menggunakan Noise Texture.

Konfigurasinya:

Noise Texture

Dimensions : 3D
Scale      : 220
Detail     : 2.0
Roughness  : 0.5

Noise tersebut tidak digunakan untuk mengubah warna material, tetapi diteruskan ke node Bump:

Bump

Strength : 0.025
Distance : 0.008

Alurnya:

Texture Coordinate
        │
        ▼
  Noise Texture
        │
        ▼
      Bump
        │
        ▼
Principled BSDF
      Normal

Nilainya sengaja dibuat kecil karena tujuannya hanya memberikan micro surface variation, bukan membuat permukaan terlihat kasar secara berlebihan.

Struktur Material

Secara keseluruhan material mempunyai dua sistem procedural.

Edge system:

Layer Weight
      ↓
    Facing
      ↓
  ColorRamp
      ↓
Multiply × 3
      ↓
Emission Strength

Surface detail system:

Texture Coordinate
      ↓
Noise Texture
      ↓
     Bump
      ↓
Principled BSDF Normal

Keduanya kemudian bekerja pada satu Principled BSDF yang diteruskan ke Material Output.

Karakter Efek

Hal penting dari teknik ini adalah glowing edge bersifat view-dependent.

Artinya, posisi highlight ditentukan oleh hubungan antara surface normal dan sudut pandang kamera. Ketika kamera atau objek bergerak, distribusi edge highlight juga dapat berubah.

Karena itu teknik ini lebih tepat disebut sebagai:

View-Dependent Glowing Edge / Fresnel-Like Edge Highlight

dan bukan directional top-edge lighting.

Jika yang dibutuhkan adalah highlight yang selalu muncul pada sisi atas objek terlepas dari posisi kamera, pendekatannya berbeda. Dalam kasus tersebut, surface normal dapat dibandingkan dengan arah lokal atau world-space tertentu.

Workflow Blender → After Effects

Emission pada Blender tidak harus dibuat sangat kuat.

Dalam workflow compositing, Blender cukup menghasilkan hot edge yang jelas dan memiliki luminance lebih tinggi daripada permukaan utama.

Contohnya:

Blender
   ↓
Metallic Surface
   +
Bright / Hot Edge
   ↓
Render
   ↓
After Effects
   ↓
Glow / Bloom

Dengan pendekatan tersebut, bentuk dan posisi highlight tetap berasal dari geometry 3D, sementara karakter glow seperti radius, intensity, threshold, dan falloff dapat dikontrol lebih fleksibel saat compositing di After Effects.

Kesimpulan

Material Glowing Edge menggunakan satu material procedural untuk menghasilkan permukaan metallic sekaligus edge highlight tanpa perlu memisahkan bevel menjadi material lain.

Kombinasi Layer Weight, ColorRamp, Emission, Noise Texture, dan Bump membuat material tetap sederhana tetapi cukup fleksibel untuk digunakan pada teks 3D, logo, emblem, maupun objek hard-surface.

Teknik ini juga cocok untuk workflow motion graphics karena Blender dapat difokuskan untuk menghasilkan surface dan highlight information, sementara efek glow akhir disempurnakan pada tahap compositing.

import bpy

# ============================================================

# GLOWING EDGE MATERIAL 1

# Blender 4.x / 5.x

# ============================================================

MAT_NAME = "Glowing Edge"

# ------------------------------------------------------------

# Get active object

# ------------------------------------------------------------

obj = bpy.context.active_object

if obj is None:

raise Exception("Tidak ada object aktif. Pilih object dulu.")

# ------------------------------------------------------------

# Create / reuse material

# ------------------------------------------------------------

mat = bpy.data.materials.get(MAT_NAME)

if mat is None:

mat = bpy.data.materials.new(name=MAT_NAME)

mat.use_nodes = True

nodes = mat.node_tree.nodes

links = mat.node_tree.links

# Clear existing nodes

nodes.clear()

# ============================================================

# NODES

# ============================================================

# Material Output

output = nodes.new("ShaderNodeOutputMaterial")

output.name = "Material Output"

output.label = "Material Output"

output.location = (850, 0)

# Principled BSDF

bsdf = nodes.new("ShaderNodeBsdfPrincipled")

bsdf.name = "Principled BSDF"

bsdf.label = "Glowing Edge Surface"

bsdf.location = (560, 0)

# Base metallic surface

bsdf.inputs["Base Color"].default_value = (0.92, 0.92, 0.95, 1.0)

bsdf.inputs["Metallic"].default_value = 1.0

bsdf.inputs["Roughness"].default_value = 0.22

# Slight warm emission color

if "Emission Color" in bsdf.inputs:

bsdf.inputs["Emission Color"].default_value = (1.0, 0.82, 0.55, 1.0)

else:

bsdf.inputs["Emission"].default_value = (1.0, 0.82, 0.55, 1.0)

# ------------------------------------------------------------

# Layer Weight

# ------------------------------------------------------------

layer = nodes.new("ShaderNodeLayerWeight")

layer.name = "Layer Weight"

layer.label = "Edge Detection"

layer.location = (-500, 120)

layer.inputs["Blend"].default_value = 0.5

# ------------------------------------------------------------

# ColorRamp

# ------------------------------------------------------------

ramp = nodes.new("ShaderNodeValToRGB")

ramp.name = "Edge Ramp"

ramp.label = "Glowing Edge Control"

ramp.location = (-260, 120)

# Remove default positions and tune edge

cr = ramp.color_ramp

cr.elements[0].position = 0.58

cr.elements[0].color = (1.0, 1.0, 1.0, 1.0)

cr.elements[1].position = 0.88

cr.elements[1].color = (0.0, 0.0, 0.0, 1.0)

cr.interpolation = 'EASE'

# ------------------------------------------------------------

# Multiply edge intensity

# ------------------------------------------------------------

multiply = nodes.new("ShaderNodeMath")

multiply.name = "Glow Strength"

multiply.label = "Glow Strength"

multiply.operation = 'MULTIPLY'

multiply.location = (30, 120)

multiply.inputs[1].default_value = 3.0

# ------------------------------------------------------------

# Noise texture for subtle surface variation

# ------------------------------------------------------------

texcoord = nodes.new("ShaderNodeTexCoord")

texcoord.name = "Texture Coordinate"

texcoord.location = (-520, -220)

noise = nodes.new("ShaderNodeTexNoise")

noise.name = "Surface Noise"

noise.location = (-280, -220)

noise.noise_dimensions = '3D'

noise.inputs["Scale"].default_value = 220.0

noise.inputs["Detail"].default_value = 2.0

noise.inputs["Roughness"].default_value = 0.5

# ------------------------------------------------------------

# Bump

# ------------------------------------------------------------

bump = nodes.new("ShaderNodeBump")

bump.name = "Micro Bump"

bump.location = (250, -220)

bump.inputs["Strength"].default_value = 0.025

bump.inputs["Distance"].default_value = 0.008

# ============================================================

# LINKS

# ============================================================

links.new(layer.outputs["Facing"], ramp.inputs["Fac"])

links.new(ramp.outputs["Color"], multiply.inputs[0])

if "Emission Strength" in bsdf.inputs:

links.new(multiply.outputs["Value"], bsdf.inputs["Emission Strength"])

links.new(texcoord.outputs["Generated"], noise.inputs["Vector"])

links.new(noise.outputs["Fac"], bump.inputs["Height"])

links.new(bump.outputs["Normal"], bsdf.inputs["Normal"])

links.new(bsdf.outputs["BSDF"], output.inputs["Surface"])

# ============================================================

# ASSIGN TO OBJECT

# ============================================================

if len(obj.data.materials) == 0:

obj.data.materials.append(mat)

else:

obj.data.materials[0] = mat

print(f"Material '{MAT_NAME}' berhasil dibuat dan dipasang ke '{obj.name}'.")

Glowing Edge Material 2

2026-08-15T12:25:26.197-07:00

import bpy

# ============================================================

# GLOWING EDGE - TOP EDGE MATERIAL

# Brightens ONLY upward-facing bevel / top edges

# Blender 4.x / 5.x

# ============================================================

MAT_NAME = "Glowing Edge"

obj = bpy.context.active_object

if obj is None:

raise RuntimeError("choose the object first : @rtxid")

# ------------------------------------------------------------

# MATERIAL

# ------------------------------------------------------------

mat = bpy.data.materials.get(MAT_NAME)

if mat is None:

mat = bpy.data.materials.new(MAT_NAME)

mat.use_nodes = True

nodes = mat.node_tree.nodes

links = mat.node_tree.links

nodes.clear()

# ============================================================

# OUTPUT

# ============================================================

output = nodes.new("ShaderNodeOutputMaterial")

output.location = (900, 0)

bsdf = nodes.new("ShaderNodeBsdfPrincipled")

bsdf.location = (620, 0)

links.new(bsdf.outputs["BSDF"], output.inputs["Surface"])

# Metallic text

bsdf.inputs["Metallic"].default_value = 1.0

bsdf.inputs["Roughness"].default_value = 0.24

# ============================================================

# BASE COLOR

# ============================================================

base_color = nodes.new("ShaderNodeRGB")

base_color.label = "BASE SILVER"

base_color.location = (-100, 180)

base_color.outputs[0].default_value = (

0.72,

0.74,

1.0

)

# HOT TOP COLOR

hot_color = nodes.new("ShaderNodeRGB")

hot_color.label = "HOT TOP EDGE"

hot_color.location = (-100, 300)

hot_color.outputs[0].default_value = (

1.0,

0.97,

0.88,

1.0

)

# ============================================================

# DETECT UPWARD-FACING NORMAL

# ============================================================

geometry = nodes.new("ShaderNodeNewGeometry")

geometry.label = "SURFACE NORMAL"

geometry.location = (-900, 400)

transform = nodes.new("ShaderNodeVectorTransform")

transform.label = "WORLD → OBJECT"

transform.location = (-680, 400)

transform.vector_type = 'NORMAL'

transform.convert_from = 'WORLD'

transform.convert_to = 'OBJECT'

separate = nodes.new("ShaderNodeSeparateXYZ")

separate.label = "LOCAL XYZ"

separate.location = (-470, 400)

links.new(

geometry.outputs["Normal"],

transform.inputs["Vector"]

)

links.new(

transform.outputs["Vector"],

separate.inputs["Vector"]

)

# ============================================================

# TOP EDGE MASK

# ============================================================

ramp = nodes.new("ShaderNodeValToRGB")

ramp.label = "TOP EDGE WIDTH"

ramp.location = (-250, 430)

cr = ramp.color_ramp

# Surfaces not facing upward = black

cr.elements[0].position = 0.20

cr.elements[0].color = (0, 0, 0, 1)

# Strong upward-facing surfaces = white

cr.elements[1].position = 0.72

cr.elements[1].color = (1, 1, 1, 1)

cr.interpolation = 'EASE'

# IMPORTANT:

# Default Blender text:

# X = horizontal

# Y = vertical

# Z = extrusion/depth

# Therefore LOCAL +Y detects the TOP of letters.

links.new(

separate.outputs["Y"],

ramp.inputs["Fac"]

)

# ============================================================

# MIX BASE + HOT EDGE

# ============================================================

mix = nodes.new("ShaderNodeMixRGB")

mix.label = "TOP EDGE BRIGHTNESS"

mix.blend_type = 'MIX'

mix.location = (180, 220)

links.new(ramp.outputs["Color"], mix.inputs[0])

links.new(base_color.outputs["Color"], mix.inputs[1])

links.new(hot_color.outputs["Color"], mix.inputs[2])

links.new(

mix.outputs["Color"],

bsdf.inputs["Base Color"]

)

# ============================================================

# SMALL EMISSION FOR AE GLOW SOURCE

# ============================================================

if "Emission Color" in bsdf.inputs:

links.new(

mix.outputs["Color"],

bsdf.inputs["Emission Color"]

)

if "Emission Strength" in bsdf.inputs:

bsdf.inputs["Emission Strength"].default_value = 0.25

# ============================================================

# MICRO SURFACE

# ============================================================

texcoord = nodes.new("ShaderNodeTexCoord")

texcoord.location = (-850, -180)

noise = nodes.new("ShaderNodeTexNoise")

noise.location = (-600, -180)

noise.noise_dimensions = '3D'

noise.inputs["Scale"].default_value = 220.0

noise.inputs["Detail"].default_value = 2.0

noise.inputs["Roughness"].default_value = 0.5

bump = nodes.new("ShaderNodeBump")

bump.location = (330, -170)

bump.inputs["Strength"].default_value = 0.020

bump.inputs["Distance"].default_value = 0.006

links.new(texcoord.outputs["Generated"], noise.inputs["Vector"])

links.new(noise.outputs["Fac"], bump.inputs["Height"])

links.new(bump.outputs["Normal"], bsdf.inputs["Normal"])

# ============================================================

# ASSIGN MATERIAL

# ============================================================

if len(obj.data.materials) == 0:

obj.data.materials.append(mat)

else:

obj.data.materials[0] = mat

print(

f"'{MAT_NAME}' has made for object '{obj.name}'. "

"Top-facing bevel now are more glowing."

)

Android Bukan Path

2026-06-07T11:12:46.245-07:00

Saat baru pindah dari HTML dan CSS ke Android, bagian yang sering bikin bingung adalah cara memanggil gambar, warna, dan nama aplikasi. Di web, kita biasa menulis path langsung seperti /image/logo.png. Di Android, cara berpikirnya berbeda. Android memakai sistem resource.

Resource adalah file yang diletakkan di folder app/src/main/res. Setelah file masuk ke sana, Android mengenal file itu lewat nama resource, bukan lewat path lengkap.

Judul aplikasi

Nama aplikasi biasanya disimpan di file app/src/main/res/values/strings.xml. Contohnya:

string name app_name berisi IT-Tude Self Attendance.

Di AndroidManifest.xml, nama itu dipanggil lewat android:label="@string/app_name". Artinya aplikasi mengambil teks dari resource string bernama app_name.

Kalau ingin mengganti judul aplikasi yang muncul di launcher, ubah nilai app_name di strings.xml.

Gambar bukan dipanggil seperti HTML

Kalau di web kita menulis src="/image/logo.png", di Android kita menaruh gambar ke folder resource. Misalnya file logo_baru.png diletakkan di app/src/main/res/drawable-nodpi.

Cara memanggilnya bukan dengan path folder, tetapi dengan nama resource:

@drawable/logo_baru

Walaupun file berada di drawable-nodpi, referensinya tetap @drawable/nama_file.

Folder yang sering dipakai

Folder values dipakai untuk data kecil seperti string dan warna. strings.xml dipanggil dengan @string/nama. colors.xml dipanggil dengan @color/nama.

Folder drawable dipakai untuk gambar, vector, shape, atau background XML.

Folder drawable-nodpi dipakai untuk gambar PNG yang tidak ingin otomatis diskalakan berdasarkan density layar.

Folder mipmap dipakai untuk launcher icon aplikasi. Android punya beberapa ukuran seperti mipmap-mdpi, mipmap-hdpi, mipmap-xhdpi, mipmap-xxhdpi, dan mipmap-xxxhdpi. Sistem akan memilih ukuran yang cocok untuk perangkat.

Adaptive icon

Android versi baru memakai adaptive icon. File utamanya biasanya ada di app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml.

Isinya memanggil background dan foreground. Contohnya, background putih bisa dipanggil dari @color/ic_launcher_background_white. Logo depan bisa dipanggil dari @drawable/ic_launcher_foreground_logo.

Jadi adaptive icon tidak harus satu gambar utuh. Ia bisa terdiri dari background dan foreground.

Rumus cepat

Jika file ada di values/strings.xml, panggil dengan @string/nama.

Jika warna ada di values/colors.xml, panggil dengan @color/nama.

Jika gambar ada di drawable atau drawable-nodpi, panggil dengan @drawable/nama_file.

Jika launcher icon ada di mipmap, panggil dengan @mipmap/nama_file.

Cara aman ganti logo sendiri

Untuk mengganti logo aplikasi, siapkan PNG yang bersih. Letakkan di app/src/main/res/drawable-nodpi. Contohnya logo_it_tude.png.

Lalu di adaptive icon, panggil:

@drawable/logo_it_tude

Untuk launcher icon lama, siapkan juga file di folder mipmap dengan nama ic_launcher.webp dan ic_launcher_round.webp pada setiap density.

Kesimpulannya sederhana: Android bukan membaca path seperti HTML. Android membaca resource. Setelah paham pola @string, @color, @drawable, dan @mipmap, mengganti judul aplikasi atau logo akan terasa jauh lebih masuk akal.

Bagaimana Chatbot IT-Tude Bekerja di Website

2026-05-31T18:24:55.491-07:00

Chatbot IT-Tude bekerja sebagai asisten virtual yang menerima pertanyaan dari pengunjung, lalu mencoba memberi jawaban atau arahan yang paling relevan berdasarkan konteks layanan yang tersedia.

Secara sederhana, alurnya dimulai saat pengunjung mengetik pertanyaan di widget chat pada website. Setelah itu, chatbot membaca isi pertanyaan dan mencoba mengenali maksud utamanya. Jika pertanyaannya masih umum, chatbot akan mengarahkan ke kategori layanan yang paling sesuai. Jika pertanyaannya lebih spesifik, chatbot akan mencoba memberi jawaban yang lebih fokus berdasarkan knowledge yang sudah disiapkan.

Dalam alur ini, chatbot tidak selalu harus menjawab semua hal secara panjang. Untuk pertanyaan tertentu, chatbot cukup memberi penjelasan ringkas lalu menawarkan langkah berikutnya. Misalnya, pengunjung bisa diarahkan untuk melihat jalur software, memahami layanan chatbot, atau melanjutkan ke admin melalui WhatsApp jika pembahasannya sudah masuk ke kebutuhan yang lebih detail.

Pendekatan seperti ini membuat chatbot lebih efisien. Pengunjung tetap merasa dibantu, tetapi alur percakapan tidak menjadi terlalu berat. Chatbot juga bisa diposisikan sebagai alat bantu awal sebelum komunikasi masuk ke tahap diskusi yang lebih serius.

Dengan model kerja seperti ini, chatbot IT-Tude bisa mendukung website agar lebih interaktif, lebih informatif, dan lebih siap menangani pertanyaan awal dari calon pengguna layanan.

Manfaat Chatbot IT-Tude untuk Website UMKM

2026-05-31T18:23:48.575-07:00

Bagi website UMKM, kehadiran chatbot bisa menjadi nilai tambah yang cukup penting, terutama ketika pengunjung membutuhkan jawaban cepat sebelum memutuskan untuk bertanya lebih lanjut atau melakukan kontak.

Chatbot IT-Tude dapat membantu website UMKM menjawab pertanyaan berulang yang biasanya sering muncul, seperti layanan apa saja yang tersedia, produk mana yang paling sesuai, atau bagaimana cara memulai diskusi kebutuhan. Dengan begitu, pengunjung tidak harus menunggu balasan manual untuk mendapatkan gambaran awal.

Selain itu, chatbot juga membantu menjaga alur komunikasi tetap ringan. Pengunjung bisa langsung mendapat arahan ke jalur yang paling relevan tanpa harus membaca seluruh halaman terlebih dahulu. Ini penting untuk website usaha yang ingin terlihat lebih aktif, lebih responsif, dan lebih mudah diakses.

Manfaat lainnya adalah chatbot bisa membantu menyaring kebutuhan awal pengunjung. Dari pertanyaan singkat, chatbot dapat mengarahkan apakah kebutuhan mereka lebih cocok ke software, digital art, atau layanan lain yang sedang disiapkan. Setelah itu, chatbot bisa melanjutkan dengan ajakan ke email atau WhatsApp admin untuk pembahasan yang lebih detail.

Untuk UMKM, pendekatan seperti ini membantu website terasa lebih hidup. Bukan hanya tampil sebagai halaman informasi, tetapi juga sebagai pintu masuk komunikasi yang lebih praktis untuk calon pelanggan.

Chatbot IT-Tude untuk Menjawab, Mengarahkan, dan Menangkap Prospek

2026-05-31T18:23:46.431-07:00

Chatbot IT-Tude dirancang bukan hanya untuk menjawab pertanyaan, tetapi juga untuk membantu pengunjung memahami layanan yang tersedia dengan lebih cepat dan lebih terarah.

Dalam praktiknya, chatbot ini punya tiga fungsi utama. Pertama, sebagai alat untuk menjawab pertanyaan awal seputar layanan IT-Tude. Kedua, sebagai pengarah agar pengunjung bisa masuk ke jalur layanan yang paling relevan, seperti software, digital art, atau mechanical electrical. Ketiga, sebagai alat bantu menangkap prospek awal sebelum pengunjung diarahkan ke admin atau penawaran lanjutan.

Pendekatan ini membuat chatbot tidak terasa seperti FAQ statis. Chatbot bisa diposisikan sebagai asisten virtual yang membantu menjembatani kebutuhan awal pengunjung dengan solusi yang memang sedang mereka cari.

Bagi bisnis atau website yang ingin terlihat lebih responsif, chatbot seperti ini dapat membantu memberi kesan bahwa pengunjung tidak dibiarkan mencari informasi sendirian. Bahkan ketika data yang dibutuhkan belum lengkap, chatbot tetap bisa membantu mengarahkan ke langkah berikutnya, seperti meninggalkan email atau melanjutkan ke WhatsApp admin.

Dengan pola ini, chatbot IT-Tude tidak hanya berfungsi sebagai penjawab otomatis, tetapi juga sebagai bagian dari pengalaman layanan yang lebih rapi dan lebih siap dipakai untuk kebutuhan digital yang terus berkembang.

Bagaimana Chatbot IT-Tude Bekerja di Website

2026-05-31T18:23:22.273-07:00

Chatbot IT-Tude bekerja sebagai asisten virtual yang menerima pertanyaan dari pengunjung, lalu mencoba memberi jawaban atau arahan yang paling relevan berdasarkan konteks layanan yang tersedia.

Dengan model kerja seperti ini, chatbot IT-Tude bisa mendukung website agar lebih interaktif, lebih informatif, dan lebih siap menangani pertanyaan awal dari calon pengguna layanan.

Manfaat Chatbot IT-Tude untuk Website UMKM

2026-05-31T18:23:20.072-07:00

Chatbot IT-Tude untuk Menjawab, Mengarahkan, dan Menangkap Prospek

2026-05-31T18:23:17.715-07:00

Chatbot IT-Tude dirancang bukan hanya untuk menjawab pertanyaan, tetapi juga untuk membantu pengunjung memahami layanan yang tersedia dengan lebih cepat dan lebih terarah.

Jangan Geer, Pas Pake AI Sebenernya Kita Lagi Jadi Gurunya!

2026-05-10T04:49:00.000-07:00

Halo gaes! Pernah mikir gak, pas kita lagi asyik chatting bareng AI—entah minta dibikinin caption, nanya resep, atau benerin codingan—hubungannya itu gak cuma satu arah? Kita gak cuma pake teknologi, tapi kita lagi ngajarin mereka.

Setiap kali kita ngoreksi jawabannya, nyuruh ubah gaya bahasa, atau ngajak bercanda, AI langsung mencatat polanya. Miliaran interaksi kita tiap hari adalah bahan bakar yang bikin AI makin pinter meniru cara manusia berpikir. Jadi, secara gak langsung, kita semua adalah mentor sukarela mereka.

Tapi, Ada Satu Hal yang Gak Bakal Bisa Mereka Tiru...

Meskipun AI makin pinter karena belajar dari kita, ada satu benteng pertahanan manusia yang gak bakal bisa mereka jebol: Kreativitas dan Rasa.

AI itu cuma jago menghubungkan titik-titik data yang udah ada. Mereka bisa bikin puisi indah atau gambar keren karena mereka milih dari jutaan data yang pernah dibuat manusia. Tapi mereka gak punya "percikan" emosi, intuisi, pengalaman hidup, atau keresahan batin yang melahirkan sebuah ide baru.

Kreativitas manusia itu lahir dari rasa patah hati, kopi yang tumpah di pagi hari, atau lamunan random pas lagi mandi. Itu adalah human spark—keberanian untuk bikin sesuatu yang belum pernah ada polanya di dunia. Dan itu gak akan bisa ditularkan ke mesin berbentuk baris kode.

Closing Thought

AI bisa meniru gaya kita, tapi mereka gak akan bisa punya jiwa kita. Kita adalah gurunya, dan pencipta aslinya.

Yuk, lebih bijak ngasih "makan" AI kita dengan interaksi yang positif, dan jangan pernah minder, karena kreativitasmu gak akan pernah bisa digantikan oleh algoritma secanggih apa pun.

Gimana menurut kalian? Yuk, ngobrol di kolom komentar!

Belajar Dasar AI: Cara AI “Noise” - "Denoise"

2026-04-23T00:12:00.000-07:00

Lagi belajar AI, aku nemu konsep yang menurutku cukup menarik dan agak “unik” cara kerjanya.

Bayangin gini…

AI itu bukan langsung bikin gambar dari kosong secara instan.
Tapi dia justru mulai dari sesuatu yang acak banget (noise), lalu pelan-pelan “dibersihin” sampai jadi gambar yang jelas.

🔹 Step 1 — Tambah Noise (Ngacak Gambar)

Di awal, AI akan mengambil gambar normal… lalu ditambahin noise (gangguan acak) sedikit demi sedikit.

Awalnya masih kelihatan bentuknya
Lama-lama makin blur
Sampai akhirnya jadi kayak TV rusak / pixel random 😅

Proses ini disebut:

Diffusion (forward process)

🔹 Step 2 — Denoise (Balikin Jadi Gambar)

Nah, bagian menariknya di sini…

AI dilatih untuk membalik proses itu.

Dari noise tadi:

AI menebak bentuk awalnya
Sedikit demi sedikit mengurangi noise
Sampai akhirnya jadi gambar yang “masuk akal”

Proses ini disebut:

Denoising (reverse process)

🔹 Intinya Gimana?

Sederhananya:

AI belajar:
“Kalau gambar diacak seperti ini… kira-kira bentuk aslinya apa ya?”

Dan itu dilakukan berulang-ulang (step by step) sampai jadi gambar utuh.

🔹 Kenapa Cara Ini Dipakai?

Karena:

Lebih stabil dibanding langsung generate gambar
Bisa menghasilkan detail yang lebih halus
Lebih mudah dikontrol (prompt, style, dll)

Makanya teknologi ini dipakai di:

Stable Diffusion
DALL·E
Midjourney (konsep mirip)

✨ Penutup

Awalnya agak aneh ya…

“Kenapa AI harus ngacak dulu baru bikin gambar?”

Tapi justru dari situ, AI bisa belajar memahami struktur gambar dengan lebih dalam.

Kalau dipikir-pikir…

Ini mirip manusia juga sih 😄
Kadang kita harus “bingung dulu”… baru akhirnya ngerti.

Apa Itu Chatbot AI untuk Website?

2026-04-18T15:03:00.000-07:00

Chatbot AI adalah sistem percakapan otomatis yang dapat dipasang pada website untuk membantu menjawab pertanyaan pengunjung.

Berbeda dengan chat biasa, Chatbot AI mampu memahami kalimat, mencari jawaban dari artikel atau data yang dimiliki, lalu memberikan respon yang lebih natural.

Chatbot dapat digunakan untuk:

Menjawab pertanyaan pelanggan
Menjelaskan profil perusahaan
Memberikan informasi produk atau layanan
Membantu calon pelanggan menemukan informasi lebih cepat
Membantu proses order atau konsultasi

Chatbot AI dari it-tude.com dapat dipasang pada website, WhatsApp, maupun sistem internal perusahaan.

Keunggulan utama chatbot bukan hanya karena bisa menjawab otomatis, tetapi karena dapat membantu pelanggan kapan saja, bahkan di luar jam kerja.

Layanan it-tude.com

2026-04-18T07:53:00.000-07:00

Layanan it-tude.com

it-tude.com adalah tempat pengembangan solusi digital yang menggabungkan software, desain, AI, dan digital art untuk kebutuhan bisnis maupun project kreatif.

Bagi kami, teknologi bukan hanya soal membuat sesuatu terlihat modern atau menarik. Tujuan utamanya adalah membuat sesuatu yang benar-benar berguna, mudah dipakai, dan dapat membantu pekerjaan sehari-hari.

it-tude lahir dari pengalaman panjang di dunia teknologi. Jauh sebelum AI menjadi tren seperti sekarang, kami sudah terbiasa membuat berbagai kebutuhan software dan sistem untuk operasional sehari-hari, mulai dari aplikasi kantor, data karyawan, absensi, payroll, hingga sistem medical record.

Sekitar tahun 2007, kami pernah membangun sebuah CV kecil bernama Triiix.com yang menangani pembuatan website, software, networking, troubleshooting, serta kebutuhan IT umum untuk berbagai client. Dari pengalaman tersebut, kami belajar bahwa banyak bisnis sebenarnya tidak membutuhkan sistem yang rumit. Mereka membutuhkan solusi yang sederhana, jelas, mudah digunakan, dan benar-benar membantu.

Karena itu, it-tude.com dibangun bukan sekadar untuk mengikuti tren teknologi. Kami ingin menjadi tempat di mana software dan digital art dapat dipadukan menjadi solusi yang nyata.

Kami percaya bahwa teknologi yang baik harus:

Mudah digunakan
Membantu pekerjaan menjadi lebih cepat
Dapat disesuaikan dengan kebutuhan
Memiliki tampilan yang baik, tetapi tetap fungsional
Tidak berhenti pada ide, tetapi benar-benar bisa dipakai

Tiga Fokus Utama it-tude.com

1. Software

Kami mengembangkan software, aplikasi, dan sistem digital yang dirancang untuk membantu bisnis, pekerjaan lapangan, administrasi, monitoring, maupun kebutuhan operasional.

Fokus kami bukan hanya membuat aplikasi, tetapi membangun sistem yang dapat digunakan dalam jangka panjang.

Beberapa pengembangan yang menjadi bagian dari it-tude.com antara lain:

Sistem patroli digital dan monitoring petugas
Sistem absensi dan payroll
Chatbot AI untuk website, WhatsApp, dan kebutuhan internal perusahaan
Sistem administrasi dan kasir
Aplikasi monitoring dan dashboard
Website dan sistem internal perusahaan
Software yang dapat disesuaikan dengan kebutuhan masing-masing client

Semua software yang kami kembangkan dirancang agar mudah dipakai, fleksibel, dan dapat berkembang seiring kebutuhan.

2. Digital Art

Selain software, it-tude.com juga bergerak di bidang digital art dan creative production.

Kami membantu membuat visual, konten, dan media digital yang dapat digunakan untuk promosi, presentasi, branding, hingga project kreatif.

Digital art di it-tude.com tidak hanya berfokus pada tampilan, tetapi juga pada bagaimana visual tersebut dapat menyampaikan pesan dengan lebih baik.

Bidang yang kami kerjakan antara lain:

Desain visual dan branding
Pembuatan model 3D
Product rendering dan visualisasi
Animasi 3D
Video berbasis AI
Konten promosi dan storytelling
Digital design untuk kebutuhan bisnis dan media sosial
File untuk 3D printing dan kebutuhan produksi visual lainnya

Kami percaya bahwa software dan digital art seharusnya saling melengkapi. Sebuah sistem yang baik akan terasa lebih nyaman digunakan jika memiliki visual yang baik. Sebaliknya, visual yang baik akan lebih berguna jika didukung oleh sistem yang benar-benar bekerja.

Karena itulah it-tude.com dibangun dengan dua fondasi utama: Software dan Digital Art.

Keduanya kami gabungkan untuk membantu menciptakan solusi digital yang tidak hanya terlihat baik, tetapi juga benar-benar bermanfaat.

3. Mechanical Electrical

it-tude.com
Digitally Your Life. Digitally Yours.

Mengenal Berbagai Jenis Shot dalam Sinematografi: Panduan Dasar untuk Artist & Animator

2026-03-31T17:15:00.000-07:00

Medium Shoot

berikut list shoot Camera yg biasa digunakan dalam Sinematografi

Singkatan	Nama Shot	Penjelasan
ECU	Extreme Close Up	Shot sangat dekat, hanya memperlihatkan detail kecil seperti mata, tangan, tekstur kain, tulisan, atau benda tertentu.
CU	Close Up	Shot dekat, biasanya memperlihatkan wajah atau objek utama secara jelas.
MCU	Medium Close Up	Shot dari dada ke atas. Cocok untuk ekspresi wajah dan sedikit gesture.
MS	Medium Shot	Betul, MS adalah Medium Shot. Biasanya mengambil objek dari pinggang ke atas. Cocok untuk memperlihatkan ekspresi sekaligus gerakan tangan atau interaksi antar orang.
MLS	Medium Long Shot	Shot dari lutut ke atas. Masih terlihat gesture tubuh dan lingkungan sekitar.
FS	Full Shot	Shot seluruh tubuh dari kepala sampai kaki.
LS	Long Shot	Shot lebih jauh, memperlihatkan seluruh tubuh dan area sekitar dengan cukup luas.
ELS	Extreme Long Shot	Shot sangat jauh, biasanya untuk establishing lokasi atau memperlihatkan keramaian dan lingkungan besar.
OTS	Over The Shoulder	Shot dari belakang bahu seseorang, biasanya untuk percakapan atau melihat arah pandang.
POV	Point of View	Shot dari sudut pandang seseorang, seolah-olah penonton melihat langsung melalui mata karakter.
Two Shot	Two Shot	Shot yang memperlihatkan dua orang dalam satu frame.
Group Shot	Group Shot	Shot yang memperlihatkan beberapa orang sekaligus dalam satu frame.
Insert Shot	Insert Shot	Shot detail tambahan, misalnya tangan menunjuk, tulisan, kartu identitas, pintu terbuka, dan sebagainya.
Establishing Shot	Establishing Shot	Shot pembuka untuk menunjukkan lokasi atau suasana tempat.
Dolly In	Dolly In	Kamera bergerak perlahan mendekati objek.
Dolly Out	Dolly Out	Kamera bergerak perlahan menjauh dari objek.
Pan	Pan	Kamera bergerak ke kiri atau kanan dari posisi tetap.
Tilt	Tilt	Kamera bergerak ke atas atau ke bawah dari posisi tetap.
Tracking Shot	Tracking Shot	Kamera mengikuti pergerakan objek dari samping, depan, atau belakang.
Static Shot	Static Shot	Kamera diam, tidak bergerak.

Cara Login ke E-Patrol

2026-03-14T05:09:00.000-07:00

Untuk menggunakan E-Patrol apllikasi it-tude, setiap operator maupun admin harus login terlebih dahulu menggunakan akun yang telah dibuat pada sistem. Login dapat dilakukan melalui browser di komputer maupun smartphone, sehingga petugas dapat langsung mengakses E-Patrol dari lokasi kerja masing-masing.

Pada panduan ini, kami akan menjelaskan langkah-langkah login ke E-Patrol it-tude, mulai dari membuka halaman login, memasukkan username dan password, hingga solusi jika pengguna lupa password atau tidak dapat masuk ke sistem.

Mengapa Website Membutuhkan Chatbot AI?

2026-03-06T14:34:00.000-08:00

Banyak pengunjung website sebenarnya ingin bertanya, tetapi sering kali tidak menemukan informasi dengan cepat.

Mereka ingin tahu:

Apa layanan yang tersedia
Berapa harganya
Bagaimana cara order
Apakah bisa konsultasi
Siapa yang bisa dihubungi

Jika informasi sulit ditemukan, pengunjung biasanya langsung menutup website.

Karena itu, Chatbot AI dapat membantu website menjadi lebih hidup dan lebih mudah digunakan.

Chatbot dapat:

Menjawab pertanyaan dalam hitungan detik
Memberi rekomendasi layanan
Mengarahkan pengunjung ke halaman tertentu
Mengumpulkan data calon pelanggan
Membantu meningkatkan peluang penjualan

Untuk bisnis kecil maupun besar, chatbot dapat menjadi "admin digital" yang selalu siap membantu.

Label: manfaat chatbot, website bisnis, ai

CSS: Membuat Website Jadi Cantik dan Menarik

2026-03-02T12:51:00.000-08:00

Jika HTML adalah kerangka rumahnya, maka CSS (Cascading Style Sheets) adalah cat tembok, desain interior, dan furniturnya. Tanpa CSS, website kamu hanya akan berisi teks hitam-putih yang membosankan.

Apa itu CSS?

CSS adalah bahasa yang digunakan untuk mengatur tampilan elemen HTML. Dengan CSS, kamu bisa mengubah warna teks, jenis font, ukuran gambar, hingga membuat tata letak (layout) yang rapi dan responsif di HP maupun Laptop.

Cara Kerja CSS

CSS bekerja dengan cara memilih elemen HTML (Selector) lalu memberinya gaya (Property). Perhatikan contoh sederhana ini:

CSS
/* Ini adalah komentar di CSS */

h1 {
    color: blue;           /* Mengubah warna judul jadi biru */
    font-size: 32px;       /* Mengubah ukuran huruf */
    text-align: center;    /* Membuat judul ke tengah */
}

p {
    color: gray;           /* Mengubah warna paragraf jadi abu-abu */
    font-family: Arial;    /* Mengubah jenis huruf */
}

3 Cara Memasang CSS:

Inline CSS: Langsung di dalam tag HTML.
Internal CSS: Di dalam bagian <head> file HTML.
External CSS: Menggunakan file terpisah (misal: style.css). Ini adalah cara paling profesional!

-----
ini contoh internal
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Perkenalanku</title>

<style>
/* 1. Mengatur gaya untuk seluruh halaman */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5; /* Warna background abu-abu muda */
display: flex;
justify-content: center; /* Membuat konten ke tengah secara horizontal */
align-items: center; /* Membuat konten ke tengah secara vertikal */
height: 100vh; /* Menggunakan tinggi penuh layar */
margin: 0;
}

/* 2. Mengatur gaya untuk kartu profil */
.profile-card {
background-color: white;
width: 350px;
padding: 30px;
border-radius: 20px; /* Membuat sudut melengkung */
box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Memberi efek bayangan halus */
text-align: center; /* Semua teks di dalam kartu jadi di tengah */
transition: transform 0.3s ease; /* Efek animasi saat kursor di atasnya */
}

/* Efek sedikit terangkat saat kartu disentuh kursor */
.profile-card:hover {
transform: translateY(-5px);
}

/* 3. Mengatur gaya Foto Profil */
.profile-pic {
width: 120px;
height: 120px;
border-radius: 50%; /* Membuat gambar jadi bulat sempurna */
object-fit: cover; /* Memastikan gambar tidak gepeng */
border: 5px solid #007bff; /* Memberi bingkai biru */
margin-bottom: 20px;
}

/* 4. Mengatur gaya Nama */
h1 {
font-size: 24px;
color: #333;
margin: 0 0 10px 0;
}

/* 5. Mengatur gaya info (Umur, Hobby) */
.info {
font-size: 16px;
color: #666;
margin: 5px 0;
}

.highlight {
color: #007bff; /* Warna biru untuk menonjolkan kata kunci */
font-weight: bold;
}

/* 6. Mengatur gaya Garis Pembatas */
hr {
border: 0;
border-top: 1px solid #eee;
margin: 20px 0;
}

/* 7. Mengatur gaya Filsafah Hidup */
.quote-title {
font-size: 14px;
color: #aaa;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}

.quote {
font-style: italic;
color: #555;
background-color: #f9f9f9;
padding: 15px;
border-radius: 10px;
border-left: 4px solid #007bff; /* Garis hiasan di sebelah kiri */
margin: 0;
}
</style>
</head>
<body>

<div class="profile-card">
<img src="https://via.placeholder.com/150" alt="Foto Profil" class="profile-pic">

<h1>Budi Pratama</h1>

<p class="info">Umur: <span class="highlight">22 Tahun</span></p>
<p class="info">Hoby: <span class="highlight">Coding, Membaca, Traveling</span></p>

<hr>

<p class="quote-title">Filsafah Hidup</p>
<blockquote class="quote">
"Hari ini harus lebih baik dari kemarin, dan hari esok harus lebih baik dari hari ini."
</blockquote>
</div>

</body>
</html>
1. HTML (Fondasi Dasar) -
2. CSS (Tampilan Cantik) you are here
3. JavaScript (Logika & Interaksi)
4. Git & GitHub (Simpan Progres)
5. Framework Frontend (Alat Canggih)
6. Backend & Database (Penyimpanan Data)

HTML: Fondasi Dasar dalam Membangun Website

2026-03-02T12:48:00.000-08:00

Selamat datang di langkah pertama menjadi seorang Web Developer! Jika kita mengibaratkan sebuah website sebagai sebuah bangunan, maka HTML (HyperText Markup Language) adalah kerangka atau struktur batanya. Tanpa HTML, tidak akan ada dinding, pintu, atau jendela.

Apa itu HTML?

HTML bukanlah bahasa pemrograman yang rumit seperti matematika, melainkan bahasa penanda. Ia bertugas memberi tahu browser (seperti Chrome atau Safari) bagian mana yang merupakan judul, mana yang paragraf, dan mana yang gambar.

Struktur Dasar HTML

Setiap file HTML memiliki susunan standar. Berikut adalah contoh "tulang punggung" kode yang selalu ada:

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Halaman Pertamaku</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya di dunia web programming.</p>
</body>
</html>

Tag Penting yang Wajib Kamu Tahu:

<h1> sampai <h6>: Digunakan untuk judul (Heading).
<p>: Digunakan untuk membuat paragraf teks.
<a>: Digunakan untuk membuat link/tautan ke halaman lain.
<img>: Digunakan untuk menampilkan gambar.

🚀 Lanjut Belajar Materi Berikutnya:

Klik pada poin di bawah untuk mempelajari lebih lanjut (Pastikan kamu sudah mengikuti urutannya!):

HTML (Fondasi Dasar) - Kamu berada di sini
CSS (Tampilan Cantik)
JavaScript (Logika & Interaksi)
Git & GitHub (Simpan Progres)
Framework Frontend (Alat Canggih)
Backend & Database (Penyimpanan Data)

Login ke VPS Tanpa Password

2026-02-15T08:36:00.000-08:00

Cara Login ke VPS Tanpa Password Menggunakan SSH Key (Best Practice)

Jika kamu mengelola VPS, menggunakan SSH Key adalah metode login paling aman dan paling direkomendasikan.
Metode ini sudah menjadi standar industri karena jauh lebih aman dibandingkan login menggunakan password biasa.

Dengan SSH Key:

Tidak perlu mengetik password saat login
Risiko brute-force attack jauh lebih kecil
Akses lebih cepat dan profesional

Kenapa Harus SSH Key?

✅ Lebih aman dari password
✅ Tidak bisa ditebak atau di-bruteforce
✅ Cocok untuk server produksi
✅ Dipakai oleh hampir semua sysadmin & DevOps

Gambaran Alur SSH Key

Membuat SSH key di laptop
Mengirim public key ke VPS
Login dari laptop ke VPS tanpa password

Step-by-Step Setup SSH Key (Windows)

1. Membuat SSH Key di Laptop

Buka PowerShell atau Command Prompt di laptop, lalu jalankan:


ssh-keygen -t ed25519

Saat diminta:

Tekan Enter (lokasi default)
Tekan Enter (passphrase boleh dikosongkan)
Tekan Enter lagi

SSH key akan dibuat otomatis di folder:


C:\Users\NamaUser\.ssh\

Isi folder tersebut:

id_ed25519 → PRIVATE KEY (jangan pernah dibagikan)
id_ed25519.pub → PUBLIC KEY (ini yang dikirim ke server)

2. Menyalin Public Key

Tampilkan isi public key dengan perintah berikut:


type %USERPROFILE%\.ssh\id_ed25519.pub

Hasilnya berupa satu baris panjang, contoh:


ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAI... user@laptop

👉 Copy seluruh baris (jangan dipotong, jangan ada enter di tengah).

3. Masuk ke VPS via Console Provider

Karena SSH belum aktif, kita gunakan console bawaan provider VPS (misalnya Open Console).

Langkah umum:

Buka dashboard VPS
Klik Open Console
Login menggunakan username server yang tersedia

Metode ini aman karena aksesnya hanya dari dashboard provider.

4. Menambahkan Public Key ke VPS

Di dalam VPS console, jalankan perintah berikut:


mkdir -p ~/.ssh
nano ~/.ssh/authorized_keys

Paste public key yang sudah kamu copy (1 baris penuh)
Simpan dengan:
- CTRL + O → Enter
- CTRL + X

Atur permission (ini WAJIB):


chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

5. Test Login SSH dari Laptop

Kembali ke PowerShell / CMD di laptop, jalankan:


ssh username@IP_VPS

Contoh:


ssh user@xxx.xxx.xxx.xxx

Jika berhasil, kamu akan langsung masuk ke server tanpa diminta password:


user@server:~$

🎉 SSH berhasil tanpa password

Catatan Keamanan

Jangan pernah membagikan file private key
Public key aman untuk ditempatkan di server
Setelah SSH Key aktif, sangat disarankan menonaktifkan login password

Chatbot AI it-tude.com : Menjawab Berdasarkan Data

2026-02-07T14:36:00.000-08:00

Salah satu kelebihan Chatbot AI dari it-tude.com adalah kemampuannya menjawab berdasarkan dokumen, website, dan data yang dimiliki perusahaan atau rumah sakit.

Artinya, chatbot tidak hanya memberikan jawaban umum, tetapi dapat menjawab sesuai informasi yang sudah tersedia dan terus diperbarui.

Data yang digunakan dapat berasal dari:

Halaman website
Jadwal praktek dokter
FAQ
Data kamar rawat inap
Data antrian
Database internal
Sistem rumah sakit

Chatbot dapat mempelajari dua jenis data:

Data statis, misalnya profil rumah sakit, daftar layanan, alamat, atau FAQ
Data dinamis, yaitu data yang berubah setiap saat, misalnya jadwal praktek dokter hari ini, kamar yang masih tersedia, nomor antrian, atau jadwal poli

Contohnya, jika rumah sakit memiliki halaman jadwal dokter atau database internal, maka chatbot dapat mengambil informasi tersebut secara otomatis.

Misalnya pengunjung bertanya:

“Jam berapa dokter spesialis anak praktek hari ini?”

Maka chatbot dapat menjawab:

“dr. Andi Pratama, Sp.A praktek hari ini pukul 09.00–12.00 di Poli Anak lantai 2.”

Atau jika pengunjung bertanya:

“Apakah kamar VIP masih tersedia?”

Maka chatbot dapat menjawab:

“Saat ini kamar VIP tersisa 2 kamar dan kamar kelas 1 tersisa 5 kamar.”

Dengan cara ini, chatbot tidak hanya berfungsi sebagai penjawab FAQ, tetapi juga dapat menjadi asisten digital yang membantu pasien atau pengunjung mendapatkan informasi secara cepat dan akurat.

IT-Tude

Rethinking Digital Humans: A Lightweight Approach to Web-Based Interactive Avatars

Key Architectural Pillars

End-to-End Execution Flow

Blender: Generating Seamless Flag Wave Animation from Base Pose

Generating Seamless Flag Wave Animation from Base Pose (7-Bone Setup) Script Blender

Key Features & How It Works:

Kode Script (Python - Blender API)

Script Blender: Smooth Auto-Weighting Menggunakan Gaussian Falloff

Cara Kerja Script:

Kode Script (Python - Blender API)

Cara Penggunaan di Blender:

Basic Bone For Flag Animation

traveling wave

GLOWING EDGE MATERIAL 1

Membuat Material Glowing Edge Procedural di Blender

Konsep Material

Base Material

Membentuk Glowing Edge

Menambahkan Micro Surface

Struktur Material

Karakter Efek

Workflow Blender → After Effects

Kesimpulan

Glowing Edge Material 2

Android Bukan Path

Judul aplikasi

Gambar bukan dipanggil seperti HTML

Folder yang sering dipakai

Adaptive icon

Rumus cepat

Cara aman ganti logo sendiri

Bagaimana Chatbot IT-Tude Bekerja di Website

Manfaat Chatbot IT-Tude untuk Website UMKM

Chatbot IT-Tude untuk Menjawab, Mengarahkan, dan Menangkap Prospek

Bagaimana Chatbot IT-Tude Bekerja di Website

Manfaat Chatbot IT-Tude untuk Website UMKM

Chatbot IT-Tude untuk Menjawab, Mengarahkan, dan Menangkap Prospek

Jangan Geer, Pas Pake AI Sebenernya Kita Lagi Jadi Gurunya!

Tapi, Ada Satu Hal yang Gak Bakal Bisa Mereka Tiru...

Closing Thought

Belajar Dasar AI: Cara AI “Noise” - "Denoise"

🔹 Step 1 — Tambah Noise (Ngacak Gambar)

🔹 Step 2 — Denoise (Balikin Jadi Gambar)

🔹 Intinya Gimana?

🔹 Kenapa Cara Ini Dipakai?

✨ Penutup

Apa Itu Chatbot AI untuk Website?

Layanan it-tude.com

Layanan it-tude.com

Tiga Fokus Utama it-tude.com

1. Software

2. Digital Art

3. Mechanical Electrical

Mengenal Berbagai Jenis Shot dalam Sinematografi: Panduan Dasar untuk Artist & Animator

Cara Login ke E-Patrol

Mengapa Website Membutuhkan Chatbot AI?

CSS: Membuat Website Jadi Cantik dan Menarik

Apa itu CSS?

Cara Kerja CSS

3 Cara Memasang CSS:

HTML: Fondasi Dasar dalam Membangun Website

Apa itu HTML?

Struktur Dasar HTML

Tag Penting yang Wajib Kamu Tahu:

🚀 Lanjut Belajar Materi Berikutnya:

Login ke VPS Tanpa Password

Cara Login ke VPS Tanpa Password Menggunakan SSH Key (Best Practice)

Kenapa Harus SSH Key?

Gambaran Alur SSH Key

Step-by-Step Setup SSH Key (Windows)

1. Membuat SSH Key di Laptop

2. Menyalin Public Key

3. Masuk ke VPS via Console Provider

4. Menambahkan Public Key ke VPS

5. Test Login SSH dari Laptop

Catatan Keamanan

Chatbot AI it-tude.com : Menjawab Berdasarkan Data

Generating Seamless Flag Wave Animation from Base Pose
(7-Bone Setup) Script Blender