DEV Community: Victor Ribeiro

JavaScript Syntax Highlighter

Victor Ribeiro — Fri, 27 Nov 2020 20:13:29 +0000

JavaScript Syntax Highlighter

How to use it

Add the file syntax.min.js to the end of your code and it will automatically highlight every <code> tag that you have in your page. Or use the defer attribute:

<script src="syntax.min.js" defer></script>

The script will create <spam> tag for every reserved word, variable, methods and numbers so you can target them with CSS.

code {
  font-family: Consolas,"courier new";
  color: #EEE;
  background-color: #333;
  padding: 2px;
  font-size: 105%;
  display: block;
  white-space: pre;
  counter-reset: line;
}

code > div {
  counter-increment: line;
  display: block;
  min-height: 1em;
}

code > div::before {
  content: counter(line) '\A0';
  display: inline-block;
  width: 4ch;
  text-align: left;
  -webkit-select: none;
  color: #666;
}

.reserved {
  font-weight: bold;
  color: #55C;
}

.methods {
  font-weight: bold;
  color: green;
}

.variable {
  color: orange;
}

.comment {
  color: gray;
}

.number {
  color: red;
}

Fell free to change anything you like to better suit your needs.

Source code here.

Scramble, a puzzle game in JavaScript

Victor Ribeiro — Sat, 24 Oct 2020 01:38:35 +0000

I've been away for quite some time, but I'm back. I couldn't sleep one of those days so I end up writing this simple yet fun game. Hope you like it.

Play it here

Source code here

Extracting text from images using Tesseract

Victor Ribeiro — Fri, 27 Dec 2019 17:47:34 +0000

After I learned about Tesseract I immediately wanted to use it. So I made this simple web app.

You can take a picture of a document, edit it on your favorite photo editor, crop the part you're interested in, and feed to the app, so you can extract the text.

I'm also planning using this to extract text from memes, so people with visual impairment can also have a laugh.

Get the app here.

The memes app I was talking about is here - I'm not the creator of the memes, I just scrape them together.

Water ripple effect using canvas

Victor Ribeiro — Wed, 11 Dec 2019 20:33:20 +0000

Some time ago I stumbled upon this link. It describes a cool algorithm to create a water ripple effect.

So, I decided to give it a go here. But it wasn't very good, performance wise.

So, the other day I was idle and decided to give the code a little brush.

Here's the final version

As you can see, the performance is much better now, since I'm using putImadeData from canvas to draw the final image.

You can check out the code here

How to create a Fake OS like web app

Victor Ribeiro — Sat, 09 Nov 2019 17:15:10 +0000

FOS

FOS is a light weight small library that creates new web components that behaves like an operating system. It is composed by desktop, windows, icons, bar and menus.

Live example

GitHub

Creating your first FOS web app

First clone the repository and then add the fos.min.js file to your project:

<script src="fos.min.js"></script>

Now we are able to create our first Fake Operating System.

We should start with a desktop.

<fos-desktop>
</fos-desktop>

Nice!

Now we should create some icons. You don't need to stress about where each icon will be on the fos-desktop. They will be spread out across the screen automatically, from top-left to bottom-right.

<fos-desktop>

    <fos-icon>F</fos-icon>
    <fos-icon>O</fos-icon>
    <fos-icon>S</fos-icon>

</fos-desktop>

Cool!

Now the icons can be used to open windows. So we should crate some windows and then linking them to an icon. This can be done by setting a name attribute on a window and a href attribute on the icon.

<fos-desktop>

    <fos-icon href="w1">F</fos-icon>
    <fos-icon href="w2">O</fos-icon>
    <fos-icon href="w3">S</fos-icon>

    <fos-window name="w1" title="Window 1"></fos-window>
    <fos-window name="w1" title="Window 1"></fos-window>
    <fos-window name="w1" title="Window 1"></fos-window>

</fos-desktop>

This is going really well. Now when we double click the icon (yes, yes I know - but I like double clicks) it will open a window.

The window can be dragged around by its top part. It also can be resized by it's bottom right corner. It can be maximized clicking on the [] button or closed clicking on the X button, both on the right top corner.

Our fake os is kinda lame right now, but when can mess around with the sytle using CSS. You can add a nice background image to the desktop and create some nice images for the icons, instead of letters.

Well, you can do that whenever you want. But for this tutorial, we should add a bar on the bottom of the screen and a Start menu. The Start menu will also control the windows.

<fos-desktop>

    <fos-icon href="w1">F</fos-icon>
    <fos-icon href="w2">O</fos-icon>
    <fos-icon href="w3">S</fos-icon>

    <fos-window name="w1" title="Window 1">
        <h2>Test 1</h2>
    </fos-window>

    <fos-window name="w2" title="Window 2">
        <h1>Hello</h1>
        <p>How are you on this fine morning/afternoon/night?</p>
        <p><a href="javascript:alert('hi');">Click here to say hi</a></p>
    </fos-window>

    <fos-window name="w3" title="Window 3">
        ???
    </fos-window>

    <fos-bar>
        <fos-menu name="Start">
            <fos-menu-item href="w1">
                Window 1
            </fos-menu-item>
            <fos-menu-item href="w2">
                Window 2
            </fos-menu-item>
            <fos-menu-item href="w3">
                Window 3
            </fos-menu-item>
        </fos-menu>
    </fos-bar>

</fos-desktop>

fos-widow can have html written direct into them, but if you want to separate your content you could use the same schema fos-bar -> fos-menu -> fos-menu-item controling a fos-pane. Let's see how simple it is to do just that:

<fos-desktop>

    <fos-icon href="w1">F</fos-icon>
    <fos-icon href="w2">O</fos-icon>
    <fos-icon href="w3">S</fos-icon>

    <fos-window name="w1" title="Window 1">
        <h2>Test 1</h2>
    </fos-window>

    <fos-window name="w2" title="Window 2">
        <h1>Hello</h1>
        <p>How are you on this fine morning/afternoon/night?</p>
        <p><a href="javascript:alert('hi');">Click here to say hi</a></p>
    </fos-window>

    <fos-window name="w3" title="Window 2">
        <fos-bar position="top">
            <fos-menu name="File">
                <fos-menu-item href="file1">File 1</fos-menu-item>
                <fos-menu-item href="file2">File 2</fos-menu-item>
            </fos-menu>
        </fos-bar>
        <br>
        <fos-panel name="file1" selected>
            <h1>Panel 1</h1>
            <p>Hi, this is the panel one.</p>
        </fos-panel>
        <fos-panel name="file2">
            <h1>Panel 2</h1>
            <p>Hello again, this is the panel two.</p>
        </fos-panel>
    </fos-window>

    <fos-bar>
        <fos-menu name="Start">
            <fos-menu-item href="w1">
                Window 1
            </fos-menu-item>
            <fos-menu-item href="w2">
                Window 2
            </fos-menu-item>
            <fos-menu-item href="w3">
                Window 3
            </fos-menu-item>
        </fos-menu>
    </fos-bar>

</fos-desktop>

fos-bar can be placed on the top or the bottom of your fos-desktop / fos-window and the fos-menu inside it will behave accordingly: if it's on the bottom, the menu will open up; if it's on the top, the menu will drop down. Cool, right?! To place the fos-bar on top, just pass to the attribute position one of the values top or bottom.

"Wait! If the fos-bar can be placed on the top, it will be displayed over me icons."

You right. To address it, the fos-desktop have a special iconOffset to address this. The value passed to that attribute will move the icons. E.g.: 20px, 40px, 55px...

Well, that's it. Hope you had fun creating a Fake OS web app.

Split your Django generated models into separated files

Victor Ribeiro — Tue, 10 Sep 2019 22:38:53 +0000

Split Django Models

Split Django generated models into separated files, with proper names, classes and imports.

Usage

Generate your models:

python3 manage.py inspectdb > models.py

Run the script:

./split_django_models.sh models.py

Put them all into a folder so you can enjoy the step bellow:

The script also creates a __init__.py file, so you can import them all at once:

from yourapp.models import *

Get the script here

How to create a radial menu for your web app.

Victor Ribeiro — Mon, 26 Aug 2019 01:14:21 +0000

Radial Menu

A highly customizable radial menu that's very easy to setup.

See it live here - (Right click if you're on a desktop / touch and hold on smartphone)

About

Create a customized and beautiful radial menu for your web app that can be used as a standalone menu or override the default context menu. On a desktop or notebook click the second button of the mouse (context menu). On a smartphone or tablet, click the screen and hold for few seconds and the menu will pop.

Feel free to commit new styles and share them with the public.

Documentation

Let's create a new radial button so you can see how simple it is. You'll need to add the RadialMenu.js to your web app and then create a new menu. Let's look at the code:

<script src="RadialMenu.js"></script>

<script>
const radial = new RadialMenu();
</script>

That's it. The library has some default buttons included as example so you can see how it works. Let's continue reading the documentation so we can learn how to create our very own radial menu with our very own buttons.

To create a Radial Menu in your web app you'll need to pass a configuration object to the constructor. By default a lot of values are already seted, but you can fiddle with every single one of them.

const mySettings = {
    textColor: 'red', //define the color of the text on the buttons
    buttons: [
        {'text': '\uf053', 'action': ()=>{ history.go(-1) } }, //create a button that goes back on history
        {'text': '\uf054', 'action': ()=>{ history.go(1) } }, //create a button tha goes forward on history
    ]
};

const radial = new RadialMenu(mySettings);

Get the library, read the documentation and check out the code here

Finding Areas Using the Monte Carlo Method

Victor Ribeiro — Tue, 06 Aug 2019 17:56:57 +0000

Finding Areas Using the Monte Carlo Method

Using the Monte Carlo Method to find the area of an drawn image.

Live version here

About

Draw an image, run the monte carlo method to calculate it's area. Increase or decrese the number of samples used in the simulation. I have written a similar code that runs the simulation several times and get the mean of them all. I like this one better. The canvas is 500x500 pixels. So, if you color it all and click solve, you should get a result of 250000 pixels.

How to use it

Canvas - Draw the image you want to calculate the area from.

Input - Enter the number of samples to be used in the simulation, in the input box.

Solve - Click to solve the aproximate area of the drawn image. You can click solve multiple times to get different results.

Clear - Clear the canvas.

Take a look at the code here

A naive approach to finding corners on an image

Victor Ribeiro — Mon, 08 Jul 2019 02:02:44 +0000

Naive Corners

A naive algorithm to find corners on a image.

About

When I was still studying the basics of digital image processing I came up with this "algorithm" to detect corners on a image.

How it works

Well, as the name suggests, this is a very naive approach.

Given any image we will look at it a window of 3 by 3 at a time. (We could resize the image to speed up the process, but who's in a hurry?)

3x3 window.

We will then just count how many colored pixels we have at that window. If there's 4 colored pixels, it must be a corner.

Corner.

Rotated corner.

Anything else, is not a corner.

Not a corner.

Not a corner either.

See it working

Run by calling

python corner.py img/mess.png

I also used this algorithm to process corners on a real time webcam video.

A python implementation of this algorithm is hosted here

Let's code some happy text.

Victor Ribeiro — Mon, 01 Jul 2019 21:20:08 +0000

Happy Text

Let's start this tutorial by normalizing the CSS.

body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

This will get rid of side bars when working with a full sized canvas.

Now, let's create a canvas the same size as the page and append it to the body of the page.

const canvas = document.createElement('canvas');
const w = innerWidth,
  h = innerHeight,
  w2 = w / 2,
  h2 = h / 2;
canvas.width = w;
canvas.height = h;

document.body.appendChild(canvas);

Now we can get a canvas 2D context and define some text as well some text parameters.

const c = canvas.getContext('2d');
const fontsize = 30;
c.font = fontsize + "px Arial";

let text = "Happy Text!";

Then we create a function that clear the canvas and draws our text to screen every frame.

function draw() {

  /* clear the canvas from 0,0 to w,h - width and height of the page */
  c.clearRect(0, 0, w, h);

  /* draw the text on coords 10, 10 */
  c.fillText(text, 10, 10 );

  /* calls the draw function every frame */
  requestAnimationFrame(draw);
}

draw();

Well, that's all fine, but that text is not happy at all.

Instead of just drawing the text, we should draw each letter individually and then animate them.

We can do that with a for loop, iterating each char from the text, and with a sine wave, controlling the Y position of each letter.

So, now our draw function looks like this:

/* angle that controls the sine wave */
let a = 0;

/* the size of the text, so we can centralize it on the screen */
const xoffset = c.measureText(text).width;

function draw() {
  c.clearRect(0, 0, w, h);
  /* for loop to iterate each char from text */
  for (let i = 0; i < text.length; i++) {
    c.fillText(text[i], 
      (w2 - xoffset) + (i * fontsize), /* centralized X position */
      h2 + (Math.sin(a - i) * 10)); /* sine wave offset by char position */
  }
  a += 0.08; /* increase the angle each frame, so the sine wave moves */
  requestAnimationFrame(draw);
}

draw();

That's it. Our happy text is all done.

The complete code:

const canvas = document.createElement('canvas');
const w = innerWidth,
  h = innerHeight,
  w2 = w / 2,
  h2 = h / 2;
canvas.width = w;
canvas.height = h;

document.body.appendChild(canvas);

const c = canvas.getContext('2d');
const fontsize = 30;
c.font = fontsize + "px Arial";

let text = "Happy Text!";

let a = 0;

const xoffset = c.measureText(text).width;

function draw() {
  c.clearRect(0, 0, w, h);
  for (let i = 0; i < text.length; i++) {
    c.fillText(text[i],
      (w2 - xoffset) + (i * fontsize),
      h2 + (Math.sin(a - i) * 10));
  }
  a += 0.08;
  requestAnimationFrame(draw);
}

draw();

Link to JSFiddle with the code.

GAIA - Generic Artificial Intelligence Agent

Victor Ribeiro — Sun, 30 Jun 2019 23:08:57 +0000

GAIA

Generic Artificial Intelligence Agent.

An AI concept that can help game designers to create procedural quests.

Live version

GAIA is a concept, it aims to design a generic Agent that can be interacted with any time during the game. It uses finite state machines alongside attributes to give the Agent purpose. The player can alter this states with it's actions, turning the Agent into a enemy or a friend.

In order to be interacted with, the agent must have some attributes to be interesting.

In this example, the Agent has a name, a title, age, affinity with the player, hit points (HP), hunger, food and some states.

This attributes can be used to design quests, if the player choose to interact with the Agent, or just a ordinary dialogs.

The Agent could answer it's name, it's age, how hungry it is, how much food it have, how close it is to dying and what it's doing.

This information be used to create a quest. For example, lets suppose that the NPC is a shop owner that has a item that the player needs.
If the NPC is busy hunting (or cutting wood, or fishing, or anything else other the selling) it won't be able to sell the item to the player. So the player could either kill the NPC and still the item, or help the NPC, giving him what it need or completing the action that restores them to they selling state (back to the store, for instance).

This way, any NPC that the player encounters during the game could offer a somewhat interesting interaction.

Examples

The player needs to cross a river and asks for a NPC on a boat to take them. The NPC could be busy fishing, so the player could fish for the NPC or just give it some fish, restoring it to a state where it can cross the player to the other side.

The player encounters a NPC that is very hungry and decide to feed it. This NPC then become friends with the player and could retribute the favor later on the game.

Interaction

In this example the Agent has 3 states: idle, hunting and dead. If the Agent is hunting, it roams the map looking for food. When the Agent is younger than 10 or older than 50 years, it's change of huting with success drops to half.

You can help the Agent feeding it, increasing it's affinity towards you, by clicking feed.

You can also hurt the Agent, decreasing it's affinity towards you eventually killing it, by clicking hurt.

Source code

A native JavaScript paint and draw app

Victor Ribeiro — Fri, 28 Jun 2019 05:15:05 +0000

Paint and Draw

I made this project a while back. I always enjoy using the native functionalities of JavaScript to develop my projects. This one is no different. I was bored in class and decided to do something fun. I end up making this very simple app. Since I liked it a lot, I decided to upload it to GitHub and maybe work on it a little bit more latter on.

Hope you like it to.

Live Version
Source Code