About Me (AtHeartEngineer)

Everything is a work in progress

Contact

Twitter

Email

AtHeartEngineer pretty much everywhere on the internet.

The Name

I chose the username "AtHeartEngineer" not because I consider myself an authority on the subject, or that I have any title of "engineer", I'm self taught and don't proclaim to know the right way to do a lot of things. I chose my psuedonym because it is how I think. I've always been curious of how things work, how they are built, and how they are designed.

This site

This is a mdbook site that I've themed. I started out with gatsby, but it was just a mess, the code wasn't clean, the process wasn't clean, and it was too much for just getting words out into the world.

It is a staticly generated, which autobuilds using github's actions and then deploys to google cloud hosting.

Plan

(In no particular order)

  • Use this site as a homebase for my adventures on the internet
  • Pursue my 1000 hobbies even more
    • Software Development
      • Fullstack
      • Decentralized
      • ML
      • Embedded
    • Design
      • Graphic Design (particularly video and/or 3D)
      • Circuit Board Design
      • Audio (background music for youtube videos?)
    • Manufacturing
      • 3D Printing (FDM & SLA)
      • CNC (3-axis router)
      • Circuit Board Manufacturing
  • Create youtube videos
    • about hobbies
    • teaching stuff I'm interested in
    • for fun
    • an excuse to play with software like after effects & blender
  • Profit?

Streaming Info

https://www.twitch.tv/atheartengineer

Streaming Schedule

Tuesday's and Thursday's evenings EST...ish, life gets busy.

Who I'm usually streaming with

TeenDawg6969

ADawgShizzy

The Morphes

Coding

function test(params) {
  // Test Code for syntax highlighting theming
  if (params.length === 0) {
    return 'no params';
  }
  return params.join(' ');
}

Background Generation

This is fun

const DENSITY = 100; // lower = more dense
const HUE_START = 120;
const HUE_END = 230;
const MAX_SIZE = 3;
const MIN_LIGHT = 33;
const MAX_LIGHT = 67;
const MIN_TRANSPARENCY = 10;
const MAX_TRANSPARENCY = 60;
const SATURATION = 100;
const START_ANGLE = 240;
const END_ANGLE = 300;
const MAX_SPEED = 20;

let bg_canvas = document.getElementById('bg-canvas');
let bg_ctx = bg_canvas.getContext('2d');
let width = bg_canvas.width;
let height = bg_canvas.height;
let num_bits;
let bits = [];

class Bit {
  constructor() {
    this.x = randomRange(0, width);
    this.y = randomRange(0, height);
    this.size = randomRange(1, randomRange(1, MAX_SIZE));
    let hue = randomRange(HUE_START, HUE_END)
    let light = randomRange(MIN_LIGHT, MAX_LIGHT);
    let sat = SATURATION;
    let trans = randomRange(MIN_TRANSPARENCY, MAX_TRANSPARENCY);
    this.color = "hsla(" + hue + ", " + sat + "%, " + light + "%, " + trans + "%)";
    // We want to generate a random angle between 180 and 360
    // to make most of the bits go up
    this.angle = randomRange(START_ANGLE, END_ANGLE)
    this.speed = randomRange(1, MAX_SPEED) * 0.025;
  }

  move() {
    this.x = this.x + (this.speed * Math.cos(this.angle * Math.PI / 180));
    this.y = this.y + (this.speed * Math.sin(this.angle * Math.PI / 180));
    if (this.x < 0) {
      this.x = width;
    }
    if (this.x > width) {
      this.x = 0;
    }
    if (this.y < 0) {
      this.y = height;
    }
    if (this.y > height) {
      this.y = 0;
    }
  }
}

function generateBits() {
  for (let i = 0; i < num_bits; i++) {
    bits.push(new Bit());
  }
}

function randomRange(min = 0, max = 360) {
  return Math.floor(Math.random() * (max - min) + min);
}

function draw() {
  bg_ctx.clearRect(0, 0, bg_canvas.width, bg_canvas.height);
  for (let i = 0; i < bits.length; i++) {
    let bit = bits[i];
    bg_ctx.fillStyle = bit.color;
    bg_ctx.beginPath();
    bg_ctx.arc(bit.x, bit.y, bit.size, 0, 2 * Math.PI);
    bg_ctx.fill();
    bit.move();
  }
}

function resizeCanvas() {
  bg_canvas.width = window.innerWidth;
  bg_canvas.height = window.innerHeight;
  width = bg_canvas.width;
  height = bg_canvas.height;
  num_bits = Math.floor(width * height / DENSITY / DENSITY);
  bits = [];
  generateBits();
}

// Event handler to resize the canvas when the document view is changed
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
setInterval(draw, 20);

CSS Colors

These are some common colors I use in CSS, this is mostly a quick reference for myself. I imagine this list will grow with time.

blackish
gray-light
white
whitish
steel
neon-green
green
green-light
jade
hunter-green
dark-blue
blue
blue-light
blue-very-light
violet
violet-light
mauve
pink
purple
sunset
sunset-light
orangered
max-red
yellow
:root {
  --blackish: rgba(0, 0, 0, 0.98);
  --gray-light: rgba(242, 242, 242, 0.6);
  --white: rgba(255, 255, 255, 1);
  --whitish: rgb(225, 225, 225);
  --steel: rgb(108, 149, 153);
  --neon-green: #59f02b;
  --green: #19d457;
  --green-light: #61f291;
  --jade: #45a164;
  --hunter-green: #405c37;
  --dark-blue: #315db5;
  --blue: #477eed;
  --blue-light: #53d3e0;
  --blue-very-light: #a7f6ff;
  --violet: #9198e5;
  --violet-light: #b4bbff;
  --mauve: #cc71c2;
  --pink: #bf2c7f;
  --purple: #b638f5;
  --sunset: #ff7575;
  --sunset-light: #ffb585;
  --orangered: #fa5f5f;
  --max-red: #de1a1a;
  --yellow: #fad14b;
}

My Thoughts On Things

Deep down, I'm mad at the world.

I'm mad that the world isn't better than it is. This is what gives me my fire, my drive. I'm not sure if it's because I'm Irish, or it was how I was raised, or this is just common in some people.

That thought has popped in my head a few times recently so I thought I would write it down. It's not like I'm angry at anyone, or that I'm in a bad mood, I'm just... Unsatisfied with how things are, knowing what they could be.

Todo List

Site rework

  • Hide all buttons on mobile view
  • TOC autogeneration per section and on first page
  • Tagging / date handling/display
  • Theme rework, si\mplify further, less flashy

Content Ideas

  • Resolution/aspect ratio calculator link
  • Explaining scales link

I've never made a game before, and I've always wanted to, so here we go.

I am going to start out messing around with a side scroller, or maybe a tower defense game. Eventually I would like to make it multiplayer using libp2p (decentralized/serverless) and possibly gundb (saves state for everyone, where the game would be persistent).