DEV Community: sgamer宇

I Built a Free Drawing Grid Maker for Artists

sgamer宇 — Tue, 23 Jun 2026 09:52:52 +0000

Drawing from a reference photo looks simple until you actually try it.

A face can be slightly too wide.
The eyes can sit too high.
The angle of an object can feel wrong even when you cannot explain why.

For beginners, these small proportion errors can make an entire drawing feel inaccurate.

One of the oldest solutions is the grid drawing method: divide the reference image into smaller sections, then reproduce each section one at a time.

The method is simple, but preparing the grid is often more annoying than the drawing itself.

That is why I built DrawGrid.

👉 Try DrawGrid

What is DrawGrid?

DrawGrid is a free browser-based grid maker for artists.

You can upload a reference image, place a customizable grid over it, and export the result for drawing practice.

There is no account required, and the tool works directly in the browser.

The basic workflow is:

Upload a reference photo
Choose a grid style
Adjust the rows, columns, color, opacity, and line thickness
Add labels or subdivisions
Export the gridded reference image
Create a matching blank practice sheet

The goal is to make the grid drawing method fast enough that artists can start practicing immediately.

More than a basic grid overlay

While building DrawGrid, I realized that artists do not always need the same type of guide.

A portrait artist may need facial proportion lines.

A landscape artist may need composition guides.

A beginner studying light may need a simplified value reference.

So DrawGrid includes a growing library of drawing guides, including:

Square drawing grids
Numbered grids
Subdivided grids
Portrait proportion guides
Composition guides
Perspective guides
Value and shadow studies
Outline and contour references
Color study guides
Printable practice sheets

Instead of being only an image grid generator, I want DrawGrid to become a practical reference preparation tool for different drawing exercises.

Customizable grid settings

Different drawings require different grids.

A detailed portrait may need many small cells, while a simple sketch may only need a few large sections.

DrawGrid lets you adjust settings such as:

Number of rows
Number of columns
Grid line thickness
Grid line color
Grid opacity
Cell numbering
Subdivision lines
Grid rotation
Labels and guides

The preview updates directly in the editor, so you can experiment before exporting the final image.

Printable practice sheets

One feature I especially wanted was the ability to create a matching blank grid.

Many grid tools only place lines over the original photo. The artist then has to manually recreate the same grid on paper or in another application.

DrawGrid can generate both:

A gridded reference image
A corresponding blank practice grid

This makes it easier to print both pages and start drawing without additional setup.

Privacy-friendly image processing

Reference photos can sometimes be personal.

Because of that, DrawGrid processes images locally in the browser. The image does not need to be uploaded to a remote server just to add grid lines.

This also makes the editing experience faster because users can immediately preview changes.

Who is it for?

DrawGrid can be useful for:

Beginner artists learning proportions
Portrait artists working from photographs
Art students practicing observation
Teachers preparing drawing exercises
Mural artists enlarging designs
Illustrators studying composition
Craft creators transferring patterns
Anyone learning the grid drawing method

Even experienced artists sometimes use grids when accuracy or scale is especially important.

Why I built it

There are already grid overlay tools online, but many of them feel limited.

Some only provide a basic grid.

Some have difficult controls.

Others require sign-up, upload images to a server, or place the useful settings across several different pages.

I wanted to create something that feels more like a lightweight artist workspace:

Open the website
Upload an image
Select a guide
Adjust the result
Export it

No complicated workflow.

What I am working on next

DrawGrid is still evolving.

Some ideas I am exploring include:

More portrait construction guides
Better perspective overlays
Custom paper sizes
Improved mobile controls
Additional printable worksheets
Presets for common drawing exercises
More composition guide templates

Feedback from artists will help decide which features should be built first.

Try it

You can use DrawGrid for free here:

👉 https://drawgrid.org/

I would love to hear:

What type of grid do you usually use?
Which drawing guides would be most useful?
Do you prefer drawing digitally or on printed paper?

Thanks for checking it out.

I Built a Browser-Based GPU Stress Test That Runs Without Downloads

sgamer宇 — Mon, 15 Jun 2026 13:57:46 +0000

Most GPU stress-testing tools require users to download and install a desktop application.

That makes sense for detailed hardware diagnostics, but sometimes you only need a quick answer:

Is hardware acceleration working?
Does performance drop after the GPU heats up?
Is an overclock obviously unstable?
Are frame-time spikes causing visible stutter?
Is a laptop slowing down under sustained load?

So I built WebGPUStress, a browser-based GPU stress test powered by WebGL.

What it does

The tool runs a sustained shader workload directly inside the browser and records several performance signals:

Average FPS
1% Low FPS
Frame-time stability
Dropped-frame ratio
Performance decay during longer runs
An overall stability score

You can choose the duration, resolution, quality level, and target frame rate.

There are also presets for common situations:

Quick Health Check — a short test for obvious problems
Thermal Soak — a longer workload for detecting performance loss after heat builds up
FPS Drop Check — useful when games feel less smooth than the average FPS suggests

Why not show only an FPS score?

A high average FPS does not always mean the experience is stable.

For example, a GPU might average 60 FPS while regularly dropping into the 30s. It may also perform well during the first minute and slow down once the cooling system becomes saturated.

That is why the test also tracks 1% lows, frame-time consistency, and dropped frames.

The goal is not to produce one impressive benchmark number. It is to show whether performance remains consistent over time.

Useful scenarios

I designed the tool for quick checks such as:

Testing an overclock

A game might run normally for a few minutes while a longer sustained workload reveals artifacts, crashes, or unstable frame pacing.

Checking laptop throttling

Some laptops start fast but lose performance after several minutes. Comparing the beginning and end of a longer run can help reveal that pattern.

Diagnosing gaming stutter

When average FPS looks normal but gameplay still feels uneven, 1% lows and frame-time stability can provide more useful clues.

Verifying GPU acceleration

It can also provide a quick sanity check for virtual machines, remote desktop environments, and newly configured systems.

Limitations

Because this runs inside a browser, it is not a replacement for tools such as FurMark, MSI Afterburner, GPU-Z, or native hardware monitoring software.

Browsers cannot directly expose GPU temperature, voltage, power consumption, or fan speed. Results can also be affected by the browser, graphics driver, power mode, background applications, and whether the tab remains active.

I see it as a fast first-pass diagnostic tool rather than a complete hardware certification suite.

Try it

You can run the test here:

online gpu test

No download, account, plugin, or executable is required.

I would especially appreciate feedback about:

Performance on different browsers and GPUs
Whether the result explanations are clear
Additional benchmark profiles you would find useful
Metrics that should be added or improved

The project is still evolving, so real-world testing and developer feedback would be genuinely useful.

I Built a Simple Online Tone Generator That Runs Directly in the Browser

sgamer宇 — Fri, 12 Jun 2026 14:11:23 +0000

Recently I built a small browser-based audio tool called TonePanel:

👉 https://tonepanel.org

It is an online tone generator that lets you play steady tones from 20 Hz to 20 kHz directly in the browser. You can switch between common waveforms like sine, square, sawtooth, and triangle, without installing anything.

The idea was simple: I wanted a clean tool for quick audio checks — something useful for testing speakers, headphones, frequency response, or just understanding how different Hz ranges sound.

Why I made it

A lot of tone generator tools work, but many of them feel either too old, too cluttered, or too technical for casual users.

So I wanted to make something that feels more like a small control panel:

choose a frequency
press play
adjust the sound
switch waveform
stop when done

No account, no setup, no download.

What it can be used for

TonePanel can be useful for:

speaker testing
headphone checks
comparing low / mid / high frequencies
basic audio experiments
instrument reference tones
learning what different waveforms sound like

For example, a sine wave is usually the best starting point if you want to hear one clean frequency. Square, sawtooth, and triangle waves sound more “textured” because they contain additional harmonics.

Built for the browser

The tool runs locally in the browser, which makes it lightweight and easy to use. You just open the page and play a tone.

I’m also planning to expand it with more focused pages, such as:

Frequency Generator
Hz Generator
speaker test tools
sweep tone tools
simple educational guides about sound frequencies
A small safety note

Always start with low volume, especially when using headphones. High or very low frequencies can feel uncomfortable quickly.

Try it

Here is the tool:

https://tonepanel.org

Would love to hear feedback from anyone who works with audio, music, speakers, headphones, or browser-based tools.

I Built a Simple Omegaverse Quiz Website

sgamer宇 — Tue, 12 May 2026 07:57:30 +0000

I recently built a small web project called OmegaverseTypes.org.

It is a simple Omegaverse Quiz that helps users discover whether they are closer to Alpha, Beta, Omega, or Hybrid based on a short set of personality-style questions.

The site is live here:

https://omegaversetypes.org/

Why I Built It

I noticed that people search for terms like:

Omegaverse Quiz
ABO Test
Alpha Beta Omega Quiz
Omegaverse Type Test

But many existing quiz-style pages feel a bit outdated, cluttered, or unclear.

So I wanted to build something cleaner and easier to use.

The goal was simple:

Let users open the page, start the quiz immediately, answer a few questions, and get a clear result without signing up.

No login.
No complicated onboarding.
No unnecessary friction.

Just a lightweight interactive quiz.

What the Quiz Does

The quiz asks users a short series of questions related to social energy, pressure, relationships, emotional patterns, and decision-making style.

Based on the answers, the site gives one of four result types:

Alpha

Alpha is usually associated with confidence, presence, action, and protective energy.

Beta

Beta represents balance, stability, rationality, and adaptability.

Omega

Omega is connected with emotional sensitivity, intuition, relational awareness, and inner softness.

Hybrid

Hybrid is for users who do not fit neatly into one single type. It combines traits from multiple Omegaverse archetypes.

This is not meant to be a scientific personality test.
It is more of an entertainment-focused quiz for people who enjoy Omegaverse, ABO dynamics, character archetypes, and fandom-style personality tests.

Design Direction

For the design, I wanted the site to feel clean, bright, and modern.

A lot of quiz websites use heavy colors, outdated UI, or overly dramatic visuals. I wanted something lighter.

The direction was closer to:

clean landing page
simple quiz flow
readable result page
soft visual style
mobile-friendly layout
fast loading

The homepage is designed around one main action: starting the quiz.

I did not want users to scroll through a long explanation before understanding what the site does.

The first screen should answer:

“What is this?”
“What will I get?”
“How do I start?”

SEO Considerations

This project was also interesting from an SEO perspective.

The main keyword is Omegaverse Quiz, but the site also naturally relates to:

ABO Test
Alpha Beta Omega Test
Omegaverse Type
Alpha Omega Hybrid Quiz
Omegaverse personality quiz

For this kind of small tool website, I think the most important SEO elements are:

A clear H1 with the main search intent
A short explanation of what the quiz does
Immediate interaction above the fold
Result pages that explain each type clearly
FAQ content for users who are new to the topic
Fast page loading and simple HTML structure

The site is still small, but the goal is to make it useful and easy to understand from the first visit.

What I Learned

Building this project reminded me that small websites still need strong product thinking.

Even a simple quiz has many UX questions:

How many questions should the quiz have?
Should the result feel playful or serious?
How much explanation is enough?
Should the homepage focus on SEO content or immediate interaction?
How do you make the page feel fun without making it look messy?

The hardest part was not the quiz logic itself.

The harder part was making the experience feel clear, lightweight, and intentional.

Who It Is For

This quiz is mainly for people who enjoy:

Omegaverse / ABO settings
fandom personality quizzes
character archetypes
relationship dynamics
roleplay or original character creation
light entertainment quizzes

It can also be useful as a small inspiration tool for writers or creators who are building fictional characters.

Try It

You can try the quiz here:

https://omegaversetypes.org/

It only takes a few minutes.

You might get Alpha.
You might get Beta.
You might get Omega.
Or maybe you are something more mixed — Hybrid.

🎂 Find Your Birthday Pokémon — A Fun Little Web Project

sgamer宇 — Sun, 21 Dec 2025 14:23:53 +0000

Have you ever wondered which Pokémon matches your birthday?

I recently built (and launched) a small web project called Birthday Pokémon — a simple, playful website that maps your birth date to a Pokémon and shows your “birthday Pokémon” instantly.

No login.
No tracking.
Just a fun interaction.

👉 https://birthdaypokemon.com/

🧩 What Is Birthday Pokémon?

Birthday Pokémon is a lightweight web app where users enter their birthday and instantly get a Pokémon associated with that date.

The idea is intentionally simple:

📅 Input a birthday

🎮 Get a Pokémon

🎉 Share the result

It’s meant to feel more like a delightful toy than a “serious” app — something you can try in a few seconds and smile.

⚙️ Technical Notes (for Developers)

From a developer’s perspective, this project was about simplicity and clarity, not over-engineering.

✅ Frontend-Only Logic

The entire experience is handled on the frontend:

No user accounts

No database

No backend state

The birthday → Pokémon mapping is deterministic, fast, and predictable. This makes the site:

Very fast to load

Easy to deploy

Cheap to maintain

It’s a good example of how far you can go with just frontend logic and static hosting.

🧠 Birthday Mapping Logic

At its core, the app uses the birth date as an input and maps it to a Pokémon from a predefined set.

This idea can be extended in many ways:

Month-based or season-based Pokémon

Zodiac + Pokémon combinations

Daily Pokémon APIs

Personalization layers on top of a simple seed

If you’re into generative logic or “date-based identity” features, this pattern is surprisingly flexible.

🎨 Design Philosophy

The design goal was:

Clean, friendly, and instantly understandable

Minimal UI

Soft, playful visual tone

Focus on the result, not the interface

I wanted it to feel good on both desktop and mobile, and to be something users could easily screenshot or share.

🚀 Why Build Something Like This?

Projects like this are great because:

They’re small enough to finish

They’re fun to share

They encourage creativity without pressure

Not every project needs to be a SaaS, a dashboard, or a productivity tool. Sometimes a tiny, joyful website is enough.

🧪 Ideas for Future Extensions

If this project evolves further, here are some directions I’m considering:

🎁 Birthday Pokémon cards or posters

🌍 Localization and regional Pokémon logic

🧑‍💻 A public API

🖼️ Multiple visual styles (pixel art, plush style, etc.)

🎉 Try It Out

If you like Pokémon, birthdays, or small web experiments, feel free to check it out:

👉 birthday pokemon

I’d love to hear:

Which Pokémon you got

Or how you would extend this idea

Thanks for reading — and happy coding! 🧑‍💻✨

EyeTest Online – A Free, Anonymous Way to Check Your Vision in the Browser

sgamer宇 — Sat, 13 Dec 2025 16:40:36 +0000

As developers, we spend an unhealthy amount of time staring at screens. Over time, it becomes hard to tell whether eye strain, blur, or fatigue is just temporary—or a sign that something might be off.

That’s why tools like EyeTest Online are interesting: they provide a fast, browser-based way to get a rough understanding of your visual condition, without accounts, downloads, or friction.

What Is EyeTest Online?

EyeTest Online is a collection of online vision screening tools designed for quick self-checks.

It’s not a replacement for a professional eye exam, but rather a convenient first step — a way to answer questions like:

“Is my distance vision roughly okay?”

“Do my eyes struggle with contrast or color?”

“Should I consider seeing an eye care professional?”

All tests run directly in the browser and work on both desktop and mobile devices.

What Kind of Tests Are Included?

The platform focuses on commonly used vision screening formats, such as:

Visual acuity tests inspired by standard eye charts

Color perception and color differentiation checks

Contrast sensitivity–style evaluations

Simple alignment and clarity assessments

Each test is designed to be quick, understandable, and usable without medical background.

Why This Tool Is Useful

No Account, No Tracking
You can start testing immediately. No sign-ups, no personal data collection, no history required.

Fast Feedback
Most tests take less than a few minutes and give you an instant result or reference range.

Accessible Anywhere
Because it runs in the browser, it’s easy to use at home, at work, or on the go.

Good for Awareness, Not Diagnosis
The tool is honest about its limits. It helps raise awareness, not replace doctors.

Who Is It For?

Developers, designers, and anyone who spends long hours in front of screens

People who want a quick self-check before scheduling a professional exam

Users curious about their vision but looking for a low-friction starting point

Important Reminder

Online eye tests are screening tools, not medical diagnoses.
If a test result feels concerning or inconsistent with daily experience, the correct next step is always a professional eye examination.

Think of EyeTest Online as a signal, not a verdict.

Final Thoughts

EyeTest Online is a great example of how simple web tools can improve everyday health awareness. It’s fast, respectful of privacy, and easy to use — exactly what a browser-based utility should be.

If you spend your days coding, reading, or designing on a screen, taking a few minutes to check in on your vision is probably time well spent.

online eye test

Pips Game – A Minimalist Logic Puzzle That Actually Makes You Think

sgamer宇 — Sat, 13 Dec 2025 16:37:42 +0000

I’ve been spending some time recently exploring browser-based logic games, and I came across Pips Game, a clean and surprisingly deep puzzle built around domino-style logic.

If you enjoy games like Sudoku, logic grids, or any puzzle that rewards careful reasoning instead of speed, this one is worth checking out.

What Is Pips Game?

Pips Game is a logic puzzle based on domino tiles. Each tile covers two adjacent cells and contains a number of dots (pips) on each side.

The goal is simple in theory:
place all the dominoes onto a grid so that every colored region satisfies its own rule.

In practice, it’s much more challenging than it sounds.

How the Gameplay Works

You are given a fixed set of domino tiles

The board is divided into multiple colored regions

Each region has a specific constraint, such as:

The total number of pips must equal a target value

All pips must be the same

No duplicate values allowed

Values must be greater than or less than a certain number

Dominoes can be rotated and repositioned freely

The puzzle is solved only when all regions meet their rules at the same time

There’s no timer pressure, no score chasing—just pure logic.

Why It Stands Out

Focused, Distraction-Free Design
The interface is intentionally minimal. Nothing pulls your attention away from the puzzle itself.

Real Logical Depth
This isn’t a “guess until it works” game. You need to reason through constraints, eliminate possibilities, and sometimes backtrack intelligently.

Unlimited Puzzles
Unlike daily puzzle games, you’re not locked to one challenge per day. You can keep playing, experimenting, and improving.

Works Great on Desktop and Mobile
Drag-and-drop controls feel natural across devices, which makes it perfect for short sessions or longer thinking breaks.

Tips for New Players

Start with the most restrictive regions first — they usually limit possible placements the most

Think in terms of elimination, not placement

Don’t hesitate to undo moves; trial and error is part of the reasoning process

If you’re stuck, step back and re-evaluate the region interactions, not just a single area

Final Thoughts

Pips Game is a great example of how much depth you can get from a simple concept when the rules are well designed. It’s calm, challenging, and genuinely satisfying to solve.

If you’re a fan of logical problem-solving games—or if you just want a smart break from noisy, attention-hungry apps—this one is worth your time.

Let me know if you’ve tried it, or if you have similar puzzle games to recommend.

Pips game