DEV Community: Samuel Collier

I made 3D Snake

Samuel Collier — Sat, 01 Apr 2023 02:21:31 +0000

Hello everyone! In my last few posts I've shown off some websites that I've built, but honestly JavaScript is overrated and I wanted to dive back into some lower level stuff. I had worked with C and SDL2 before, but I was still quite a beginner at graphics and the C language itself.

To start things off, I started learning OpenGL from this wonderful website. After setting up the project infrastructure on the 10th of March, I went through all the "Getting Started" tutorials. This just covers the basics of OpenGL and after re-reading the tutorial sections a few times, I decided to create my own project. I wanted to make a classic game, but in 3D, so I chose to make Snake. The game took 4 days in total to make and is composed of ~900 lines of C code.

Here's a screenshot of the game:

If you want to try out the game yourself or inspect the code, you can do that here at the Github repository:

STCollier / Snake

A snake game made with OpenGL and C

Snake

A snake game made with OpenGL and C (composed of 900 lines of questionable code)

Building

Unix-like systems
- Dependences
  - GCC Compiler
  - GLFW library (sudo apt-get install libglfw3-dev)
  - stb_image.h
  - GLAD (v.3.3)
  - cglm
Windows
- no

View on GitHub

Let me know what you think!

Six Words -- A Unique Fullstack Application

Samuel Collier — Wed, 25 Jan 2023 22:03:56 +0000

Hello all!

TL;DR: https://sixwords.fatpancake613.repl.co/

Recently a friend and I created a fullstack application with the stack Pug + Express. This was the second fullstack application that I was a part of building, and my first time using Express & Pug (I had used Next.js previously). Overall I found Express and Pug pretty nice and simple, but I still prefer the ease of client/server communication that I feel that I can achieve better with Next.js. It was nice though having a much smaller application size (express and pug took up so little storage compared to Next.js!)

The application idea was based on Ernest Hemmingway's famous six word story: "For sale: baby shoes, never worn." The idea of this application is to see what you can say in 6 words! It's a lot of fun to see what ideas you can form in such brevity.

Overall building this application was a wonderful experience and I had a lot of fun collaborating :) Collaboration is something I highly encourage; you can take a nice and easy pace and have a lot of fun along the way, making whatever you decide to make.

So finally, here are the links to the application:
Replit link: https://replit.com/@FatPancake613/SixWords?v=1 (source code && if you want to leave a like, we'd love that)
Website link where you can try it out: https://sixwords.fatpancake613.repl.co/ (note you need a replit account)

Hope you enjoy, and happy coding!

I just made my first fullstack application. Here's how.

Samuel Collier — Thu, 12 Jan 2023 01:36:19 +0000

Hey everyone!!

I just made my created my first fullstack application, called The Quotes Place. Simply stated, it's an platform where users can find and explore great quotes selected from all around the world! Here is the list of features!

A login system
Ability to like and dislike quotes
An admin system (for adding quotes)
Dynamically generated profiles

Here are some screenshots!

If you'd like to check it out, here's the link:
Repl link: https://replit.com/@STCollier/The-Quotes-Place?v=1 (I'd really appreciate it if you liked it!)
Working URL: https://the-quotes-place.stcollier.repl.co/

How I made it

It took 6 weeks to fully build this application. The stack that I chose was Next.js as the framework, Sass for styling, and MongoDB as the database. I had previous experience with React.js, but I was almost completely new to learning about clients, servers, APIs, requests, status codes, and so much more.

Being almost completely new to all of this and jumping straight into building a fullstack application was a key factor in why this took so long to build (6 weeks as I stated earlier!) Perhaps if I had learned the basics of express.js, I could have built this a lot faster and had less of a steep learning curve. It's crazy thinking back on when I first started to build the application, I didn't even know what a GET or POST request was!!

The building process

When I first created a Next.js project, it looked pretty similar to React.js, so I thought it would be pretty easy. But as I stated previously, I had little to no knowledge about how servers and databases worked, so it was quite the opposite. Even just getting the basic login system up was hard, and I was using ReplAuth, one of the easiest authentication systems to start using. Thanks to some help from a fellow discord member, I got introduced to req.headers and getServerSideProps, both of which I would come to use over and over again in my application. After about a week, I had successfully made a basic website where you could login with Replit. I had also used a tutorial to connect MongoDB to Next.js, but that was all in the backend and I hadn't connected it to an API to display results yet.

Although this first step was already really hard, it would only get harder. Next up I decided to try to display results from my MongoDB collection onto the page. I was introduced to Array.map, the MongoDB compass, and a lot more. Finally I had displayed quotes to the page, but now I had to add proper full stack functionality, by adding a feature where you could like a quote. This is where things started to get really rough.

The like feature alone took me over 2 weeks to get working. I dug through a ton of Stack Overflow posts, gists such as this one, and so much more, but the reason I struggled so much was because I had to learn about APIs, HTTP request methods and statuses, proper JSON responses, along with integrating this all with MongoDB. I almost gave up here a few times, but I kept going. I must have googled hundreds of things, such as "MongoDB check for duplicate", "How to POST and GET data", "HTTP status codes", and so much more. The 4 best tools that helped me finally figure everything out were

Stack Overflow
Github
reqbin.com for testing my APIs
Digging through other people's Next.js projects

But finally, 2 weeks later and 90 lines of code that had been constantly revised, I had a working like button. I found that using the npm package next-connect made this proccess a breeze for handling HTTP request methods.

After this, the learning curve finally reached its climax, and things weren't that bad. The application was still nowhere near finished, but I was a lot more familiar with the stack. Soon I began writing API's quickly, without even needing to use google! I began to memorize a lot of HTTP status codes as well, which was kinda fun. Soon after about another week of work the application was finally starting to come together!

To sum things up, here's some things that I did to finally finish my application.

Refactor and rewrite all my API's to use next-connect
Add a MongoDB collection and API to store user data
Add a tooltip to display who liked/disliked a post
Add dynamic routing for each user
Add an admin system to add quotes directly from the application
Added a ratelimit (after having a friend completely spam requests and break the database)

And of course there was some nice frontend things to do too, such as

Making the application responsive and
Adding nice animations

But all in all, I'm quite proud of what I built. It was so nice to see that my application finally came into fruition, and I'm super thankful for what I could learn along the way. I definitely want to use Next.js and MongoDB sometime in the future as well; I really like that stack! So finally thanks for reading, and happy coding!

Creating an Indie Game -- Week 2

Samuel Collier — Mon, 24 Oct 2022 02:22:26 +0000

Hello!

I'm back for the second update of making an Indie Game. If you're just joining us, here was the post for week one: Creating an Indie Game -- Week 1

Here's an overview of what I did over the week:

Expanded the map a bit
Tweaked the rendering of the map in order to prepare for the bigger world I'll soon be drafting
Created two tree sprites (a regular tree and a tall tree)
Imported the trees into the game and added falling leaves.
Refactored a lot of code
Added a basic interaction system

Here's some screenshots!!

This week was quite busy, so I didn't get as much done as possible. However, I hope to keep chipping away at this project, even if I don't get much done. Stay tuned for week 3, and follow me so you don't miss it!

Samuel CollierFollow

Student who enjoys the liberal arts along with web && game development

Creating an Indie Game -- Week 1

Samuel Collier — Mon, 17 Oct 2022 02:32:22 +0000

Hello!

This is week one of making an indie game. The style is a 2D pixel art platformer. I'm not going to reveal much yet, but I'm hoping to have 3 stages, with the first stage being a grassy/forest environment, the second being in the caves, and the third being some sort of magma/mordor type environment.

So far I've made some tilesets for the game (I'm really trying to get better at pixel art during this time), added it into the game, added player physics, colliders to the blocks, and a dark shrine with a nice animation (this will come into play later).

Here are some screenshots of what I accomplished in a little under a week.

I still need to add more art, a player sprite, a background, and some post processing/lighting for the scene to look better. However, I'll hopefully be posting weekly updates on my development so follow me to stay tuned for that! I'm looking forward to sharing my progress!

Samuel CollierFollow

Student who enjoys the liberal arts along with web && game development

Pepper Valley: A Game Made for Kajam! 2022

Samuel Collier — Sun, 03 Jul 2022 16:07:48 +0000

This week, I participated in the second annual Kajam!, a game jam hosted by Replit. The theme was "Spicy", and what nearly immediately came to mind was a farming game, like Stardew Valley, where you can grow different varieties of peppers and progress through farming levels.

I made the game in JS with p5.js, with the style being 2D top-down pixel art. Since, I was on vacation during the jam, I couldn't dedicate much time to the project, so I kept a decently small scope, and didn't create my own music. Otherwise, all the programming and art was done by me.

Here's the link to the game: https://kajam-2022-pepper-valley.stcollier.repl.co/
Note that it only works on a computer, it's not at all mobile friendly.

I also made a quick trailer for the game: https://www.youtube.com/watch?v=L20mmdMsjsA

Hope you enjoy!

Cleo -- A Simple Game Made in 1 Week

Samuel Collier — Sat, 07 May 2022 01:01:48 +0000

Hey everyone,

A short while ago I created a game called Cleo. I really enjoyed making it, and I created it with the p5.js library in Javascript.

If you didn't know, p5.js is a Javascript library that makes it a bit easier for drawing graphics to the canvas. Besides this, I pretty much had to program my own player controller, player physics (like collisions), scenes, and more!

I created all the art, music, and code for the project (although I did use some code as a base for project, e.g., for the cool glow effect.)

The goal is to get through all 25 buildings to the end and not get lost behind the camera.

You can play the game here: https://cleo.stcollier.repl.co/
If you would like to see the source code, here's the link: https://replit.com/@STCollier/Cleo-GAME?v=1#main

I hope you enjoy the game!

Easy Start with SDL2

Samuel Collier — Mon, 11 Apr 2022 15:24:30 +0000

Getting setup with SDL2 can be quite difficult. Getting the editor setup is easy enough, but what is the best way to create a window? How should we handle input? How do we compile it?

However, in an attempt to help, I've created this Github repository to easily set up a SDL2 project with a window, user input, and compilation already done.

You can find the repository here.

The code is pretty self explanatory, but I'll go over a few things. Firstly, all the main components of the window are located in a struct called Game. (This struct is located in the global scope, but you can change that if you like, and pass Game* game as a parameters to the functions.)

With this struct, to access the window, just type game.window, or to access the renderer, just type game.renderer. (If struct is not global, do game->window, etc.)

Notice that there are also two functions, initialize() and handle_input(). initialize() just creates a window and sets up the renderer; handle_input(), however, allows you to easily check user input, by typing a conditional like so:

if (game.input[**SDL_SCANCODE_KEY**]) {
    //Do something
}

I created another article explaining this in more detail here.

Finally, to compile (with linux), make sure you have the GCC compiler installed, go to the project directory, type cd build (to get into the build directory), and type sh run.sh. The compile commands are already set up in the SH file. The result should look something like this:

If you have some trouble setting this up, I have a visual example (no audio) linked here.

Anyways, I hoped you enjoyed this quick overview and find the repository useful. Happy coding!!

Easy and Clean SDL2 Keypress Setup (with C)

Samuel Collier — Wed, 16 Feb 2022 20:16:05 +0000

Today, I'll show you a way to easily manage keypresses with SDL2 and C. Setting up keypresses can get pretty messy sometimes, with code cluttered with a multitude of if/else if/else statements or switch statements, like this:

However, there's a much easier way of checking for keypresses, and this is how you do it. First, let's setup a basic C project. Create a file called main.c and put these three headers at the top:



#include <stdio.h>
#include <stdbool.h>
#include <SDL2/SDL.h>

Next, create the classic int main function, like so:



int main() {

    return 0;
}

Next, let's set up a typedef struct called "Game." Inside it, we'll put an array labeled input, like so:



typedef struct {
    int input[256];
}, Game;

Game game = {
    .input = {}
};

Next, let's create a function called handle_input. We'll prototype it at the top like so



void handle_input();

and declare it below int main():



void handle_input() {

}

Inside of this function, we can put the SDL_Event structure, labeled event, like so:



void handle_input() {
   SDL_Event event;
}

Now, we can check if the key is being pressed or released, with these two conditionals, utilizing the array that we created earlier:



void handle_input() {
   SDL_Event event;

   if (event.type == SDL_KEYDOWN) {
       game.input[event.key.keysym.scancode] = true;
       //printf("Keydown");
   }
   if (event.type == SDL_KEYUP) {
       game.input[event.key.keysym.scancode] = false;
       //printf("Keyup");
   }
}

The code above will check if a key is down. If so, the game.input array will be assigned true, and if the key is up, then the game.input array will be assigned false. Inside the array, we've put event.key.keysym.scancode, which allows us to check any SDL_key we want.

So, now that the handle_input function is done, we can test this out. Call handle_input() in the int main() function. Now, all we need to do to check if a key is pressed, say the "R" key, is do this, within the int main() or any other function:



if (game.input[SDL_SCANCODE_R]) {
    //Do something!
}

That's it! It's so much neater and cleaner, and with this approach we can check any key we want without creating an if statement or a switch statement for every single key we want to use.

Please note: the code will not work by itself, you may setup an SDL2 window to test it out.

Thanks for reading, and happy coding!!

Make A Simple Voice Assistant with JavaScript

Samuel Collier — Fri, 11 Feb 2022 16:19:06 +0000

Hey everyone!

Ever since I started programming, for some reason, I always thought it would be so cool to program my very own voice assistant. As it turns out, it's not that hard, and I'll show you how to very easily create one!

Disclaimer: the browser compatibility for this project has only been tested on Chrome, so there may be some compatibility issues on other browsers and mobile devices.

Okay, so first, let's start with a basic setup of our project. Let's create 3 files, index.html, style.css, and script.js. If you're using Replit for this project, which I highly recommend, these three files should already be created with the HTML/CSS/JS template.

The style.css and script.js file should be empty for now, but put this HTML snippet in the HTML file if it's not there already:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Voice Assistant</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <script src="script.js"></script>

  </body>
</html>

Next, let's setup the frontend elements we need for this voice assistant. Since a voice assistant is mainly backend JS, we won't need much. We'll only need 3 elements:

A button for the user to click to have the voice assistant start listening, with an id of "listen-button." When the user clicks on the button, we will call the function listen(), which we have not defined yet, but I'll talk about that later.
An input area to display the speech-to-text text that we are speaking, with an id of "input-area"
An output area to display the result of the voice assistant, with an id of "output-area"

We'll put all 3 of these elements inside a div, and the finished HTML file should look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Voice Assistant</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <div id="main-container">
        <p id="input-area">...</p>
        <p id="output-area">...</p>
        <button id="listen-button" onclick="listen()">Listen</button>
    </div>

    <script src="script.js"></script>

  </body>
</html>

Since the items are a little jumbled together with no styling, let's just put this basic piece of the code in the CSS file:

#main-container {
  text-align: center;
  border: 1px solid black;
  padding: 1em;
}

This should be your result so far:

I get that the page still looks trashy without proper CSS styling, but I'm not going to get into that in this tutorial, I'm sure there are plenty of CSS tutorials out there if you would like to make your voice assistant look better.

Now that the HTML is out of the way, let's get into the fun stuff: actually making the voice assistant work.

The first part of the voice assistant that we need is some way to get the computer to listen to us, receive microphone input, then turn that speech into text. This would normally be very complicated, but thankfully, we have an API (Application Programming Interface) that can do this very easily for us, called the Web Speech API.

So, to use this, let's first create a function in the script.js file, that we can call listen(). We'll call this function when the user clicks the Listen button that we created earlier in the HTML.

function listen() {

}

Inside of that function, we'll create an easy way to access our HTML elements:

function listen() {
    let inputArea = document.getElementById('input-area')
    let outputArea = document.getElementById('output-area')
}

And setup our speech recogntion:

function listen() {
    let inputArea = document.getElementById('input-area')
    let outputArea = document.getElementById('output-area')

    var recognition = new webkitSpeechRecognition();
    recognition.lang = "en-GB";
    recognition.start();
}

Then, we will check for a result, and when the recognition gets a result, we'll store that data inside a variable called transcript and then display that data to the inputArea that we created in the HTML.

Here's what that would look like:

function listen() {
  let inputArea = document.getElementById('input-area')
  let outputArea = document.getElementById('output-area')

  var recognition = new webkitSpeechRecognition();
  recognition.lang = "en-GB";
  recognition.start();

  recognition.onresult = function(event) {
    let transcript = event.results[0][0].transcript;
    inputArea.innerHTML = event.results[0][0].transcript;
  }
}

Now, let's run this program and see what happens. But please note: the program will not run properly in an iframe or something other that's not a browser window. The API needs to access your microphone through the browser, so please open it in a new tab.

Okay, so here's what should happen if you did everything correctly:

If you open project in a new tab and click the "Listen" button, you should get this prompt:

Click "Allow," and then try speaking! Say "Hello!"
The program should display the result like so:

Awesome! The program can show what we're saying on the screen! However, this is only half of the voice assistant. The voice assistant should take the information of what we said and then do something: reply to us, give us information, etc.

This is very easy to add! Since we have the text stored in the transcript variable, let's just create a simple if statement, let's say, to check if we said "hello," like this:

if (transcript == "hello") {
    outputArea.innerHTML = "Hello, User!"
}

Now, we can place that code right here, in the the recognition.onresult function:

  recognition.onresult = function(event) {
    let transcript = event.results[0][0].transcript;
    if (transcript == "hello") {
      outputArea.innerHTML = "Hello, User!"
    }
    inputArea.innerHTML = event.results[0][0].transcript;
  }

So, now if we say "hello," the program should output "Hello, User!"

This is great, but what if someone said, "Hello voice assistant," or something that included the word "hello"? Our voice assistant wouldn't understand, becuase it's only programmed to respond if the user says only "hello." However, JavaScript has a handy function called includes() that can check if a variable includes something. Thus, instead, we can do this:

 if (transcript.includes("hello")) {
      outputArea.innerHTML = "Hello, User!"
 }

Now, if the user says something that includes the word "hello," the program will output "Hello, User!" Great, right?

Now, with what we've learned so far, let's create two more conditionals: one to give us the weather, and another one to alert us if the program doesn't know what we're trying to say, because currently, the program just does nothing if it doesn't know what we're saying.

For the weather conditional, we'll use an else if statement below the if statement, to open a weather website if the user wants the weather. We can do that like so:

if (transcript.includes("hello")) {
     outputArea.innerHTML = "Hello, User!"
} else if (transcript.includes("weather")) {
    window.open("https://www.google.com/search?q=weather") 
} else {
    outputArea.innerHTML = "I don't know what you mean."
}

This voice assistant is really coming along! However, I'm going to end the tutorial here. There's still a lot of things you can do, though. Here's a list of features you can add!

Add more conditionals so that the voice assistant can do more!
Add better CSS styling!
Add randomized responses, by storing an array of responses, and getting a random element from them (https://stackoverflow.com/questions/4550505/getting-a-random-value-from-a-javascript-array)
Turn this into a real voice assistant by having the program respond with a synthesis voice with another API, like this one: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis

Thanks for reading this tutorial, and I hope you learned something! Happy Coding!!