Jake Haas Blog

A Student Perspective of computer science

Home Blogs Projects Tutorials


Ascii Games in General

So this is a pretty general tutorial where I kinda go over everything you need to know in order to make ascii games in almost any programming language, although the source code will be given in javascript and the tutorial will go through that code step-by-step I am adding a snippet of Java in the end for people who would rather use that but don't know how to display everything. The tutorial is split up into three parts:

So this part is probably pretty self explanitory but I need to write something in this section to make it look good anyway so yeah... Anyway, we will start by creating a class to hold ascii "pixel" data, this will include r, g, b colors and the charactor. Then we will be making a map class so you will have maximum flexibility when making your own game. This will include arrays.. like lots, and lots of arrays... that are held in more arrays.... wow, just thinking about all that data makes me feel small... So hopefully arrays arn't a new consept to you, but even if they are I will try to explain them in an easy to understand way.
In my eyes this section is the most important of the three. Lots of people begin programming and are fustrated by just how difficult it is to get ANYTHING at all on the screen besides text. This is the step when we will see our program come to life! I have purposely structured this tutorial to make the display very flexible, all the previous code we wrote would be easy enough to copy into a different programming language, but every language has a multitute of ways in which you can display stuff. Im going to leave examples of how the data stuctures we have created could be shown the easiest way possible in both javascript and in Java using the standard libraries.
This section will include some very important transferable skills in javascript, taking in user keyboard input is vital for many programs, and ecspecially video games. There are many tutorials scattered about the internet on this subject but even after I serched through dozens of them I was continually having input lag problems for quite a while. At some point however it kinda just clicked, and I figured out what was going wrong. Like an idiot I made my programs run the input as soon as it came in without storing it, and as soon as I did just that my programs ran like a dream! The reason it is important to store input values is that your commputer runs keyboard input on a seperate thread from the rest of your computer, meaning that even if my programs were running at 60fps the input thread was running much, much faster, and by the time my program handled one input two more had passed unnoticed by the next frame. This problem is easily solved by storing inputs in a global array and having the array take in all the inputs on the keyboard input thread then passing them to your program when it starts a new frame all at once. This tutorial shows a very simple example of this just using booleans, but im sure you can impliment this in many new and interesing ways.

P5.js and Perlin Noise

This tutorial will be seperated into two components, first I will talk about a library called P5.js which is a simple library that can be used to make a graphics, and then in the second part I will go over using P5.js to recreate the perlin noise flow application in the projects section. This will be an important step in learning to make games, and other graphical applications because unlike in the ascii game tutorial from before we will be using a very efficiant method of displaying. In the first section we will be modifying the ascii game code from before to make it display much faster.
In this section I will talk about importing the P5.js library, setting up a P5.js canvas, and creating primitive graphics with P5.js. If you followed my last tutorial on creating an ascii game this section will be important for you to follow because i'm going to be adding a section on the end that will overrite your old display function and crank your frame rate to over 9000! But seriously though that might not be far off. I will also cover limiting frame rate to make your new display efficiancy manageable.
This section will not be as long as the last part, it will simply cover one really cool function in P5.js called perlin noise. In my perlin noise project I have a section talking about the origins and uses of perlin noise in modern movie making, but we will simlpy be making a neat little graphics program with it. Perlin noise is a very versitile function that has many interesting uses, so after this tutorial be creative and make something awesome!