It has been a while since I’ve written anything personal, yet having my own website. I used to have one a while back and was moderately active, with new posts from time to time. I hope I will have fun editing on this one.

## Tech. stack

The frontend is made with [Next.js](https://nextjs.org/) using the [TypeScript](https://www.typescriptlang.org/) language, using the framework as a static website generator. I’m trying [Tailwind](https://tailwindcss.com/) right now for all the CSS, so far it has been good, I can see it being a problem if you need too much specific styles which are not present by default (enjoy adding them in `tailwind.config.js`).

For the backend part, I’m generating an **API** using the headless CMS [Strapi](https://strapi.io/). It has been mostly easy to setup and so far it’s working as intended. I just wish the editing part was a bit more *powerful*. I ended up writing posts on a separate markdown editor. They are fetched during build time querying the API.

Just a new website where I can put my ideas and rants. It will act as a portfolio for personal projects too.

New personal website!

Monkey has a C-like syntax, supports **variable bindings**, **prefix** and **infix operators**, has **first-class** and **higher-order functions**, can handle **closures** with ease and has **integers**, **booleans**, **arrays** and **hashes** built-in.

There is a book about learning how to make an interpreter: [Writing An Interpreter In Go](https://interpreterbook.com/#the-monkey-programming-language). This is where the Monkey programming language come from.

## Software model

The most important part of this project is that both the **lexer** and **parser** are made with the [Nom](https://github.com/Geal/nom) library. Then everything is built up into an **AST** for execution. It has several unit tests to ensure it doesn't break when I update the libraries or add new features.

## Examples of code you can run

```monkey
let map = fn(f, arr) {
  if (len(arr) == 0) {
    []
  } else {
    let h = head(arr);
    cons(f(h), map(f, tail(arr)));
  }
};


let reduce = fn(f, init, arr) {
  if (len(arr) == 0) {
    init
  } else {
    let newInit = f(init, head(arr));
    reduce(f, newInit, tail(arr));
  }
};

let double = fn(x) {
  2 * x
};

let add = fn(x, y) {
  x + y
};

let mapped = map(double, [1, 2, 3, 4]);
print(mapped);

let sum = fn(arr) {
  reduce(add, 0, arr);
};

let summed = sum([1, 2, 3, 4, 5]);
print(summed);
```

This is totally valid code and will run like so:

```bash
cargo run --release --bin monkey_exe -- --src examples/map-reduce.mk
    Finished release [optimized] target(s) in 0.02s
     Running `target/release/monkey_exe --src examples/map-reduce.mk`
[2, 4, 6, 8]
15
null
```

## How to run

### Build and test

```bash
$ cargo build
$ cargo test
```

### Running the REPL

```bash
$ cargo run --release --bin monkey_repl
```

### Running the Interpreter

```bash
$ cargo run --release --bin monkey_exe -- --src examples/hash.mk
```

### Source code

You can find it on my Github page related to the project: [here](https://github.com/Rydgel/monkey-rust).

An interpreter for the Monkey programming language. From the “*Writing An Interpreter In Go*” book, but made in Rust.

large_Capture d’écran 2021-02-28 à 22.25.27.png

medium_Capture d’écran 2021-02-28 à 22.25.27.png

small_Capture d’écran 2021-02-28 à 22.25.27.png

thumbnail_Capture d’écran 2021-02-28 à 22.25.27.png

Capture d’écran 2021-02-28 à 22.25.27.png

Monkey language interpreter made in Rust

When designing websites, you may not have the images you need at first. But you already know the sizes and inserting some placeholders can help you better seeing the layout. Don’t waste your time making dummy images for your mockup or wireframe. Fakeimg.pl is a little tool that generates images with an URL. Choose the size, the colors, even the text. It’s free and [open-source](https://github.com/Rydgel/Fake-images-please).

## How to use

You just have to put your image size after our URL. Only the first parameter is mandatory. There are options too, you can pass a text, or change some colors. Colors must be hexadecimal, the first one is the background color. The text can be passed with the _text_ GET variable. Here are some examples you can look at:

```html
<img src="https://fakeimg.pl/300/">
<img src="https://fakeimg.pl/250x100/">
<img src="https://fakeimg.pl/250x100/ff0000/">
<img src="https://fakeimg.pl/350x200/ff0000/000">
<img src="https://fakeimg.pl/350x200/?text=Hello">
<img src="https://fakeimg.pl/350x200/?text=オラ&font=noto">
<img src="https://fakeimg.pl/350x200/?text=World&font=lobster">
```

Use them directly in an image tag or a CSS background, or whatever you want to.

## Change font

There are three *bonus* fonts you can choose by passing `font=lobster`, `font=bebas`, or `font=museo` in the URL.
Also please note that the `font=noto` is available for chinese/japanese/korean texts.

## Change font size

You can manually change the font size by passing in the URL `font_size=12`.

## Retina mode

Just pass the `retina=1` in the URL. Your image will be 2 times bigger.

## Asian text support

You can use the font `noto` for support of japanese, korean and chinese text.

## Transparency

Colors support transparency (0 - 255) by putting the alpha value after the color
itself. Both colors are supported.

```html
<img src="https://fakeimg.pl/350x200/ff0000,128/000">
<img src="https://fakeimg.pl/350x200/ff0000,128/000,10">
```

## Set up your own instance

Prerequisites:

* Docker

```bash
# Run the image (change the port if you need)
$ docker run -d -p 80:80 rydgel/fakeimg:latest
# Open the browser at http://127.0.0.1:80
```

## Source and website

The website can be found here: [fakeimg.pl](https://fakeimg.pl/) and the source code [here](https://github.com/Rydgel/Fake-images-please).

A little placeholder images generator made in Python. Useful when designing a website if you are missing some content.

medium_fakeimg.png

small_fakeimg.png

thumbnail_fakeimg.png

fakeimg.png

A generator of fake images

I always found emulators amazing pieces of software. The first I used was a SNES one, that I use to play some classic games I never was able to get when I was a kid. I thought those *beasts* were *black magic*, something I will never be able to grasp.

## Motivations

I basically wanted to improve my OpenGL (and C++) skills through a fun project.
I always wanted to make an emulator, and the Chip8 is a fairly easy one to
start with. So why not making the rendering 3D to be able to move “inside”
the game.

Here is a small video of what it looks like:
[youtube](https://www.youtube.com/watch?v=h3pDNioWFzI)

![video](https://i.imgur.com/JWF4xeW.gif)

## About Chip8

The Chip 8 is actually a virtual machine developed in the 70s by Joseph Weisbecker. So it was never a real console to begin with but we still can emulate it. There have been plenty of games written for it so we can run them later in our emulator.

This is probably the easiest emulator you can start with, since it has a very small number of opcodes and they are pretty simple to implement. You can find easily on the internet the specifications needed to be implemented. For instance on this [website](http://devernay.free.fr/hacks/chip8/C8TECH10.HTM).

![chip8-2.png](https://api.jeromem.dev/uploads/chip8_2_b4be3fe963.png)

## C++ data modeling

```cpp
struct Cpu
{
    uint16_t opcode;
    Memory & memory;
    std::array<uint8_t, 16> registers;
    uint16_t index;
    uint16_t pc;
    std::array<uint8_t, 64 * 32> pixels;
    uint8_t timerDelay;
    uint8_t timerSound;
    std::array<uint16_t, 16> stack;
    uint16_t sp;
}

struct Memory
{
    std::array<uint8_t, 4096> storage;
}
```

So as we can see that machine is very simple. We've got 4Kb memory to work with, 16 registers and then some variables where we are storing the current opcode, the current index and the value of the program counter (pc).  There is two timers that are clocked at 60Hz. Each one of them should be decremented 60 times per second. If the `timerSound` is above 0, we should play a sound.

If you are interested in knowing more about it, you should check this [guide](https://tobiasvl.github.io/blog/write-a-chip-8-emulator/) which explains a lot more things than me.

## Rendering

Usually the games are rendered in a `64 * 32` framebuffer. To make mine a bit different from the others I decided to treat each pixels as a *cube*. Each single pixel is treated as an entity to be drawn, this is definitively not the most efficient way of doing it, but for such a small number of pixels it went well with an average of 200 fps on a machine without a dedicated graphic card.

![chip8-1.png](https://api.jeromem.dev/uploads/chip8_1_a9afb7f689.png)

The 3D engine is a simple basic **OpenGL** renderer with a few shaders for the shadows and lights and a very basic *free fly camera*. The most important part is to render those array of pixels into cubes and translating it into 3D using matrices.

```cpp
auto view = camera.getViewMatrix();
auto projection = glm::perspective(camera.getZoom(), 2.0f, 0.1f, 500.0f);
auto cameraPosition = camera.getPosition();

int i = 0;
for (const auto & pixel : pixels) {
    if (pixel > 0) {
        auto pos = glm::vec3(i % WIDTH, -i / WIDTH, -40);
        glm::mat4 model;
        model = glm::translate(model, pos);
        draw(model, view, projection, cameraPosition);
    }
    i ++;
}
```

You can find the source for everything [here](https://github.com/Rydgel/chip8).\
A NES emulator should be a fun next exercice.

A weird take on a chip8 emulator, by making the rendering of the game itself 3D and being able to navigate “inside” it.

Latest articles

New personal website!

Latest experiments

Monkey language interpreter made in Rust

A generator of fake images

A not so classic Chip8 emulator