Cheshire Codes

2023 Year in Review: Favorite Programming Projects

Sat, 06 Jan 2024 20:19:11 +0000

Happy New Year! Looking back at 2023, I did a lot of programming projects but didn't keep up with this blog as I hoped. I thought now would be a good time to do a post looking at some of my favorite projects I did in 2023 that I haven't posted about yet. In no particular order... ## TUI Music Player in Golang

This little command-line music player will play all songs in the given directory, or in the current directory if none is given. It has options for repeat and shuffle, as well as skipping back and forth through the songs. It uses beep/faiface to play audio and charm.sh for the TUI. [Find the source code here!](https://github.com/cheryllium/music-player) ## Dice-rolling Discord bot

Named **Dicemancer**, this little bot can parse expressions containing dice notation, displaying the results of each roll with special emoji for critical rolls. It also supports creating macros for common rolls. The bot's source code, along with instructions for adding it to your Discord server, can be found [here](https://github.com/cheryllium/diceroll). ## Easy HTML/CSS Tutorial More a writing project than a coding project, this tutorial was actually several years in the making! It's geared towards absolute beginners with the goal of making HTML/CSS as approachable as possible. I wanted to make a tutorial for people who get overwhelmed with other tutorials. It's also a very hands-on tutorial, as I believe the best way to learn to code is by trying things out and seeing for yourself what happens! Check it out here: [https://easyhtmlcss.com/](https://easyhtmlcss.com) ## Crazy Key Suggester

My roommate and I were discussing theoretical keys one day, which lead to the idea for this mini joke project. A theoretical key is a musical key with at least one double-flat or double-sharp. I thought the concept could be extended to an arbitrary number and sharps or flats... so [Key Suggester](https://key-suggester.netlify.app/) was made. ## Red-Blue 3D Pong I was at one point in the year given a gift of red-blue 3D glasses, and was excited to discover that someone made an anaglyph library for P5! It was a lot of fun to put on my glasses and play this simple game. [Check out the source code here.](https://github.com/cheryllium/3d-pong) To play the game, simply download the code, run a local server (`python -m http.server`) and open the HTML file.

Using the Function Call Feature of ChatGPT API in Node.js

Sat, 29 Jul 2023 16:29:54 +0000

I just finished prototyping a project that uses the ChatGPT API, and I used its function call feature to streamline my code. However, I didn't find much online about how to use this feature with the NodeJS openai library, so I thought I'd do a write up on that here. The function call feature allows you to describe a function to ChatGPT, and get a JSON string in return with arguments which you can then use to call that function. Note that ChatGPT will not actually call the function itself as part of this API - instead it returns JSON which you need to then parse, validate, and then use to call the function yourself later in your code. ## The basics This tutorial assumes you've set up your configuration already, which will look something like this: ```javascript const { Configuration, OpenAIApi } = require('openai') const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY, }) const openai = new OpenAIApi(configuration) ``` Now, you have an `openai` object which you can use to make the API calls. Now, to make an API call, you'll be making a call to `createChatCompletion()` which looks something like this: ```javascript const completion = await openai.createChatCompletion({ model: 'gpt-3.5-turbo', messages: [ { role: 'user', content: `Grade the following homework answer with a grade from 0 to 100. Add some comments on the student's work. Homework question: ${question} Homework answer: ${answer}` } ], functions: [ // ... your functions will be described here! ] }) ``` First, you'll specify the model, and then you'll specify the messages you want to send to ChatGPT. You can give it some instructions in this message about the function you want it to call. This tutorial will focus on the function part, so I won't go into further detail about the rest here. For this simple example, imagine we are asking ChatGPT to act as a grader for a homework question and answer given by a student. We'll ask it to grade the assignment, and then return JSON that can be used to call the following function: ``` const gradeAssignment = (grade, comments) => { // ... code that processes the grade and comments } ``` ## Describing functions The next item, `functions`, should be an array where each element is an object describing a function that can be called. First, the object will contain a `name` and `description` of the function: ```javascript functions: [ { name: "gradeAssignment", description: "Grades the homework assignment", parameters: { 'type': 'object', 'properties': { // ... } } } ] ``` The third item, `parameters`, is an object that describes what inputs the function takes. Function parameters are described using [JSON Schema](https://json-schema.org/understanding-json-schema/), and the top level must be type "object". One way to think about it is that the Schema describes an object whose properties are the function inputs. Our `gradeAssignment()` function takes two inputs, an integer `grade`, and a string `comments`. We use the JSON Schema Reference in the link above to find out how to represent these types. We list them under `properties` like this: ``` 'properties': { 'grade': { 'type': 'integer', 'description': 'The grade for the assignment, between 0 and 100' }, 'comments': { 'type': 'string', 'description': 'Additional comments on the student work' } } ``` Our full code will now look like this: ```javascript const completion = await openai.createChatCompletion({ model: 'gpt-3.5-turbo', messages: [ { role: 'user', content: `Grade the following homework answer with a grade from 0 to 100. Add some comments on the student's work. Homework question: ${question} Homework answer: ${answer}` } ], functions: [ { name: "gradeAssignment", description: "Grades the homework assignment", parameters: { 'type': 'object', 'properties': { 'grade': { 'type': 'integer', 'description': 'The grade for the assignment, between 0 and 100' }, 'comments': { 'type': 'string', 'description': 'Additional comments on the student work' } } } } ] }) ``` As you can see, it gets very nested, but hopefully you can understand it since we've broken it down step by step. ## Getting the response The code above asynchronously calls the API and gets the result in the variable `completion`. Now, it's relatively simple to use this result. (The OpenAI API Reference describes the structure of the result you will get [here](https://platform.openai.com/docs/api-reference/making-requests), but that doesn't contain a function calling example. The function calling result is described by the code example [here](https://platform.openai.com/docs/guides/gpt/function-calling). This is a bit hard to understand, so I'll just explain what you need to do.) First, get the completion response: ``` const completionResponse = completion.data.choices[0].message ``` Now, if `completionResponse.function_call` exists, then that means ChatGPT wanted to call a function. `completionResponse.function_call.arguments` will give you the arguments as a JSON string, which you'll want to parse using `JSON.parse()`. ``` if(completionResponse.function_call) { const arguments = JSON.parse(completionResponse.function_call.arguments) } ``` Now, you can call the function like this: ``` gradeAssignment(arguments.grade, arguments.comments) ``` And that's it! ## Further notes ### Multiple functions You can also give ChatGPT multiple functions to choose from. As mentioned above, `functions` in your request is an array describing all of the functions we can call. Additional functions will be described the same way, and simply added to this array. When parsing the response, `completionResponse.function_call.name` will give you the name of the function it wants to call. ### Using without calling a function As you may have figured out, this API feature can also be used to get a response from ChatGPT in an easy JSON format. You can use its returned JSON for anything - the function you describe to it does not actually have to exist in your code.

Mini Docker Gripe

Mon, 10 Apr 2023 02:44:16 +0000

This has happened to me so many times, I'm writing a blog post just to vent about it. Today, [BLOG FROG's CI](https://gitlab.com/cheryllium/blog-frog/-/jobs) failed after I pushed an update. However, it wasn't due to the new code I pushed. To explain what happened, I'll have to give a brief background. The first step in BLOG FROG's CI is to build its docker image. BLOG FROG's Dockerfile does this in two steps: 1. Using the **Composer 2.4** docker image, install dependencies. 2. Build BLOG FROG's image from the **PHP 8.1 with Apache** image, copying dependencies from the previous step. The CI was failing on the first of these steps: installing dependencies with Composer 2.4. Looking more closely, one of the dependencies was giving this error: ``` nette/schema v1.2.2 requires php >=7.1 <8.2 -> your php version (8.2.4) does not satisfy that requirement. ``` Apparently, at some point, the `composer:2.4` image updated to use PHP version 8.2 instead of 8.1, and this was causing a problem with my dependencies. Looking at the Dockerfile for `composer:2.4` confirmed that it's built off of `php:8-alpine`, which must have updated its version in the time between now and the last BLOG FROG update. This is not the first time I've had CI fail because of a base docker image changing software versions from under my feet. It's one of the gripes I have with docker, or more technically, how docker is used. It's for this reason that I think building your images off of `:latest` is an antipattern; if you do so, you risk things breaking when the version updates unexpectedly. This is why I try to pin my docker images to specific versions. However, in this case, pinning to a specific Composer version still introduced the same bug. My error was not pinning to **the specific PHP version I needed.** I should have realized that the Composer image would be pinned to PHP latest. To fix the issue, I copied the `composer:2.4` Dockerfile contents into my build step and changed the first line so that it builds from `php8.1-alpine` specifically. This fixed the issue and should hopefully prevent any more unexpected version mismatches moving forward.

Making a Simple Fantasy Desktop with No JavaScript

Sun, 09 Apr 2023 17:10:10 +0000

` elements remain aligned inside of `#taskbar` at the bottom of the screen, and the `.window` elements can be positioned freely within `#os`. Each "window" is simply another `

` element. I positioned the windows according to what I felt looked nice and well utilized the space. Sure, they don't have close buttons and you can't drag and drop them, but I still got pretty far forgoing JS! ## Radio Button Tabs One of my windows is a fake web browser - there's no URL bar, but there will be tabs where it can load a couple external web pages, including this blog. I used radio buttons to mimic the functionality of browser tabs. There were three parts to this: 1. The radio buttons (`` elements) 2. The radio button labels (`` elements) 3. The actual tabs (`.tab` elements containing the iframes) The key is that all of these must be siblings, so that we can write CSS for the selected tab using `input:checked ~ .tab`. (The `~` here means "a sibling of" in CSS.) Once this structure is in place, I added CSS to hide the radio buttons (we only want to see their labels), position the tabs on top of each other, hide tabs by default, and unhide the selected tab. With that, tabbing functionality was in place. The rest was just a little styling and polish to make it look good. ## The Clock I wanted to add a clock to the right-hand corner of the page just like a real desktop, but without using `setInterval()` or any JS. To do this, I created a `time.php` page containing a meta tag to auto-refresh on the minute. The following meta tag will cause a page to refresh itself every 30 seconds. The number of seconds to wait is determined by the `content` attribute. ```html ``` To make it refresh on the minute, I used PHP to calculate how many seconds are left until the next minute, and use this for the `content` attribute. ```html ``` Then, I simply write out the time on the actual page. ```php ``` Finally, I loaded `time.php` inside an iFrame in the "taskbar" on the actual home page. The contents of the iFrame refresh on the minute, forming a dynamic clock! You can see the finished version, with all of its other bells and whistles, at [cheshire.gay](https://cheshire.gay). ## AI Note As an aside, **cheshire.gay** was one of my first projects where I used AI in its creation: - Stable Diffusion generated the background images for all of the themes except for the Webmaster theme. - ChatGPT generated all of the code for the guestbook page, including code for a secret admin page where I can delete guestbook entries. - I also used ChatGPT throughout as a Google alternative for general coding questions, or when I didn't feel like consulting documentation. It's really cool how AI can help you code and create, and I'm excited to see how the future with AI will look as a developer.]]>

Disable Foreign Key Constraint Checks in MySQL DB

Wed, 29 Mar 2023 16:15:07 +0000

This is usually a terrible idea, but sometimes you want to do it. For example, say you want to just purge a lot of data without worrying about foreign key constraints, because the table restricting your delete is also going to be purged. You can disable foreign key checks with the following command: ``` SET foreign_key_checks = 0; ``` Once you are done, be sure to re-enable them: ``` SET foreign_key_checks = 1; ```

LESS Can't Use Hex Codes with Opacity

Thu, 09 Mar 2023 15:50:15 +0000

I recently wrote this line of CSS inside of a `.less` file.... ```css background: linear-gradient(#fff0, #fff); ``` ...after first trying it out inside the browser inspector, where it worked as expected, rendering a gradient background from transparent fading into white. However, it did not work correctly after compiling the LESS file. It looks like it was getting compiled to: ```css background: linear-gradient(#ffffff 0, #ffffff); ``` Even writing `#ffffff00` would cause LESS to compile it to the less helpful `#ffffff 0`, which is... interesting. I ended up having to use `rgba()` as a workaround. ```css background: linear-gradient(rgba(0,0,0,0), #fff); ``` That worked.

Coding a Chaos Game Simulation to Generate Rainbow Fractals

Tue, 08 Nov 2022 06:28:42 +0000

The chaos game is a neat way of generating fractals with just a polygon and a point - and a smattering of random chance. To play the game, first you start with polygon and a random initial point somewhere inside of that polygon. Then: 1. Pick a random **vertex** on the polygon. 1. Draw a point that is *some fraction* of the way in between your random point and the vertex you picked. 1. Repeat the steps, but now using the new point you just drew. It turns out that if you repeat these steps over and over again, it will **sometimes** generate a fractal! Whether you get a fractal or not, and what that fractal looks like, depends on how many sides the polygon has as well as what *fraction* you chose. Let's use **n** to refer to the number of sides in our polygon (making it an *n*-gon), and **r** to refer to the fraction we'll use to pick each point. Technically, you can play this game with a paper, pencil, ruler, and die... but we are living in **the future** and can now make computers do it instead. So without further ado, let's dive in to the simulation. [Just want to play? Click here to skip the text and jump to the simulation.](#interactive-chaos-section) ## Playing the chaos game with JavaScript To simulate this game, I used a JavaScript library called [p5.js](https://github.com/processing/p5.js/wiki/p5.js-overview) that gives us a simple framework for drawing graphics on an HTML canvas. However, I will focus more on the chaos game implementation in this blog post than on the specifics of p5.js. I find p5's functions are descriptively named, so it should still be easy enough to follow my source code. But if you'd like to learn more about p5, their official tutorials are a great place to start. ### Generating the vertices The first step in the game is to figure out the coordinates of our polygon's vertices. A polygon with **n** sides will have **n** vertices. To calculate them, we'll imagine these vertices as points evenly spaced around a circle. We'll use a bit of **trigonometry** to calculate the **x** and **y** coordinates of these points. Usually when traversing a circle, we start with the rightmost point and travel counter-clockwise. We can use **θ** (theta) to refer to the angle we've traveled from the starting point. If the center of the circle is the origin (0, 0), then point on it at angle **θ** will have the coordinates **(r \* cos(θ), r \* sin(θ))**, where **r** is the radius of the circle. There are 2π radians in a circle, so if the polygon has **n** vertices, then each one will be spaced **2π/n** radians apart. So we'll simply calculate points for where **θ** is a multiple of **2π/n**. For the radius, we can use half of the canvas size. Our pseudocode, so far, looks like this: ```js theta = 0; dTheta = TWO_PI / n; for(i from 0 to n) { vertex = { x: (canvasSize / 2) * cos(theta), y: (canvasSize / 2) * sin(theta), }; drawPoint(vertex); theta += dTheta; } ``` Two more notes: 1. The calculation above assumes the circle is centered at (0, 0). But (0, 0) is actually the top left of the canvas, and our circle's real center is **(canvasSize / 2, canvasSize / 2)**. So we simply add **canvasSize / 2** to our calculations to translate the points. 1. In p5's coordinate system, y-values increase downwards. Since our calculation is for a coordinate system where y-values increase upwards, we'll simply subtract our calculated value from the canvas height to get the correct coordinate. Our calculations now look like this: ```js x: (canvasSize / 2) + (canvasSize / 2) * cos(theta), y: canvasSize - ((canvasSize / 2) + (canvasSize / 2) * sin(theta)), ``` You can use the widget below to visualize this calculation around the circle.

There is one more thing. Polygons drawn this way come out looking sideways, since we are starting at the right and not the top. Swapping the sine and cosine (using sine for x and cosine for y) will cause us to start from the top of the circle and move clockwise instead, giving us an upright-looking polygon. You can check the "Swap sine and cosine" checkbox in the simulation above to see this in action. My final code (swapping sine and cosine) looks something like this: ```js vertices = []; dTheta = TWO_PI / n; for(let i = 0; i < n; i++) { vertex = { x: (canvasSize / 2) + (canvasSize / 2) * sin(theta), y: canvasSize - ((canvasSize / 2) + (canvasSize / 2) * cos(theta)), }; vertices.push(vertex); drawPoint(vertex); theta += dTheta; } ``` ### From point to point we go! To calculate the next point from the current one, I moved both the **x** and **y** values of the selected vertex some fraction of the distance between it and the chosen point: ```js nextPoint = { x: (currentPoint.x - randomVertex.x) * r + randomVertex.x, y: (currentPoint.y - randomVertex.y) * r + randomVertex.y, }; ``` Finally, just before I draw the point, I'll call `fill()` which sets the color that subsequent drawing operations will render with. ```js fill( nextPoint.x / canvasSize * 255, nextPoint.y / canvasSize * 255, 255 ); ``` `fill()` takes an HSB value, with each value being out of 255. Here, I've set the hue and saturation as percentages of 255 based on the point's location on the screen. This will produce a gorgeous rainbow gradient as the screen fills up. The final code excerpt looks like this: ```js randomVertex = vertices[Math.floor(Math.random() * vertices.length)]; nextPoint = { x: (currentPoint.x - randomVertex.x) * r + randomVertex.x, y: (currentPoint.y - randomVertex.y) * r + randomVertex.y, }; fill( nextPoint.x / canvasSize * 255, nextPoint.y / canvasSize * 255, 255 ); drawPoint(nextPoint); currentPoint = nextPoint; ``` ### The final simulation Now for the fun part! Here's the final simulation I ended up with. Try giving it different values of **n** and **r** and see what happens. Some values of **r** you might try could be 1/3, 1/5, 3/8. The default values in the simulation, **n=3** and **r=1/2**, produce the well-known **Sierpinski triangle**. See what else you can discover as you play around! ## Results When you play around with the chaos game - especially by changing just one of the variables (**r** or **n**) at a time - you'll notice some interesting patterns emerge. Below, you can see what happens as you **decrease** the value of **r** for **n=3**, **n=5**, and **n=7**. Click the button to run the simulations!

Cool, right? It's a gallery of rainbow snowflakes! I hope you enjoyed my blog post on an interesting way to generate fractals :)