The barrier to entry is… gone?

Everyone's talking about vibe coding, everyone's also talking about thousands in tokens, thousands of dollars in local setups. If you're just getting started and want to experiment, and have a budget of $0, where can you even begin? Good news you can get started for the low low price of $0!

There are free models available right now from multiple providers. Some are cloud-hosted, some you can run locally if you have the hardware. Pair them with the right coding harness and you've got a working setup without spending a dime.

This isn't a step-by-step walkthrough. I'll cover the options, the trade-offs, and point you to the right links. You're smart enough to follow setup docs.

The Free Model Providers

OpenRouter - The easiest on-ramp

OpenRouter acts like a gateway. One account, one API key, access to a ton of models. Some of them are free.

Sign up, grab your API key, and browse the free models here: https://openrouter.ai/models?q=free

A couple worth looking at right now NOTE: this was written 3/17/2026 these will change and can go away at any time. I'll try to update when this happens.

• Healer Alpha - 262k context window, solid for longer sessions
• Hunter Alpha - 1 trillion parameter model, designed specifically for AI agents

One thing to know: individual free models get hammered. They're rate-limited and sometimes just unavailable because everyone's hitting them. OpenRouter has a "free model router" option that spreads your requests across whatever free models are currently available. It's more reliable than pinning to a single model.

There's a caveat floating around that you might need $10 of credit in your OpenRouter account for the free tier to work. I've seen it work without it, but if you're getting errors that's a good first thing to try.

The nice part about OpenRouter is the upgrade path. If you outgrow free models you can switch to something like MiniMax MoE 2.5 which is strong for coding and way cheaper than Claude Opus. Same API key, just change the model name.

NVIDIA Build - Free tier, serious models

NVIDIA has their own model hosting at build.nvidia.com/models. Create an account, get an API key, pick a model.

Worth checking out:

• GLM 5
• Kimi K-25
• MiniMax

Make sure to select the Free Endpoint filter

I wrote about running GLM-4.7-Flash locally with vLLM and all the VRAM tuning that goes with it. With NVIDIA's API you can hit these same model families without owning any hardware at all. That's a big deal if you just want to get coding.

LM Studio & llama.cpp - The power-user path

This section is for people who have GPUs and want full control. No rate limits, no internet dependency, no one else's terms of service.

LM Studio is the easy button for running models locally. Download it, search for a model, click run, and you've got an OpenAI-compatible API on localhost. It has a clean UI for managing models and tweaking settings without touching the command line. If you've never run a local model before, start here.

llama.cpp gives you maximum flexibility. It truly pools your VRAM across GPUs which means if you have multiple cards you can use all of it. I covered the differences between vLLM and llama.cpp in my vLLM tuning article. The short version: llama.cpp pools your VRAM and is more forgiving for single-user setups. vLLM is faster for multi-user but each GPU is its own island.

ollama Ollama is great for beginners… however it has some issues only recommended if the above options just don't work.

If you're going the local route, the Qwen 3.5 models are worth looking into. The 9B is very capable and can run on a 3060 with 12GB of VRAM. The 27B is a step up in quality but you'll need something beefier like a 24GB card. Both punch well above their size for coding tasks.

The trade-off is obvious. You need the hardware. But you own the whole stack and nobody can rate-limit you.

The Harnesses - Where the vibes actually happen

A model by itself doesn't do much for you. You need something that connects it to your codebase, your terminal, your files. That's what these tools do.

Claude Code

This is what I use daily. I wrote about creating local plugins for it and it's become central to how I work. The same tool can be pointed at free models through OpenRouter or NVIDIA.

The setup is a settings.json with your API key, base URL, and model name. You can scope it to a single project or set it globally. The official docs on third-party model configuration cover the specifics.

I'll be honest though. Claude Code works best with Claude models. Free models won't give you the same experience as Sonnet or Opus. But for learning how vibe coding works and building smaller projects, it's more than enough to get your feet wet.

Factory Droid

Factory Droid is another agent harness similar to Claude Code. It connects to your codebase and lets you work through natural language, same concept but a different tool with its own take on the workflow.

It supports OpenRouter, LM Studio, and any OpenAI-compatible endpoint. Worth trying alongside Claude Code to see which one clicks for you.

Honestly… it's also much cooler looking ;).

The honest trade-offs

Let me be real about what you're getting here.

Free models will not perform like Sonnet 4.6, Opus, or Codex 5.4, but you don't always NEED that level anyway, it can be like using a Bazooka to hunt a bunny… sure it will work but a slingshot would as well.

Another thing to keep in mind you'll hit rate limits. Models will be unavailable at peak times. Responses will be slower and less accurate on complex tasks.

Local models need hardware. If you don't have a decent GPU you're looking at cloud options only.

But for learning, prototyping, side projects, and just seeing what this whole vibe coding thing is about? Free is more than enough to get started. And the upgrade path is smooth. Start with OpenRouter's free tier, and when you're ready to pay for better performance the switch is changing one line in your config.

Cheap (not free) Next steps when you want to VIBE HARDER!

• The Best one by far (and the cheapest) - z.ai - Referral link for $10 a month and it gives me some free credits! Z.ai is responsible for the GLM models.
• Kimi Code - Another great option starting at $20 a month.
• OpenAI Codes - The $20 option is surprisingly good and limits are doubled until April 2nd 2026!

Where to go from here

Model providers:

• OpenRouter - Free models
• NVIDIA Build
• LM Studio
• llama.cpp

Coding harnesses:

• Claude Code
• Factory Droid
• Codex CLI

My previous articles if you want to go deeper:

• vLLM Tuning For Low Memory - getting the most out of local models with limited VRAM
• Creating Local Claude Code Plugins - extending your harness with custom tools

What I wanted (and why)

I'm on Windows primarily for my normal day to day… I know this is considered weird for many developers. I'm just a creature of habit. All my AI machines are running Linux but there's something that just makes me move faster in Windows.

With that I generally have to wait until support is added from the developer community on plugins, projects, etc. Not anymore with AI! The Ralph Wiggum loop is one of the coolest things I've tried out in a while, and I wanted access on my local work machine, however the issue is it's Bash scripts. Sure I could run it in WSL or Git Bash, but meh why not just use AI to do the entire conversion for me?

That was relatively simple which still feels so crazy to say in this day and age, the things we can do as creatives with an idea and some prompt structure is just amazing.

The next thing I had to figure out was how can I have this accessible at the user scope level so I could use it everywhere?

How can I run this?

You can start Claude Code with the plugin loaded automatically by passing in the path like so:

claude --plugin-dir ./my-first-plugin (from the docs)

This is the best way to test and just make sure the plugin is working as expected… but this isn't something you want to do every time.

The simplest solution: a local marketplace

I couldn't find this in the docs.. I stumbled upon it randomly searching, but to get around this you need to add your plugin to a marketplace. Fortunately a marketplace can live anywhere to include your personal machine. I ended up pushing it to GitHub with the thousands of others because I love tracking my contributions over the year of course.

• Source: https://github.com/loktar00/my-claude-plugins

The following is the structure of a plugin marketplace (a single json file), and a plugin.

my-claude-plugins/
├── loktar-marketplace/
│   ├── .claude-plugin/
│   │   └── marketplace.json
│   ├── my-first-plugin/
│   │   ├── .claude-plugin/
│   │   │   └── plugin.json
│   │   ├── commands/
│   │   │   └── hello.md
│   │   ├── hooks/
│   │   │   └── hooks.json
│   │   └── scripts/
│   │       └── hello.ps1
└── README.md

Marketplace manifest (marketplace.json)

This is really all you need it establishes your marketplace, who owns it, and any of the plugins being offered. What's most important (besides the obvious valid JSON) is the location of the plugins, I tried a few ways such as having the marketplace as a peer of the plugin directory, however what ended up working for me was putting the plugins under the marketplace.

{
  "name": "loktar-dev",
  "owner": { "name": "Jason" },
  "plugins": [
    {
      "name": "my-first-plugin",
      "source": "./my-first-plugin",
      "description": "TODO: one-line description"
    }
  ]
}

Now add the marketplace, launch Claude Code and type the following

/plugin marketplace add ./marketplace-name

In my case it was the following, and I was in the parent directory.

/plugin marketplace add ./loktar-dev

Claude Code Plugins

I'm not going to go in any detail about plugins here, honestly the official docs do a pretty good job of describing them, and the plugins that exist are great examples. The issue I was facing was all about getting them installed easily so I could access in all instances.

Installing at user scope (no admin)

As long as you have the above setup you can launch Claude Code, type /plugins move over to marketplaces and you should see yours show up.

Select your marketplace and you should see your plugin ready to install

Select the plugin and install for your user.

Now you should have access to the plugin in any instance you open, such as > /ralph-wiggum-windows:help in this example.

Troubleshooting and Gotchas

If you don't see the plugin you should see an error, the beauty of it all is you can ask Claude Code what's going on. In general it's a pathing or unexpected formatting of the JSON.

Closing

Things are moving so fast, that this article is already out of date, Ralph Wiggum isn't even the cool hot thing anymore, it's been a week, however the principles will be the same regardless. There's always a problem to solve and if you can ask the right questions the barrier is incredibly low to create or have solutions created.

The problem VRAM is King!

I have two AI nodes, one is running two 5090s the other two 3090s with NVLink. They're running Proxmox and containers so it's easy to try different configs, restore backups, etc. Altogether, between these machines, I have 112GB of VRAM, that amount of VRAM allows running of a couple of smaller models or large ones split across all of them via llama.cpp using rpc and vLLM.

There's a big difference between vLLM and llama.cpp however, and reasons to use one over the other.

vLLM

If you want fast inference supporting multiple users (or agents) at once the best option is vLLM bar none. However it comes with some drawbacks. VRAM is not pooled like it is in llama.cpp, and all the memory required for the model (including KV cache) are loaded right from the beginning so there are no surprises. You can offload to system RAM but vLLM has flaky support for it, and system RAM is generally magnitudes slower than VRAM killing your performance.

llama.cpp

If you're ok not having blazing speed via tensor parallel and aren't supporting many users (or agents) and are unsure how much context you're going to end up using anyway, llama.cpp is a great option. With all of this, it truly pools your VRAM meaning in my systems I can load a model right up to the 112GB VRAM limit, it also supports using system RAM by default. You still get the speed penalty but there's no hoops to jump through to get it working.

How does this relate to GLM-4.7-flash?

vLLM is fast like mentioned, really fast. It's able to be so fast due to tensor parallelism. However with tensor parallelism you don't get pooling up to 64GB, you get 32GB (or whatever the size of your cards are). Here's where the issue comes in. Using a 30B BF16 model means it's going to take up roughly 30GB of VRAM leaving you with 2-ish for KV cache. KV cache refers to your context. There's also minor overhead that comes with certain options.

When I tried running the BF16 I was extremely limited, at the end of the day I did get it to work with a context size of 8000 but it wasn't pretty. I soon jumped on the NVFP4 quant that came out a few hours later giving me much more breathing room for context.

Helpful knobs and switches to get the most out of your VRAM with vLLM

Spoiler, my config that ended up finally working:

export PYTORCH_CUDA_ALLOC_CONF=expandable_segments:True

uv run vllm serve zai-org/GLM-4.7-Flash \
  --download-dir /mnt/models/llm \
  --kv-cache-dtype fp8 \
  --tensor-parallel-size 2 \
  --max-model-len 8000 \
  --gpu-memory-utilization 0.96 \
  --swap-space 16 \
  --enforce-eager \
  --max-num-seqs 1 \
  --tool-call-parser glm47 \
  --reasoning-parser glm45 \
  --enable-auto-tool-choice \
  --served-model-name glm-4.7-flash \
  --host 0.0.0.0 --port 8000

There's a few things to notice here.

• --max-num-seqs I generally start out lowering this early on, default is 256, I lower to 20 or so as a starting point.
• --max-model-len this is the next thing to target if the model still won't load. This is one of the most important and costly settings, this controls the total context size, lowering this can help significantly.
• --gpu-memory-utilization 0.96 Alright… model still won't load let's tweak our memory utilization and make sure we're squeezing the most out of it. This is a value to play with 0.8 to 0.98-ish.
• --enforce-eager This tells vLLM to run the model in PyTorch eager mode, generally it's for stabilization but can save you a few MB by avoiding compile/capture overhead and reducing annoying memory spikes and fragmentation during startup.
• --kv-cache-dtype fp8 alright we're getting desperate, this drops kv-cache to fp8 from BF16 saving us a little space.
• --swap-space we're now on our last legs, we're telling vLLM to offload a bit, it's ok to admit defeat here if this doesn't work but it's worth a shot. This is generally when it's time to go to llama.cpp.

And (although deprecated) I threw this in for good measure - export PYTORCH_CUDA_ALLOC_CONF=expandable_segments:True you can use this instead export PYTORCH_ALLOC_CONF=expandable_segments:True.

This basically tells PyTorch's CUDA memory allocator to use expandable memory segments instead of using fixed chunks of VRAM too early. For example, if you have a barge with shipping containers of all different sizes without this flag we'd just carve up the barge into fixed-size chunks based on our largest container… meaning our small ones would take up the same amount of parked space. That's not good. What this does is says hey, let's not chop this up early, let's fit these in here like Tetris.

tldr; it allows you to use your free RAM more efficiently.

In closing

At the end of the day like mentioned I was able to run the NVFP4 with the following config

uv run vllm serve GadflyII/GLM-4.7-Flash-NVFP4 \
  --download-dir /mnt/models/llm \
  --kv-cache-dtype fp8 \
  --tensor-parallel-size 2 \
  --max-model-len 82000 \
  --trust-remote-code \
  --max-num-seqs 4 \
  --tool-call-parser glm47 \
  --reasoning-parser glm45 \
  --enable-auto-tool-choice \
  --served-model-name glm-4.7-flash \
  --host 0.0.0.0 --port 8000

Able to run with 82000 context which is plenty for the work I'm doing. At the end of the day it's important to understand the differences between vLLM and llama.cpp and not to be afraid of tweaking the settings to get one working. As models are released vLLM is generally supported first, so it's good to understand and learn if you're on the bleeding edge. Just remember all GPUs !== pooled VRAM with vLLM.

The Models

• GLM 4.7 Flash
• GLM 4.7 Flash NVFP4

As an aside GLM 4.7 Flash is great for local development, it may displace my current local favorite Devstral Small, as I play with both more I may jot down my thoughts here in a future article.

The Myth of a full-time "strategizing manager"

For a small team in a startup environment strategizing isn't an 8-hour day 5 days a week. Management work often comes in bursts. If you force it, you end up with meetings that don’t move work forward.

On a small team, you either ship or you invent work.

Now that's not to say there's not a lot of work to be done, my job has consisted of the following and more:

• Establishing baseline standards and etiquette for PRs, and codebases
• Guiding the direction and strategy for consolidating tech stacks
• Researching, advocating for, and acquiring industry solutions for things like feature flags, Sentry, AI tooling
• Advocating and setting standards for tech debt work within sprints
• Establishing and evolving our delivery and agile processes over time
• Work with product on features, and MVP direction, requirements, and feasibility
• Regular bi-weekly 1:1s and 6-month reviews with each team member.

If you're in a similar role none of this is new. But as a leader you should allow the team the freedom to explore and bring the solutions. Your job and experience allow you to see the whole picture and guide and decide based on what you're given.

So what do you do with the leftover? You get in the trenches with the team and you produce. I try to contribute meaningfully every week, without stealing ownership from the team.

Unfortunately right now I'm not always succeeding at that, we're thinner than we used to be in some key areas, and the work still has to ship. This isn't an attempt to outshine anyone on the team.

It's the complete opposite. It's a way to show I'm here with you. I will push as hard as I can to ensure we all make it across the line together. I don't always meet that goal, some weeks are heavier with strategizing than others, but at the end of the day that's what makes me feel like I've actually "worked" for the day.

How did I get here?

I love the company I work for, I work for an extremely fast-paced small startup in the Christian space. I remember it clearly when I was offered the role of Engineering Manager, at the time I was hired as a lead Frontend Developer who somehow ended up maintaining three legacy Java codebases as a solo dev, and troubleshooting users' personal PCs. I had no idea how I got into the position I was in. It surely wasn't any Frontend Lead position I was used to.

When I was approached for the Engineering Position at the company's adjacent startup I jumped at the role. During the interview process for the EM role I was told I wouldn't need to develop, and in fact I shouldn't. I was taken aback, the role was to manage 6 engineers in the startup, along with the current role I was leaving. I thought to myself there's no way with so few people we could afford to NOT have someone actively contributing to solutions.

What my role actually looks like

Every time I take training on EM roles, read up on what I should be doing I begin to feel like a failure, like I'm letting the team down. I should be doing MORE strategizing, MORE unblocking, and no development.

I realized I'm not failing, and that I'm doing the best I can as an EM.

• I unblock hard problems for the team and provide direction
• I prevent regressions
• I set standards
• I keep the team focused on what's important now, and most importantly the WHY
• I translate the chaos into something we can build
• I try as hard as I can to protect people from thrash.

Coding is not the enemy.

If I'm not close to the code, I'm not close to reality.

It keeps me connected to reality, it keeps my judgment sharp, it gives me credibility, and it lets me remove some of the hardest blockers fast.

Much of my leadership style comes from what I learned from the military. The best leaders I remember by name didn't hide behind rank, they worked with us, trained with us, and didn't delegate effort they weren't willing to give themselves. That's always stuck with me.

The Warning

This is all well and good. The danger isn't me developing. The real danger is me becoming the bottleneck and the single point of failure. If that happens, it means something is broken, and there is a possibility I could be part of the problem. With recent staffing changes I'm closer to being a single point of failure than I want to be.

Before the recent departure of my teammate and friend, there was a healthy split. I took baseline work and small bugs so big features can move and the developer didn't need to focus on the noise, or we would swap the roles depending on risk and priority. I would stay out of the way but I made sure I was present when it mattered. No matter what the day looked like I would review PRs that same day.

How can we ensure we don't fail? As a leader you're the one who has to make the hard decisions. This one could be the hardest I've made yet. The goal now (and one I've started) is to train other members of the team on the Frontend stack. We still need to ship as fast as we were. We still need to get features done. The hard part is we're just going to have to be more pragmatic about scope and polish while we rebuild the redundancy we had in the past.

Am I failing?

If the system isn't stable it will feel like you're failing even when you're doing everything right. No matter what it's impossible to "lead" your way out of things like shifting priorities, and limited staffing redundancy.

What I'd tell anyone in my position is the following.

Don't apologize for doing the work. Just don't become the work.

• Do not apologize for being hands-on.
• Protect a commitment window.
• Always make risk visible
• And do not measure yourself against roles especially when your company size doesn't match.

I don't see myself as a manager who develops on the side, I'm a builder who leads, because that's the job this company actually needs from me right now, and that's the role I'm here to fill.

• A Cloudflare account (free)
• A domain you can point to Cloudflare
• A machine/container inside your network to run cloudflared
• The local URL of the service you want to expose (like http://localhost:5678)

The Scenario

I've been running local LLMs for over a year at this point. It's been great.

Recently my family asked for access, including a couple who don't live in the house anymore.

There's a bunch of ways to do this. In the past I've used ngrok, or I just set up a VPN on my home router and gave my kids access. None of them were as straightforward as what I found using Cloudflare.

Note: I'm keeping this post focused on getting a tunnel working and putting Access in front of it. I'm not covering WAF rules, rate limiting, hardening the service itself, or anything beyond basic access control.

Enter Cloudflare

The short version is: Cloudflare Tunnel gives you the connection, and Cloudflare Access puts a simple login wall (in my case email) in front of it.

I've been on a recent Cloudflare kick. Granted of course I started RIGHT before their most recent outages, but putting those aside I've been incredibly happy with their services.

I've used them on my wife's real estate site to block a few regions that have been needlessly beating up the site along with default AI blocking. Additionally, at my day job I directed the engineering team to look into it as a possible solution to some spam we were dealing with. After acknowledging this would be a good fit, we implemented it across all of our publicly hosted applications and not only has it significantly decreased spam (practically to 0), it also cached a few services, increasing speed across the applications significantly, over 50% in some cases.

Local Services and Tunnels

As I mentioned I run a few local AI instances on Proxmox servers in my home (I'll share specs and setups in a future post), however they're all accessible locally within the network. I really never had a major reason to expose any of them until I recently got n8n up and running, and had family members ask if they could access some of my local services since I have some RAG implementations set up for the Bible and other knowledge sets.

The rest of this post will go over setting up a Cloudflare tunnel, and putting email access in front of it, along with the why behind it.

Step 1 Cloudflare Account

If you don't have a Cloudflare account, set one up (this is all free by the way!).

I won't go through the setup here. However, what you're going to want to do once set up is look for Cloudflare One / Zero Trust, and get an account set up through that as well. The default free plan is 50 users, and it's free.

Step 2 Domain Name

Get a domain name and connect it to Cloudflare.

This part is incredibly simple and one of the strong points of Cloudflare. All settings you currently have will be added and proxied.

Be sure to look them over to ensure all settings have been properly picked up. Once you've confirmed everything looks right, you'll see nameservers provided by Cloudflare. If you're hosting your domain via a third party provider you just need to update your nameservers with them and Cloudflare will take over.

Note: Any hosting endpoints, websites, etc. will continue working just as they were before. This isn't a traditional nameserver swap where you lose everything. Cloudflare now has control but it proxies everything that was existing prior.

Step 3 Zero Trust setup

If you set up Cloudflare One / Zero Trust previously to this step you'll see the Zero Trust option. If not, search for Zero Trust and you'll be prompted to set up an account. You have to add a form of payment. However, it is free as long as you stay within the requirements (something we will be doing within this tutorial).

Once you select Zero Trust, go to Networks and Overview. You'll see Manage Tunnels. This is where you want to go.

Step 4 Setting up the Tunnel

For the first screen you'll have two choices. Select Cloudflared.

You may be asking how this works. If not, feel free to skip the following random story I interject.

How this all works is similar to other services which offer similar features. You have a service which runs inside of your network letting Cloudflare know who you are and where you're located.

Funny story, an old friend of mine rolled his own version of this back in the early 2000's. From work he wanted to connect to his IRC server, but like most of us was on a dynamic IP from his ISP that switched more often than he'd like. He had a script which would run and FTP to an external server he owned a txt file with only the IP address of his home network. His IRC script would always hit that txt file in order to get to his home hosted IRC server, and when I say IRC server in reality it was something a few of us did. It was a server running our IRC clients we'd SSH into so all logs and records stayed off of work machines.

Back to the setup, once you choose Cloudflared you'll have to provide a tunnel name. This can be anything. It's only the label within Cloudflare.

Choose the environment you're in. In my case it's Debian. You'll get the commands or executable to run based on the platform and architecture chosen. It's incredibly simple. The main thing they call out, and of course is always a good idea, is don't share your token with anyone. In Debian I chose the option to run as a service, since if I boot my container I want it all working by default.

Step 5 Setting up the Domain and pointing to your instance

This is probably the biggest potential "gotcha" with the entire setup. In your subdomain use any valid subdomain and choose the domain you added earlier.

For service this is the most important. For Type, if you're actually running HTTPS choose HTTPS here. However, if you're running HTTP locally (I am on most of my instances) choose HTTP here. Cloudflare will still use HTTPS so you don't need to worry.

For URL this is one of the biggest gotchas I've seen when looking at tutorials and setups (comments in videos on Reddit, etc., and really the reason I decided to write this). Use the URL your service is using.

The gotcha

Use the URL your service is actually listening on, not your public IP.

• If your service is http://localhost:8080, put http://localhost:8080
• If your service is http://0.0.0.0:1234, put http://0.0.0.0:1234

Do not put your external IP here. Also don't swap in 192.168.x.x if the service is bound to 0.0.0.0.

Once you're set, hit save. Test your tunnel. It should work almost immediately.

It's important to note just because a tunnel is set up doesn't mean you lose your original internal way to access the application or service. If you commonly use an internal static IP address that will continue to work and bypass Cloudflare.

Now you could stop here. However, your service is accessible by anyone and everyone over the internet. Even for instances like OpenwebUI for example which do have internal authentication methods, I really don't feel like having it exposed, and I don't feel like dealing with potential network bottlenecks if I happened to suddenly get hit with tons of requests (although Cloudflare should filter most out).

So it's a good idea to set up Access control, which Cloudflare One also provides, and it's incredibly easy to set up.

Step 6 Access Control

Navigate to Access Controls and Policies. This is where you can set up reusable policies to apply to any of your Applications.

Go to add Policy. Within this screen you will have the option for a whole plethora of authentication methods, to include facial scanning. Personally I just chose Email, which is a whitelist of email addresses you provide. You can also control how often you want the token to expire as well. I left mine set at 24 hours.

Step 7 Setup an Application

Now that you have an access control policy set up, you're going to want to set up an application pointing to your tunnel so you can actually use the access control policy.

Navigate to Access Controls/Applications and click to Add an application. Since this is for a local service, choose Self-hosted.

You'll be presented with the screen below. Give it a name to identify it, choose your session duration and select Add Public Hostname

Optional subdomain is the one you used when setting up your tunnel above, and choose the domain which has the subdomain on it.

Next go down a little to Access Policies, click Select Existing Policies and choose the one you set up earlier.

Finally test your URL and you should be presented with a screen similar to below. This will depend on the authentication method chosen. In this case it's email.

Conclusion

That's it! You should be all set up. Now your local services are exposed but access is controlled through your Cloudflare security policy. Note once a user goes through this they will also need to authenticate with whatever your service has as well. For example, if it's openwebui they'll still need to login to their openwebui account if they weren't already.

Your working away at your amazing or not so amazing job, pushing branches, comitting code, doing awesome things in general, when you realize…. That's right we don't use Github here! I've been unfortunate enough to work at a few places that don't use Github, but I've wanted to look at my contributions over the year and see how much I've done, plus it's just nice to display publically.

Now before you say it, I know, I know, github activity is not the end all be all, it's not particularly important since you can skew it to your hearts desire… however the same can be said for fitness trackers, or hours on Steam. Everything can be gamed, however if you're disciplined it's nice to see your "real" contributions over time.

The Solution

Step 1 get the commit dates

Go into your favorite command line, and browse whatever directory your respository is in. Then run the following command:

git log --author=yourEmail@yourCompany.com --pretty=%cd --date=format:'%Y-%m-%d' > stats.log

This will output a file called stats.log that looks something like this:

'2023-03-23'
'2023-03-23'
'2023-03-22'
'2023-03-21'
'2023-03-20'
'2023-03-20'
'2023-03-16'
'2023-03-16'
'2023-03-14'
'2023-03-14'
'2023-03-10'
'2023-03-10'

Step 2 clean up the data

I generally do a quick format, making the dates look like the following:

const dates = [
    '2023-03-21',
    '2023-03-20',
    '2023-03-20',
    '2023-03-16',
    '2023-03-16',
    '2023-03-14',
    '2023-03-14',
    '2023-03-10',
    '2023-03-10'
];

Then I run the following code:

const commits = {};

dates.forEach(entry => {
  if (commits[entry]) {
    commits[entry] += 1;
  } else {
    commits[entry] = 1;
  }
})

const commitData = [];

Object.keys(commits).forEach(commit => commitData.push({
  date: commit,
  count: commits[commit]
}))

console.log(JSON.stringify(commitData));

You can either do this in the browser or include it with the node script I'll share further down. It turns the output into the following:

    [
        {"date":"2023-05-01","count":5},
        {"date":"2023-03-30","count":2},
        {"date":"2023-03-29","count":2},
        // ...ect
    ]

Step 3 push the data to github

I use the following script to add the data to my github activity graph:

import fs from 'fs';
import { execSync }  from 'child_process';

const filenames = ['Whatever', 'Files', 'You', 'Want'];

(async function generateHistory() {
    let commitHistory = [];

    filenames.forEach(file => {
        const data = fs.readFileSync(`${file}.json`, 'utf8');
        const parsedData = JSON.parse(data).filter(el => parseInt(el.count)).map(el => {
            const count = parseInt(el.count);
            return new Array(count).fill(el.date);
        });

        commitHistory = [...commitHistory, ...parsedData];
    });

    async function init() {
        for (const history of commitHistory) {
            for (const commit of history) {
                execSync(`echo "${commit}" >> history.txt`);
                execSync(`git add . && git commit --quiet --date "${commit}" -m "Activity Commit ${commit}"`);
                console.log(commit);
            }
        }
      }

      init();
})();

Then you just run the script using node script.js And it will modify your local history with the dates and number of commits. These are the core parts of the script:

    execSync(`echo "${commit}" >> history.txt`);
    execSync(`git add . && git commit --quiet --date "${commit}" -m "Activity Commit ${commit}"`);

The first modifies a file called history.txt and adds a line with the commit so we actually have some changed data. The next line adds the file, creates a commit with the actual date of the commit.

All we need to do after the script runs is push the changes to github and we're done!

Conclusion

You don't have to lose all of your commit history when you leave a job, and you don't have to wonder how your graph might be looking if you had been using github. This is a quick and easy way to capture your work history and add it to your github activity graph that I've been using for years.

I hope you find it useful!

Recently I found myself in between jobs so I had some time on my hands to work on a few of my projects I've let languish over the past few years. I always find myself coming back to this blog since it's low risk so I consider it a playground for me to test things out.

A bit of history 2009 - 2020

A quick history on this blog and the iterations it's had.

Back in 2009 when blogs were all the rage I threw up a wordpress install made a custom theme and operated using that for years on a shared hosting platform. It worked well for the most part but over the years and with wordpress upgrades and plugins it just became more of a pain. At the end of the day all I really needed were some static pages with my thoughts and images.

Somethinghitme over the years - 2009, the very first design for the blog.

2010-sh, the very first design (this one might be my favorite).

Just happened to find this on the wayback machine… I am seriously considering going back to this design.

Prior to todays design, I made them simpler just to change things up.

2020

Moving on to 2020 I decided to "upgrade" to Gatsby. There was a bit of hype surrounding it, it used React which I consider myself pretty proficient in, and it generated a static site, exactly what I wanted. This also had the side benefit of allowing me to move hosting to github.

While I found gatsby to be simple for the most part, I just couldn't get over the setup and amount of code needed for something so "simple"… it's something I see everywhere in the development world especially in the front end or Javascript ecosystem. Everything requires a build now.. a build process, multiple dependencies just to get something to show on the page. I went a long with it since the goal was just to convert the site and have some of my older blog posts available. to users.

The issue I had when writing articles most recently is after updating to using Gatsby I found myself spending over an hour or more each time I wanted to add an article since they were so far and few between. I needed to update dependencies to fix issues and of course account for breaking changes. Maybe it's just me, I generally don't run into these issues but Gatsby seemed to always have something going on where the site wouldn't just "build".

In reality all I wanted to do was sit down write up a markdown file and publish it without thinking about the tech behind the solution.

The other thing I started to get annoyed with was the complexity of wrapping my head around how Gatsby used graphQL with the actual markdown files. I found some cases where weird things would happen with excerpts, and simple things such as using pagination on the main page just seemed overly complex.

The Solution - present

I've been doing a bit of work in node lately (moreso than usual) so came up with a quick and easy plan to get the blog up and running in a state where I could just sit down and create posts. I decided to create a simple node script to generate the entire site from markdown files and json data. This way I could easily write my articles in markdown and not have to worry about the tech behind the scenes.

The solution I feel is pretty simple overall, there's definitely a lot of room for improvement but my goal was to not spend more than a day on the overall solution so I could actually get to the important part of the site, the content.

I decided to host the site publically this time around, all code is located on my github profile here.

The code

The articles all live under src/blog and are organized by years, and for the older articles the month and day. The script iterates over the directories grabbing each file and parsing the markdown using showdown (so far 1 of the total 2 dependencies for the site).

I continued to use a similar format I had when using gatsby. At the top of each markdown file there's a section to hold metadata associated with each article. Here's an example for this one.

title: "Recreating this blog with static generation"
date: "2023-06-15"
teaser: "Something in here"
tags: "blog, javascript, static generation, programming"

I then parse the markdown when it's being read and extract the information to expose to our templates.

    // Grab the information from each file to generate our table of contents and structure
    const pattern = /---([\s\S]*?)---/g;
    const matches = text.match(pattern);
    let pageData = {};

    if (matches) {
        for (const match of matches) {
            const contentBetweenDelimiters = match.replace(/---/g, '').trim();
            contentBetweenDelimiters.split('\n')
                .forEach(line => {
                    const data = line.split(':');
                    const key = data[0].trim();
                    const value = data[1].trim().replace(/"/g, '');
                    pageData[key] = value;
                });
        }
    }

Additional parsing

I do have some gists and quite a few code blocks, so I went with a pretty simple approach of parsing out the code blocks, those are just replaced with prism for syntax highligting.

For gists it's a straight forward approach again, I have considered breaking this out into a sort of "plugin" system to parse out and convert other things, such as prettier images with captions.

    // Embed gists.
    const gistPattern = /\\\[gist id=(?<id>[\d]*)\\\]/g;
    for (const match of textToConvert.matchAll(gistPattern)) {
        textToConvert = textToConvert.replace(match[0], `<script src="http://gist.github.com/${match.groups.id}.js"></script>`);
    }

For anything else I allow for vanilla markup and scripts so I can just drop in some html if I need to. Since the sites generated I'm not too worried about security.

Templating

For templating I went with a pretty simple solution, our second dependency is ejs, which I've always been a pretty big fan of.

Here's a quick example of the index page. I use partials for most things duplicated.

<!DOCTYPE html>
<html lang="en" data-theme="light">
    <%- include('/src/templates/partials/head', {title: `${data.main.title} - ${data.main.tagline}`}) -%>
    <body>
        <div class="layout">
            <%- include('/src/templates/partials/header') -%>
            <main class="main">
                <section class="primary">
                    <%-
                        data.articles.map(article =>
                            `<a href="/${article.path}">
                                <article class="article">
                                    <h3>${article.title}</h3>
                                    <small>
                                        ${new Date(article.date).toLocaleDateString('en-us', { timeZone: 'UTC', weekday:"long", year:"numeric", month:"short", day:"numeric"})}
                                    </small>
                                    <p>
                                        ${article.teaser}
                                    </p>
                                    <footer class="article__footer">
                                        <span class="read-more">Read Article →</span>
                                    </footer>
                                </article>
                            </a>`
                        ).join('')
                    -%>
                </section>
                <section class="secondary">
                    <%- include('/src/templates/sidebar', {sidebar: data.sidebar}) -%>
                </section>
            </main>
            <%- include('/src/templates/partials/footer') -%>
        </div>
        <script src='/js/main.js'></script>
        <script type='module' src='/js/starscape.js'></script>
    </body>

Other configs

For things like the side bar I follow the approach of creating a few json files to hold the data.

Here's an example of the sidebar json file.

{
    "sidebar": {
        "sections": [
            {
                "title": "Find Me",
                "links": [
                    {
                        "title": "@loktar00",
                        "url": "https://twitter.com/loktar00"
                    },
                    /// Ect.
                ]
            },
            {
                "title": "Projects",
                "links": [
                    {
                        "title": "react-lazy-load",
                        "url": "https://github.com/loktar00/react-lazy-load"
                    },
                  /// Ect.
                ]
            }
        ]
    }
}

The node script just combines all the JSON together (to include article data from the markdown files), and creates a structure that's passed to the ejs templates to build the page.

Styling

For styling I'm just using vanilla css, I might change that to SCSS since I'm a huge fan of nesting (I can't wait for the day that's supported natively!).

Hosting

For hosting I'm sticking with github pages. Each commit to the main branch triggers an action which builds everything to github pages so I have a pretty worry free experience.

Improvements

Beyond just making improvements for mobile, I'm not in love with the main page design when it comes to layout, definitely needs more images. I also do want to go back to a pages main page and need to add tags so I can organize articles in the side bar a bit like I used to with wordpress. Might as well add a timeline as well. As of right now I'm overall happy, not bad for a days worth of work.

Conclusion

Will I end up writing more? Who knows, I feel like I only come to this blog when I don't have an existing project and I want to sink time into something that feels relevant. I've told myself I need to start documenting what I do more in the hopes of helping others however in the back of my mind I wonder how relevant any of this will be with tools like chatGPT. Only time will tell.

The idea is to get this project to a point where I can hit a "new demo" button and start coding in the browser like the other solutions out there, with the side benefit of having my changes branched and tracked on github and then automatically generating a video, screenshot or gif and having it up for display. The plan is to use the github api to accomplish the above.

For now however, and in it's current state it's just a nice quick display of the things I've made over the years. This also allows me to lint and fix up some of the demos if I want, however the plan is to for the most part anyway leave them in the state they were in when I created them. I get to see a lot of wonderfully ugly patterns from the past that I don't miss, such as chaining var declarations.

tldr; structuredClone

Copying by value or reference

Before we talk about deep cloning let's take a step back and talk about passing by value or by reference. Quick explanation, copying by value assigns the data to a new memory address, whereas copying by reference just points to the memory address which has the original value.

Example of a primitive type in JavaScript being copied by value:

let a = 'Hello!';
const b = a;

a = 'Bye!'

console.log(b) // Hello!

Primitive types copied by value: string, number, boolean, undefined, null,

Example of a type being copied by reference:

let a = [1, 2, 3, 4];
const b = a;

a[0] = 'first index in the array!';

console.log(b) // ['first index in the array!', 2, 3, 4]

let foo = { prop: 123 };
let bar = foo;

foo.prop = 456;

console.log(bar); // 456

The above will happen with object, array, and function

Deep copying in JS only skin deep

JavaScript will only naturally deep copy 1 level deep, and only the primitive types mentioned above.

Deep copy, by value when one level deep:

let a = [1, 2, 3, 4];

// a.map(el => el), a.forEach(el => b.push(el));
const b = [...a];

a[0] = 'first index in the array!';

console.log(b) // ['first index in the array!', 2, 3, 4]

let foo = {prop: 123};
let bar = {...foo}; //Object.assign({}, foo);

foo.prop = 456;

console.log(bar); // {prop: 123}

For example an array one level deep containing objects property will still be shallow copies.

Shallow copy once we introduce objects:

let a = [{a:1}, {b:2}, {c:3}];
const b = [...a]; // a.map(el => el);

a[0].a = 'first index in the array!';

// [{"a":"first index in the array!"}, {"b":2}, {"c":3}]
console.log(b)

This means once our data structure introduces any nesting (arrays, objects or functions) we're back to a shallow copy of the data.

Shallow copy once we introduce nested value:

let a = [[1, 2, 3], 2, 3];
const b = [...a];

a[0][0] = 'first index in the array!';

// [["first index in the array!", 2, 3], 2, 3]
console.log(JSON.stringify(b))

How can we fix this?

So now that we've established how it works what can we do about it?

You'll find various solutions online from over the years, solutions which include recursively traversing the data structures and copying each element such as below just for this demo. While they work they're not always performant and commonly have issues.

Random utility to deep copy an array:

// Don't use this!
function deepCopy(arr, result) {
  for (let el of arr) {
    if (Array.isArray(el)) {
      result.push(deepCopy(el, []));
    } else {
      result.push(el);
    }
  }

  return result;
}

let a = [[7, 8, 9, [10, 11]], 2, 3];
const b = [...a];
const c = deepCopy(a, []);

a[0][0] = 'first index in the array!';
console.log(b); // [["first index in the array!",8,9,[10,11]],2,3]
console.log(c); // [[7,8,9,[10,11]],2,3]

JSON.stringify to the rescue?

What if we could type cast all of our values to a string and read them back in? That’s exactly what JSON.stringify does for us. It's become the defacto method of deep copying.. so much in fact browser vendors have spent extra time making it more performant over the years.

let a = [[7, 8, 9, [10, 11]], 2, 3];
const b = [...a];
const c = JSON.parse(JSON.stringify(a));

a[0][0] = 'first index in the array!';
console.log(b); // [["first index in the array!",8,9,[10,11]],2,3]
console.log(c); // [[7,8,9,[10,11]],2,3]

It works, we're done!… well not so fast. The JSON.stringify method while fast and gets us most of the way there still has some pretty significant drawbacks.

Example using a Map and Date

const map = new Map();
map.set('a', 1);

let date = new Date();

let a = [0, 1, {c: map}, date];
// [0, 1, {c:{}}, '2022-04-07T22:15:09.947Z']
const b = JSON.parse(JSON.stringify(a));

Notice how our Map is now just an empty object, in addition since the data is "stringified" and parsed we get the actual value for Date rather than access to the date object itself. This also of course applies to Set, and regex values as well.

Introducing structuredClone() to the rescue (mostly)

Usage from MDN.

structuredClone(value)
structuredClone(value, { transfer })

This simplifies almost everything for us.

The same example from above with structuredClone:

const map = new Map();
map.set('a', 1);

let date = new Date();

let a = [0, 1, {c: map}, date];
const b = JSON.parse(JSON.stringify(a));
const c = structuredClone(a);
a[1] = 2;

// [0, 1, {c:{}}, '2022-04-07T22:15:09.947Z']
console.log(b);

// [0, 1,
//  {{c: Map(1)},
//  Thu Apr 07 2022 18:15:17 GMT-0400 (Eastern Daylight Time)
// ]

console.log(c);

c[3].getDate() + 5 // Current date + 5 returns the result

// Can't do this since it's just a string.
// Uncaught TypeError: b[3].getDate is not a function
b[3].getDate() + 5

Caveats of structuredClone

There's only one real issue currently that affects all the methods above, functions and dom elements.

Functions error

let a = [0, 1, {c: () => true} ];
// Uncaught DOMException:
// Failed to execute 'structuredClone' on 'Window'
const c = structuredClone(a);

As long as you’re aware of the caveats (which are generally small edge cases in our data) structuredClone is the recommended approach for deep copying data within JavaScript. It’s a first class citizen and removes some hacks and using JSON parsing which has always felt like a hack.

I definitely recommend reading the link above to 2ality on further caveats and a fantastic in depth description into structuredClone which goes much further than the MDN article.

Needed a pretty quick toggle for a project I was working on, definitely could have copied one of the hundreds of toggles out there that exist, but what's the fun in that?

The main purpose was to allow it to be used as a checkbox with a single element requiring no extra elements or correct placement of container or child elements.

<input type="checkbox" class="toggle">

All of the magic is of course in the CSS.

.toggle {
  --size: 1.125rem;
  --width: calc(1.125rem * 2);
  display: inline-grid;
  align-items: center;
  width: var(--width);
  height: var(--size);
  cursor: pointer;
}

.toggle::before {
  content: "";
  grid-area: 1 / -1;
  width: var(--width);
  height: var(--size);
  transition: all 250ms ease;
  border-radius: var(--width);
  background-color: #000;
}

.toggle:hover::before {
  box-shadow: 0 0 0 2px #aef;
}

.toggle::after {
  content: "";
  grid-area: 1 / -1;
  width: calc(var(--size) * 0.8);
  height: calc(var(--size) * 0.8);
  transform: translateX(10%);
  transform-origin: center center;
  transition: all 250ms ease;
  border-radius: 100%;
  background: #fff;
}

.toggle:checked::before {
  background-color: #2be;
}

.toggle:checked::after {
   transform: translateX(calc(var(--width) - var(--size) * 0.8 - 10%));
}

.toggle:disabled {
  pointer-events: none;
  filter: grayscale(1);
}

.toggle:disabled::before {
   background: #2be;
}

For this I used express, you could do it without pretty easily but express makes it so simple easy to get everything off the ground running. Once you install express you just need to update your routes/index.js to the following.

exports.index = function(req, res){
    var domain = req.headers.host, subDomain = domain.split('.');

    if (subDomain.length > 2) {
        subDomain = subDomain[0].split("-").join(" ");
    } else {
        subDomain = "Everyone ";
    }

    res.render('index', { subDomain: subDomain }); };

It's pretty self explanatory but I'll go through it regardless. First we grab the domain host from the request headers, then we do a split on the period this will give us the subdomain and the domain. So a request such as

bob.everyonelovesyou.com

should give us

    ['bob', 'everyonelovesyou']

We only care about bob, so if we have the subdomain we split any hyphens and then rejoin with a space so phrases can be passed in such as

seriously-bob.everyonelovesyou.com

and it will become

'seriously bob'

We then just need to pass this to the view so they can be accessed.  I use ejs so I can access the subDomain in the view like so

<%= subDomain %>

The final step is to make sure set a wildcard cname for your domain like the following

*.yourdomain.com

So you can catch all the incoming subdomains. And here is an example of a site in action

You can get the code from the above site from github

I have neglected to write for a while, have worked at 3 different jobs since my last post and things have finally settled down. I figured I would start back up with something pretty simple I did tonight.

My son was looking at my tunnel of doom demo and said it would be awesome on the Oculus Rift. So I figured I would try porting it. After a quick search I came across the oculus bridge project. The thing that interested me most was the CSS demo which uses some shaders to warp the screen for the rift. All I needed to do was add a canvas into each eye and I had a rift enabled demo.

There is one drawback currently chrome doesn't support filters for accelerated layers so I had to keep my canvas size down in order for it to work, but with some up-scaling the effect turned out pretty cool.

I created a blog post way back title Game Snippets I Always Forget. I put it up basically as a dumping ground for random game related bits of code I found myself looking up over.. and over. A few of them are a bit cryptic but that's mostly due to me quickly logging in and pasting before I'd forget. While now I have (most) memorized I figured I would revisit the article and add some examples that may help others out. The following are examples dealing with movement, angles, and directions.

As a disclaimer I am not claiming to be an expert in this, I’m sure there are better ways to do some of these and if there are feel free to comment and let me know.

Distance Check

This one is obviously very important in any sort of game development. What I find myself using it for most is quick collision checks. However its used in many cases, an example found later in this article.

var x = x2 - x1,
    y = y2 - y1,
    distance = Math.sqrt(x * x + y * y);

Move Towards an Object With Easing

This can be useful for inertia based mouse movement. This moves an object to the designated target, making it move slower the closer it gets to the target.

x += (targetX-x)/speed;
y += (targetY-y)/speed;

Move Towards an Object at a Constant Speed

The next bit of code can be used for any type of following behavior. The difference from the example above is that the object will move towards its target at a constant speed rather than easing its way there.

var tx = targetX - x,
    ty = targetY - y,
    dist = Math.sqrt(tx * tx + ty * ty);

velX = (tx / dist) * thrust;
velY = (ty/dist) * thrust;

Get the Angle Between Objects and Project a Point in Front of the Object

Its important to note the above example does not include the facing direction in order to get that we need to know what the angle is between both objects.

var x = this.x - this.targetX,
    y = this.y - this.targetY,
    radians = Math.atan2(y,x);

Now that we know how to get the angle between two objects we can project a point in front of it. This can be used for positioning a gun, or for the start position of projectiles. Since realistically bullets shouldn’t necessarily come from the center of our object.

pointx = x + pointLength * Math.cos(radians);
pointy = y + pointLength * Math.sin(radians);

Move Towards Another Object With Proper Rotation

We can combine the two above samples and now move an object towards another with the correct facing angle. This is obviously beneficial for many reasons.

Putting Some Information to Good Use

I assume you will find ways to use this, maybe you already have and just stumbled across this article to take a piece of code, but I wanted to throw an example or two in here just in case. The following is a quick example of how to do simple predefined pathing for tower defense enemies.

Just by using the code so far in this article you could add towers that shoot,  and implement basic collision, having most of whats needed for a very simple tower defense.

Move an Object Based on its Heading

The last movement example is moving based on the current heading. Meaning moving towards the angle you are facing. The angle can be a target angle, or one set by the user via the arrow keys for example. This is achieved by using the following

velX = Math.cos(currentAngle) * thrust;
velY = Math.sin(currentAngle) * thrust;

However if you want a movement style similar to asteroids you can use this instead.

velX += Math.cos(currentAngle) * thrust;
velY += Math.sin(currentAngle) * thrust;

You will most likely want to set the thrust to a lower number in the above example since you are adding it each time rather than setting it once. One tip if you are using Asteroids style movement is to apply friction or your object will go on forever. This is easily done by doing the following way.

velX *= 0.98;
velY *= 0.98;

Note you can use any value less than one to apply friction the lower the number the faster you will glide to a stop.

Regardless of the type of motion you choose you then apply the velocities to your object.

this.x -= this.velX;
this.y -= this.velY;

And here is a finished example showing the Asteroids style movement.

I hope you find this information useful.  All of the major pieces of the code needed to make many types of games are included in this post. One example where I have personally used the above information is on Retroships.com among many other projects I have worked on.

I’m considering doing another post on a few random bits of code I find myself using often, check back soon!.

Screenshot from scrolling terrain and shooting stars demo on codepen.io

In a few of my demos I've used 2d terrain. I love the effect and its really easy to do especially in 2d. The algorithm I use most is Diamond Square also known as Midpoint Displacement. What's great about the algorithm besides its easy of use is that it can be used for simple 2d terrain as well as with 3d terrain. For now I will just be talking about generating 2d terrain, in a future article I will discuss how to use the same algorithm to make create height maps that can be used in turn to create 3d terrain.

I'm going to use JavaScript and the canvas element for my examples but the principles can easily be applied to any language or rendering technology.

The method I will be describing is midpoint displacement. Its one of the simplest algorithms in my opinion when it comes to making good looking 2d procedural terrain.

A Brief Overview of How it Works

For Each Segment Divide in half and average the middle point add a random value to the mid point reduce the random range Repeat Until segments are too small to continue.

A More in Depth Explanation

First we assign a random value to the outer edges of our terrain. This can be anything from 0-1 or 50-100. The value itself is dependant on the system you want to use for plotting. We then need to get the center point of the segment. Once we have the center we calculate its value by averaging the two points and adding a random value to it.

So now that we have our 3 starting points we move onto the next step. The next step is exactly the same as above. As you can see we have 2 segments, so we get the center of each segment and add the average of its edges plus a random amount. We then need reduce our random range for the next iteration.

Now we have four segments so all we need to do is cut each segment in half again, average the center values add our random value and reduce the random range.

As you can see the more iterations creates more realistic terrain. Lately it seems like none of my articles can be complete without an animated gif, so here is one animating the process.

How much do I reduce the random range?

From now on I’ll call this roughness. How much do you need to reduce it by each iteration? Well that all depends on how you want your end result to look. The greater the reduction the less jagged your hill’s will be. So if you want more of a rolling hill appearance you would to reduce the value at least by half every iteration, however if you want more jagged mountains you don’t want to reduce the value very much at all. Below is an example of terrain using two different values for roughness.

Created by using a value of 0.5

Created by using a value of 0.7 The following JavaScript function is what I used to create the above examples.

/*
  width and height are the overall
  width and height we have to work with, displace is
  the maximum deviation value.
  This stops the terrain from going out of bounds if we choose
*/

function terrain(width, height, displace, roughness){
    var points = [],
        // Gives us a power of 2 based on our width
        power = Math.pow(2, Math.ceil(Math.log(width) / (Math.log(2))));

    // Set the initial left point
    points[0] = height/2 + (Math.random()*displace*2) - displace;
    // set the initial right point
    points[power] = height/2 + (Math.random()*displace*2) - displace;
    displace *= roughness;

    // Increase the number of segments
    for(var i = 1; i < power; i *=2){
        // Iterate through each segment calculating the center point
        for(var j = (power/i)/2; j < power; j+= power/i){
            points[j] = ((points[j - (power / i) / 2] + points[j + (power / i) / 2]) / 2);
            points[j] += (Math.random() * displace*2) - displace
        }
        // reduce our random range
        displace *= roughness;
    }
    return points;

In my code I also use a value called displace. This is just to control the maximum distance a point can go this is so I can keep it inside of the canvas area.

Wrapping Terrain and Scrolling

Using this algorithm makes it easy to create wrapping terrain, in order to do so you just set the two initial starting points to the same value.

There are a few ways to create scrolling terrain. In my codepen for example I cheat and just pop and push the points on the array itself which makes the wrapped terrain scroll. However a better approach in my opinion is to use two sets of values and just move them based on an offset. Once the second half reaches the edge of the screen reset the offset to 0 copy the second array to the first, and generate new terrain for the second array, passing in the seed. Below is a fiddle of how I personally achieve the effect.

Well that was a lot of information. Would you believe there is an even simpler method to creating 2d terrain than that? I'll go over that in my next article.

I've seen variations this effect used in different places, one of the more recent examples I can think of is the loading screens from Red Orchestra 2. RO2's effect definitely uses a different method than mine but it gave me an idea to try something similar. I ended up with a similar effect using pixel manipulation, and a tiny bit of Cellular Automaton.

This is what I ended up with. (heh yeah I'm a huge Spartacus fan)

Edit view with code

How the effect works

The explanation of the effect is really simple. I basically thought of each pixel as fuel.  So to determine how long each pixel should “burn” we create a 2D array where each element represents a pixels fuel value we do this by assigning a random value.

The effect works by decrementing the value of all elements which neighbor an element whose value is 0. So to start the effect we need to set an element's value to 0.

There is one gotcha to be aware of. If you don’t have someway of flagging elements whose value has been changed in the current cycle you will end up with a burn effect that goes very fast, and also tends to go to the right or left depending on how you loop through the elements. This speed issue is due to the fact that some elements will have more than one neighbor whose value is 0, in that case we still only want to reduce the value once.

Animation of the effect in progress

If you want to add a cool effect to make it look like a flame or possible something is eating the elements you just need to color the elements that neighbor an element whose value is 0, as seen in my demo with the color option.

The name of the game is Grapple Hero, check out a few of the wip screenshots.

If anyone has played my old js1k entry  you'll recognize the game play immediately. Your character cannot move any way but using his grapple. Once your grapple makes a connection you are shot up into the air where you need to grapple again or you'll fall (sometimes to your death). I created a website for the game  where you can play the most current demo build, which involves you trying to escape from lava.

I plan on releasing it on Windows, Linux, as a standalone executable, on Android via cacoonjs, on the Google app store, and Desura (hopefully).

Its also been added to IndieDB check it out :)

Wavey gif

Wavey gif Demo

Crazy Crosshatch Switching gif

Crazy Crosshatch Switching Demo

P-Wave/Compression Wave

P-Wave/Compression Wave Demo

Finally my favorite and the one I did the most work on so far

Rough Seas

JS Bin

I'm sure I'll try my hand at a few more before the competition is over. But I might need to take a break after the last one, it was pretty tough.

This is what is produced with the code.

So how exactly is this effect achieved?

Full page result on codepen

The following function is what's used to generate the planets.

function drawPlanet(rad, xc, yc, color) {
    color = color || { r: 0, g: 100, b: 160 };
    ctx.fillStyle = "#000"; ctx.beginPath();
    ctx.arc(xc, yc, rad, 0, Math.PI \* 2);
    ctx.fill();
    ctx.closePath();

    ctx.fillStyle = `rgb(${color.r},${color.g},${color.b})`;

    var x1 = parseInt(Math.sqrt(rad * rad - y * y));
    for (var x = -x1; x < x1; x++) {
        var n = parseInt(Math.random() * x1) / 1.5;
        if (n > x1 + x) {
            ctx.fillRect(x + xc, y + yc, 1, 1);
        }
    }
}

The function drawPlanet takes four parameters. Radius, center x, center y, and the color of the planet. First a solid black arc is created so we can get a proper layering effect, otherwise dots would bleed through and the planets would blend together.

The loop from -rad to rad is where everything takes place. Each iteration as we go down the circle we find out how long the row is from the center x and y position to the edge of the circle. Thanks to @yutt for pointing me in the right direction.

We have two points to go from, our Radius (center point), and the Y. So using Pythagoras Theorem (a^2 + b^2 = c^2) we have a and c we can figure out b.

Try the fiddle out to see how it works.

We have the point from radius, radius+y to the edge of the circle. Now we are able to iterate from -x to x and get every pixel between the edges of the circle for this row.

Now that we had the width of the row we’re on and can iterate over each pixel, the next step is to determine what pixels we want to show and what pixels we want hidden. That is done in the following section of the function drawPlanet.

    for (var x = -x1; x < x1; x++) {
        var n = parseInt(Math.random() * x1) / 1.5;
        if (n > x1 + x) {
            ctx.fillRect(x + xc, y + yc, 1, 1);
        }
    }

The variable n stores a random number between 0 and x1. Next to determine if we plot the point we check if n is greater than x1 + x. So points would only be plotted if n is greater than x+x1 meaning x *has* to cross the barrier, making it more likely points are plotted towards the end of our loop since x would be getting closer to x1 x+x1 would almost be double x1 making it very likely points will be ploted. If we just stopped there we would get a cool effect. Pixels would be randomly plotted for half of the planet. That is where the example in the commodore book ended. However I wanted to get a more spherical effect. All that we need to do for that is divide the value a bit.

    var n = parseInt(Math.random() * x1) / 1.5;

I use a default of 1.5 what this does is decreases our random number generated even further making it less likely to plot points farther from the edge. And since the value of x1 follows the width of the circle as it goes down we get a cool spherical shading effect.

Below is an example of the shading you get with difference values for the divisor.

And that's pretty much all there is to it. A pretty simple effect that uses some cool math and a bit of random to pull off.

This is the result of decoding the asteroids rom for the 7800.

Atari Rom Display

Source for anyone who is interested

It was actually pretty simple to do, first what I did was read up on the 7800 spec and different graphic modes it supports. I found that 160A was the mode used by most 7800 games.  In 160a mode the sprites can have 3 colors , which are represented by a pair of bits.

00 = Background 01 = Color 1 11 = Color 2 10 = Color 3

So what I do is go through the entire rom and check the pair of bits and then draw that to the screen. Also since apparently it was faster, the graphics are stored upside down so I read the rom data in reverse order. I used AngularJS for the application as well just to get my feet with it, and created my own polyfill for the color picker inputs, which I might post about later once its a bit more feature complete.

Last we left off we had a pretty complete demo where we could run and jump around the screen. Now we are going to add some objects that the player can actually collide into!

Lets add an array called boxes to hold the objects well be doing collision checks against, and lets block the player from falling out of the screen by using our objects.

var boxes = []

// dimensions
boxes.push({ x: 0, y: 0, width: 10, height: height });
boxes.push({ x: 0, y: height - 2, width: width, height: 50 });
boxes.push({ x: width - 10, y: 0, width: 50, height: height });

The above code sets up three boxes to enclose our game world. If you remember from the last tutorial we are checking coordinates directly to keep the player within the bounds, however since we are adding collisions we can just let our collision function handle that for us.

Lets got ahead and add some logic to draw the boxes so you can see them. Add the following code to your update function between clearRect and ctx.fillStyle = "red".

ctx.fillStyle = "black"; ctx.beginPath();

for (var i = 0; i < boxes.length; i++) {
    ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
}

ctx.fill();

You should now see some thick black boxes on the left, right, and bottom of your canvas. Now lets actually make the player collide against them!

So Im going to give a pretty brief primer of the collision method we are using. We are going to be checking two objects against each other, the player, and a box. We will do this by checking if they intersect. If they intersect then they must be colliding. Since we are working on a platformer we need one more piece of information, from which direction is the player colliding? Go ahead and add the below function, it does just that!

function colCheck(shapeA, shapeB) {
    // get the vectors to check against
    var vX = (shapeA.x + (shapeA.width / 2)) - (shapeB.x + (shapeB.width / 2)),
        vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y + (shapeB.height / 2)),
        // add the half widths and half heights of the objects
        hWidths = (shapeA.width / 2) + (shapeB.width / 2),
        hHeights = (shapeA.height / 2) + (shapeB.height / 2),
        colDir = null;

    // if the x and y vector are less than the half width or half height,
    // they we must be inside the object, causing a collision
    if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {
        // figures out on which side we are colliding (top, bottom, left, or right)
        var oX = hWidths - Math.abs(vX), oY = hHeights - Math.abs(vY);
        if (oX >= oY) {
            if (vY > 0) {
                colDir = "t";
                shapeA.y += oY;
            } else {
                colDir = "b";
                shapeA.y -= oY;
            }
        } else {
            if (vX > 0) {
                colDir = "l";
                shapeA.x += oX;
            } else {
                colDir = "r";
                shapeA.x -= oX;
            }
        }
    }
    return colDir;
}

The code is easy to figure out if you stare at it for a bit, but I'll go ahead and give a quick explanation of whats going on. First we need to calculate the current vector from the center of our objects, which is done in the very beginning.

The player and box object at their current positions ready to be checked to see if they are colliding.

The above image shows the player and one of our boxes. We can tell they aren't currently colliding but lets step through to see how the function figures it out.

Showing the vector calculation and half width, half height calculations.

Above shows the values we end up with for the vector, half widths, and half heights. The function checks the absolute values of the vector to see if they are less than the half width, and half height. If they are there is a collision. As you see from above our vector needed an x component of 25 or less, along with the y. Since they our values were both 35 (remember we check the absolute value meaning the -35 turns to 35) that means we are too far away and are currently not intersecting.

Now lets take a look at an example where the player and the box are intersecting.

The player and the box are now intersecting since the vector components are less than the half width and half height.[/caption]

The above uses the same dimensions for the box and player, all we did was move the player closer to the box. The values for the x and y component of the vector come out to less than 25, meaning a collision has occurred. Now using this information we can actually get which side the collision occurred on. To do this we need to first figure out the offset vector, meaning how far are we into the other object. The below illustration shows how we do that.

Calculating the offset vector after a collision has occurred.

So now we have the offsets, what do we need to do with them? First we check if the x components offset is greater than the y. If so that would tell us we either collided with the top or bottom of the object, because the assumption is the greater penetration is not actually *in* the object since we would have caught it much sooner. In our case the y offset is much greater meaning we collided with the left or right of the object and since our original vectors X is a positive number, it means it was on the left. If we were on the right side our x value would have came out positive due to the x coordinate of the player being greater than the x coordinate of the box.

Now we need to move the objects outside of each other, if we don't then they will just go further inside one another. This is very easy since we already have the offsets, and since we determined we collided on the left side, we move our box to the left by 2.

Alright so you have this collision function.. what the heck do you do with it? All you need to do is add the following inside the drawing loop for your boxes.

 var dir = colCheck(player, boxes[i]);

Now we need to add a couple more things before we can actually do anything with the collisions. Add the property grounded, and sliding to your player object and set it false initially. Since we are going to have different things to jump off of we need to know if we are on solid ground or not, or if we should keep falling raising. Your player object should now look like this.

player = {
   x: width / 2,
   y: height - 5,
   width: 5,
   height: 5,
   speed: 3,
   velX: 0,
   velY: 0,
   jumping: false,
   grounded: false
},

Lets go ahead and add the check to our jumping condition, change your jump key condition to the following.

    if (keys[38] || keys[32]) {
        // up arrow or space
        if (!player.jumping && player.grounded) {
            player.jumping = true;
            player.grounded = false;
            // We're not on the ground anymore!!
            player.velY = -player.speed * 2;
        }
    }

By looking at that you can see we can only jump if we are on the ground and are currently not jumping, and every time we jump set grounded to false. We also need to set grounded to false before we do the collision check every time so our player can fall off ledges, add the following right before the box loop.

player.grounded = false;

Now lets go ahead and remove the following from your code, since we are going to be using our collision system instead of hard constraints when keeping the player in the canvas.

    if (player.x >= width - player.width) {
        player.x = width - player.width;
    } else if (player.x <= 0) {
        player.x = 0;
    }

    if (player.y >= height - player.height) {
        player.y = height - player.height;
        player.jumping = false;
    }

We just removed what told us our player isn't jumping anymore! We need to add some of that logic back in somewhere else! Add the following into your update function inside the box loop where you call the colCheck function.

    if (dir === "l" || dir === "r") {
        player.velX = 0; player.jumping = false;
    } else if (dir === "b") {
        player.grounded = true;
        player.jumping = false;
    } else if (dir === "t") {
        player.velY *= -1;
    }

As you can see from that, if the collision direction is on the left or right we stop the player from moving left or right, if its on the bottom we set grounded to true since our feet have touched some sort of ground, and if its top, we just reverse the current force of our jump since we hit our head on the ceiling. You could just as easily make velY 0 but it feels a bit floaty to me.

The last thing you need to do is put the following code right after the box loop.

if(player.grounded){
    player.velY = 0;
}

player.x += player.velX;
player.y += player.velY;

Delete the previous occurrence of player.x += player.velX, and player.y += player.velY. Go ahead and run it! If there are no errors the player should not fall through the world and should be able to run and jump around.. acting just like our previous demo!.. wait, so we did all that work just to make it like the last demo? Of course not, lets add some boxes right under the section where we declared our first set of boxes.

    boxes.push({ x: 120, y: 10, width: 80, height: 80 });
    boxes.push({ x: 170, y: 50, width: 80, height: 80 });
    boxes.push({ x: 220, y: 100, width: 80, height: 80 });
    boxes.push({ x: 270, y: 150, width: 40, height: 40 });

Now go ahead run around and jump!

The entire program should look like the following

(function () {
    var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;

    window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 500,
    height = 200,
    player = {
        x: width / 2,
        y: height - 15,
        width: 5,
        height: 5,
        speed: 3,
        velX: 0,
        velY: 0,
        jumping: false,
        grounded: false
    },
    keys = [],
    friction = 0.8,
    gravity = 0.3;

var boxes = [];

// dimensions
boxes.push({ x: 0, y: 0, width: 10, height: height });
boxes.push({ x: 0, y: height - 2, width: width, height: 50 });
boxes.push({ x: width - 10, y: 0, width: 50, height: height });

boxes.push({ x: 120, y: 10, width: 80, height: 80 });
boxes.push({ x: 170, y: 50, width: 80, height: 80 });
boxes.push({ x: 220, y: 100, width: 80, height: 80 });
boxes.push({ x: 270, y: 150, width: 40, height: 40 });

canvas.width = width; canvas.height = height;

function update() {
    // check keys
    if (keys[38] || keys[32]) {
        // up arrow or space
        if (!player.jumping && player.grounded) {
            player.jumping = true;
            player.grounded = false;
            player.velY = -player.speed * 2;
        }
    }

    if (keys[39]) {
        // right arrow
        if (player.velX < player.speed) {
            player.velX++;
        }
    }

    if (keys[37]) {
        // left arrow
        if (player.velX > -player.speed) {
            player.velX--;
        }
    }

    player.velX *= friction; player.velY += gravity;

    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = "black";
    ctx.beginPath();

    player.grounded = false;
    for (var i = 0; i < boxes.length; i++) {
        ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);

        var dir = colCheck(player, boxes[i]);

        if (dir === "l" || dir === "r") {
            player.velX = 0;
            player.jumping = false;
        } else if (dir === "b") {
            player.grounded = true;
            player.jumping = false;
        } else if (dir === "t") {
            player.velY *= -1;
        }
    }

    if(player.grounded){
        player.velY = 0;
    }

    player.x += player.velX;
    player.y += player.velY;

    ctx.fill();
    ctx.fillStyle = "red";
    ctx.fillRect(player.x, player.y, player.width, player.height);

    requestAnimationFrame(update);
}

function colCheck(shapeA, shapeB) {
    // get the vectors to check against
    var vX = (shapeA.x + (shapeA.width / 2)) - (shapeB.x + (shapeB.width / 2)),
        vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y + (shapeB.height / 2)),
        // add the half widths and half heights of the objects
        hWidths = (shapeA.width / 2) + (shapeB.width / 2),
        hHeights = (shapeA.height / 2) + (shapeB.height / 2),
        colDir = null;

    // if the x and y vector are less than the half width or half height,
    // they we must be inside the object, causing a collision

    if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {
        // figures out on which side we are colliding (top, bottom, left, or right)
        var oX = hWidths - Math.abs(vX),
            oY = hHeights - Math.abs(vY);

        if (oX >= oY) {
            if (vY > 0) {
                colDir = "t";
                shapeA.y += oY;
            } else {
                colDir = "b";
                shapeA.y -= oY;
            }
        } else {
            if (vX > 0) {
                colDir = "l";
                shapeA.x += oX;
            } else {
                colDir = "r";
                shapeA.x -= oX;
            }
        }
    }
    return colDir;
}

document.body.addEventListener("keydown", function (e) { keys[e.keyCode] = true; });

document.body.addEventListener("keyup", function (e) { keys[e.keyCode] = false; });

window.addEventListener("load", function () {
    update();
});

Link to the code on jsfiddle

What we will be making

What do I need to know?

What do you need to know before reviewing this tutorial? Not much really, a pretty basic understanding of JavaScript is required, and know what the canvas element is would be helpful.

Lets get setup

First lets start out by opening your favorite text editing program. My preferred tool is Sublime Text, but you can use anything, even notepad (although not recommended). Lets go ahead and create a file called game.html and setup the appropriate sections.

In your game.html put the following in.

    <!doctype html>
    <html>
        <head>
            <title>My fancy game</title>
        </head>
        <body>
            <script>
                // All of our JavaScript will go here.
            </script>
        </body>
    </html>

Lets draw something!

We are going to need a few things to start out with. We need a way to track the player object, we need a game loop to update logic and draw onto the screen, and we need to handle user input. So lets get started!

The first thing well do is create the canvas element we're going to use and get something drawn on it.

Use following markup to create the canvas element. Make sure to place it before the script tag in the html file we created.

<canvas id="canvas" style="border:1px solid #000"></canvas>

<script>
    // All of our JavaScript will go here.
</script>

I was also very bad and added an inline style to our canvas element. It allows us to see where its actually at on the page. As a caveat however this is a tutorial on creating a game with JavaScript and canvas, not a web standards tutorial.

Now add some JavaScript to get the player onto the screen. This will go between the script tags, right in the area that says

//All of our JavaScript will go here.

    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        width = 500,
        height = 200,
        player = { x : width / 2, y : height - 5, width : 5, height : 5 };

    canvas.width = width; canvas.height = height;

    // draw a small red box, which will eventually become our player.
    ctx.fillStyle = "red";
    ctx.fillRect(player.x, player.y, player.width, player.height);

You can now test your file. To do that double click your html file, it should open up in your web browser by default. From now on everytime you want to test a change you can just refresh your page.

If you run what you have you should have something that looks like the following.

AWW YEAH GOT SOMETHING ON SCREEN!

Ok maybe I'm too excited about that I don't know, regardless your dude is on the screen and I can tell he wants to get moving.

The game loop and requestAnimationFrame

Now we need to add the game loop! If you're pretty new to canvas and making things move with canvas in particular you may of seen examples using setTimeout, or setInterval. DON'T USE THESE! They were great when that's all we had but for anything that requires constant rendering you want to use requestAnimationFrame. requestAnimationFrame is much better in a few ways, I wont go into all of them but here is a good place to start reading why you should use it. We will add a shim that was popularized by Paul Irish, which will use requestAnimationFrame on all browsers that support it, and fall back to good ol setTimeout on browsers that do not support it.

Add the following to the top of your js.

    (function() {
        var requestAnimationFrame = window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame;
        window.requestAnimationFrame = requestAnimationFrame;
    })();

How are you supposed to use it? Its actually quite easy. Lets throw our rendering code into a function, well call it update since we will also place our update logic here as well. Note, this isn't a best practice but we are just doing it for the tutorials sake. Generally your rendering portion, and code that controls entities updating would be seperate so you could add things such as delta timing to control the rendering. However lets keep it simple!

Change the portion in your js that draws your player to the following.

    function update(){
        // runs the loop each time
        requestAnimationFrame(update);
        // draw our player
        ctx.fillStyle = "red";
        ctx.fillRect(player.x, player.y, player.width, player.height);
    }

We also need a way to get our game loop kick started, so add a load event listener for the window to the end of your js file.

    window.addEventListener("load", function(){ update(); });

Now run the code!!!! It still looks the same doesn't it? Alright lets add something to make it a bit more appealing.

Handling keyboard input from the user

So now we have our game loop, and our player object, all we need now is a way to get the player moving! We will do this by tracking key presses by the user, and moving our player accordingly.

First we need to add a few more properties to our player object, update your player object to the following.

    player = { x : width/2, y : height - 5, width : 5, height : 5, speed: 3, velX: 0, velY: 0 }

As you can see we have added velocity variables for horizontal and vertical movement, and a speed variable. The velocities will be added to our current position, and the speed will control how fast we are able to go.

Next lets add an array named keys right after the player object.

    keys = [];

So your variable declarations should now look like this.

    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        width = 500,
        height = 200,
        player = {
            x : width / 2,
            y : height - 5,
            width : 5,
            height : 5,
            speed: 3,
            velX: 0,
            velY: 0
        },
        keys = [];

Its time to add the keyboard events. If you have never dealt with the canvas element before, and keyboard events, you'll be disappointed to learn you can not tie keyboard events directly to the canvas element. So for the sake of this tutorial we will just bind them to the body.

Add the following.

    document.body.addEventListener("keydown", function(e) {
        keys[e.keyCode] = true;
    });

    document.body.addEventListener("keyup", function(e) {
        keys[e.keyCode] = false;
    });

This is where the keys variable comes into play. Basically what this does is every time you touch, or hold a key down the element in the array at the same position as the keycode will be set to either true or false. Using this method it allows us to track multiple keys at one time rather than trying to handle key presses individually.

Alright onto adding the actual interaction! Add the following code to the top of the update function.

    // check keys
    if (keys[38]) {
        // up arrow
    }

    if (keys[39]) {
        // right arrow
        if (player.velX < player.speed) {
            player.velX++;
        }
    }

    if (keys[37]) {
        // left arrow
        if (player.velX > -player.speed) {
            player.velX--;
        }
    }

The above code checks which keys are set to true, and if they are increases or decreases the players velocity. There's also a check that limits the speed of the player to the speed variable to make sure the player doesn't go too fast.

Its time to actually move the player, add the following code after the code you just added.

    player.x += player.velX; player.y += player.velY;

Now if you go ahead and run your code, the player will actually move! But wait!! Don't run it yet, we need one more check in place. The next bit of code takes care of that, add it right after the player movement.

    if (player.x >= width-player.width) {
        player.x = width-player.width;
    } else if (player.x <= 0) {
        player.x = 0;
    }

The above code will make your player stop and not go outside of the canvas. Now go ahead and run your code, your player should now run back and forth. Pretty badass amiright?! Ok maybe not that awesome. You probably are noticing the player keeps moving when you let up on the arrow key, whats up with that?

Instead of making the player just stop immediately, lets add some friction to our players movement. Go ahead and add a friction variable under the keys var, set it to 0.8, you can play with this to create more or less friction, a lower number makes you slide less, a higher number makes you slide more.

    friction = 0.8;

Now add the following code in your game loop right after you check the keys.

    player.velX *= friction;

Go ahead and run your code, your player should now stop when you let go, with a bit of a skid. Play with the value to increase or decrease how much your player slides around.

Time to get jumping!

What good is a platformer without jumping? Well.. I'm sure you could come up with some interesting games not using the jumping mechanic.. but that's besides the point!

You probably already know what we need to do to get our player to jump, we need to modify the players velocity on the y axis, every time we hit the desired key.  Jumping can be tricky, there are a few gotchas when dealing with it.

First we need to add something to the player object to let us know if we are currently jumping or not.

    player{
        // all the other properties previously entered...
        jumping : false
    }

Next we need to make the player jump when a key is pressed. This is pretty simple, we just add another check where we check for left and right arrow keys. We also need to set the players velocity to a negative value to make them into the air, and set the jumping property to true.

    if (keys[38] || keys[32]) {
        // up arrow or space
        if (!player.jumping){
            player.jumping = true;
            player.velY = -player.speed * 2;
        }
    }

If you run the code now your player should jump, and fly away! So lets reign him in a little. We need to add gravity into the mix, or simulate it anyway. Lets add a gravity variable to our variable declarations at the top of the code. You can play with this value to make your player jump on the moon if you want! The lower the number the higher or "floatier" the jump.

    gravity = 0.3;

Now to use gravity we need to add the following line within the update loop. Add it right after the line that applies friction to the horizontal movement we did earlier.

    player.velY += gravity;

One more thing until we are "done", we need to make sure the player doesn't fall through the screen, and we need to reset the jump property when the player hits the ground. So lets add a boundary check right after we check the horizontal location of the player inside of the update function.

    if (player.y >= height-player.height) {
        player.y = height - player.height;
        player.jumping = false;
    }

Go ahead and run it! You should have a little dot that runs back and forth and jumps like a bauce!! Check out the full source below.

Pen to mess around with

Full source

    (function() {
        var requestAnimationFrame = window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame;

      window.requestAnimationFrame = requestAnimationFrame;
    })();

    var canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d"),
      width = 500,
      height = 200,
      player = {
        x: width / 2,
        y: height - 5,
        width: 5,
        height: 5,
        speed: 3,
        velX: 0,
        velY: 0,
        jumping: false
      },
      keys = [],
      friction = 0.8,
      gravity = 0.2;

    canvas.width = width;
    canvas.height = height;

    function update() {
      // check keys
      if (keys[38] || keys[32]) {
        // up arrow or space
        if (!player.jumping) {
          player.jumping = true;
          player.velY = -player.speed * 2;
        }
      }

      if (keys[39]) { // right arrow
        if (player.velX < player.speed) {
          player.velX++;
        }
      }
      if (keys[37]) {
        // left arrow
        if (player.velX > -player.speed) {
          player.velX--;
        }
      }

      player.velX *= friction;

      player.velY += gravity;

      player.x += player.velX;
      player.y += player.velY;

      if (player.x >= width - player.width) {
        player.x = width - player.width;
      } else if (player.x <= 0) {
        player.x = 0;
      }
      if (player.y >= height - player.height) {
        player.y = height - player.height;
        player.jumping = false;
      }

      ctx.clearRect(0, 0, width, height);
      ctx.fillStyle = "red";
      ctx.fillRect(player.x, player.y, player.width, player.height);

      requestAnimationFrame(update);
    }

    document.body.addEventListener("keydown", function(e) {
      keys[e.keyCode] = true;
    });

    document.body.addEventListener("keyup", function(e) {
      keys[e.keyCode] = false;
    });

    window.addEventListener("load", function() {
      update();
    });

Part two will focuses on colliding with objects, and actually building a little world for our player to interact with.

Check out Part 2 for collisions!

Just drag this link to your bookmarks and click it on any random page to enjoy the show

Bookmarklet

You can now use images for snowflakes!

// jQuery vs
$(document).snowfall({image :"image/flake.png", minSize: 10, maxSize:32});

// purejs vs
snowFall.snow(document.body, {image : "image/flake.png", minSize: 10, maxSize:32});

Invoking the snow

 $(document).snowfall();
 $('#elementid').snowfall({flakeCount : 100, maxSpeed : 10});
 $('.class').snowfall({flakeCount : 100, maxSpeed : 10});

Snowfall Methods

 // stopping the snow
 $(document).snowfall('clear');
 $('#elementid').snowfall('clear');
 $('.class').snowfall('clear');

Options currently supported with default values

 options = {
    flakeCount : 35, // number
    flakeColor : '#ffffff', // string
    flakeIndex: 999999, // number
    minSize : 1, // number
    maxSize : 3, // number
    minSpeed : 2, // number
    maxSpeed : 3, // number
    round : false, // bool
    shadow : false, // bool
    collection : 'element' // string
};

I decided to create a small project this weekend, using node, and nodejitsu.com. The concept was really simple, to generate a 2d ship that could be used in games, or any programs really. The project turned out pretty well check out http://retroships.com/. The ships are generated via node-canvas, and displayed to the user. The stars are done with standard client side canvas. I'm sure I'll be creating a few more micro sites like this, and possibly a full on app for procedural graphic generation at some point.

As for retroships.com features there's a few more things I need to add such as the ability to pick different ship styles, an option for seeds, and the ability to get only the ship graphics from a simple url such as retroships.com/generate?type=2&seed=blah.

As for using nodejitsu, its great, setup was *really* simple. I'm looking forward to the paid tiers so I don't have to worry about my site just suddenly ceasing to function. The only issue I had was with deploys. I had to deploy 2-3 times due to errors with node-canvas.

Check it out on codepen as well.

Then I tried something else a bit crazy and decided to do the same thing with only html/css. It turned out pretty cool, not as interactive as the JS one but the effect is still nice. I could see this being used on the bottom of a website.

Also a link on codepen.

Check out Dark Slayer

Quick attempt at explaining my understanding at metaballs without butchering them

The basic concept is to use a radial gradient, and set an alpha threshold that will be filtered. For example any pixel with an alpha lower than 150 will be set to an alpha of 0. This gives the metaball effect because when the gradients overlap, the areas that are normally hidden now have their alpha values added which brings them above the threshold.

One way to achieve this using canvas and javascript

So basically what I do is create a bunch of points, and set their velocities, positions and sizes.

Next I draw each of these onto a temp canvas

Then finally I read the pixel data, filter the alpha based on a threshold I set, and put the filtered data back onto the main canvas to be displayed.

Check out the demo with added features or the jsfiddle to play around with.

This is something I've been looking to do for the longest time. The closest I ever got was using Adobe Air. I didn't like that solution though because it left all of your assets out in the open. Recently a friend reminded me about QT something I haven't touched in a few years. After looking over some of their webkit examples I realized I could load in embedded resources.. making self contained canvas games.

I tested out my theory using the Fancy Browser sample, and just modifying it to load an embedded html, which include all the code for the game.

So far it works great. I need to do some more tests, such as finding out what dependencies the executable requires, and also what kind of performance I get (QT5 will include V8). This is still pretty cool in my opinion, just another way to monetize HTML5 games :)…. or even… HTML5 screen savers!

Here is a link to the github repo and the first of many demo's I'll be posting.

Here is the workhorse function

function floodFill(mapData, x, y, oldVal, newVal){
    var mapWidth = mapData.length, mapHeight = mapData[0].length;

    if (oldVal == null){
        oldVal=mapData[x][y];
    }

    if (mapData[x][y] !== oldVal){
        return true;
    }

    mapData[x][y] = newVal;

    if (x > 0){
        floodFill(mapData, x-1, y, oldVal, newVal);
    }

    if (y > 0){
        floodFill(mapData, x, y-1, oldVal, newVal);
    }

    if (x < mapWidth-1){
        floodFill(mapData, x+1, y, oldVal, newVal);
    }

    if (y < mapHeight-1){
        floodFill(mapData, x, y+1, oldVal, newVal);
    }
}

Which is called by doing this

    floodFill(map, 3,3,null,2);

map refers to a 2 dimensional array which contains the data, in my case, 0 or 1. The second 2 parameters are the x and y of where to start on the map, null is the initial value to start with, and 2 is the change value parameter, which tells the function to change any tile with the value 0, to 2.

The function is pretty straightforward it recursively checks each points north/south/east/west neighbor until it encounters a neighbors whos value is not 0. Try the code for yourself. I have portions commented out that generate a larger random map to fill for testing purposes. Anything beyond 256x256 has issues within chrome due to stack size restrictions.

Below is the result of the function.

And here is a link to some great information on recursive floodfilling

Just a basic particle engine using canvas (of course). Its tied in directly with my home grown game framework, so implementing it into my projects should be a breeze. Going to attempt to make an editor for it over the weekend.. heh mostly for me to just mess around, but of course it has the other benefit of allowing me to make effects visually, which is easier. Check it out

Its crazy how much of a difference music and sounds make. Been working on my shmup when not busy and got a boss in today. So much work still left to be done though, I want upgrades for the player ship still, and possibly a more consistent look for the enemies depending on the seed (like a shared color scheme).

You can check out my progress here

Original Post

Download

What I think is pretty cool about it so far is all the graphics (except the bg) are procedural and generated based off of whatever seed you give it. Not only are the graphics based on a seed but so is the level. For example if you play game?testing, you will have the same level/graphics as someone else who plays using that seed. This could provide some interesting challenges. Anyway heres the work in progress using the seed shmupity.

Also of course this is being done using js/canvas so you need a modern browser to test it.. but I don't think there's many who'd come here without one of those :).

Was pretty stressful trying to make this in a day (especially since I did a full workday at my day job as well!).

This ended up being my entry.

I borrowed some game concepts (ok all of them) from the awesome game World Infectonator. Basically what you do is you get one chance to convert a 1%'er or "the unaware" in hopes they will spread their new found awareness enough to beat the level. Game was done using JS and Canvas of course, and using my homegrown game engine thats been evolving over the last year or so. You can check out the game in all its glory

from the direct link.

Step 1 - Make a directory somewhere on your machine, but not in program files, or program files(x86). Otherwise in order to save you will have to run the game as an administrator. What I did was create a directory structure on the root of my drive "DRIVE:\Firaxis\Sid Meier's Alpha Centauri\".

Step 2 - Copy the contents of the "programs" directory from Disc 1 to the directory we created above. Now copy the Directories FX, MOVIES, and VOICES into the directory. Now your structure should look something like the following,

Now do the same with CD2, copy the contents of programs to the root of the same directory and then copy FX/MOVIES/VOICES, and just acknowledge the file overwrites. At this point you now have a "working" copy of the game, you just run Terran.exe, or Terranx.exe in order to play, but you will probably have a few odd issues with windows not appearing, and low resolution. So I recommend you follow the rest of the directions posted at this forum (2nd post).

In case the above forum post is deleted or something I wanted to have the info here as well, but I encourage trying the link above first.

I run Alpha Centauri and it's expansion Alien Crossfire on Windows 7 64-bit with no problems. However the following are a few of the things I've had to do to make them work the best they can:

Once you apply the Windows XP Compatibility patch then you are almost good to go for Windows 7 64-bit. If you are getting an error message then try to re-download that patch or run the patch itself in a compatibility mode perhaps with the "run as administrator" option.

You are almost ready to go. Before you even install any patches first make sure the installation folder is not within either the "Program Files" or "Program Files (x86)" folders. This is because Alpha Centauri (and Alien Crossfire) put their save games within their folders. Starting with Vista and newer this will not work because of User Access Control. So, choose an installation folder outside of "Program Files.."

Alpha Centauri's native resolution is 800x600. You can change this however: in the installation folder, find a file named "Alpha Centauri.ini" and open it with NotePad. In that file, Under "[Alpha Centauri]" add two lines:

Video Mode=1024 DirectDraw=0

The first line will tell the game to run at 1024x768 which is the maximum resolution using DirectDraw that the game can run with. The second line tells the game to not use DirectDraw and it will instead run at your desktop resolution.

Not done yet!  Alpha Centauri itself (not Alien Crossfire) has a bug when running at your desktop resolution. In the main menu the menu's are not visible. This makes getting into a game practically blind luck. There is a fix however:

If you have Alien Crossfire, get this patch: Here. Also get this patch: Here. Rename terran.exe and terranx.exe (if you have Alien Crossfire) so you have backup's of them. Then unarchive the first patch into your SMAC folder then unarchive the second into it as well overwriting any files (but keep backups of any overwritten files). You can skip the first archive if you don't have Alien Crossfire. Either of these patches will fix the menu not being visible when using the DirectDraw=0 option. So, you'll be at your desktop resolution and everything will work with these unofficial patches. Both unofficial patches also come with something extra: AI improvements! That is just bonus on top of getting them to work at desktop-resolution!

Almost done! Go back to the "Alpha Centauri.ini" file. Under that put in:

ForceOldVoxelAlgorithm=0

This line if it doesn't already exist. With the unofficial patches you can use "=0" but if you don't use those patches then you will need to set it to "=1" or they will crash.

All of these instructions assume you can get Alpha Centauri to it's last patch: the Windows XP/2000 patch. If you can do that then these instructions just "fix it up" to be the best it can be on a modern system.

If anything is unclear or I can help further just post back. Post back regardless whether you get it working or not!

Also, Alpha Centauri itself is now available on Good Old Games.com here: Link. I don't know how well the unofficial patches will work with that version but that version is "turn-key": it's super simple to install and get going!

And enjoy :)

I might mess with this some more, got a few ideas for a small game or two, but who knows if I'll actually get around to it before finding something else that's shiny. Feel free to do whatever with the code. There's a lot of room for optimization.

Figured I might as well post this thing I was messing around with. Same concept but much slower .

Decided to give grinding a pumpkin a shot instead of the usual carving, and this was my inaugural attempt. Super Meat Boy is my jam, so I just had to try and capture his little face! Clearly, I've got some honing to do, so maybe I'll be practicing on apples or something for the rest of the year.

The idea is *heavily* inspired by a JS1K demo submission that was done by @daisyowl.

 I just thought the demo was so cool it was begging to be a live wallpaper. I plan on adding more features such as clouds/different seasons etc. Heres a link to the source if anyones interested, https://github.com/loktar00/Android-Forest-LWP and heres the link to it on the app market, https://market.android.com/details?id=com.loktar.forestscenes&feature=search_result

And here's my recreation in JS

My collection

I'll have to get some pictures up.. but I love collecting PC games, old and new. Currently my Steam account sits at just under 800 games, and my physical copy count sits at about 600 or so. I have most popular games that were released for the PC and quite a few obscure ones. I wont lie I haven't played them all, last time I calculated I have played about a third of them. Once I get my spreadsheet up to date I'll post it on here.

Games I'm currently playing

Right now I'm switching between a few games, Dungeon Defenders, Battlefield 3, and Team Fortress 2. The Halloween events in TF2, and Dungeon Defenders are great I love when games include things going on in the real world, such as holidays.

Used libgdx along with the libgdx live wallpaper backend. Was a fun project, found out about an awesome filter library while making it, its what allowed for such great high res nasty images.

The hardest thing besides a bit of OpenGL I had to learn was the Android preferences. I don't know why but I have such a hard time getting them working right. So right now the only option is to pick different images to mess with. I plan on adding more later. I also plan on releasing a "lite" version which only includes one background to choose.

Repo on Github Download jQuery Snowfall 1.5 View the plugin in action

Added snow buildup to the plugin, so now you can pass a jquery selector in the collection option and the snow will collect on top of all the elements matched. It uses the canvas tag so the snow wont collect in IE8 or lower. To enable collection you can do the following

snowfall({collection : 'element'});

Element can be either a class or id or a list such as

$(document).snowfall({collection : '.elements'});
$(document).snowfall({collection : '#element'});

That's pretty much it for new options below is the standard way of using the plugin.

Invoking the snow

$(document).snowfall();
$('#elementid').snowfall({flakeCount : 100, maxSpeed : 10});
$('.class').snowfall({flakeCount : 100, maxSpeed : 10});

Snowfall Methods

// stopping the snow
$(document).snowfall('clear');
$('#elementid').snowfall('clear');
$('.class').snowfall('clear');

Options currently supported with default values

options = {
    flakeCount : 35, // number
    flakeColor : '#ffffff', // string
    flakeIndex: 999999, // number
    minSize : 1, // number
    maxSize : 3, // number
    minSpeed : 2, // number
    maxSpeed : 3, // number
    round : false, // bool
    shadow : false, // bool
    collection : 'element' // string
};

My ideas ranged for a rainbow road (similar to the Mario Kart level), to a 3d tombstone that said dysentery, a terrain generator, then a wave generator.

I ended up just combining the last two ideas and came up with below.

Theres really no terrain generation, its just the y value set to a random height. I just didn't have the room in 1k to fit it in unfortunately.

Project Link

Overall the webkit css animations aren't that difficult. The trickiest part was giving the illusion of the counter looping around. I just did this by adding a 0 at the end of the element, and changing the top position back to the original value at the end of the animation.

If you are running a modern browser (not IE8 or below) then below you should see what my submission ended up being.

Of course how it always goes a few hours before there was a pretty awesome Christmas Tree submitted by Roman Cortes http://js1k.com/2010-xmas/demo/848 lol mine is about 1995, where his is really modern looking.

Added a few new things, you can now make flakes rounded (Thanks Luke), and give them shadows (for lighter colored pages) - thanks for the idea Yutt. Also I fixed some bugs that cause horizontal bar flickering (I hope).

Download jQuery Snowfall 1.4

Invoking the snow

$(document).snowfall(); 
$('#elementid').snowfall({flakeCount : 100, maxSpeed : 10}); 
$('.class').snowfall({flakeCount : 100, maxSpeed : 10}); 

Snowfall Methods

// stopping the snow 
$(document).snowfall('clear'); 
$('#elementid').snowfall('clear'); 
$('.class').snowfall('clear');

Options currently supported with default values

options = { 
    flakeCount : 35, // number 
    flakeColor : '#ffffff', // string 
    flakeIndex: 999999, // number 
    minSize : 1, // number 
    maxSize : 3, // number 
    minSpeed : 2, // number 
    maxSpeed : 3, // number 
    round : false, // bool 
    shadow : false // bool 
    };

Fixed a quick bug in the snowfall script, and added an example usage file in the download. Also implemented the changes suggested by Han Bongers, which allows the snow to ignore padding.

Updated download

Link to the project post

 $("#DateFrom")
    .datepicker({ showOn: 'button'})
    .next('button').text('')
    .button({icons:{primary : 'ui-icon-calendar'}});

By default the datepicker button call automatically inserts three ellipses to the button, so the text('') is needed to remove the text from the default button. So there you go a fully themed calendar button. Now if only they would make this easier by having the datepicker do it all for you.

Live Demo

jQuery plugin page

Google Code Page

var dob = new Date("9/28/1982"), 
    today = new Date("9/21/2010");

// Days between dates 
alert((today-dob)/86400000);

// Years between dates 
alert(((today-dob)/86400000)/365);

Returns pretty accurate results, I'm not accounting for leap years so it thinks I'm already 28 even though I still have a few days to go.

This entry was more of a challenge than my previous one, I had to not only make it look presentable but also had to worry about game play, simple physics, and of course lack of bugs. I think it turned out pretty well, and I owe a big thanks to the Google Closure Compiler, it definitely made things easier. The biggest challenge was trying to decide on what features to add. I had a choice between keeping the high score and allowing users to try again (without refresh) , or the option of making it harder the higher they go. I chose the latter which I think was a good decision.

Some things I learned from the contest,

• pre calculated values use much less space, (.017 uses much less space than pi/180)
• There are shorter ways to get an element through the dom than getElementById
• You can make something cool and fun in 1k using Javascript

I think the next thing I will do is make a bigger/better/cooler version.

Now just imagine if I had 640k to work with!

Check out the finished product here.

Download Source

So far the emulator just supports the 80286 with a few 80386 opcodes, but no plans to fully emulate a 80386 which is understandable, but even a 286 opens up a ton of opportunities for old school gaming. I can now play games such as Elite Plus, Civilization (the original), Warlords, Castles 2, and (hopefully soon) Kings Bounty.

If this is something that interests you theres a compatibility list where users are encouraged to test games to help out the development. Of course you'll need some sort of DS card with custom firmware such as the R4 or Cyclo DS (my personal choice).

http://www.mio.k12.mi.us/

The first stored procedure I attempted to write accepted 3 parameters and based on one of them checks a lookup table, and creates a new value in it if the same value does not already exist. Normally I would use an IF NOT EXISTS clause, which in Microsoft SQL would look like this

CREATE PROCEDURE someProc
@SomeParam varchar(50),
AS
BEGIN
    DECLARE @SomeId int

    IF  NOT EXISTS(SELECT (1) FROM lookup_table WHERE someField = @SomeParam )
        BEGIN
            INSERT INTO lookup_table (someField) VALUES(@someParam)
            SELECT @SomeId = @@identity
        END
    ELSE
        BEGIN
            SELECT @SomeId = id FROM lookup_table WHERE someField = @SomeParam
        END

    -- Do some other stuff here with the id you just received and other data
END

The above snippet would take a value, check a table for it, get its id, and if the record doesn't exist in the database create it and return the id. Then you could continue on and insert that id into another table or what have you.

Accomplishing the same thing with a MySQL stored procedure is a bit different. The code below shows how you would accomplish the same task.

CREATE PROCEDURE 'someProc' (IN 'in_SomeParam' INT)
LANGUAGE SQL
NOT DETERMINISTIC
CONTAINS SQL
SQL SECURITY DEFINER
BEGIN
    DECLARE SomeId int;
    DECLARE CheckExists int;
    SET CheckExists = 0;

    SELECT count(*) INTO CheckExists from lookup_table WHERE someField = in_SomeParam;

    IF (CheckExists > 0) THEN
        SELECT id INTO SomeId FROM lookup_table WHERE someField = in_SomeParam;
    ELSE
        INSERT INTO lookup_table (someField ) VALUES(in_SomeParam);
        SELECT SomeId = LAST_INSERT_ID();
    END IF;

    # Do some other stuff here with the id you just received and other data
END;

I'm sure I will find some more differences in things I am used to doing with stored procedures using T-SQL, and when I do I'll post them here.

[caption id="attachment_207" align="aligncenter" width="426" caption="Mario brothers in Minecraft"][/caption]

[caption id="attachment_208" align="aligncenter" width="426" caption="Stairs to Lava"][/caption]

Don't let the look of the game fool you, anyone no matter the age group can easily become addicted.

What really piqued my interest are some of the game modes people have put together, such as a zombie mode where you are chased by zombies (other players who have been turned) and you need to either hide, or build your way away from them. Theres also a falling lava mode where lava fills the level and you need to build structures as to not get stuck in it.

What I really wanted to do was create some of my own game modes, but it was pretty hard to even figure out where to begin. I eventually settled on Opencraft, which is an opensource Java server for the game. It looks like development has ceased so I have had to implement a few things already. I plan on releasing any changes I make so others can create some interesting game modes as well.

*Updated* fixed a bug, and added an example file to show how to use the plugin.

Added a few new things to the Jquery snowfall plugin, you now have the ability to clear the snow from elements, chaining is supported, and element matching is supported. Its funny today was the hottest day of the year so far and I decided to work on a script to make it snow.

Download Jquery Snowfall 1.3.1

Invoking the snow

[sourcecode language="js"] $(document).snowfall(); $('#elementid').snowfall({flakeCount : 100, maxSpeed : 10}); $('.class').snowfall({flakeCount : 100, maxSpeed : 10}); [/sourcecode]

Snowfall Methods

[sourcecode language="js"] // stopping the snow $(document).snowfall('clear'); $('#elementid').snowfall('clear'); $('.class').snowfall('clear'); [/sourcecode]

Options currently supported with default values

[sourcecode language="js"] options = { flakeCount : 35, // number flakeColor : '#ffffff', // string flakeIndex: 999999, // number minSize : 1, // number maxSize : 3, // number minSpeed : 2, // number maxSpeed : 3 // number }; [/sourcecode]

Example

Distance Formula

Obviously a pretty important one, used to tell the distance between 2 objects. Can be used for simple radius collisions as well.

 var distance = Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1));

Move toward an object (Without rotation) with easing

 x += (targetX-x)/speed; y += (targetY-y)/speed;

Angle Based Movement

I always see myself needing this one, whether its for an Asteroids clone, or a follow the leader type game.

 velX = Math.cos((angle * Math.PI / 180) * thrust); velY = Math.sin((angle * Math.PI / 180) * thrust);

Friction

How do I make something slow down if no force is applied?

 velX *= .98; //Any val under 1 is suitable for your needs velY *= .98

2D Matrix

This is a pretty simple one I know.. but I always seem to forget it. This is how to store a 2d matrix in an array. And how to find a value you need.

 // 2d matrix\[y * width + x\] var arr = \[\], width = 10;

for(x=0; x<width; x++){ for(y=0; y<width; y++){ arr\[y * 10 + x\] = x + y; //Or whatever value you need to assign } }

//Retrieve a value from x:5, y:2 var val = arr\[2 * 10 + 5\];

//get the x and y from a 1d array var index = 12, x = index % width, // 2 y = Math.floor(index / width); // 1

Move towards an object at a constant speed

 var tx = targetX - x, ty = targetY - y, dist = Math.sqrt(tx * tx+ty * ty), rad = Math.atan2(ty,tx), angle = rad / Math.PI * 180;;

velX = (tx / dist) * thrust; velY = (ty / dist) * thrust;

Example

Project a point in front of an object

 x + length * Math.cos(angle * Math.PI / 180); y + length * Math.sin(angle * Math.PI / 180);

Get the angle between objects

 var x = targetX - this.x, y = targetY - this.y;

return Math.atan2(x,-y);

Plot points around a circle

 var rad = 500, total = 50, centerX = 250, centerY = 250;

for(var i = 0; i < total; i++){
    ctx.beginPath(); ctx.moveTo(centerX,centerX);
    var x = centerX + rad * Math.cos(2 * Math.PI * i / total),
        y = centerY + rad * Math.sin(2 * Math.PI * i / total);

    ctx.lineTo(x, y); ctx.stroke(); ctx.closePath();
}

[sourcecode language="js"] sorting.qSort = function (sortItems, _left, _right) { var left = _left, right = _right, pivot = right;

if(right > left){ do{ // From left for(var i = left; i < pivot; i+=1){ left = i;

if(sortItems[i] > sortItems[pivot]){ pivot = i; break; } }

// From right for(var i = right; i > pivot; i-=1){ right = i;

if(sortItems[i] < sortItems[pivot]){ // swap sortItems.swap(i, pivot); pivot = i; break; } } }while((right - left) > 1);

this.qSort(sortItems, _left , pivot - 1); this.qSort(sortItems, pivot + 1, _right);

return true; }

return false; } [/sourcecode]

The funny thing is really how much quicker this was than the Bubble sort algorithm. The only benefit I can find to bubble sort is it is much faster to implement

[sourcecode language="js"] sorting.bubSort = function (sortItems) { for(var i = 0; i < sortItems.length; i+=1){ if(sortItems[i] > sortItems[i+1]){ //swap change the incrementor to -1 sortItems.swap(i, i+1); i=-1; } } } [/sourcecode]

But like many I recommend you never use it. Using quick sort and sorting 2000 items in random order I get an average of 0.08 with bubble sort this increases to 20 seconds! Also I recommend for javascript using the built in sorting function for arrays the below code beat out my implementation of quick sort everytime with an average speed of 0.01 seconds. Of course its also much easier to implement.

[sourcecode language="js"] sorting.internalSort = function sortNumber(a,b){ return a - b; } [/sourcecode]

All tests were performed in Chrome. It was a fun exercise overall and helped me brush up on my recursion skills.

[sourcecode language="js"] Date.prototype.getMonthWeek = function(){ var firstDay = new Date(this.getFullYear(), this.getMonth(), 1).getDay(); return Math.ceil((this.getDate() + firstDay)/7); } [/sourcecode]

Thanks to mutilator for helping out with the actual math to figure it out.

Check out the progress  of JSLander

Now supported in any browser that supports the canvas element.

[sourcecode language="js"]/* * Function : sortDate(Date, Date) * Description : Sorts an object based on date */ function sortDate(a,b) { var a = new Date(a.startDateTime), b = new Date(b.startDateTime); return (a.getTime() - b.getTime()); } [/sourcecode]

My object has a property called startDateTime, but this can easily be modified. All I do is a quick comparison of the UNIX time stamp and its sorted. Mainly just hoping this eventually ranks higher than the result I found on Google.

Check it out here

The method is pretty simple, here's how it works. I start out with a sprite sheet that contains the characters animation frames all facing on direction. I take that and rotate it in increments of degrees (I chose 23) and render  all of the results to a new sprite sheet in memory. What you end up with is a pretty large sprite sheet of every animation at each angle increment. So instead of 1 line of animation of the character facing upward I now have 16 lines of animations each one facing a different angle. What this allows me to do is take the angle my sprite needs to face, and just go to that section of the sprite sheet for the animations. Doing it this way requires no real time rotation in game. Performance gains were immediately seen. In Chrome I was able to go from 150 zombies on screen (which showed some slowdown) to 800 zombies before any slowdown occurred. In Firefox the results were a little disappointing, I did gain an increase but not much of one.  Take a look for yourself, the first link has 150 zombies using realtime rotation, the 2nd link has pre-rendered rotations with 200 zombies.

Realtime rotation

Pre rotated sprite sheet

There is a drawback to this method of course, the main drawbacks are increased load time and higher memory usage.  For me though these do not outweigh the benefit of more on the screen at once at playable frame rates.

Here's a quick demo showing the results of whats going on. It takes a second to load,

And heres a link to the code if anyone is interested. I tied certain numbers to some things that should be variables instead, just note with Firefox you may have issues because getImageData is not always equal to the size of the canvas, which causes errors with putImageData if any data is being put outside the bounds of the canvas object. To fix this I generally add a bit on the width and height of my canvas on creation.

So far development has been going pretty well, the single player implementation in its current state can be seen here http://www.somethinghitme.com/projects/canvaszom/ (please not the images are not free they are actually 2d renders from 3d models i have purchased, the code is under the MIT license). It already has more implemented than the Flash version had. There are quite a few things however left to be done and I will try to make a post with every major milestone and write up how I accomplished it. So far the only thing that is not using JavaScript is the sound. I am using Sound Manager for that, which uses a swf in order to generate the sounds.

AS of right now I have put a halt on development of this particular single player game recently because I am actually working on a multiplayer version that is nearing completion. The next post I make will most likely be releasing that and then I will get back to making this a full fledged game… and I'll most likely not use the bald shirtless men as enemies (they are supposed to be zombies!).

$('#snow-window').snowfall({flakeCount : 100, maxSpeed : 10});

In addition to snowing within elements there are some more options available, properties available are

flakeCount, flakeColor, flakeIndex, minSize, maxSize, minSpeed, maxSpeed

You can still initialize the plugin with

$(document).snowfall();

but the flakes will not use fixed for positioning, they will now travel down the page completely. On some long pages this will make it seem like its not "snowing" as much. I'm working on a few more updates that should be released in the following days. If you end up using this I'd love to know. You can download the most recent version here.

Got bored today and decided to put together a quick snow plugin for Jquery. On my site Undeadgames.com the members look forward to the snow every year. I decided to replace the older one we were using, it was nice overall, but ran terribly slow on some browsers, and didn't really care about window dimensions.

Click to download the plugin

The plugin is easy to implement, load up the file and call

$(document).snowfall();

or

$(document).snowfall(number of flakes);

Overall the plugin is pretty useless, and hearkens back to the days of old. Next update will include snow collecting on specified page elements. You can see it in action on either zombietweets.com, or undeadgames.com

You can check out the generator here. (Chrome recommended, sorry no IE)

The first major thing I learned was the midpoint displacement (or Diamond Square) algorithm. The Wikipedia article and links contained were definitely a great help but this actually took me the longest to implement. Getting the order of  iteration and recursion was the hardest part. I found so many examples but many of them conflicted on actual implementation. The closest example I got working was the example found on this page but if you try creating height maps with a lot of noise you will notice square patterns popping up, sometimes with low noise you can catch a nice one right in the center.  This is because they do not take the center into consideration when calculating the edges. I was able to fix this in my version fortunately.

That ended up only being a small part of the project however, you'll notice I added shadow maps which could use some tweaking, and a very slow voxel engine. These sites greatly helped that process.

http://www.cyberhead.de/download/articles/shadowmap/

http://wiki.allegro.cc/index.php?title=Pixelate:Issue_14/Voxel_Landscape_Renderization

The last few things to implement are wrapping height maps, and a better color map, and some sort of progress bar. Hopefully after that my obsessions with height maps will be over for a while. These things are pretty addicting, you get such cool results from just a few numbers. Feel free to check out the code, if you have any improvements let me know, I know its by no means even close to perfect. Also if you happen to use it for anything please give credit where its due.

I'll most likely write up yet another midpoint displacement tutorial, because even the current ones left me scratching my head at some points. Then off to working on my canvas zombie game for zombiegames.net!

Special thanks to Yutt for testing it out and helping me work on the stupid color bug.

space invaders clone

I've been hearing things about this canvas element lately and I found some really cool uses. Mostly I found examples of charts that use it, which makes sense because in some browsers its not very fast rendering real time elements onto it, and IE browsers do not natively support it. After doing some more research and seeing as its in the HTML 5 specification I figured I would try my hand at making something quick with it. So I decided to create a quick space invaders clone. For the rendering base code I used some code which shows pretty nice looking particle engine using canvas at iterationsix.com. If you want the canvas invader files you can get them here

After completing this it really excites me the direction Javascript seems to be going. I definitely think one day in the distant future it will be able to replace Flash for most anything. Especially if browsers continue to implement faster JS engines, and MS really does ditch its IE platform.

For some good tutorials on using canvas check this site out, it has some  useful information.

https://developer.mozilla.org/En/Canvas_tutorial

Overall its very simple in nature and I am going to move up now to something a bit more complex, either a screensaver which uses 3d models, or a simple game like breakout or tetris. Decisions Decisions.

Download Screensaver

Download Source

Really all I did was end up converting some of the Nehe lesson 19 code, and then making my own sprite class. Soon I'll make an emitter class so I can have a full featured particle system up and running to eventually make some sort of game. Anyway here is the fruits of my labor a crazy particle effect that makes me think of the big bang.

Ill release the source if anyone really wants it. I warn you its not the prettiest!

Download Zip

I decided to try and incorporate the API into one of my current unfinished projects you can test it out here DeadEnd Right now its not much you and some friends ( up to 8 ) can run around and point your weapon at each other. The cool thing is it only took maybe 3 hours total to incorporate it, and that was just due to my crappy class set up for the player because I never expected to have more than one player in the game. Next step is to add some enemies, and of course the ability to fire weapons. Ill post updates as I finish more of it.

Also I wanted to give credit to Emanuele Feronato if it weren't for his blog I never would of found Nonoba.

Anyway if you don't have the $650+ to throw down on any of the Adobe products these products from Aviary are a great alternative, and I will be using them pretty often in the near future.

For my first post I'll share a little about myself. I'm 26 with a wife and 4 kids. By day I'm a web developer for the government and by night I'm a web developer / all around developer for myself. I currently run 5 other sites to include,

• http://www.undeadgames.com
• http://www.zombiegames.net
• http://www.zombiebooks.com
• http://www.loktar.com (I sell software I've made here)
• Site to be named which has not totally gone public yet.

Currently besides this site I'm working on Undeadgames.com its in the redesign stage  and I'm hoping to really get that site going well again.

I'm sure mainly what you'll find here are my favorite development topics and random projects i'm working on.