Projects

Code Project – JavaScript Pixel Camera

Sometimes I do projects that end up being entirely fruitless and pointless.

Ok, maybe not entirely fruitless, but sometimes I get caught up in an idea, and end up essentially just sort of, reinventing the wheel, in a complicated way. For starters, I got caught up with this little tutorial here: https://thecodingtrain.com/challenges/166-image-to-ascii . It uses JavaScript, to convert the input from your webcam, into ASCII art. It’s a nice little step by step process that really explains what is going on along the way so you get a good understanding of the process.

And I got it to work out just fine. I may mess with it and add the darkness saturation back in because it helps bring emphasis to the video but the finished product is neat.

I then decided I wanted to see if I could modify the code to do some different things.

Specifically, Instead of ASCII characters, I wanted it to show colored blocks, pixels if you will. I managed to modify the code, and the output is indeed a pixilated video, but it’s not video, it’s constantly refreshing text. The problem is, it’s writing out a page where every block, is wrapped in a <font> styling tag, which means it’s writing out a ton of extremely dense HTML code and pushing it out, so it’s a little weird and laggy and pretty resource intensive to run.

I also image, there is a way to simply, downsize the input resolution, and upscale the video, to achieve the exact same effect.

One variant I made also just converts images to single page documents of “pixels”. but, ugly font based pixels, to achieve an effect you can get by resizing an image small then large.

Like I said, kind of fruitless and pointless, but I got caught up in the learning and coding part of things.

I also may go ahead and do some additional modifications to the code to make things a bit more interesting. I could try using it to make my own Game Boy Camera style interface, for example. Then make it output actual savable pictures. I found a similar project to that online but it would be cool to code my own up and give it an actual interface.

Anyway, here is the code for the jankey video JavaScript, sketch.js first then index.html after. Also a Demo is here, though I may remove it int he long run, especially if I make an improve project.

let video;
let asciiDiv;

function setup() {
  noCanvas();
  video = createCapture(VIDEO);
  video.size(48, 48);
  asciiDiv = createDiv();
}

function draw() {
  video.loadPixels();
  let asciiImage = '';
  for (let j=0; j < video.height; j++) {
     for (let i = 0; i <video.width; i++) {
      const pixelIndex = (i+j * video.width) * 4;
      const r = video.pixels[pixelIndex + 0];
      const g = video.pixels[pixelIndex + 1];
      const b = video.pixels[pixelIndex + 2];
      const pixelColor = "rgb(" + String(r) + "," + String(g) + "," + String(b) + ")";
       // console.log(pixelColor);
//      const c = '<font color=rgb('+r+','+g+','+b+')>'+asciiShades.charAt(charIndex)+'</font>';
      const c = '<span style="color: '+pixelColor+';">&#9724;</>';
      asciiImage += c;
    }
    asciiImage += "<br/>";

  }
  asciiDiv.html(asciiImage);

}

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

Various Activities of Late

It’s been a bit since I really just wrote out a regular blog post so I thought it would be prudent to do so, mostly just touching on some of the stuff I’ve been doing or thinking about recently. I’ll just break things up a bit into some sections, for easy skimming/ignoring.

Old Writing

Every so often, I get this weird bug to just delete all of my old posts and start fresh and the old content all sucks and blah blah blah. Then that never really works out as hoped and I kind of miss having all the old content hanging around and I drag some of it back. Well, I’m currently in the “Dragging it all back” stage of things. Part of this is also part of my ongoing organizing of all of the shit I’ve written over the years.

I tend to get frequent “Project ADHD”. By the end of this blog post, that will definitely be very clear, but every time I have started to organize all of my old writings, or I just start a new method without pulling in old stuff, I’ve left a blob of “to get to” files. This applies to things not JUST writing, but the writing is particularly bad. I’ve got some that only show up in my blog archive hosted internally on my network. I have some files buried in “to sort” folders on a storage blob somewhere. I have several different folders in my own personal archive sorted using different methods.

These span different formats from Text to WordPress DBs to Doc files to even some old files I couldn’t open (I’ll touch on this in a bit). I’ve been converting it all to the new format, which basically falls into two major categories. i am sure I have said it about previous organizing attempts, but THIS is the way.

This is decidedly the way going forward. It’s been the way I WANTED to do things for a while, I just, wasn’t motivated enough to do it. The two over arching categories essentially amount to “Journal Entries” and “Structured documents”. Sorted into my One Drive Documents (for backup) as Journal and Documents. The Documents is sorted down into Reviews, by topic (video games, toys, etc), Original Fiction, Fan Fiction, Essays, and School. I’ll get to the School bit in a later section. The others are a bit more self explanatory, but generally, these are “longer form structured writing”.

Journal is everything else. This post, is being written into Journal, in a file called “2023.03.22 – On Recent Activities.md”, though that may not end up being the blog post title. This is the way. Everything starts in the Journal, with a date in the filename, because file system dates are incredibly unreliable, and then gets posted elsewhere, sometimes.

Ok, not everything starts there. Some of the Journal Entry documents start as Joplin Notes from my phone, because I’m not near a PC. Or they start as Reddit comments that end up going on long that I want to keep a note of later, where they get copy/pasted into One note, and later turned into Journal files. But, it is the ultimate repository.

I’ve been diligently converting old files to this format. Part of why I don’t just stick everything in there is that reviews often contain images, and the simple file format requirement of Markdown makes images a pain. Yes, Markdown can do images, but it’s much simpler in a Word Document. The issue in the past was that could mean I can’t open those Word Documents anymore in the future, but keeping things in One Drive helps stop that from being a problem, since everything these days is connected, and I have confidence that Microsoft will keep my documents up to date.

School Documents and Old Documents

Which brings me to the school documents. And as I said, “Documents that can no longer be opened”. A lot of my super old documents from the 90s, are in a Microsoft Works format, WKS or WPS. Word can’t open these. Notepad can sort of open them but they don’t have a proper format to them at all.

So I’ve collected these files up and spun up a Windows XP Virtual Machine. Thanks to Archive,org, I can get a copy of Microsoft Works from the 90s. I wanted to go really pure on the experience and run a Windows 98 VM, but I couldn’t get it to recognize the CD drive ISO to install Works, so Windows XP it was.

Fortunately, Works can save out .DOC files. They are Word 97 Doc files, and modern Word throws up a warning about them, but it can open them, and they are properly formatted, so that’s the goal. I also snagged an old copy of Microsoft Publisher from archive.org, to do the same with some ancient Publisher files. The modern Publisher Reader available online literally says “These files are too old and can’t be opened” when I tried that route. I also had some old CAD files, though those were able to be opened by the modern Autodesk Viewer. I kept the files, but I also did a bunch of print screens on each one to preserve them in an easier to view format.

I don’t really know why I need all of these old files, but file storage is cheap and they don’t take up a lot of space.

Lameazoid Rebuild

I started off with this as the first topic but rambled off into other areas, so I’ve moved it down here. As part of my organizing, I’ve been republishing, with, approximate original dates, a LOT of old content to Lameazoid.com. I pushed up like 100 old Video Game reviews. I have a few more movie and book write ups I’ve done on deck to do next. I am going to dig into old Toy content next, but I think there is less of that missing than other content.

Some of them are kind of trash they are so old, but honestly, despite calling them “reviews”, they are more just a “write up and record of my thoughts on whatever”. They are just, “Fancy journal entries with pictures”.

It’s all mostly for my reference.

Also, several of them are literal jokes. The Zero Wing review is written entirely in “broken English” like the Zero Wing game uses. I actually scrapped it, but I wrote a review of Morrowind once that was actually just bitching about how shitty the game’s performance was and all of the images were from Counter Strike, not Morrowind. Several are just an excuse to throw a bunch of funny screenshots on a webpage surrounded by text.

Things I WANT to Do

I also have a small list of things I want to do, that I’ve been mostly just, collecting resources for these potential projects. I’ve been increasingly looking into building some sort of simple games. Specifically, games for the NES or PICO-8. Throwing back to my “archive all the old things” writing above, I once made a Breakout Clone in Pico 8 on one my my CHIP computers but I can’t find it anywhere. And yes, I checked on the CHIP boards. It may still just be buried somewhere, I’ve actually found at least one large document project I had started on while sorting old files.

I also really want to do some Solo RPGs. This has been a bit of a growing trend I think online, or maybe I am just seeing it more since I gained some interest in it. A lot of these seem to amount to “Dice based story writing”, which is fine. I’ve actually done one or two of them, though a least one I decided was not for me and archived it off. I have a huge pile of Solo RPGs available through some ITCH.io bundles I’ve bought. I actually plan to blog about these once I do some that seem worth blogging about.

Things I Want to Do…. But I’m Not Doing Them

Just for the sake of throwing it out there, I also have other things I WANT to do that I have not been doing at all. I have a nice sketchbook that’s been sitting on a shelf nearby collecting dust because I really want to start drawing again. I used to draw a LOT but I have not at all, in years.

I still really want to learn to play the Piano, which I sort of started doing back in 2020 for a few months. But since then, the keyboard has just say dormant, next to my PC, as a silent reminder that I should be learning to play it.

I also still want to start cycling. I really need some sort of actual exercise outlet. I actually have an ok road bike I got a deal on at an auction, back in like, 2015 or something. I’ve ridden it like, twice, ever. I really need to get a proper helmet first. Which has been my excuse for not doing it. Another part of my hang up has always been that looking into online communities for cycling, it’s a group that is full of snobs, and that’s a huge fucking turn off. If you aren’t riding some $2000+ super bike then you’re completely wasting time and WILL get killed when it shatters into a zillion pieces after 3 rides. Like yo, you’re driving away anyone just trying to get into a new hobby.

Code Project: Automated List From Reddit Comments

This is one of those quick and kind of dirty projects I’ve been meaning to do for a while. Basically, I wanted a script that would scrape all of the top level comments from a Reddit post and push them out to a list. Most commonly, to use on /r/AskReddit style threads like, well, for this example, “What is a song from the 90s that young people should listen to.”

Basically, threads that ask for useful opinions on list. Sometimes it’s lists of websites or something. Often it’s music. The script here is made for music but could be adjusted for any thread. Here is the script, I’ll touch on it a bit in more detail after.

## Create an APP for Secrets here:
## https://www.reddit.com/prefs/apps

import praw

## Thread to scrape goes here, replace the one below
url = "https://www.reddit.com/r/Music/comments/10c4ki0/name_one_90s_song_kids_born_after_2000_should_add/"

## Fill in API Information here
reddit = praw.Reddit(
    client_id="",
    client_secret= "",
    user_agent= "script by u/", # Your Username, not really required though
    redirect_uri= "http://localhost:8080",
)


submission = reddit.submission(url=url)
submission.comments.replace_more(limit=0)
submission.comment_limit = 1

for x in submission.comments:
    with open("output.txt", mode="a", encoding="UTF-8") as file:
        if "-" in x.body:
            file.write(str(x.body)+"\n")
            # print(x.body)

The script uses praw, Python Reddit API Wrapper. A Library made for use in Python and the Reddit API. It requires free keys which can be gotten here: https://www.reddit.com/prefs/apps. Just create an app, the Client ID is a jumble of letters under the name, the secret is labeled. User Agent can be whatever really, but it’s meant to be informative.

The thread URL also needs filled in.

The script then pulls the thread data and pulls the top level comments.

I’m interested in text file lists mostly, though for the sake of music based lists, if I used Spotify, I might combine it with the Spotify Playlist maker from my 100 Days of Python course. Like I said before though, this script is made for pulling music suggestions, with this but of code:

        if "-" in x.body:
            file.write(str(x.body)+"\n")
            # print(x.body)

It’s simple, but if the comment contains a dash, as in “Taylor Swift – Shake it Off” or “ACDC – Back in Black”, it writes it to the file. Otherwise it discards it. There is a chance it means discarding some submissions, but this isn’t precision work so I’m OK with that to filter out the chaff. If I were looking for URLs or something, I might look for “http” in the comment. I could also eliminate the “if” statement and just have it write all the comments to a file.

100 Days of Python, Projects 66-70 #100DaysofCode

Whew, I didn’t really think I’d get to 9 parts in this series, and I am only around 2/3rds of the way through even.  I actually may change up the format later with the last 20 projects that are listed as “Professional”.  Maybe one post each.

The bulk of this round is wrapping up the Flask projects and building a simple blog that runs on Python.  It’s been fun.  I’ve been a bit busier than normal slow my pace has slowed, but that’s ok too.  Day 66 in particular felt like it took longer than it really should have, given how little it felt like it was doing.

Day 66 – Build RESTful APIs

Kind of a different sort of project.  It’s building something, but not really anything, with any sort of interface.  All of the interaction is done through Postman (or the URL if one wants), and the responses are all JSON of some sort.  

We built 6 API interfaces to work with a database of Coffee shops.

  • One returned all of the shops.
  • One returned all of them in a particular city.
  • One returned a specific shop only.
  • One updated the price of coffee.
  • One added a new Coffee Shop.
  • One deleted a Coffee Shop.

Including built in error handling for if a Coffee Shop didn’t exist etc.  It all feels like it could be useful later in the Blog Project.  Not too useful on it’s own accord.

Day 67 – Blog Capstone Project Part 3

Back to the Blog Project, and after this round it’s a LOT more Blog Like, though incredibly insecure.  The Security Part looks to be the subject of the next couple of lessons though, so it’s all good.  We basically started with the last Blog Project from Day 59, and added the ability to add, edit, and delete posts.  Also with a Database back end.

One tricky moment here.  The idea was to use the same form page for New Post and Edit Post.  Originally I had nested these together, and had some if/else cases to check if it was Editing or Adding, and kind of got stuck on how to handle the date, since the date doesn’t get changed on updates.

But then I had a bit of an epiphany moment, the kind you get often with coding, where you band against a problem, convinced it’s the way to solve things, only to realize there is an obvious, easy method.

I split them up.  No more if/else, and no more worrying about what the DB is doing at the end.  Because two separate @app.route and related functions, can route to the same HTML template (the Edit Form).  The only thing needed was to pass a header variable along to change the title.  

It was a total “Duuuuuuh” moment.

Anyway, no security though, because there are no users or security keys and anyone can just come in and post anything and delete anything and it would be total chaos as an actual production Blog platform.

Day 68 – Authentication with Flask

Oops, I spoiled what this topic was going to be in the last project write up.  This whole section is working with Authentication using a Database for persistence.  It’s a simple website, a home page, a user creation page, a log in page, and a secrets page.  Users can create an account, and once registered, they can access the Secrets page and download a PDF.  

Part of this exercise is also restricting access for not logged in users and another part is proper security and handling passwords with hashing and salting.

Of all of the projects so far, I feel like this may be one of the most important ones, despite it’s basic simplicity.  I’ve been planning to work out the best way to share some of the projects built so far, and using Flask was a good “first step”, but being security conscious, I would rather not throw a bunch of web based Flask pages up with no restrictions on access.  Like last session, there was the Library App or the Top Ten Movies page.  Sure, I could put them up on the web-server, map some sub domain to them, but anyone can edit them, without proper, persistent security and restricted access.  

Now, I can make that happen.  Plus, with the modulator of routing and such, I can easily slip them into parts of the overall Blog Project, in time.

Day 69 – Blog Capstone Project Part 4

And here it is, the culmination of the Python based Flask Blog.  It’s neat.  I like it, well, I like the basic functionality of it.  The layout is a bit plain but that’s fixed.  I doubt it ever replaces WordPress, I love WordPress, but I could definitely see uses for this finished product.  I may actually modify it to work as a sort of “Twitter Replacement” since Twitter is currently burning down.  Using what I have learned, I could easily set this up to take a post, then “Syndicate” it out via API calls to Twitter, Facebook, Mastodon, or anywhere.  While keeping my own archive of posts.

My current, next up To Do Items:

  • Create RSS Feed Page  
  • Create Admin Page  
  • Enable/Disable Comments for Posts  
  • Allow Admin to delete Comments  
  • Allow Users to delete their own comments  
  • Add Mailer.class and add email notifications  
  • Add Pagination to Home Page  
  • Add Tags and Category Options to Posts

Also, on a side note, this actually isn’t the first time I’ve built a “Blog Platform”. I built a basic one a few years ago in HTML and PHP. Heck, the system I used int he early 2000s with SHTML Pages was sort of a “Blog Platform”.

I’d recommend, for anyone going through this course, check the notes on the Blog courses.  There are a lot of good suggestions for improvements, especially in stopping things like Java Script injection in the comments.  When you go to Angela’s (The Instructor) Blog link, it immediately throws out a JavaScript pop up that someone dropped in the comments.

Day 70 – Hosting with Heroku

So, there isn’t really a Day 70 project.  I did go through the section, and the most useful part for me was the more robust SQL solution mentioned in the last section.  The first few parts were about GIT and Github, which I am already using.  The middle part was about using Heroku, which I have heard of and used a bit before but for the long term, I don’t need to use a freemium hosting service in a jankey way.  I have a VPS, and later I will figure out how to get Apache to play nice with Flask.

For now, I’ve split the Blog Project into it’s own repository and worked up my initial planned ToDo List.  But I need to keep my focus on the course for now.

FreshRSS and RSS Feed Posts

Keen observers (ha ha ha no one reads this), might have noticed that a few posts of links showed up in the feed.  These are basically, stories I read in my RSS reader that I found interesting, and wanted to share, or at least, keep track of.  The posts as of now are a little ugly, and I’ll probably clean up the formatting over time, but I wanted to go ahead and write a bit about the process.  I’ll have the Code on Github at some point.

As for the factors, firstly, this is something I’ve wanted to have on my blog for a while.  Like a long while.  I might even try to see if there are ways to better slit up the links by topic later.  A fair number of blogs I subscribe to have these sort of link digest posts, and I’ve always just liked the idea.  It’s also good for personal reference to when I may have read something.  It is limited as it only comes from y RSS Reader.

Speaking of my RSS Reader.  I’ve moved on from TinyTinyRSS, for a few reasons.  One, the interface is a little meh, honestly.  Maybe the newer version is better but it’s only available in Docker, and Docker is such a PItA to use.  Also, while looking for alternatives, it sounds like the folks who make TTRSS are kind of a bunch of gatekeeping jerk types, and I’d rather not support that.  I also find the need to keep the update daemon running with Screen to be a pain.  So I’ve moved over to FreshRSS, which I just run locally on a Raspberry Pi.  I may move it to a publicly accessibly machine at some point, but I am not entirely convinced that TT-RSS wasn’t the entry point for my previous server malware woes.

So, like TT-RSS, Fresh RSS has a way to get an RSS feed out of your Favorited posts.  In the past I’ve used tools like IFTTT to automate posting these links around, but I don’t use IFTTT anymore for reasons I’m not going into.  Fortunately, I’ve been working to become a pretty good Python coder for the last month or so.  So instead I wrote a script.  

It’s not even a particularly complicated script.  There are only two things it really needs to do, get new articles, and then post them to WordPress. Since the script runs locally, on the same Raspberry Pi even, it easily can reach and pull the RSS feed.  One nice thing I noticed with Fresh RSS, the feed included a time interval, so just getting new posts was super simple, because the interval is just “24” for “24 hours”.  The script eventually will run on a cronjob at the exact same time daily.  Anyway, after pulling the RSS, the entries are already in an easily usable Dictionary.  which gets fed into the construction of the WordPress Post.

def get_feed(feed_url):
    NewsFeed = feedparser.parse(feed_url)
    return NewsFeed

The posting part was pretty easy as well, WordPress has an API, and Python also has a library that can use that API.  It just needs some log in information and a post payload to send.  

def make_post(NewsFeed):
    wp = Client(f'https://{wp_url}/xmlrpc.php', wp_user, wp_pass)
    post = WordPressPost()
    post.title = f"{cur_date} - Link List"
    post.terms_names = {'category': ['Link List'], 'post_tag': ['links', 'FreshRSS']}
    post.content = f"<p>Blogging Intensifies Link List for {cur_date}</p>"
    for each in NewsFeed.entries:
        post.content += f'{each.published[5:-15].replace(" ", "-")} - <a href="{each.links[0].href}">{each.title}</a></p>'

The trickiest part was formatting the date a bit prettier.  I mentioned cleaning up the formatting a bit, I’m thinking maybe a simple invisible table, so the date and the links don’t wrap oddly like they do now.   i also added a check that if there are no new favorited posts, it will skip making a post.  Otherwise I’ll end up with empty posts on days I forget to check my feed reader

While writing the script, at first I was just outputting a text copy of the post to the console until satisfied.  Eventually, I pushed out a real post, then verified that things worked.  The next day, was just a straight test by opening the project, then running it again.  The third day, I copied the files and installed the lobraries needed, then posted from the Pi.  Phase 4 of this will be to set up Cron to run it automatically.  If that works then it will certainly, “just run” for the foreseeable future.