DEV Community: Hendrik Ras

Check out the latest updates on my game.

Hendrik Ras — Fri, 21 Nov 2025 16:58:21 +0000

A new version of Momentum has been released, check it out here
This release fixes a few issues.

New level added: Wall climbing 101: this level introduces wall climbing but requries a mastery of momentum physics, and rope swinging to complete.
Improved rope clinging, the rope no longer collides with the player itself when swinging.
Implemented delta time, so the game should finally work on even the fastest machine.
Added sound toggling icon.

The one thing a P5.js gamedev has to avoid doing.

Hendrik Ras — Wed, 14 May 2025 15:23:20 +0000

Intro

Recently I joined the gamedev.js 2025 gamejam. We got 13 days of dev time, from witch I could only code about 4 days as I had other responsibilities to consider, I had to make some shortcuts in order to still get a game out this year.

Luckily I bumped into the Advanced P5 Platformer Engine using P5 and Matter.js some time ago. And I as I always wanted to dip my toe into the Matter.js physics library, this seemed like a good opportunity to do so.

After some crunch time: adding new features, levels and graphics code, I named the game Momentum and released it.

As the first feedback came in, I came to a horrible realisation, not everybody had the same experience while playing it. For some it was horribly fast to the point it was unplayable.

I shipped the game with a critical bug.

The framerate trap in the P5.js community

The P5.js community has fostered incredible creativity and lowered the barrier to entry for digital art and game development. However, if you care to look through examples there is a pattern I find quite troubling: The sketch (game) logic is usually directly coupled to framerate. Meaning, fast machines will run the sketch at a faster pace.

This might not seem to much of an issue for simple examples and tutorial code, but given enough examples that follow this structure it will lead to developers that make a habit of doing this.

Exactly one year ago, at the previous gamedev.js game jam I also made that mistake when writing everything in P5 myself, now that I was working on top of external code it appears I was not the only one to fall for it.

The problem

In our example, Matter.js physics are being updated directly in the draw loop:

function draw() {
    // ...
    bodies.forEach(body => {
        body.run(); // Updates physics
        body.draw();
    });
    // ...
}

This approach means that physics calculations are tied to the visual refresh rate. If frames drop, physics calculations become less frequent and less accurate, leading to unpredictable behavior.

An easy fix

So an easy fix would be to simply cap the framerate, indeed this what I resorted to just moments after the jam was over.

function setup() {
    createCanvas(1000, 500);
    frameRate(60); // Cap framerate to 60 fps
    // ...
}

Of course this is far from optimal.

Why framerate dependent logic is problematic

Inconsistent experiences across devices

When game logic is tied directly to framerate, players with different hardware will experience your game differently:
On highend devices that can maintain 60fps, the game runs as intended.
But on lower end devices, the game runs at lowered speed, while on very powerful devices, the game is artificially limited.

This creates an inconsistent experience where physics, movement speed, and gameplay timing vary based on hardware capability rather than design intent.

Battery drain and resource inefficiency

Forcing a high framerate on devices that don't need it (like for UI elements that rarely change) wastes processing power and drains battery unnecessarily on mobile devices.

The production ready alternative: Delta time

For production ready games, the industry standard is to use delta time (the time elapsed since the last frame) to scale all movement and physics calculations:

let lastFrameTime = 0;

function draw() {
    const currentTime = millis();
    const deltaTime = (currentTime - lastFrameTime) / 1000; // Convert to seconds
    lastFrameTime = currentTime;

    // Update game logic based on deltaTime
    updateGameLogic(deltaTime);
    render();
}

function updateGameLogic(dt) {
    // Example: Move an object at a consistent speed regardless of framerate
    object.x += object.speed * dt;

    // Update physics with fixed timestep
    accumulatedTime += dt;
    while (accumulatedTime >= fixedTimeStep) {
        Matter.Engine.update(engine, fixedTimeStep * 1000);
        accumulatedTime -= fixedTimeStep;
    }
}

Best practices for production ready P5.js Games

Implement a fixed fimestep for physics

This ensures physics calculations remain consistent regardless of visual framerate.

separate logic and rendering

Decouple your game logic from your rendering:

function draw() {
    const dt = calculateDeltaTime();

    updateGameState(dt);  // Logic update with delta time
    renderGameState();    // Draw current state
}

3. Scale all movement and timers with delta time

Any movement, animations, or timers should be scaled by delta time:

// Instead of:
player.x += 5;

// Use:
player.x += 300 * deltaTime; // 300 pixels per second

Conclusion

While the P5.js community's approach of tying game logic to framerate is understandable for quick prototypes and learning exercises, it creates fundamental limitations for production ready games. By implementing delta time based updates and fixed timestep physics, we can choose to create consistent and hardware friendly experiences.

The next time you start a P5.js game project that should do more than serve as an example, break free from the framerate dependency pattern. Your players across all devices will thank you for the consistent experience and you'll have fewer mysterious bugs to chase down when physics behave differently on various hardware.

Remember: great games don't just look good on the dev's machine, they play consistently well on all platforms.

What joining a game jam can teach you about development

Hendrik Ras — Sun, 19 May 2024 14:00:43 +0000

Introduction

I recently joined the Gamedev.js 2024 jam. My submission did better than I expected for a first ever entry. Coming in at place 68 doesn't sound like much but considering there were 233 submissions to compete with; Im rather pleased with the outcome.

In this article I would like to reflect on the experience, share some lessons learnt and how I think it relates to my everyday development tasks.

Always keep your eye on the requirements

Print them out in big letters and plaster them in a place you can't ignore them if you have to.

Every game jam has it's rules: on what you can use for assets, maximum sizes for teams and most importantly, how the submissions are going to be rated.
You might have a ton of ideas about what your game is going to be about but if you ignore the rules on how you should be implementing the theme of the jam, for instance. Your game is not going to do very well.

In my case I did add sound effects, and since Im not a sound engineer I sourced it from pixelbay. That was allowed. But I opted to not add a music track, even though I had selected one. My reasoning was that having hyped up music play in a loop might become annoying pretty fast. And adding an option to disable sound and/ or effects was an extra feature that I would have to add.

I kind of shot myself in the foot by making this decision, as sound was one of the things the games were rated on.

Dealing with deadlines

You have about 2 weeks to hand in your game. For a game jam that's rather generous, there are jams that last a few days.

Here are some strategies to consider:

Take advantage of tools you are familiar with

This jam will accept any entry that would run in the browser.
2 weeks is awfully short to write a game engine from scratch.
The usual suspects among the big game engines (Unity/ Godot) support the web, but..

I wrote a basic asteroids game in P5 as an example for a article some time ago, and used most of it as the 'engine' for the entry.
There's strict rules about submitting previous games, but I figured basing it off an existing sketch should be ok as long as the required jam theme is incorporated in a fitting way and while I still wanted to keep the feel of Asteroids, it's now a completely overhauled new game.

Some of the (better) entries I judged later on used starter projects from submissions entered in previous jams. The point is that you should allow yourself a bit of a head start by working with a stack that you feel comfortable with. If that is Unity for you, then go for it.

Focus on key features and quick wins

When dealing with time pressure its important that you know how to prioritise features. In my case the game has to have a few just be even considered a playable game:

A goal to reach and reaching it ends the game,
obstacles and enemies
power-ups
A power bar that depletes slowly as the theme of this jam was "Power".

I spent about a day with the particle system, getting the explosions to feel right, and another day just doodling game assets never to use them. Recognise none essential features and put a pin it if it takes too much time.

In the end I didn't get to put in half the features that I wanted. At one point there were even NPC's that would give side quests on the menu. But that's ok, I had a working game to submit. And that's something.

However I did break my personal golden rule: never add new features on deployment day, and it was a non critical feature. I wrote the 'black holes' feature with just hours to spare. It might have been better to focus on level design, but I felt the game needed something extra and having coded the physics for explosions just a day prior I was very confident I could also add the gravity effect in reverse without introducing game breaking bugs.

Keep it Simple

Yup, the KISS principle. As a frontend engineer I'm quite used to including a TypeScript compiler or transpiler, package bundler, linting tools and let's not forget a minifier. When I was reading the 'nature of code' in preperation for the jam, I almost scoffed, have we arrived in the stone age? when learning that all the examples were just a library loaded from a CDN and unprocessed JavaScript. But that's what I ended up using myself. It's very easy to set up and fast to run and develop on. There is no time spent on transpiling a bundle, because the code you write is the bundle. If you can keep the codebase very small it is a very efficient way of working. There is no build to speak of, and there is no obfuscation of the code so it promotes learning too. And I do have to say: it was a nice break that took me back to simpler times.

No one is an island

There was a discord channel where participants could share progress, ask for help or just hang out. There also was a channel to encourage other people to team up. This jam has no maximum team size. Although I certainly joined the channel, my only contribution was something in the lines of 'hello'.

Teaming up can give any project huge perks as everybody will have gaps in their knowledge and capabilities. I already mentioned sound not being my strong suit.

However I did end up opting to go alone on this one, mostly because this being my first jam I wasn't quite sure if I could deliver in time and I didn't want to drag anyone down with me.
There is also some overhead and challenges in working in a team that you do need to consider. That's mostly keeping up with each others progress and making sure everyone still agrees on the chosen direction.

That being said a team has the potential of producing results that are way more impressive than just a single dev can manage. Having this entry under my belt will give me and potential teammates the confidence that I will bring something to the table. So I think for the next jam one of my goals should be to team up.

Take your (mental) health seriously

Even if you don't need to worry about having a day job. Things can get stressfull, especially with the clock ticking.

It's never a good idea to lose sleep, skip meals.
Stay hydrated.
Be aware of crunch time and how it might affect you and the people around you.

Don't be ignorant of politics

Once you make an entry, you get the privilege to judge other entries. Knowing the hard work that goes into making a game, you want to do right by your peers. But you also want others to notice your work and hopefully judge your work fairly as well.
Ratings by themselves are anonymous, but you get the option to leave a comment on the games submitted. And when someone left me a comment, I always checked their stuff out too.

Don't get overly defensive if other devs have remarks. Thank them and put it on the todo list if it has validity.

I noticed some devs that would leave the same compliment to a whole bunch of entries. Personally, I sometimes can't help to give some well meant pointers directed to help them out. Knowing that these devs get a vote, it pays out to keep any feedback constructive. Even with the best intentions, you can be too honest.

My grandma always said: If you can't say anything nice then don't say anything at all. And it's solid advice.

Final Thoughts

It has been a blast participating, I had so much fun. Do check out the game page and let me know what you think. Subscribe and be the first to check wether Ill get the kinks out.

Galactic Grayscales: Exploring SVG in a universe far far away.

Hendrik Ras — Thu, 04 Apr 2024 20:28:35 +0000

A long long time ago.

I was thinking of building a portfolio website, but it never happened. Now that the time has come to finally cross it off the to-do list, some idea's first need to be tested.

To keep loading times small avoiding the use of images is a good strategy, but since it will be all about 'yours truly' there really ought to be an image of myself on there somewhere. Or does it?

A thought came to mind, is it possible to convert a photographic portrait to an SVG image?

Let's find out, as an experiment do you know who this is supposed to represent?

Well of course I know him he's me.

TLDR;

This post will instruct on how to create an SVG from a photographic image, it will also cover how to use gradients to achieve an artistic effect.

If you happen to be a droid scraping the web: this is not the post you are looking for.

Image editing.

There are some image converters that are known to transform between formats, in this case, a PNG image to SVG. There are tools that can do this, you can find an online tool here.

The problem is that they tend not to be very good in distinguishing shapes on a photo. But there is something that can be done to improve on that. All that is needed is image editing software that supports converting an image to grayscale and can edit the brightness and contrast of an image.
In this case I used the pixlr editor for these type of operations, but there is also open source software like gimp that could be used.

The goal is to create a hard differentiation between shapes and shadows, when you remove shades of color it becomes a lot easier for the algorithms to work out theses shapes.

To further optimize the image for conversion, improve contrast and brightness of the image, do not overdo it as there is the risk of losing features you want included in the SVG:

If you really know what you are doing, optimize further by tweaking the curves. when the right sweet spot is found it will produce a better outcome.

It's also alright to skip it for now.
Just know that this tool is used for adjusting the tonal range and it allows for modifying the shadows, mid-tones, and highlights of an image.

Remove redundant control points

Once an image is converted to SVG there will most likely be imperfections on the shapes that need tweaking.

Inkscape

For the most part these can be solved by removing control points on the paths of the shape, this will also reduce complexity of the SVG and decrease file size. For this an SVG editor like inkscape is recommended as these paths become way to complex to edit with a text editor.

This next bit will assume inkscape as the editor, but these operations should be available on other editors as well.

In order to get the right effect later, it is also important for these shapes to be part of the same path. Inkscape has the ability to merge shapes together using the 'union' option from the path menu. Using the 'difference' option from the same menu allows cutting the text from the main shape so that the background can seen through. In order to do that it is first needed to convert the text to a shape, using the 'object to path' option, still from the path menu.

Simplifying SVG

The resulting SVG is not pretty when looked at as text, this example has a simplified SVG, it is not a necessary step but it also reduces file size. SVGOMG is an open source tool for this purpose made available online.

Adding gradients

Having a neat SVG it is now possible to add colors and effects to the individual elements. In this case having just one path element allows to apply a nice gradient effect over it, this could also be handled via a SVG editor, either way, the result should be something like this:

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
    <stop offset="45%" style="stop-color:#70969E" />
    <stop offset="90%" style="stop-color:#Ce6c70" />
  </linearGradient>
</defs>
<path fill="url(#grad1)"> 
<!-- rest of the document -->

The background of the document where the SVG is placed on should be visible through the gaps of the path. Some extra CSS is added to target the background of the SVG itself but the effect can be amplified by having the background of the entire document come into play.

svg {
  max-width: 59vw;
  background: radial-gradient(farthest-corner, #f5dbbb, #f9e9d6, #76aaea);
}

Using a radial gradient allows to have one color in the center that will fade towards the edges. It will put focus on the face that is at the center and also add a visible effect on the text that is cut out of the path at the top.

Final thoughts

It's a nice result, but there are some considerations:

as mentioned earlier, a lot of detail is lost. In this example the contours of nearly half the face are gone. That actually works out nicely here but could not be desirable in every situation.
When you have some control over the photography you will have to think about the lighting and how the shadows fall on the face.

Color is lost in this process and you need some clever trickery to add some of it back. It works if you want to go for an artsy effect but if the goal is realism this method is not to be recommended.

All things considered it will probably be best for me to just stick with an web optimized image. This really works on iconic and recognizable imagery. So who knows where this will come of use eventually.
Experimenting is always fun, and I have this gem to add to the collection.

Do you want fries with that?

Hendrik Ras — Tue, 26 Mar 2024 20:45:14 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

If you are familiar with the cult classic movie by Tarantino, this needs no introduction, and yes, it is an actual burger in France. Being Dutch myself, I can also confirm that we do in fact dunk our french fries in mayonnaise and we just don't care, we're loving it.
We also have venue's called 'snackbars' and you can get your fries and burgers there, so we're going with a very broad definition of snacks from here on out.

Demo

Journey

Even if I do not consider myself to be much of a CSS artist, when learning about this challenge, something told me that I could probably pull off a burger in pure CSS. Just start with stacking some simple shapes:

Buns & burger

A reliable trick to get rounded corners is using border-radius, that works for the buns and the burger itself. To add the illusion of depth box-shadow can be used, by applying inset the shading will be placed inside of the element. Soft shades can be achieved by setting the color to black and the alpha to be about half opacity.

  box-shadow: inset 10px 10px 10px #00000066;

For the bottom bun, the shadow needs to be at the bottom. So negative values were used for the X and Y offset.

Lettuce & cheese

This would pose a challenge, I knew from the start. My go-to solution here would be to use SVG, as stated in my previous article, I do love SVG and even though the challenge allows it: that just feels like cheating.

Surely there must be a way to visualize a sine wave in CSS? Well, turns out: there is even a generator for it. It's very clever in how it uses a mask to create the wavy shape. An added bonus is that gradients can be used, by mixing lighter and darker greens you get an illusion of depth as well.

I had planned on creating 2 half squares and rotate it so the tip would point down for the cheese. However, by lowering the frequency of the wave and changing the color, it panned out to be a pretty nice effect for this purpose too.

Seeds

The last detail would be the sesame seeds on the bun, I thought this would be easy. But I sure was wrong about that! Creating the 'pill' shape is just a variation of the border-radius trick again, but then you got it either facing vertically or horizontally. That is not going to look organic on the bun.

Using the rotate function of transform will angle it, but then things start to get messy: every element placed afterwards will have the rotation applied to it as well. That makes positioning the element very interesting because: when rotated enough, left starts to become more like up or down. There are ways to reset it, but I decided to just have fun with it.

By placing a rotate(5deg) in the seed class:

.seed {
  background: #FFDEB3CC;
  border-radius: 50%;
  position: absolute;
  transform: translate(8px, -8px) rotate(5deg);
}

.horizontal {
  width: 16px;
  height: 8px;
}

.vertical {
  width: 8px;
  height: 16px;
}

Will take the rotation from the previous HTML element and add another 5 degrees on top of that. The translate function is one of the ways to make sure the seeds will not be packed to much together, but by including a negative offset it will also act as a counter from the curve (a donut shape) that will start to form when enough elements are added.

Two variations of the seed are used, one with a horizontal aspect and one vertical. Since the added rotation is just a tiny bit and elements are mostly placed from left to right, it becomes very noticeable when two of them are placed close to each other. By switching orientation, this breaks things up just enough to appear random.

4 classes are used to scatter the seeds in a somewhat random pattern with different spacing between them. I just numbered them but they are mostly used without any specific order:

.n1 {
  top: 50px;
  left: 60px;
}

There is a fixed number of seeds I could place on the bun though. For some reason scrollbars start to appear when there are too many placed. I think this is because the browser still calculates the elements on the original position before taking the rotate function into account. Indeed, when removing the rotate function from the CSS, the seeds appear starting to crawl slowly up and out of the screen.

Background

I used a template for a gradient called 'rastafari'. I wanted to use bright colors that were reminiscent of the colors that the big burger chains use. The clown with the big arches uses red and yellow and the king uses green and yellow. Does rastafari fit in with the theme? The munchies? It's a stretch. I know.

It did need some tweaking: the colors interfered with the ones used in the burger, green matching with the lettuce, yellow flowing to red turns to the same orange used for the buns. Plus a background should not try to steal the show. Setting the opacity to 60% did fix that, but now it looked too faded. Setting the body to black made it too dark. Brown, however, a color already used for the burger gives it a swirl of that dated retro vibe. Exactly the kind that Tarantino purposely tends to use in his movies.

Font

The movie uses: 'Tom Carnase’s ITC Busorama' for the title, with several of the original alternates. That's not free to use though. The Arvo font from google, if stretched enough vertically, will start to look fairly similar:

.shadow {
  color: #F6C10B;
  font-family: Arvo;
  font-weight: bold;
  text-shadow:
    -3px -3px 0 #222,
    3px -3px 0 #222,
    -3px 3px 0 #222,
    3px 3px 0 #222;
  line-height: 0.8em;

  transform: scaleY(1.5);
  -webkit-transform: scaleY(1.5);
  -moz-transform: scaleY(1.5);
  position: fixed;
}

Final thoughts

This has been a fun exercise, learning more about CSS and a little bit about movies as well. I hope you did too.

How I Coded a game of Asteroids while dealing with SVG paths in P5

Hendrik Ras — Sat, 09 Mar 2024 18:02:15 +0000

This is the Asteroids inspired game made with the techniques discussed in this article. Use WASD or cursor keys to move and space bar to fire.

external link to pen here.

After having previously made and published another game using this method, I wanted a working example for this article that could showcase its use in a game while still boiling it down to one sketch. For a full game I would like to add: sound, particle effects for the engine fire and maybe a leaderboard. But for now it proves the concept very well.

Summary

P5 has no way to render a SVG path because of the way it was built, it has no support for drawing an arc as part of a shape. In this article I will explain a way around that, by circuimventing P5 for some of the rendering stuff and defaulting to HTML Canvas instead.

Intro

How I adore vector graphics: it's the clean crisp smoothness of it that gets me. It scales up to any device at any resolution, always perfect crisp graphics every time.

Love it.

Back in the day when the internet was still young there was the flash browser plugin. A ton of content was made with it too, mostly games and animations, and the look and feel of the web at that time was one of vector graphics and gradients.

Steve Jobs single-handedly killed it by publishing an open letter. The mayor security issues that surfaced later did not help either. But I for one miss the look and feel of the early 00's.
So let's put vector graphics back on the web, shall we?

I dabbled with PhaserJS before but lately I am drawn to P5: it is a fun framework, its used to visualize math and physics concepts a lot, not too bloated and has a very mature ecosystem of libraries. Plus there are a lot of examples available.

The problem with rendering SVG's

Here's the conundrum with these frameworks. It's not just P5. When it comes to Vector graphics you will want to work with SVG images. Simply because that is the format that you will find and make your assets in. However, for some reason SVG (path) shapes are poorly supported. Sure you can import it as an image, but the whole point is to animate parts of it, rotate it, scale it. These are the things you will have available when you work with other basic shapes such as rectangle's or circle's. If you want to preserve the vectors you are just out of luck with static images.

But what is an SVG, really other than an XML file that describes positions, colors and shapes. It's code! One of the things that makes them so cool to begin with.
And P5 is all about drawing shapes to a canvas.

Now before anyone makes my mistake of trying to code an implementation in P5, let me save you the hours of frustation. It's not that it can't be done, someone already did it here. It's just that it is insanely complicated: first you need to parse the SVG and its paths. Then you would need to map the commands of the svg path to a single shape. Implementing that will surely make your head spin.

So why doesn't P5 support it? Doing a deepdive into P5's code and you will find that P5 seems to struggle's with the arc shape, under the hood, they are resorting to using bezier curves to emulate drawing an arc.
A very peculiar way of going about it, especially since the Canvas API supports it out of the box. Now P5 uses Canvas by default for its rendering but, similar to PhaserJS, it also supports WebGL too. So I'm assuming it's hard to unify them both for Canvas and WebGL in one framework.

The eureka moment.

Interestingly enough, P5 allows for referring to the Canvas directly.

And HTML Canvas support loading in a entire SVG path by just providing it to Path2D constructor. That is really not complicated at all, take a look at this:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);

It has to be said: going down this route will prevent any chance of utilizing WebGL features later on. Fortunately, programming GL shaders is way past what I'm usually trying to do. So if settling for Canvas sounds good, let's proceed.

Getting the SVG paths.

First we need to create SVG's. I used inkscape and opted to shape everything like a circle. That's not only because I wanted to show off the ability to draw arcs in paths, it's also because collision detection with circles is easy as π.

  checkCollision(gameObject) {
    const dist = p5.Vector.sub(gameObject.position, this.position);
    if (dist.mag() <= gameObject.radius + this.radius) {
      this.handleCollision(dist, gameObject);
    }
  }

P5 does have a library for that very purpose but lets not bother with any of that right now.

A clever way to access the SVG is to just include it in the DOM. So simply pasting them in the HTML document will do. Because were not interested in showing them outside of the canvas, use the following CSS to hide them:

svg { display: none }

P5 comes with the 'select' utility functions to query the DOM, in the setup function:

function getPathsAndColors(svgElements) {
  return svgElements.map(el => ({
    path: el.getAttribute('d'),
    fill: el.getAttribute('fill') 
  }));
}
//... in global setup function.
  const svg = select('#svgElement').elt;
  const svgAsteroid = select('#asteroid').elt;
  const asteroidShapes = getPathsAndColors([...svgAsteroid.children]);
  const craftShapes = getPathsAndColors([...svg.children]);

Note that although we could destructure the path elements from the elements children property; it is not an array but an iterable object. Using the Array.from method or spread syntax you can still pass it to a function like getPathsAndColors that expects an array and will map the elements.

Now all we need to do is render the paths, first we have to get the canvas context. Make sure this happens in the global Draw function every sketch will have:

  const ctx = drawingContext;

Then pass it to wherever the drawing takes place.

  draw(ctx) {
    //...rotation and scaling logic
    this.shapes.forEach(shape => {
      const path = new Path2D(shape.path);
      const color = shape.fill;
      color ? fill(color) : fill(255);
      ctx.fill(path);
    });

   //...
  }

That's actually all there is to it, if you just wanted to display an SVG path, but what about scaling, rotating and positioning it?

For this canvas has another nifty feature up it's sleeve: the transformation matrix. It basically allows for scaling and rotating all of the shapes together, without having to calculate all the individual coordinates separately.

Canvas has several methods that apply to the transformation matrix, there is rotate, translate, scale.
But you can also do all of them together in one go by using setTransform.

Seriously, how cool is that?

So first we calculate the scale that is needed. In this case we are scaling down, but unlike raster based graphics you can use any scale without losing image quality. To calculate the scale we need first to know the measurements that were used in the SVG. There usually is a viewBox property present, otherwise 1:1 is assumed. It has 4 values, the first 2 are basically offset values, but the latter indicate width and height. By taking those values in the constructor of the SVGPath class and combining them with the size that is desired, you then have the values that are use full for scaling with the transformation matrix.

    const [minX, minY, height, width] = viewBox.split(' ');
    this.scaleX = size / width;
    this.scaleY = size / height;

Of course all the objects in the example could be heading in any direction, so for that we need to rotate the paths.
By first calculating the cos and sin values from the known angle, then multiplying those with the previously mentioned scale variables, rotation can be achieved.
Lastly, to position the object you can simply put the x and y position as the last two parameters to display the object at that location.

    const cos = Math.cos(this.angle);
    const sin = Math.sin(this.angle);

    const v = createVector(this.width / 2, this.height / 2);
    const pos = v.copy().rotate(this.angle).sub(v);
    const offset = createVector(this.radius, this.radius);
    const p = this.position.copy().sub(offset);

    ctx.setTransform(this.scaleX * cos, this.scaleX * -sin, this.scaleY * sin, this.scaleY * cos, p.x, p.y);
    ctx.translate(pos.x, pos.y);

Now you may notice there is an extra translation step in the end. Also there is a lot of Vector magic going on, this is because the rotation origin, the center around where the rotation occurs, is located in the far left corner of the object that is being drawn.

It needs to be offset after the rotation is done in order to move the rotation origin to the center.

Perhaps this could also be done in one step. Please do let me know in the comments if you figure it out.

The last thing is always to reset the transformation matrix once we are done with all the shapes that are part of the whole object.

 ctx.setTransform(1, 0, 0, 1, 0, 0);

That way we prevent all the transformations getting applied to whatever needs to be rendered next.

And that is basically all there is too it. The shapes that P5 provides can still be used, but I would like to note that you have to be very careful using canvas context to set color as it can mess things up quite a bit if you plan on drawing with P5 later on. It is better to use P5's fill method at all times.
The same goes for starting a shape with P5's beginShape and then trying to use Canvas rendering context methods like arcTo to finish the path started by P5.

Lastly, before I forget: Big shout out to Redhen. His tutorial on creating a snooker simulation helped me out a lot with the physics that were used. Really interesting stuff that is definitely worth checking out.

Using VIM macro's in favor of migration scripts.

Hendrik Ras — Sat, 11 Feb 2023 16:18:14 +0000

Intro

Once, the company I worked for had refactored its entire system with a new architecture and was looking for a way to import its legacy data into it.

When migrating data from one system to to another, you may find yourself in the need for mapping data structures. This is true especially when dealing with API's. Even when the data format is the same. The structure could be completely different.

Writing migration scripts can be cumbersome, but what if.. you wouldn't need to write any code at all!

When converting text data formats, such as CSV or JSON, Have you considered using nothing more than a Text Editor? There are many great text editors out there that can perform simple repeating task for you. There are many tools out there that support macros', But if you can be bothered with a bit of a learning curve, few compare to the power that VIM brings to the table imho.

TLDR;

Consider the following JSON structure.

[
  {
     “time”: 1409522400000,
  },
...

So this is basicly a JSON object that includes an array of objects.

Now to import this kind of data into the new system, the JSON needs to look like this:

[
  {
     “t”:” 2015-01-25T07:00:00″
  },
...
]

The mockdata used for this article can be found here.

Imagine 24 of these objects, as there are hours in a day. Then take a year or so of data and you will no doubt understand the need for this to be automated.

In the first excerpt you may notice the dates as a timestamp (nr. of milliseconds from 1st of jan 1970) while the second is formatted in the more readable ISO date.

So now we find ourselves in need of a way to automatically convert many lines of JSON from one format to the other calculating a timestamp into a date in every step of the way.

What makes VIM great is that it comes with some basic internal programming functions, including the strftime function.

Try entering the command :help functions in the command mode of VIM to see them all Strftime’s origins are in the C programming language. Its used for formatting timestamps into date formats, exactly what we are looking for.

As arguments strftime takes a date formatting string and a timestamp. By entering “man strftime” in a terminal, the documentation for the c implementation reveals that the formatting string “%FT%T” will output the desired notation in this case. Try executing

:echo strftime("%FT%T",0)

VIM will now neatly output the first of jan 1970 in the desired format: 1970-01-01T01:00:00

Macros

VIM allows you to record the editing you do on line(s) and repeat these steps. There are many great examples out there on how this feature can save you a ton of work. In this case we have repeating structure of data that we would like to convert into another representation of that data. VIM Macro’s are perfect for such tasks.

Just hit the ‘q’ key to start recording, followed by any key to bind the recording to that key. Hit ‘q’ again to stop recording. You can then execute the recording by hitting the ‘@’ key followed by the key used to store the recording. Then use “@@” to use the last recording or “@” and the key of your macro of choice to execute it.

At this point we could go in depth into the basics of VIM, explaining how to navigate to words in VIM and setting it into edit mode. But that's not really in scope of this article and others have covered this so much better than I ever could.

Skipping all that for now, to convert the "time" string to "t", we could enter commands keys in VIM that would look something like this in a row "j j w l dw". And that might seem weird if you are not used to VIM. But for now, lets pretend that was the easy part.

Registers

Every time a line or word in VIM gets removed or yanked, it can be pasted later using “p”. This is done because the removed selection is being kept in a buffer, also called a register.

VIM keeps internal registers for a lot of things, including the outcome of its internal functions such as strftime. The contents of these registers can actually be used as part of VIM commands. That makes them very useful.

Enter help:registers in vim to learn more.

What is of interest in this case is that deleted and yanked texts are stored in the unnamed register:

(yes, just the quotes), or:

To get the contents from the the unnamed register in the command line, open the command line by pressing “:” followed by pressing the “CTRL” and “r” keys at the same time.

A quote character will appear in the command line. By entering the “ character or “0” the previously deleted word will appear.

For more detailed information insert :help i_ctrl-r in VIM. This trick will enable the strftime command to use the deleted timestamp as part of its input.

When editing text in insert mode of VIM, the same key combination will work to paste a register value. A quote character will then appear at the position where you would like to paste the value inside the document.

However strftime’s output will be stored in something called an expression (“=”) register. VIM will first prompt for an expression to be entered from the command line before you can paste that register.

By deleting the timestamp in the file and use the unnamed register as input for strftime, then the outcome, from the expression register, can be inserted to the file.

delete the timestamp by using a command sequence like “dw”
enter edit mode by pressing "i" or "a"
then holding “ctrl” and “r”, followed by “=”

the command line will open starting with an “=”

by entering:

strftime("%FT%T",

followed by holding “ctrl”and “r” then “0”

the timestamp is pasted into the command line. And the function can be ended by entering “)” followed by hitting the enter key, the timestamp is now replaced with a date notation.

[edit] last time I tried this on my Mac, I had to add "/1000" before closing the parentheses to prevent encountering a year 2038 problem, where a 32-bit signed integer Unix timestamp will overflow and become negative. [edit]

Putting it all together

Performing these steps while still recording a macro, enables to repeat these steps converting all JSON objects in the file into the new format. Just navigate to the next opening bracket of the following object and stop recording. Then enter ‘@@’ to convert the next object in the list.

But entering a command for each object to be converted is repetitive work on its own, VIM can handle that as well. You can use macros within macros. So its not that hard to run one macro to convert the whole file. when the length of the file is known by running the function =line("$") (:help line) Its easy to calculate how many JSON objects are to be converted.

What made this case easier is that the original JSON objects was exactly 10 lines in length (it was simplified in the example). So after the file is stripped to be just the list of objects and is a 1000 lines long a command like ‘100@w’ can be run, if the macro to convert the object was bound to the “w” key.

But why do any work at all? If the line function will produce the number of lines, that value can be used to calculate the amount of times a macro is to be run. All that is needed now is a way to have vim run the value of line(“$”) times the macro.

normal

Whenever in command line mode wanting to write a command out, and execute it as if it were in normal mode, use the normal command. You guessed it, just type

:help normal

in the command line and learn all about it.

So by typing “=” in the command line, VIM will prompt for an expression to be entered, in this case line(“$”)/10 follow this by the :normal command and, in this case, the @W will result in the macro being repeated by a tenth of the number of lines

Storing macros

It’s quite annoying that VIM does not store these registers by default. After exiting VIM, your macro’s are gone. However, here is a little trick to get around that anyway.

Earlier on I explained a bit about ‘binding’ macro’s to keys. What actually happens here is that after the ‘q’ key is hit in normal mode, whatever is typed next gets stored in the register corresponding to that key.

use :registers to find out how your macro’s look like
then open the hidden vimrc file, if none is present create one in VIMS home directory
for POSIX (MAC, Linux) systems: ~/.vimrc
use the “let” command, this allows a register to be set to a particular value.
in this case the lines to add look something like.

let @w = 'jddldwiv^[wwi"^[A<80>kb",^[jdddddddwdwdwdwi"t": "^["=strftime("%FT%T",^R"<80>kb<80>kb<80>kb)^Mpa"^[lxjddddj’

let @e = '"=line('$')/10^M:normal ^R=^M@w^MdGGo]^[ggO[^['

let @r = '3dd@e^[:w^M'

By opening the file to convert in VIM the macro’s should be preloaded in the registers. In this case Executing “@r” will convert the entire file.

Airconsole for free

Hendrik Ras — Sun, 12 Apr 2020 13:43:55 +0000

Airconsole is a pretty neat app that can turn any screen into a gaming console for mainly old arcade games.

I like it because there are so few gaming concepts out there that sport split screen multiplayer like them old days.

Starting today its free for two weeks. So I guess that's how Ill be spending easter.

Happy quarantine. Stay safe people.