DEV Community: Sebastian

Mathematical Beauty in Action | Pursuit Curves

Sebastian — Fri, 15 Jul 2022 20:58:02 +0000

Have you heard of pursuit curves?

They are this really cool thing were a thing chases another thing. And then that thing can chase another thing and on so on. If you plot out their paths then it forms a beautiful image, like the one above.

(Check out awesome timelapse at 33:13)
I made an app, in which one can simulate one of this pursuit curves adjusting some parameters.

Problem Statement

In a square of side length 1, there are 4 dogs, each standing in their own corner. All dogs start running at the same time with the same speed, towards the dog next to them clockwise. How long does it take before the dogs catch up to each other?

You can view the deployed app at https://4-dog-problem.netlify.app/ and play around yourself :)

My Solution

An analytical solution felt hard, and I wanted to leverage my knowledge of programming. So I thought I would make a numerical solution in TypeScript, and use React to build out a UI. My two main files are:

AccurateTimer.tsx
Coordinates.tsx

AccurateTimer.tsx is simply an improved SetInterval, to call functions repeatedly after a certain time period. It adds nice features like start and stop methods. But most importantly it adjusts for drifting, which is important when one wants to make an accurate simulation.

class ImprovedSetInterval {
  interval: number
  start: () => void
  stop: () => void

  constructor(callback: () => void, interval: number) {
    let that = this;
    let expected: number;
    let timeout: NodeJS.Timeout;
    let isRunning: boolean;
    this.interval = interval;

    this.start = function() {
      isRunning = true;
      expected = Date.now() + this.interval;
      timeout = setTimeout(step, this.interval);
    }

    this.stop = function() {
      isRunning = false;
    }

    function step() {
      if(!isRunning) {
        clearTimeout(timeout);
      } else {
        let drift = Date.now() - expected;
        callback();
        expected += that.interval;
        timeout = setTimeout(step, Math.max(0, that.interval-drift));
      }
    }
  }
}

export default ImprovedSetInterval;

Coordinates.tsx

Now we get into the real shit!
There is a lot of code but I'm going to try to cover the important stuff.

function getVelocity(point1: number[], point2: number[]): number[] {

    //Canceling out if at somewhat same point
    if(Math.abs(point2[0] - point1[0]) < 0.001 && Math.abs(point2[1] - point1[1]) < 0.001) return [0, 0];

    //Angle is computed using arctangent delta x over delta y
    let angle: number = Math.atan((point2[0]-point1[0])/(point2[1]-point1[1]));

    //Computing components of hyptonuse
    let dx: number = Math.sin(angle) * STEP_SIZE;
    let dy: number = Math.cos(angle) * STEP_SIZE;

    //Straight Down
    if(point2[1] < point1[1] && point2[0] - point1[0] === 0) {
      dy = -dy;
    }

    //Third Quadrant
    if(point2[0] < point1[0] && point2[1] < point1[1]) { 
      dx = -dx;
      dy = -dy;
    }

    //Fourth Quadrant
    if(point2[0] > point1[0] && point2[1] < point1[1]) { 
      dx = -dx;
      dy = -dy;
    }

    return [dx, dy];
  }

So what is really happening here is that I'm trying to compute the velocity vector, with the direction and distance that point1 will travel in direction of point2. There are som edge cases, third quadrant, fourth quadrant, I cover them briefly in the youtube video but basically it's because the formula to compute the angle changes slightly depending on the position between the two points.

function updatePosition () {
    trackPositions.push([[...p1], [...p2], [...p3], [...p4]]);

    //Getting in which direction to move
    dp1 = getVelocity(p1, p2);  
    dp2 = getVelocity(p2, p3);  
    dp3 = getVelocity(p3, p4); 
    dp4 = getVelocity(p4, p1);   

    //Moving by that velocity(split by x and y direction)
    p1[0] += dp1[0];
    p1[1] += dp1[1];

    p2[0] += dp2[0];
    p2[1] += dp2[1];

    p3[0] += dp3[0];
    p3[1] += dp3[1]; 

    p4[0] += dp4[0];
    p4[1] += dp4[1];

    length += Math.sqrt(Math.pow(dp1[0], 2) + Math.pow(dp1[1], 2));
  }

updatePosition is what is getting called over each iteration. As you can see it updates the values of the arrays p1, p2, p3, p4. All on the format pn=[xn, yn]. It creates an velocity vector from the getVelocity function, and then increments the x and y values. It then stores all the positions in time form each peach in the trackPositions array.

let time = 0;
function drawFigure() {
  time += 1000/FPS; 
  let currentIndex = Math.floor((time/1000)/TIME_PER_STEP); //Getting what the position should be after time milliseconds
  if(currentIndex > trackPositions.length) {
    setTimeOfPursuit(time);
  }
}

Finally we compute the actual time it takes for the dogs to reach the center. This is done by iterating over each index of the trackPositions array, then adding upp the time step over how long each steps take, until it reaches the end of the array, where TIME_PER_STEP = SQUARE_WIDTH * 1/N * 1/Velocity. The drawFigure function is called repeatedly with the improvedSetInterval every 1000/FPS ms.

Final Answer

This gives the final answer that it takes the dogs exactly 1 second, if they run with a constant speed of 1 m/s in a square with length 1m. This is interesting, because it means it takes the same time for the dogs to run straight across each other, as it would if they ran in the spirally pursuit curve.

True beauty

I added some nice animations in the app, which in my opinion form some really beautiful shapes, you can play around yourself: https://4-dog-problem.netlify.app/

--About Me--

Hi! I'm Sebastian and I'm a high school student from Sweden. I love math and coding. Want to show my work and explain my journey as I'm developing.

--Social Media--

Follow my Blog: https://dev.to/sebcodestheweb
Youtube: www.youtube.com/channel/UCikWIcChAOSwoc2qpbZ6iIA
Github: https://github.com/SebCodesTheWeb
Twitter: https://twitter.com/sebcodestheweb

This does not cover all the code, check out the source code: https://github.com/SebCodesTheWeb/pursuit-curve-calculator

Make NASA's landing page in 50 minutes - CSS & HTML

Sebastian — Mon, 03 Jan 2022 20:11:37 +0000

Make the landing page of nasa.gov in 50 minutes - YT tutorial

Checkout the finished website here:
https://nasa-landingpage-clone.netlify.app/

Watch the YouTube tutorial:

Hello, and welcome to my blog! 😊

In this video, I make a clone of the nasa.gov landing page. The main purpose of this tutorial is to get some good practice with css grid and css flexbox by building real world projects. This website is also fully responsive.

You can view all the code on Github:
https://github.com/SebCodesTheWeb/NASA-landingpage

--How it's structured--

The markup is simple. It is separated into three parts. A header, main content, and a footer. The main content is made of a grid that responsively changes depending on the viewport width. The header is also a grid combined with flexbox children for easy alignment. The footer is a flexbox in itself.

--About me--

Hello! My name is Sebastian, and I'm a high-school student from Sweden. I have dabbled with some front-end development for the past few months. And since Christmas brake finally arrived, I've decided to start a challenge for myself! I'm going to code for the coming 20 days.

I'm following the front-end career path at Scrimba and I'm currently at module 8 (Flexbox, Grid and Fetch)

By the end of the 20 days I'm hoping to have finished the front-end career path and have started with some backend Node.js development. I will be documenting my progress for the coming days, and filming myself on my Youtube-channel, so feel free to follow along my journey and learn with me!

--Social Media--

Follow my Blog: https://dev.to/sebcodestheweb
Youtube: www.youtube.com/channel/UCikWIcChAOSwoc2qpbZ6iIA
Reddit: https://www.reddit.com/user/zenrigod
Instagram: https://www.instagram.com/sebcodestheweb/
Github: https://github.com/SebCodesTheWeb

Image Search App in 10 MINUTES Challenge - Unsplash Api and CSS grid

Sebastian — Fri, 31 Dec 2021 17:26:50 +0000

Image Search app in 10 min

Checkout the deployed project here:
https://photosearch-unsplash.netlify.app/

Watch the YouTube video:

Hello, and welcome to my blog! 😊

In this video, I make a photo search app, that takes in a keyword and return 10 images that is taken from the unsplash.com API. The user can search with any keyword and scroll through to the next / previous page. This is a challenge, and my fourth attempt when I finally managed to code the app in less than 10 minutes!

You can view all the code on Github: https://github.com/SebCodesTheWeb/photosearch

--How it works--

It's quite simple. I align everything using css grid, and have 10 empty images when the website first loades. I use a css background pattern and some hover effect to make everything look nice. When the user types in a keyword and clicks on submit the code makes a request to the unsplash api, and returns a list of urls related to that keyword. It then sets the src attribute of those images to the urls returned.

The fetch call looks like this:

function displayImages(keyword, page) {
    fetch(`https://apis.scrimba.com/unsplash/search/photos?query=${keyword}&page=${page}`)
        .then(res => res.json())
        .then(data => {
            for(let i = 0; i < 10; i++) {
                images[i].setAttribute("src", `${data.results[i].urls.small}`)
            }
        })
}

And that's more or less it, the only hard part is making everything come together in 10 minutes ;)

--About me--

I'm following the front-end career path at Scrimba and I'm currently at module 8 (Flexbox, Grid and Fetch)

--Social Media--

Follow my Blog: https://dev.to/sebcodestheweb
Youtube: www.youtube.com/channel/UCikWIcChAOSwoc2qpbZ6iIA
Reddit: https://www.reddit.com/user/zenrigod
Instagram: https://www.instagram.com/sebcodestheweb/
Github: https://github.com/SebCodesTheWeb

Drawing app that records your actions

Sebastian — Wed, 29 Dec 2021 09:49:40 +0000

Drawing app that records your actions

Checkout the deployed project here: https://drawingplayback.netlify.app/

Hello, and welcome to my blog! 😊

--What is this?--

This is a normal pixel art drawing board. But wait is it!?

No, that would be kinda boring, so I added a feature where you can record your actions and then playback those actions. To do this.

Press Record
Draw stuff
Stop Recording
Click on Play
You can draw while your previous drawing is playing back
Click exit play

If you were to have some problems, just reload the page. Also it only properly works on a computer, it won't display correctly on a phone.

--How it works--

The way the recording works is by using an array of objects, keeping track of all the changes when you change the color of a square, and when the change occurred in milliseconds after you pressed record.

It looks something like this:

changes = [
{
    target: "pixel-53",
    property: "backgroundColor",
    value: "red",
    timestamp: 3200 //(ms)
},

{
    target: "pixel-323",
    property: "backgroundColor",
    value: "green",
    timestamp: 4500 //(ms)
}
]

It then plays back those changes. And thus, you can live interact with the drawing board, whilst your recording is playing back!

You can chain recordings together to create multiple recordings playing back at the same time.

About the drawing board itself, it uses css grid to create 3000 squares. When the user is holding the mouse down it starts to draw the selected color (which you can choose by clicking on the black sqaure in the right bottom). If you want to erase, you can click on eraser, and it will delete all of the squares you've drawn when you hover over them.

You can view the code on github: https://github.com/SebCodesTheWeb/drawingplayback

--About me--

I'm following the front-end career path at Scrimba and I'm currently at module 8 (Flexbox, Grid and Fetch)

--Social Media--

Youtube: www.youtube.com/channel/UCikWIcChAOSwoc2qpbZ6iIA
Blog: https://sebcodestheweb.hashnode.dev/
Github: https://github.com/SebCodesTheWeb

Peace.

(PART 2) Make the Disney.com Landing Page in 90 minutes

Sebastian — Mon, 27 Dec 2021 22:25:29 +0000

How to make the disney.com landing page in 90 minutes(turned out to be 100 minutes after editing) - part 2

Checkout part 1

Hello, and welcome to my awesome blog! 😊

Today we are going to finnish the disney.com landing page clone.

This blog is part 2, of my YouTube tutorial where I am going to show you how you can copy the disney.com landing page only using vanilla html and css. This project also focuses heavily on flexbox, so if you want to get some practice with that then this is the perfect tutorial!

Watch the tutorial on YouTube:

In the first part, we got a lot of practice with mobile-first design, and in this second part the focus is on turning this website into a responsive beast! Working of super small, and super big screens.

I have made a git repository that you can clone to follow along the tutorial (which I recommend)

https://github.com/SebCodesTheWeb/disneyclone

--About me--

Hello! My name is Sebastian, and I'm a high-school student from Sweden. I have dabbled with some front-end development for the past few months. And since christmas brake finally arrived, I've decided to start a challenge for myself! I'm going to code for the coming 20 days.

I'm following the front-end career path at Scrimba and I'm currently at module 8 (Flexbox, Grid and Fetch). I started this project to get some practice with css flexbox.

It would be awesome if you would follow along me on my journey and learn with me. You can follow my blog and subscribe to my YouTube channel. And if you liked the YouTube video then it would really make my day if you left a comment or liked this post.

Subscribe.

Make the Disney.com Landing Page in 90 minutes

Sebastian — Sun, 26 Dec 2021 23:03:58 +0000

How to make the disney.com landing page in under 90 minutes - part 1

Hello, and welcome to my awesome blog! 😊

This blog is part 1, of my under 90 min YouTube tutorial where I am going to show you how you can copy the disney.com landing page only using vanilla html and css. This project also focuses heavily on flexbox, so if you want to get some practice with that then this is the perfect tutorial!

Watch the tutorial on YouTube:

In this first part, I'm showing you how to set up the html, and the styling for the mobile version of the website. In the second part I am going to show you how to make the page fully responsive and look good on desktop.

I have made a git repository that you can clone to follow along the tutorial (which I recommend)

https://github.com/SebCodesTheWeb/disneyclone

--About me--

I'm following the front-end career path at Scrimba and I'm currently at module 8 (Flexbox, Grid and Fetch). I started this project to get some practice with css flexbox.

Keep Coding.

Flex-grow, Flex-shrink, Flex-basis - Day 4 Coding Challenge - Seb Codes the Web

Sebastian — Sun, 26 Dec 2021 07:31:36 +0000

Flex-grow, Flex-shrink, Flex-basis - Day 4 Coding Challenge

I finished module 7 yesterday from the frontend-developer path on Scrimba.com. And started module 8, which was about Flexbox, and using flexbox with fetch(some weird combination I guess)

I already felt like I knew how to use flexbox, but there are some new interesting things I discovered.

The most interesting things to me were flex-basis, flex-grow, and flex-shrink, which could all be defined in the shorthand of flex. These properties basically control the sizing of the flexbox items. Flex-grow controlling excessive space, flex-shrink controlling a lack of space, and flex-basis setting the border when it turns over from flex-shrink to flex-grow.

Flex-grow controls how fast the item grows as the viewport gets larger, for example:

.flex-item-1 {
    flex-grow: 1;
}

.flex-item-2 {
    flex-grow: 2;
}

Then that would mean that as the viewport gets larger, flex-item-2 would get twice as much of the new space, and therefore "grow". Flexbox shrink works in the same fashion, where it instead shrinks in different paces.

Flex-basis is an interesting one, because it sets the default value before the flex-items start to grow or shrink. It's kind of like setting an ideal size, following the main axis of the flex-container. It's sets the basepoint for were the flex-item is going to start to grow and shrink.

What do I mean with this? Well, trying to put it simply, flex-basis sets the width of an item, but if the flex-direction was column, then it would set the height instead.

Together all this properties could be summed up in one shorthand, flex. It could look like this:

.flex-item {
    flex: 0 1 100px;
}

This code sets flex-grow to 1, flex-shrink to 0 and flex-basis to 100px. Note that the default for flex-grow is 0, meaning that the item reaches a certain size and then stops growing. However, when you use the shorthand, it changes the default for flex-grow to 1, if you don't define it.

Thus is the basics of flex-grow, flex-shrink and flex-basis. They really help in creating fully responsive websites!

I will be further documenting my progress for the coming days, and filming myself on my Youtube-channel, it would really make my day if you subscribed to my youtube channel or followed my blog, so you can come along my journey and learn with me!

Peace.

Get Price of Dogecoin using API Day 2 Coding Challenge - SebCodesTheWeb

Sebastian — Fri, 24 Dec 2021 09:54:11 +0000

Follow along my learning from CSS to React and Node in 20 days

Hello!

My name is Sebastian, and I'm a high-school student from Sweden. I have dabbled with some front-end development for the past few months. And since Christmas brake finally arrived, I've decided to start a challenge for myself! I'm going to code non-stop for the coming 20 days.

I'm following the front-end career path at Scrimba and I'm currently at module 7 (APIs)

By the end of the 20 days I'm hoping to have finished the front-end career path and have started with some backend Node.js development.
I will be documenting my progress for the coming days, and filming myself on my Youtube-channel, so feel free to follow along my journey and learn with me!

Watch the follow-along youtube video:

Day 2 API:s App

Today I've built this web app. It displays the current time, weather and the price of cryptocurrencies!

So how is this built? It is built using four API:s, one for the background image, one for the weather, one for the geographic location and finally one for the cryptocurrencies. It then uses some relatively easy HTML and CSS using Flexbox to show everything in a nice way.

The first API is from unsplash, and it selects a random image related to nature by using this code:

fetch("https://apis.scrimba.com/unsplash/photos/random?orientation=landscape&query=nature")
    .then(res => res.json())
    .then(data => {
        document.body.style.backgroundImage = `url(${data.urls.regular})`
        document.getElementById("author").textContent = `By: ${data.user.name}`
    })
    .catch(err => {
        // Use a default background image/author
        document.body.style.backgroundImage = `url(https://images.unsplash.com/photo-1560008511-11c63416e52d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMTEwMjl8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MjI4NDIxMTc&ixlib=rb-1.2.1&q=80&w=1080
)`
        document.getElementById("author").textContent = `By: Dodi Achmad`
    })

It then changes the background image of the body element to the URL of that image, it also accesses the author/photographer of that image. Finally it set's a default value for the image and author in case something was to go wrong in the fetch

Get Dogecoin Market Value

The second API uses coingecko.com, to get the current value, the highest value in the past 24h and the lowest value in the past 24h for a particular crypto coin of your liking:

fetch("https://api.coingecko.com/api/v3/coins/dogecoin") // Dogecoin Data
    .then(res => {
        if (!res.ok) {
            throw Error("Something went wrong")
        }
        return res.json() //Converting to JavaScript
    })
    .then(data => {
        document.getElementById("crypto-top").innerHTML = `
            <img src=${data.image.small} />
            <span>${data.name}</span> // Seting up DOM Image and Title
        `
        document.getElementById("crypto").innerHTML += `
            <p>🎯: $${data.market_data.current_price.usd}</p> //Market Price
            <p>👆: $${data.market_data.high_24h.usd}</p>
            <p>👇: $${data.market_data.low_24h.usd}</p>
        `
    })
    .catch(err => console.error(err))

It uses (!res.ok) to check if any errors were thrown, for example a 404 or 505. If successful, it then gets the name, image, and market value of the coin of choice

Get Weather Data

The app also pairs together Geolocation, and the openweatherapi, to get the weather of the users specific location:

navigator.geolocation.getCurrentPosition(position => {
    fetch(`https://apis.scrimba.com/openweathermap/data/2.5/weather?lat=${position.coords.latitude}&lon=${position.coords.longitude}&units=imperial`)
        .then(res => {
            if (!res.ok) {
                throw Error("Weather data not available")
            }
            return res.json()
        })
        .then(data => {
            const iconUrl = `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`
            document.getElementById("weather").innerHTML = `
                <img src=${iconUrl} />
                <p class="weather-temp">${Math.round(data.main.temp)}º</p>
                <p class="weather-city">${data.name}</p>
            `
        })
        .catch(err => console.error(err))
});

*It accesses the geolocation API by using navigator.geolocation, it then accesses a position object containing keys accessing the longitude and latitude of the user. It then uses this coordinates as a query parameter to get the specific weather for that location. *

Finally, the program also uses setInterval, to update the time with a live clock:

function getCurrentTime() {
    const date = new Date()
    document.getElementById("time").textContent = date.toLocaleTimeString("en-us", {timeStyle: "short"})
}

setInterval(getCurrentTime, 1000)

It calls the function getCurrentTime() every second, creating a Date-javascript object, and then updating the DOM with that info.

That was all the Javascript for this web app!

Follow my Youtube-channel and my blog so you can stay updated on the next challenge tomorrow, and continue to learn to code with me. Also it would make my day if you would smash that emoji to the top-right :)

Peace.

20day Coding Challenge Day 1 APIs

Sebastian — Fri, 24 Dec 2021 09:43:07 +0000

Follow along my learning from CSS to React and Node in 20 days

Hello!

My name is Sebastian, and I'm a high-school student from Sweden. I have dabbled with some front-end development for the past few months. And since Christmas brake finally arrived today, I've decided to start a challenge for myself! I'm going to code non-stop for the coming 20 days.

I'm following the front-end career path at Scrimba and I'm currently at module 7 (APIs)

By the end of the 20 days I'm hoping to have finished the front-end career path and have started with some backend Node.js development.
I will be documenting my progress for the coming days, and filming myself on my Youtube-channel, so feel free to follow along my journey and learn with me!

Day 1 APIs

Today I started and finished the Async Javascript and War Playlist on Scrimba. It began with explaining the basics of callbacks. Which is essentially a function calling another function.

function getValueA(A) {
    return A + 1;
}

function getValueB(B) {
    return getValueA(B)
}

By doing this, we can easily control the flow of our code. This is thanks to the fact that we now can run functions when the other functions first have finished. Thus it's the first step towards asynchronous programming(running things in a reorganized fashion to maximize effectiveness).

This way of chaining together functions becomes very problematic and messy fast though :(

To fix this, promises were made. As an analogy, think of it this way. Once you have submitted your resume to a company, they promise, to return to you in one week. Whilst you are waiting for their response, the promise is in a pending state. If they respond to you within one week, then the promise was successful, but if they never contacted you again, then the promise was rejected.

Here's a code example:

fetch("https://bestapi.com")
    .then(response => response.json) //Turning data from JSON to JavaScript
    .then(data => console.log(data))
    .catch(error => console.log(error))

Here, the code makes a request to an API using fetch, if that API successfully responded, represented by the .then(), it calls an anonymous function that turns the data from JSON to JavaScript. If that was successfully completed, it then logs that data to the console, if it was unsuccessful, represented by the .catch() method, it logs the error message instead.

Thus, it's now much simpler to write asynchronous code:

Using this, I built the War -Card Game from the Scrimba Tutorial :

Finally, to add some syntactic sugar on top of this, we can use async/await to make things a bit nicer.
(An example using a fetch request to generate a random nature image from unsplash.com)

Normal Promise:

function generateImage() {
    fetch("https://apis.scrimba.com/unsplash/photos/random?orientation=landscape&query=nature")
        .then(res => res.json())
        .then(data => {
            document.body.style.backgroundImage = `url(${data.urls.full})`
        })
}

vs Async/Await:

async function generateImage() {
    const response = await fetch("https://apis.scrimba.com/unsplash/photos/random?orientation=landscape&query=nature");
    const data = await response.json();
    document.body.style.backgroundImage = `url(${data.urls.full})`
}

I finished my day off by building a landing page from Brad Traversy's 50 Projects in 50 days udemy course

That was it for today! I found myself procrastinating a bit throughout the day, but I'm going to sharpen up for tomorrow ;)

Peace.