DEV Community: spenceryonce

Automate WEBP To PNG With A Simple .Bat File

spenceryonce — Mon, 29 Apr 2024 07:24:53 +0000

Automate Your Image Conversion with a Simple Batch Script

Managing different file formats efficiently is crucial in various development projects, from web development to organizing personal media. To streamline this task, I've developed a handy batch script that automates the conversion of WEBP images to PNG or PPM formats. This script was inspired by a discussion I came across on a GitHub Gist thread, highlighting the need for a reusable, effective solution.

Inspiration Behind This Tool

The idea for this script originated from a GitHub Gist conversation where developers shared their struggles with converting WEBP files using dwebp.exe. Most solutions were temporary fixes rather than sustainable ones. Reminded of the user-friendly philosophy behind my previous project, VSGraph, I set out to craft a tool that would handle batch conversions and clean up afterward efficiently.

What the Script Does

Using dwebp.exe from Google's WebP toolkit, this script efficiently converts WEBP images into PNG or PPM formats and offers an option to automatically delete the original files after conversion. It is designed to:

Detect and Convert Images Automatically: It locates all .webp files in the execution directory and converts them to the specified format.
Manage Clean-Up Effectively: After conversion, it can remove the original .webp files to save space and keep the directory tidy.

How to Use the Script

Setup

Download dwebp.exe: Download this executable from Google at WebP Download.
Prepare Your Script Environment: Place dwebp.exe in the same directory as your WEBP files or a globally accessible directory included in your system's PATH.

Using the Script

Create the Script: Write your own script using the guidelines below or download the full script from my GitHub Gist.
Run the Script: Navigate to your image directory in the command prompt and type convert_webp.bat for PNG output or convert_webp.bat -ppm for PPM output.

@echo off
setlocal

REM Convert all WEBP files to PNG or PPM and then delete the WEBP files
for %%f in (*.webp) do (
    echo Converting %%f...
    dwebp.exe "%%f" -o "%%~nf.png"
    if errorlevel 1 (
        echo Failed to convert %%f
    ) else (
        del "%%f"
        echo Deleted %%f
    )
)

echo Conversion complete.
pause

Get the Full Script

If you prefer not to build the script yourself or want to see the full implementation, you can find it on my GitHub Gist. Simply visit this link to view or download the complete script: Convert WEBP to PNG/PPM Batch Script.

How It Works

Like connecting nodes in VSGraph, this script uses simple loops and conditions to manage file conversions. It's designed to be accessible and easy to use, just like a visual shader graph editor.

What’s Next?

You tell me! This is fully open-source code and would love to see what the community does with it.

If you have suggestions for improvements or additional features, or if you've found creative ways to use this tool, please share your thoughts in the comments below!

VSGraph - A Visual Shader Graph Editor

spenceryonce — Tue, 27 Feb 2024 19:14:20 +0000

What I've Been Building

Over the past couple months, I've been working on a tool for creating shaders, but without writing code. It uses HTML canvas to render all the nodes, a node tree for managing the execution, and dynamically builds GLSL on the fly based on the way the nodes are connected up visually.

Here's a little preview of the canvas interface so you can get an idea of what I'm talking about.

Over on the left hand side, we have the what's called the 'Graph'. This is where you will make new nodes and edit existing node connections. It supports using 'Shift + A' for showing the Add panel, and allows for zooming in an out wherever the mouse currently is with the scroll wheel for easier reading and dragging of node's edges.

On the right hand ride, we have the 'Viewer' this is where all output nodes, output their data to. Shader isn't the only output node available, there is also a color, number, and historical numerical graph output nodes. Each of them outputs their respective data types neatly into the viewer.

Here's a little screenshot that shows you an example of using 3 different output types at once, to visual the data being produced by your graph.

I went through a ton of iterations on the style and exact way the nodes connected. Here's how the nodes used to look at the beginning.

These then progressed onto the below photo, adding colors to denote inputs and outputs. The colors at the point were still much to harsh to read, so I keep iterating.

Figured out that the input and output nodes would look much more readable with a lighter color, so I tried that too. Now we are getting something looking quite nice.

Now that the colors were decently readable as to not bother me, I moved on to implementing the Color output node. This one will take a vec3 node's output and display the color within the viewer for the user to inspect.

This was working quite well, so I starting adding a new type of nodes (Booleans). These were to be denoted with red node edge circles, and to go along with the theme, I made it so that all data type have their own distinct color on the node's edges so that the user doesn't have to guess which is which.

One of the last changes I made thus far, was changing the Input and Output node colors yet once again. I really liked the new colors. Made the whole thing 10x more readable with such a simple change.

How Does it Work?

In essence, each node is a simple JSON object, with some data describing it's name, inputs, outputs, an execute function that describe what operation takes place when the node should be executed (updated), and a glsl function that describes exactly what that node is translated to in GLSL. It uses a dynamically allocated id system for new nodes, so that VSGraphs can be saved and reloaded later in app, or exported directly into glsl for use in game engines or or shadershop.dev or any other platform that uses GLSL.

What's Next?

Given what we have made so far, I am working on adding 50+ node types, and restructuring the way the nodes are added from the Add menu, so that it feels more similar to Blender, but modern.

I would love to hear your thoughts on how you would use this tool, and what features you would like!

Please let me know in the comments!

Understanding Perceptrons Through a Practical Web Example

spenceryonce — Sun, 18 Feb 2024 00:47:14 +0000

What we will be making!

Perceptrons are the simplest form of a neural network, designed for binary classification tasks. Invented in 1957 by Frank Rosenblatt, perceptrons paved the way for deep learning and modern artificial intelligence. This article aims to demystify perceptrons by guiding you through a practical web-based example: a decision-making tool that determines whether you should engage in various activities based on certain criteria.

What is a Perceptron?

A perceptron is a type of artificial neuron that uses a linear binary classifier to decide whether an input, represented by a vector of numbers, belongs to a particular class. The decision is made by weighing the input signals, summing them up, and then passing them through a step function to produce an output.

Theoretical Background

The perceptron model is defined by three components:

Inputs (x): Values received from the external environment.
Weights (w): Values that signify the importance of the corresponding inputs.
Threshold (θ): A value that the weighted sum of the inputs must exceed for the perceptron to fire (output a 1).

The formula used by a perceptron to make a decision is as follows:

where (f) is the step function that returns 1 if the sum is greater than the threshold, and 0 otherwise.

Practical Example: Decision-Making Tool

To illustrate how a perceptron works, we'll create a simple web tool that helps decide whether to engage in activities like going to a concert, eating out, or studying tonight. The decision is based on several weighted criteria, such as budget, weather, and personal interest.

Step 1: Setting Up the HTML Structure

We begin with a basic HTML setup that includes a form for inputting decision criteria and a script for the perceptron logic.

<!DOCTYPE html>
<html>
<head>
    <title>Perceptron Decision Maker</title>
</head>
<body>
    <h1>Should I Go to the Concert?</h1>
    <form id="decisionForm">
        <!-- Criteria checkboxes go here -->
        <button type="button" onclick="calculateDecision()">Decide</button>
    </form>
    <div id="result"></div>

    <script>
        // Perceptron logic will be added here
    </script>
</body>
</html>

Step 2: Adding CSS for Styling

We aim for a modern look similar to NextUI's light theme, focusing on simplicity and readability.

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
    color: #333;
}

form {
    margin-bottom: 20px;
}

button, select {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 15px;
    cursor: pointer;
}

#result {
    margin-top: 20px;
    padding: 10px;
    background-color: #fafafa;
    border-left: 5px solid #0070f3;
}

Step 3: Implementing the Perceptron Logic in JavaScript

We use JavaScript to dynamically generate the form based on the decisions data, calculate the decision using perceptron logic, and display the result.

const decisionsData = {
    "concert": {
        "title": "Will I go to the concert?",
        "category": "Entertainment",
        "threshold": 1.5,
        "criteria": [
            {"id": "artistGood", "label": "Artists is Good", "weight": 0.7},
            // Additional criteria
        ]
    },
    // Other decisions
};

function calculateDecision(decisionKey) {
    const decision = decisionsData[decisionKey];
    let sum = 0;
    decision.criteria.forEach(criterion => {
        const isChecked = document.getElementById(criterion.id).checked ? 1 : 0;
        sum += isChecked * criterion.weight;
    });
    const result = sum > decision.threshold ? "Yes" : "No";
    document.getElementById("result").innerText = result;
}

Step 4: Dynamically Generating Decisions and Categories

To enhance user experience, we allow users to select a decision category before presenting them with specific decision criteria.

function populateCategorySelector() {
    const categories = new Set();
    Object.values(decisionsData).forEach(decision => {
        categories.add(decision.category);
    });
    const categorySelector = document.getElementById('categorySelector');
    categories.forEach(category => {
        const option = document.createElement('option');
        option.value = category;
        option.innerText = category;
        categorySelector.appendChild(option);
    });
}

// Function to filter decisions by category
function filterDecisionsByCategory() {
    const selectedCategory = document.getElementById('categorySelector').value;
    createFormsFromData(selectedCategory);
}

Conclusion

Perceptrons, despite their simplicity, lay the groundwork for understanding more complex neural networks. By implementing a perceptron in a real-world application, we gain a practical understanding of its decision-making process. This example serves as a stepping stone to exploring more advanced concepts in machine learning and artificial intelligence.

That about wraps it up! I hope you enjoyed this article and would love to add your own decisions to this library of perceptrons!

Add your own decisions as a comment under this post in the correct data format and I'll add them to the library!

Discovering Distances with Hanging Ropes and Catenaries: A Practical Guide

spenceryonce — Wed, 12 Jul 2023 06:10:08 +0000

Discovering Distances with Hanging Ropes and Catenaries: A Practical Guide

Author: Spencer Yonce
Publish Date: July 10, 2023

SEO Keywords: Catenary calculations, Hanging rope problem, Python for math, Javascript for math, Physics problem solving, Mathematical modeling, Real world math, Distance calculations, Adventures in coding, Learning Python and Javascript, Outdoor math problems

Welcome to a fascinating journey where we mix the thrill of outdoor adventures with the magic of math and coding. You're out on a hike and you see a rope bridge hanging between two cliffs. The rope dips down in the middle, forming a beautiful curve. Here's a question: Can you figure out the distance between the cliffs knowing the length of the rope and the dip's height?

Even if you're new to math and coding, this is a problem you can solve! With some basic physics, a sprinkle of geometry, and a dose of Python or Javascript code, we can unravel this mystery together. Let's dive in!

The Magic Curve: Understanding Catenaries

When a rope hangs freely from two points, it forms a special curve called a catenary. A catenary curve is like the shape a necklace makes when you hold it by the ends.

In math, we describe shapes using equations. For a catenary, we use this equation:

Where:

y is the height of the rope at any point.
x is the horizontal distance from the lowest point of the curve (the dip in the middle).
a is a number that determines the curve's shape.
(\cosh) is a special function called the hyperbolic cosine.

We also know the total length of the rope is along the curve of the catenary. The equation to calculate this is:

Where s is the length of the rope and d is the distance between the cliffs we want to find.

Cracking the Code with Python and Javascript

Armed with our equations, let's solve them using Python and Javascript. These are popular languages that are great for solving math problems.

First, we'll look at how to solve this with Python:

from scipy.optimize import fsolve
from numpy import sinh

s = 450  
y_sag = 23   

def catenary_length(a, d):
    return 2*a*sinh(d/(2*a))

def equation(vars):
    a, d = vars
    return [s - catenary_length(a, d), y_sag - a]

a_initial = 20
d_initial = 200

a_final, d_final = fsolve(equation, (a_initial, d_initial))

d_final

Running this code, you'll find that the distance between the cliffs is approximately 136.91 feet.

Now, let's do the same with Javascript. Javascript doesn't have built-in functions for sinh and fsolve, but we can use the math.js library:

var math = require('mathjs');

var s = 450;
var y_sag = 23;

function catenary_length(a, d) {
    return 2 * a * math.sinh(d / (2 * a));
}

function equation(vars) {
    var a = vars[0], d = vars[1];
    return [s - catenary_length(a, d), y_sag - a];
}

var initial_guess = [20, 200];

var solution = math.fsolve(equation, initial_guess);

var d_final = solution[1];

Running this code will give you the same result: the distance between the cliffs is about 136.91 feet.

Further Exploration and Practice Problems

Congratulations on solving the hanging rope problem! If you enjoyed this, there are plenty of other real-world problems you can tackle with your new skills. Here are some ideas:

Changing rope lengths: What happens if the rope is longer or shorter? How does this affect the distance between the cliffs?
Different dips: How does the height of the dip in the middle affect the distance between the cliffs?
More complex scenarios: What if there are more than two cliffs and multiple ropes? Can you calculate the distances between all the cliffs?
Other uses of catenaries: Catenaries aren't just for ropes and bridges. They're also used in architecture, in electricity and telecommunications cables, and even in the shape of a perfectly hung chain. Can you find other real-world uses of catenaries and apply your calculations there?

Remember, the world is full of math problems waiting to be solved. So keep exploring, keep learning, and most of all, have fun!