Forem: Ikhwan A Latif

Cpu Work (2)

Ikhwan A Latif — Mon, 02 Feb 2026 07:11:38 +0000

Continue on how CPU works. As we already know that CPU only knows numbers and calculate number. And So a natural question is "how CPU loops and create condition if the CPU only know how to calculate?".

To put it simply, CPUs have special instructions that allow them to jump between instructions. We can "emulate" loop and condition, for example in my CPU simulation i have this instruction called JZ (jump if zero). As the name suggests, it jumps to another instruction if a certain value is zero.

example:

LOAD A, 1
LOAD B, 1

CMP A, B
JZ exit
STOREM A, 0 ; store value register A to memory
exit:

HALT

At this point, a question appears: "what value does JZ actually check?" we know that exit is just a label on which line it's referring to, not a value. So how does JZ know when to jump, and This is where branching flags come in.

Before JZ instruction, there's called CMP instruction As the name implies is a compare instruction, like example above it compare register A value and register B value.

During this comparison, the CPU updates special internal flags. The most important ones are:

Z (Zero flag): true if the result is zero
N (Negative flag): true if the result is negative

In my simulation, I explicitly store these flags. In real CPUs, these flags are stored in a special register (often called a status register or flags register).

After the calculation for CMP complete the CPU updates the Z and N flags. And when JZ instruction start they will look at Z flag. And if the the Z flag is true (or 1), execute the jump to chosen location.

Same as Loop, like example below

LOAD A, 4
LOAD B, 1
LOAD C, 1

loop:
SUB A, B ; substract A with B
CMP A, C
JZ exit ; if A == C
JMP loop ; not equal than repeat
exit:

HALT

As you see can see above this instruction is the simplest loop where if A is equal to B exit loop.

To create the loop, we need two jump instructions:

JZ for the conditional jump.
JMP for the unconditional jump back to the loop.

If the JZ condition is not satisfied, the CPU moves to the next instruction, which is JMP. Since JMP has no condition, the CPU will always follow it.

In my simulation, the code for CMP looks like this:

// get value from register and substract
int temp = reg.r[inst.operandA] - reg.r[inst.operandB];
// check if zero or negative 
flag.zero = (temp == 0);
flag.negative = (temp < 0);
programCounter++;

The important rule is that the CMP instruction should not store any new value in registers or memory. It only updates the flags.

Of course there is other instruction other than JZ such as:

JG (jump if greater),
JL (jump if less),
JNZ (jump if not zero),

and many others, depending on the CPU design.

So when you see a code like:

int valueA = 2
int valueB = 3

if (valueA == valueB) {
    // do stuff
}

in CPU it basically try to subtract valueA and valueB and if zero condition fulfill (ignoring compiler optimizations).

And from this branching flags alone, there are many possibility you can create in here because from my experience no matter the fancy code is inside are just bunch of condition and loop.

CPU Work

Ikhwan A Latif — Thu, 29 Jan 2026 04:52:44 +0000

I've been building quite a few projects and one of them is this CPU Simulation. I've been in the web world for 4 years, but i still did not understand what CPU is. So in the past week i start to build a small project CPU-Simulation that follow the behavior in the CPU.

Why the sudden interest in CPUs? Curiosity. There was a trigger after reading an article on how CPU work and they the work is quite simple, that got me thinking "hey, i can build that".

Note: This is the article CPU and this one CPU

So, in CPU they have two important component called Control Unit and ALU (Arithmetic Logic Unit). At a high level, they follow a simple idea often described as “fetch and execute.” In more detail, the cycle looks like this:

Control Unit
This Control Unit responsible for fetch instruction from memory and decode the instruction into something ALU can read. by decoding means they translate the instruction into control signal that the ALU can act on.
Arithmetic Logic Unit (ALU)
ALU is responsible for execution the instruction that producing a result and storing the result in register or memory.

So to put it simple it more like fetch -> decode -> execute -> store -> next. That's the whole cycle, the cycle repeat until all instruction is complete.

From this it's tell me that, the computer work in a simple and predictable manner. The CPU does not care what program it given, it only cares whether an instruction is valid and whether it can be executed.

So i did manage to build the simulation using java, and it can be improve later. Here some code Github.

I use web browser to interact with the cpu, the cpu have 4 register index and 100 bytes of memory. But right now i only create small portion on how CPU work.

Here gist code CU & ALU

As you can see from github code the CU or Control Unit have it's own class. The class contain few important part and there is fetch the program convert to stream and decode it, to something that Simulation ALU can read.

  private int resolveInstruction(Operand op) {

    // Convert to Number
    if (op instanceof LabelRef label) {
      Integer addr = labels.get(label.name());

      if (addr == null) {
        throw new IllegalStateException("Unknow Label :" + label.name());
      }

      return addr;
    }

    // Convert to Number
    if (op instanceof HexCode hx) {
      return Integer.decode(hx.value());
    }

    // Convert to Number
    if (op instanceof Immediate imm) {
      return imm.value();
    }

    // Convert to Number
    if (op instanceof RegisterCode rc) {
      return parseRegister(rc.value());
    }

    return 0;
  }

  private Instruction resolver(RawInstruction ins) {
    var instruction = new Instruction();
    instruction.opcode = ins.opcode;
    switch (ins.opcode) {
      case HALT:
        break;
      case JMP:
        instruction.dest = resolveInstruction(ins.dest);
        break;
      case STOREM:
      case LOADM:
        instruction.dest = resolveInstruction(ins.dest);
        instruction.src = resolveInstruction(ins.src);
        break;
      case LOAD:
        instruction.dest = resolveInstruction(ins.dest);
        instruction.src = resolveInstruction(ins.src);
        break;
      case CMP:
      case ADD:
        instruction.dest = resolveInstruction(ins.dest);
        instruction.src = resolveInstruction(ins.src);
        break;
      case JZ:
        instruction.dest = resolveInstruction(ins.dest);
        break;
      case null:
      default:
        break;
    }

    return instruction;
  }

You can see from function called resolver it convert every value into number. Because CPU does not talk other than number.

  void execute(Register reg, Memory mem, ArrayList<Instruction> program) {
    if (programCounter < 0 || programCounter >= program.size()) {
      halted = true;
      fault = CpuFault.INVALID_PC;
      return;
    }

    Instruction inst = program.get(programCounter);

    switch (inst.opcode) {
      case LOAD:
      case STOREM:
      case LOADM:
      case ADD: // register to register
        this.store(inst, reg, mem);
        break;
      case CMP:
        int temp = reg.r[inst.dest] - reg.r[inst.src];
        flag.zero = (temp == 0);
        flag.negative = (temp < 0);
        programCounter++;
        break;
      case JMP:
        programCounter = inst.dest - 1;
        break;
      case JZ:
        if (flag.zero) {
          programCounter = inst.dest - 1;
        } else {
          programCounter++;
        }
        break;
      case HALT:
        halted = true;
        break;
      case null:
      default:
        fault = CpuFault.ILLEGAL_INSTRUCTION;
        halted = true;
    }
  }

  private void store(Instruction inst, Register reg, Memory mem) {
    switch (inst.opcode) {
      case LOADM:
        if (inst.src > mem.ram.length) {
          halted = true;
          fault = CpuFault.INVALID_MEM;
          break;
        }
        reg.r[inst.dest] = mem.ram[inst.src];
        programCounter++;
        break;
      case STOREM:
        if (inst.src > mem.ram.length) {
          halted = true;
          fault = CpuFault.INVALID_MEM;
          break;
        }
        mem.ram[inst.src] = reg.r[inst.dest];
        programCounter++;
        break;
      case ADD:
        int res = reg.r[inst.dest] + reg.r[inst.src];
        reg.r[inst.dest] = res;
        flag.zero = (res == 0);
        flag.negative = (res < 0);
        programCounter++;
        break;
      case LOAD:
        reg.r[inst.dest] = inst.src;
        programCounter++;
        break;
      default:
        break;
    }
  }

And above code block is an important function in ALU Class, which contain execute function where it take the decoded instruction from Control Unit Class and execute it. And of course i add an error handler, the error handler in CPU are quite similar to most program, if there some illegal instruction or incorrect instruction they halted the program from execute. If you ever use a tool like sudo or other linux command it's the same, if it's error stop the program.

And other interesting part is the label tag like loop: or exit:. That label are just for parser to remember what line are they referring to. For example:

LOAD A, 1
LOAD B, 1
LOAD C, 7

loop:
ADD A, B
CMP A, C
JZ exit
JMP loop

exit:
HALT

above instruction are a simple instruction for loop if value reach zero stop the loop. Equivalent with


int A = 1
int B = 1
while (A != 7) {
    A += B
}
return

If i swap the JZ exit with JMP loop it can cause infinite loop.

There are many more modern concepts in CPU design, but for now, I think a traditional CPU model is enough to understand the fundamentals.

Get Hit By Performance Bottleneck In Canvas

Ikhwan A Latif — Fri, 02 Jan 2026 07:27:00 +0000

I have this on-going project called map editor where i can create map and customize map for future project, that involved map. From here i learn how to use canvas, to use vanilla JavaScript and html data-*. I manage to build my procedural generated map where i click button it will create a map, and of course i able to customize the variable of the input to generate new map.

When i manage to create the procedural generated map i got hit by bottleneck where generating map is too slow. So i debug the program and there are two culprits. The canvas render and the map generator, i have 1200px x 700px canvas size and i want to fill this canvas with generated map.

The Slow Canvas

This is my second time play with canvas, and as a new player to canvas. And most tutorial in canvas they always suggest you to


ctx.fillStyle = "#ff0000"
ctx.fillRect(0,0,1,1)

this is good for first time learner. But once you step into something complicated, like render 1000px x 700px at once that will be a bottleneck. Why? it simple let's create a code


const pixelSize = 1

const mapSize = [][]

for (let y = 0; y < mapSize.length; y++) {
    for (let x = 0; x < mapSize[y].width; x++) {
         const color = mapSize[y][x].color
         ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},1)`;
         ctx.fillRect(x*pixelSize,y*pixelSize,pixelSize,pixelSize)
    }
}

This seems innocent but if you have canvas size of 1200px x 768px, it slow.

A 1200 x 768 = 921,600 pixel, using two nested loops, that translates to nearly a million calls to ctx.fillRect. Each call crosses the JavaScript → browser rendering boundary and updates canvas state, the browser can’t efficiently batch these operations, so the CPU becomes the bottleneck long before the GPU is fully utilized.

So what we need is a batch update since ctx.fillRect can't do batch. We have to find something.

The alternative is ctx.putImageData which allows direct, bulk access to the canvas pixel buffer. example code below:

const mapSize = [][]

// create buffer of pixel image data with a size of n x m
let imageData = ctx.createImageData(mapSize[0].length, mapSize.length)
let index = 0

for (let y = 0; y < mapSize.length; y++) {
  for (let x = 0; x < mapSize[y].length; x++) {
    const color = mapSize[y][x].color
    imageData.data[index++] = color.r
    imageData.data[index++] = color.g
    imageData.data[index++] = color.b
    imageData.data[index++] = 255
  }
}

ctx.putImageData(imageData, 0, 0)

The imageData is a flat array following [r,g,b,a,....] layout. If not follow the layout, it will draw but it will produce unexpected result.

You can see that i didn't called ctx.putImageData inside the loop and i only called once. And i put all information in memory and draw it after loop complete. The amount loop is still the same but the content inside loop is just store information.

if you put ctx.putImageData inside a same loop as above example it will not improve because you will cause CPU overhead again.

This approach significantly improves performance for full-canvas, per-pixel rendering. It’s not a universal replacement for ctx.fillRect, but it’s the right tool when you need to update many pixels at once.

Slow Map Generator

In Map Generator i use Fractal Brownian Noise And Perlin Noise for detail explanation what are those two, i recommend you to watch and read the detail at Perlin Noise and Perlin Noise.

I'm not gonna go into detail about those algo but a simple explanation is that natural terrain changes smoothly over space, and Perlin-based noise models this behavior by producing spatially correlated values.

And Fractal Brownian Noise builds on this idea by layering multiple Perlin Noise functions at different scales, adding both large shapes and small details.

function generator(options) {
  const { permutationTable, width, height } = editorState

  let noises = []

  let max = -Infinity
  let min = Infinity

  for (let y = 0; y < height; y++) {
    noises[y] = []
    for (let x = 0; x < width; x++) {
      const noise = FractalBrownianNoise(x, y, permutationTable, options)

      if (noise > max) {
        max = noise
      }

      if (noise < min) {
        min = noise
      }

      noises[y][x] = noise
    }
  }
}

Generating noise at full resolution means evaluating FractalBrownianNoise hundreds of thousands of times per update. While this works for small canvases, it becomes expensive at larger sizes and causes visible lag in the browser.

function generator(options) {
  const { permutationTable, width, height } = editorState

  let noises = []

  let max = -Infinity
  let min = Infinity

  const sampleHeight = Math.floor(height / 3)
  const sampleWidth = Math.floor(width / 3)

  for (let y = 0; y < sampleHeight; y++) {
    noises[y] = []
    for (let x = 0; x < sampleWidth; x++) {
      const noise = FractalBrownianNoise(x, y, permutationTable, options)
      noises[y][x] = noise
    }
  }
}

Instead of generating noise at full resolution, I switched to a sampling approach. I evaluate the noise function on a lower-resolution grid and treat it as a sampled version of the final map. In this case, the original 1200 × 768 map is sampled down to 400 × 256 by dividing both dimensions by 3. This reduces the number of noise evaluations by almost 9×, significantly speeding up generation. The sampling rate can be adjusted depending on what the device can handle.

Once the noise is sampled at a lower resolution, the next step is reconstruction. To restore the map to its original size, I use bilinear interpolation to estimate the values between samples.

function generator(options) {
  const { permutationTable, width, height } = editorState

  let noises = []

  let max = -Infinity
  let min = Infinity

  const sampleHeight = Math.floor(height / 3)
  const sampleWidth = Math.floor(width / 3)

  for (let y = 0; y < sampleHeight; y++) {
    noises[y] = []
    for (let x = 0; x < sampleWidth; x++) {
      const noise = FractalBrownianNoise(x, y, permutationTable, options)
      noises[y][x] = noise
    }
  }

  // back to original
  const scaledMap = bilinearInterpolation(noises, width, height)
}

I use bilinearInterpolation because the nature of blending value to create smooth upscale image and since FractalBrownianNoise is smooth by nature, it make a perfect candidate to combine.

End

Well that's two of it, i can go even further like use OffscreenCanvas to render but that not necessary for now since i already reach target performance i want. Here are a sample code of mine
Gist Code

Quick To Spot API/System Slow

Ikhwan A Latif — Mon, 29 Sep 2025 09:24:23 +0000

I recently read Blink — the book about how experts can spot mistakes in seconds (sometimes milliseconds). Developers build the same intuition: after getting burned enough times, you just feel when code will be slow.

I keep getting hit by the same types of slow code, so here are the patterns I now spot instantly and how to fix them.

The N+1 Query

aah yes, the most thing i see when developing is this problem. This cause your app to slowdown significantly, why is that, you call a query inside a loop think about it you have one user and thousand of product. Each product have detail somewhere in the table, you loop the product each loop you query the detail product. For me this kind of situation is not a problem if user is only have like 5 product or list, but 1000 product you better ditch the code and start a new. The code i usually counter are like this:

const products = await Product.getAll(userId); // fetch all product

for let i = 0; i < products.length(); i++ {
    const product = products[i];
    const productDetail = await ProductDetail.getOne(product.id)
    // ...other logic
}

const products = await Product.getAll(userId); // fetch all product

products.map(async product => {
    const productDetail = await ProductDetail.getOne(product.id)
    // ...other logic
})

be careful async return promise if you put .map(async ()=> {}) it return array of promise you should wrap it in Promise.all()

This both code spark problem async inside loop which is fine BUT just like i said before 5 - 15 product it's totally fine but if there 1000 product eeh. For me i usually tackle this situation like this code below:

const products = await Product.getAll(userId); // fetch all product
const allProductIds = products.map(x => x.id)
const allProductDetails = await ProductDetail.getAllBasedOnId(allProductIds)

for let i = 0; i < products.length(); i++ {
    const product = products[i];
    const productDetails = allProductDetails.include(product.id)
}

Well you can do above like that or you can convert the allProductDetails into Hash Table (or Object/Map if you want to said it) instead of array like

const products = await Product.getAll(userId);
const ids = products.map(p => p.id);
const allDetails = await ProductDetail.getAllByIds(ids);

// fast lookup
const detailsMap = new Map(allDetails.map(d => [d.product_id, d]));

for (const product of products) {
  const detail = detailsMap.get(product.id);
  // ...other logic
}

There are multiple way to handle it, for example you can manipulate it with full query the rest are logic.

const allProductDetails = await ProductDetail.getAll({
    join: {
         relation: Product,
         key: 'id',
         field: [],
         join: {
              relation: User,
              key: 'id',
              field: [],
              where: 'user = ' + userId,
         }
    },
})

for let i = 0; i < allProductDetails.length(); i++ {
    const productDetail = allProductDetails[i];
}

Note: the .getAll() is just an example

With code above, this save a lot of time because we preventing calling DB every single loop. Calling the database repeatedly is like driving across town for groceries but buying one item at a time instead of everything in one trip.

Index, Double Edge Sword

One of the most common places where performance tanks is when you start joining big tables. At first the query looks innocent:


SELECT * FROM product_history AS ph 
INNER JOIN product AS p ON ph.product_id = p.id

for small data it's ok. but if the record is reaching 1M or even 500K, than you might consider add Index. And there are two way to add index one using FOREIGN KEY and Other with CREATE INDEX.

Adding Index With Foreign Key

# Add Foreign Key
ALTER TABLE product_history ADD FOREIGN KEY(product_id) REFERENCES product(id) ON DELETE [CASCADE | NO ACTION | RESTRICT | SET NULL] ON UPDATE [CASCADE | NO ACTION | RESTRICT | SET NULL]

ALTER/ADD FOREIGN KEY semantics vary by engine (SQLite often requires table rebuild). Check your DB docs.

Above example are adding Foreign Key into your table, and what does Foreign Key do, well it just for data integrity between two table that's all, it mean making sure data for product_history.product_id is exists in product.id. And if there some change in parent tables the connected tables will take action. It either restrict you from changing or turn to null or delete it when there's some changes.

But here the bonus: in MySQL (or most relational database), when you declare foreign key, the database it will require you to create index or it will silently create you an index. So that means when you join two table later the database doesn't have to scan row by row, it can use the index to jump straight to the matching rows.

Adding an Index Directly

You can also add an index explicitly:


CREATE INDEX idx_product_history_product_id ON product_history(product_id [ASC | DESC])

This query above will create index with index named idx_product_history_product_id and index is located in product_history at column product_id and it sorted ASC / DESC depend which one you choose.

Let me tell you again if we only have like 100 to 10K record the query does not have a problem. But if you have like 500K or 1M data this simple query will became a bottleneck. And of course be careful when add index, adding too much index causing Writing Performance became slow. So add index when it's necessary.

And index are great when you try to search something in DB like:


SELECT * FROM product_history AS ph 
INNER JOIN product AS p ON ph.product_id = p.id WHERE p.code = 'ADF'

you can index for p.code like:


CREATE INDEX idx_product_code ON product(code [ASC | DESC])

Indexes aren’t limited to foreign keys, you can (and should) use them for filtering conditions in your WHERE clauses too. And of course you should consult the documentation when you try to add index the optimize way.

At the end of the day, indexes are your best friend for speeding up your queries, but like any other sharp tool, misuse the tools it can cut you. Use EXPLAIN, understand your database’s planner, and add indexes only where they matter.

Few Docs for quick read:

How Mysql Use Index

Create Index

Multiple Column Index

Note: if you have 1M or 500K Record and you add new index, the database will take it's time to complete the operation. Because the nature behind index are they create a separate structure(B-tree) where stored differently and not visible for dev. During that operation, your writes may be blocked or slowed down. So earlier developer panic when they do this (always have other pair of eyes if you play with prod DB).

Use EXPLAIN to Verify

Use EXPLAIN to see whether your query uses an index. But be wary, each relational database (MySQL, PostgreSQL, SQLite, etc.) can have a very different query planner (SQL optimizer).

The planner is the brain for the database, it will decides whether to use an index, a sequential scan, or another strategy to get the fastest result. That's why when you try on different Database with the same query it can look very different depending on the database:

MySQL often prefers indexes aggressively. You’ll see things like eq_ref or ref in the EXPLAIN output when the index is used.
PostgreSQL is cost-based. It means if scanning a whole table is cheaper it will happily choose full scan table, even index is exists in tables.
SQLite also has a planner, but it works closer to Postgres, if your query isn’t selective, it may ignore the index.

Using Mysql No Index

Using Mysql With Index

from image above you can see that the table ph is not using index type: ALL at first picture and second picture is using index type: eq_ref or ref

here some example in PostgreSQL and SQLite

Even Index Exists it still chose Seq Scan (Full Scan)

Even though an index exists in Postgres, it may still pick a sequential scan if the estimates it’s cheaper than using the index (cost-based optimizer.

It Use RowId instead of index

In SQLite, every table has a hidden rowid unless created table with WITHOUT ROWID. If you declare INTEGER PRIMARY KEY in your column, the column becomes an alias for rowid. That’s why SQLite EXPLAIN often shows SEARCH ... USING INTEGER PRIMARY KEY (rowid=?). For more info about rowid here

So if you see different EXPLAIN outputs across databases, it’s just the optimizer making trade-offs depending on its internal cost model.

you can refer to their documentation for more clarification.

SELECT, Death by a Thousand Bytes

Let's continue with a same example:


SELECT * FROM product_history AS ph 
INNER JOIN product AS p ON ph.product_id = p.id

did you see something wrong?, the asterisk symbol (*) is wrong, you should never use it. What it trying to do is fetch all column. Imagine you have 20 column and 10 column data type are TEXT or MEDIUMTEXT even even worse JSON. ugh... the pain.

for reference:

TEXT max are ~65 KB (65,535 Bytes)
MEDIUMTEXT max are ~16MB (16,777,215 Bytes)
JSON it depends (each database is very different, on how they implemented it)

Storage Requirement MySQL here

Now let’s play with numbers:

Say you fetch 100,000 rows, each with a TEXT column.
Worst case, that’s 100,000 × 65,535 ≈ 6.5 GB of raw data.
And of course, the databases apply compression and optimizations, but you get the idea, the memory footprint can blow up so fast.

The SQL will use a lot of memory just to process the SELECT query, if you combine with previous problem the missing index, no wonder the fetch it slow.

First of all when you try to create table, please consider what kind of type you want to use don't just put a large data type in there, if it's UUID just put like CHAR(36) or something close, just don't put CHAR(200) in there just because you want to scale it for the future. As a software developer you have to solve the current facing problem, for now think about how you can solve those quickly.

how to fix it, well call the column properly:


SELECT ph.product_id, p.product_name, ph.activity 
FROM product_history AS ph 
INNER JOIN product AS p ON ph.product_id = p.id

It convenient to type asterisk (*), but don't turn that into normal behavior, Just use necessary column.

Loops The good and The bad (JS)

The most important piece of code in every language. You can't avoid it, if you ever learn Time Complexity it always involve loop and total of data.

But before i explain more further, if your not a developer that bound your soul to JavaScript, you can skip this part.

Loop, in javascript there 3 types of loop and that is:

for

My favorite kinda of loop, a simple straightforward and no surprise it will do what you tell

// i can do this
for (let i = 0; i < 10; i++) {}

// i can do this too
for (let i = 10; i >= 0; i--) {}

// even this
for (let i = 0; i < 10; i*=2) {}

// heck even this
for (let i = Math.E; i < Math.pow(Math.PI, 20); i += Math.pow(i, 2)) {}

Endless possibility, the only thing that hold back is your imagination. Straight forward. This classic loop leaving little memory footprint so it ease the pain for the garbage collector in JavaScript. And of course since it close to bare metal or CPU, the engine will optimize it.

for (const item of items)


for (let i = 0; i < arr.length; i++) { /* ... */ }

Not my favorite loop, not hating it either

It used Iterator protocol under the hood (it something like calling method next() that return {value, done} if done true the loop stop).
JavaScript won't optimize it since you create a different kind of loop

Still, for moderate data sets it’s perfectly fine and often more readable.

for more information about Iterator here

arr.forEach(callback)

Hated it. Why? God damn slow. If you have a lots of records to loop, this will slow you you APIs, especially when the loop is nested (sometime we can't avoid the nested loop). And many people using it (because it's clean), i can't even stop it using break. You have throw an error exception to break it. And why i hate it:

It allocates a callback function for every iteration. More functions = more garbage for the collector.
You can't stop the loop with break, you have throw an error Exception to stop.
Nesting forEach calls is a quick way to create GC (Garbage Collector) hell.
Optimizer probably give up seeing this forEach.

forEach is fine for examples, but in performance-sensitive code you should change it.

Conclusion

You don't know how many time i get hit by that above problem, whenever i get a complain from client that the feature report is slow. It always those four problem. Well there is the time where i had to find a creative way to solve the problem, but if you get hit by performance problem always look for these four first. It save you a lot of time, here the step by step (by me) to handle performance problem:

Look at how much we play
Look at how much table you join
Look at the code, does it have N+1 Problem?
Look at the Select Query
Look at the Index
Look at Query Performance Report using EXPLAIN
Then you can change the code to different logic

As i was wrote above, this is just my way to measure / benchmark. But of course the cause the app performance became slow is how you access the data, how much data you play with, and how do you store those data. It always bound to CPU, RAM or Memory, and DISK.

And as always Measure first before fixing the problem.

And if you built a performance sensitive app, you shouldn't use JavaScript, just talking from experience here.

Gaussian Blur

Ikhwan A Latif — Fri, 12 Sep 2025 02:34:03 +0000

Gaussian Blur

Back then while building my side project (ASCII Render Program), i stumbled upon Gaussian Blur while experimenting with edge detection in images. In a video from Computerphile the Video give a recommendation that if you want to use Edge Detection in Image you should add Gaussian blur into the image.

So what is Gaussian Blur, Is a blur using Gaussian function by using this function we can create blur image. It will create nice blur color but the information color are still intact. So how does Gaussian Blur work, the word "Gaussian" stand for bell-curve, so yes we use bell-curve sample for blurring an image instead of average sample.

Image source: Wikimedia Commons

You can see image above the value focus on center while the further you are from the center became small. The image below are comparison between Gaussian Blur and Box Blur

Generate Gaussian Blur Image

Above picture are the result blur image. Well it kind hard to tell (i test using small σ number) but if we zoom in to single pixel you scan see there's a blurring that happening.

Small Image of Gaussian Blur

Compare to Box Blur

Small Image of Box Blur

As 2 above picture first one use Gaussian Blur and second Box Blur. As you can see the Box Blur give use multiple gray color, this happen because because use Average Sample to calculate pixel, so when computer calculate pixel it using Average value, let says computer calculate pixel located in 4,4 in x,y coordinate it will look their neighborhood pixel (included center pixel) and sum all value and then divide the value to get the average value.

While Gaussian Blur it's using bell-curve so when the computer calculate want to calculate pixel located in 4,4 in x,y coordinate. It almost the same calculate pixel with their neighborhood pixel, the difference are instead sum all and divide to get average value, Gaussian use distribution technique where the Gaussian will decide how much each pixel contribute to get pixel value among their neighborhood (included center pixel). And like the word "Gaussian" the center pixel will contribute the most instead the neighborhood. Below are the explanation for how it works.

Let's just says, Box Blur creates a convolution kernel that’s very simple a n × n matrix where every value is the same (start from 0 when create kernel). This makes it fast and easy to compute, but the blur can look harsh at the edges.

A Gaussian Blur, on the other hand, builds its kernel using the bell curve (Gaussian function). Instead of every value being identical, the numbers in the kernel vary depending on their distance from the center. This produces a smoother, more natural blur that blends edges more gently.

Formula

The function below is used to create Convolution Kernel (for you who don't know what is Convolution Kernel mean, you can see a video explanation here it's a good video) to generate blur image like below. The Gaussian function below are used to generate Convolution Kernel where if we sum all value in kernel it should give us approx of 1 and never more than 1.

Why is 1? because number 1 represent as 100% so if you sum all and the result are 0.6 it mean 60% from original image.

\frac{1}{2\pi\sigma^2} \, e^{ -\frac{x^2 + y^2}{2\sigma^2} }

Where
x,y = pixel coordinate (as programmer i called index instead)
σ = sigma
e = Euler's number
π = pi number

As a self learner, learning about math is very difficult. Let's hope this blog will simplify your learning.

The math contain 2 thing:

Normalization Factor

\frac{1}{2\pi\sigma^2} \

what is Normalization Factor, and why does Normalization Factor exists?

As you can see it's a function to normalize the number among kernel. This function is making sure if sum the value in kernel it will give nice 1 value. Without it the image will be either too bright or too dark, stray away from their original image color.

That’s why we normalize, so the total sum of the kernel equals 1, keeping the image brightness consistent after convolution.

Exponential Decay

e^{ -\frac{x^2 + y^2}{2\sigma^2} }

What does this function do?

Exponential Decay is the function which determine how much influence the color in the specific kernel. Remember people "Gaussian" it's called bell curve where center it's the focus. So this function is generate number where the further you are from the center the smaller the distribution are.

This function exists because when we try to create blur we don't want the neighboring color influence too much in the center of color, so the center of the color are still strong. So if we compared with Box Blur, the Box Blur it just sum all pixel and divide by number of kernel. It mean neighbor color can give strong influence color which give different result.

What is σ

Sigma (σ) is where blur come to play, this particular symbol play an important role. it determine how strong and wide the blur are in the kernel. And of course the σ are used for how big the kernel. The bigger the number are the blurred the image will be.

How it Works

First set sigma (σ) value let's says 3 than, set how much n x n kernel size let's says 5. You can use something like math below to get n size

\text{n} \approx 2 \times \lceil 3\sigma \rceil + 1

But for a sake of education we set kernel size to 5, so we can get interesting edge case.

Let's says i have kernel of 5 x 5 kernel with sigma (σ) of 3

\begin{bmatrix} 0 & 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 0 & 0 \\ \end{bmatrix}

below are our initial kernel, this is multi-array dimensional with x, y. And remember "Gaussian" mean distribution from the center or should i call index 2,2 is the highest distribution number (because it located in the center from 5x5 array).

But for this specific kernel the center value for x,y should be 0,0 not 2,2. That means for position index of 0,0 (in most top left) it should be -2,-2. You should figure how to do that in the program.

Logic

Loop x:
    Loop y:
        x, y = figuring out how to present 0 index value to -2 x,y point
        apply gaussian function with x, y
    End Loop
End Loop

Example

let's write an example with example above 5 x 5 kernel and sigma 3

let start with center

where x, y is 0,0 and pi is 3.1416 and e is 2.718281828459045

the further the pi and e number is, it will give different result (it doesn't mean wrong it will give different result from below if you use like pi 3.14 two number behind decimal)

\frac{1}{2\pi 3^2} \, e^{ -\frac{(0)^2 + (0)^2}{2 (3^2)} }

let's start from Normalization Factor

\frac{1}{2pi 3^2} = 0.017683 \

next is Exponential Decay

e^{ -\frac{(0)^2 + (0)^2}{2 (3^2)} } = 1

we multiple and we get 0.01768

how about the top left side where x, y is -2, -2 and pi and e same as previous

lets do the step again

first normalization format

\frac{1}{2pi 3^2} = 0.017683 \

next is Exponential Decay

e^{ -\frac{(-2)^2 + (-2)^2}{2 (3^2)} } = 0.68

we multiple and we get 0.01134

and the final result are below

\begin{bmatrix} 0.01134 & 0.01365 & 0.01416 & 0.01365 & 0.01134 \\ 0.01365 & 0.01582 & 0.01672 & 0.01582 & 0.01365 \\ 0.01416 & 0.01672 & 0.01768 & 0.01672 & 0.01416 \\ 0.01365 & 0.01582 & 0.01672 & 0.01582 & 0.01365 \\ 0.01134 & 0.01365 & 0.01416 & 0.01365 & 0.01134 \\ \end{bmatrix}

as you can above example the value are going further from center. The further x,y from center the smaller the number is, and that's way they called Gaussian.

The thing about this Convolution Kernel are if you sum all number above it will not give you close to 1. It give you around 0.3465 which is opposite of what normalization are suppose to do where if we sum all value in kernel the value should be 1.

Why is that? Well, since we don't use equation above or below to get validate kernel size

\text{n} \approx 2 \times \lceil 3\sigma \rceil + 1

We got hit by interesting edge case, the sum value of inside kernel is not even close to 1. 0.3 it mean the result will give as 30% from the original image. It's distributed but not normal.

How we tackle this? we have the sum it's 0.3465, if you get hit by this un-normalization situation you should normalization it. A-ah but not through above where you calculate the kernel again. No-no-no we can use the sum value to normalize the kernel by dividing each value in kernel with sum value and replace those value with new value. Did you get it?

let see the kernel value

\begin{bmatrix} 0.01134 & 0.01365 & 0.01416 & 0.01365 & 0.01134 \\ 0.01365 & 0.01582 & 0.01672 & 0.01582 & 0.01365 \\ 0.01416 & 0.01672 & 0.01768 & 0.01672 & 0.01416 \\ 0.01365 & 0.01582 & 0.01672 & 0.01582 & 0.01365 \\ 0.01134 & 0.01365 & 0.01416 & 0.01365 & 0.01134 \\ \end{bmatrix}

Sum = 0.3465

let's pick the center 0.01768. we divide the center

G (0, 0) = 0.01768/0.3465 = 0.0510

do that every single value in kernel and replace it with new value and we get

\begin{bmatrix} 0.0327 & 0.0394 & 0.0409 & 0.0394 & 0.0327 \\ 0.0394 & 0.0456 & 0.0482 & 0.0456 & 0.0394 \\ 0.0409 & 0.0482 & 0.0510 & 0.0482 & 0.0409 \\ 0.0394 & 0.0456 & 0.0482 & 0.0456 & 0.0394 \\ 0.0327 & 0.0394 & 0.0409 & 0.0394 & 0.0327 \\ \end{bmatrix}

it distributed and normalize and we get 1.0358. Hmm... above 1, well for practical purpose stopping from here it's ok i guess, BUT if you a developer you should normalize it again (same as above use the sum and divide replace) so it can get value of 1 or close to 1 like 0.999999 since in computer we always get hit by floating precision problem.

The step above is just to create Convolution Kernel to blur an image. The rest are how you apply the filter in the image.

Here are gist code that i have to extend your understanding gist

How to apply the kernel in the image it's basically the same like most of filter or blur.

Create new empty image with w x h size, loop every pixel in the old image, in each pixel apply kernel and calculate the neighborhood pixel after that you get new pixel and apply those new pixel into new image.

When apply filter you should think about edge in image like 0,0 pixel since we try to apply n x n kernel size (5x5) you cannot apply the kernel in the top left image since there is no -1,0 pixel image. You need to extend your image to handle such edge case, there are few like zero padding (the easiest one) basically for pixel located in -1, 0 just set to pixel color to 0.

Hmm... maybe i should explain how to apply blur next time. The blog become too long. Probably next is how apply Gaussian so it's will technical

Anyway Closing

Gaussian Blur is a great example of how mathematical functions directly shape the way we process and see images. From here, it can be extended to edge detection, sharpening, and even deep learning filters.

Adventure Of DIP

Ikhwan A Latif — Fri, 22 Aug 2025 04:56:36 +0000

What is DIP, well I'll tell you what is it, DIP is Digital Image Processing, which take an image and process it whatever you like. And how did i ended up here, i used to work in the web for example like tinkering a server, build some feature, or fix a bug, you know the usual stuff. But as time move i suddenly realize how does image scale work, i often just use library and call .scale(px, py) to scale an image. But i never understood what behind those function. So i try to challenge myself to build my own image scale and render the image with ASCII (for fun). So Project ASCII Renderer was born.

The step for building an ASCII Renderer are:

Get The Image From Input
Convert The Image to Grayscale Image
Scale Down the Image (Since I'm gonna display it in the terminal)
Show The Output By Render it With ASCII

The plan is using Go language since they already have build in color to play with pixel. So i give it a go, by starting simple and what is simple mean here.

Grayscale Image

But why we convert the image to gray instead of use full colored image. Well when we want to render image to ASCII color like RGBA are not needed. What we need are the brightness color (usually represent with 0-255 int), this brightness color allow us to map each pixel to ASCII character.

Go already provide color.GrayModel.Convert() so i use that function to convert my image to gray. Loop all pixel in image and each pixel call color.GrayModel.Convert() and you get an image with gray color.

Scaling

For scaling, well when i look at the google they have many multiple way to scale an image and one of it is Nearest Neighbor Interpolation which it only took 2 point (x, y) and choose between two point.

Nearest Neighbor

How does Nearest Neighbor Interpolation work let's take a look. I have an image of 500 x 400 and i want to scale down the image to 200 x 150, first we need to find the scale factor from 500 -> 200 for width and 450 -> 150 for height

Scale Factor for width = 500/200 -> 2.5
Scale Factor for height = 450/150 -> 3

We find the Scale factor for width and height now what. Well it's actually simple just loop through each pixel, but which pixel that i should loop because there two image 500 x 400 and 200 x 150.

Of course the 200 x 150 image because we want to assign new pixel in this scale down image. In DIP we should never modified the image, you should create new empty image to prevent incorrect information in the pixel.

When inside the loop first thing you should do is find the original pixel. Remember we loop the image with 200 x 150 pixel not the original image, after we found original x and y pixel we round the value.

This is where the nearest neighbor come... the rounding value, lets says i have x of 5.5 the computer must decided which pixel you must pick 5 or 6 because there's no way you pick the 5.5, pixel does not accept 5.5.

So you have to pick, how to pick is your decision round down or round up or a new wacky way to round value, it's up to you. after you pick which value to use get the color value in the original Image and set the value into your new image. and Done. you just build the Image Scale function.

Note*: a few consideration, you should think about type if you use static type language, int and float are matter because this can dramatically change your result. I'm not mean is not correct it just give different result.

Render

Render. Since We already already convert into Gray and have an image that scale down, we just need to render. But first we need a set of character to render it, to make it simple i just use what most people use " .:-=+*#%@" this is what i often see. if we look the set of character it already pre-sort from light color to dark color the " " empty space represent the white color and the "@" represent the dark color. But still you can flip it if you want, it will only give different result.

So to render, you have to loop the image per pixel and this is the interesting part, you either can use normal if statement or you can use math to decide which character to use.

for if statement you have to set threshold for example color 0 to 50 you must use this " " character and if the color 50 - 75 you must use "." this character, etc.

if color > 0 && color < 50 {
    print(" ")
}else if() {
} // other condition

Or you can use math example below:

index = x * len(chars) / 255

x = color number (0-255)
char = array of character

e.g:
150 * 10 / 255 -> we get 5.88 round it to 6
100 * 10 / 255 -> we get 3.99 round it to 4
255 * 10 / 255 -> we get 10

Conclusion

Ok, lets wrap this up. What did i learn about this, well i learn that math interesting just change of value can have different result, for example the math to get the index pre-sort ASCII character we can see that we got 5.88 value, with this you have to choose round it up or down if round up we get 6 which is "*" but we round down we get "+". The result will change in your Render.

As i write this, thing like scale image is a difficult topic but with enough time thing not that hard, it's hard because it's a first time for me to write that logic, but as i do it often and see the code itself i feel like... huh... i never thought i built this.

And Remember

You're not learning if you're not falling to difficulty

Leave a question or a comment if there's something wrong or missing some explanation