W maju opublikowałem 8 wpisów:

JavaScript:

1. Jak wylosować liczbę z podanego zakresu?
2. Jak pobrać najmniejszą lub największą liczbę z tablicy?
3. Jak zmienić liczbę zmiennoprzecinkową w liczbę całkowitą?

Canvas:

1. Manipulowanie pikselami podstawy
2. Jak sprawdzić ile czasu upłynęło od momentu startu animacji?
3. Efekt przejścia - manipulowanie kanałem alpha

Dodałem nowy dział do bloga: demo. Będę tam publikować działające przykłady kodu głównie opisywane we wpisach.

Narysowałem także jeden komiks:

1. CRUD Dev - It ain't much but it's honest work

Przeczytałem pięć książek:

1. Na wschód od Edenu - John Steinbeck
2. How to make a video game all by yourself - Matt Hackett
3. 48 praw władzy - Robert Greene
4. Detroit - Charlie LeDuff
5. Birmańskie dni - George Orwell

Przesłuchałem sześć audiobooków:

1. Projekt Hail Mary - Andy Weir
2. The Psychology of Money - Morgan Housel
3. Wyborny trup - Agustina Bazterrica
4. Dorośli - Marie Aubert
5. The first 20 hours - Josh Kaufman
6. How to talk to anyone - Leil Lowndes

W JavaScript jest na to kilka sposobów:

const number = 12.75;

Funkcja parseInt

parseInt(number); // 12

W przypadku gdy konwersja się nie powiedzie zwróci NaN:

parseInt('test'); // NaN
parseInt(undefined); // NaN
parseInt(null); // NaN

Funkcja floor

Math.floor(number); // 12

W przypadku gdy konwersja się nie powiedzie zwróci NaN:

Math.floor('test'); // NaN
Math.floor(undefined); // NaN
Math.floor(null); // NaN

W przypadku null zwróci 0:

Math.floor(null);

Operator |

number | 0; // 12

Jeśli konwersja się nie uda, zwróci 0:

'test' | 0; // 0
undefined | 0; // 0
null | 0; // 0

Pobranie najmniejszej lub największej liczby z tablicy jest bardzo prosta.

Mamy tablicę:

const data = [-5, 25, -18, 0, 9, 100, 1.25];

Żeby pobrać minimalną wartość, piszemy:

Math.min(...data); // -18

Maksymalna wartość:

Math.max(...data); // 100

Nowy działa na blogu: Demo

Będą tam znajdować się działające przykłady z kodów źródłowych opisanych we wpisach. Jak narazie znajdują się dwa przykłady.

Poniżej przedstawiam kod takiego efektu:

HTML:

<canvas id="canvas" width="640" height="480"></canvas>

JavaScript:

    let start;
    const effectTime = 3000;
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    const draw = (timestamp) => {
        if (start === undefined) {
            start = timestamp;
        }
        const elapsed = timestamp - start;

        if (elapsed > effectTime) {
            start = timestamp; // restart animacji, zaczynamy od nowa
        }
				
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const w = imageData.width;
        const h = imageData.height;
        for (let y = h - 1; y >= 0; y--) {
            for (let x = 0; x < w; x++) {
                let index = (y * w + x) * 4;
                imageData.data[index + 3] = parseInt(255 * (elapsed / effectTime));
            }
        }

        ctx.putImageData(imageData, 0, 0);

        requestAnimationFrame(draw);
    }

    draw();

Do stworzenia tego efektu korzystam z techniki manipulowania pikselami.

Zmienna effectTime przechowuje czas w milisekundach, ile ma zająć cała animacja.

Za sam efekt przejścia odpowiada ta linijka:

imageData.data[index + 3] = parseInt(255 * (elapsed / effectTime));

Na samym początku animacji będziemy mieć pełną przeźroczystość (wartość równa zero lub bliska zeru). Wraz z upływem czasu przeźroczystość będzie maleć.

Jeśli chcemy uzyskać efekt odwrotny: czyli najpierw brak przeźroczystości, a na końcu pełna wystarczy napisać:

imageData.data[index + 3] = 255 - parseInt(255 * (elapsed / effectTime));