DEV Community: kurokky（黒木シンタロー）

Make the sound of Mario's coins in your browser!

kurokky（黒木シンタロー） — Fri, 01 Apr 2022 07:54:16 +0000

Let's take a quick look and Click "?" on this page!

The started

I wanted to sound in my browser. I did some research and found a way to convert mp3 and m4a files to base64 and play them, but that method was not what I wanted to do. A little more investigation revealed that it can be done with "AudioContext".

Moreover, the parameter was 'triangle, 'sine,' 'square,' 'sawtooth,' which were the very sounds used in the NES.

If this happens, I'll have to do it!

What made you think of NES?

No need to talk about the sound of NES in this day and age, right? Please bear with me for a moment.
If I talk in detail about the specifications of the NES sound, there are about eight different types of sounds, because some of them have changed the ratio of square waves, but basically only four sounds can be produced.

name	details
square	for melodies / can play two sounds same time.
triangle	for bass, sound effects
noise	for drums , rhythm , sound effects
DPCM	voice etc.

As mentioned above, when people see "square wave and triangle wave," people over the age of 40 definitely think it's the NES. Some NES geeks may have "Konami Sound Staff Club Kukeiha" in mind.

Technical

If you look at the source, there is nothing particularly difficult to do, so if you want to play the sound of a coin, you can do so by playing the "E" sound after the "B" sound.

It looks like this.

const AudioContext = window.AudioContext || window.webkitAudioContext
const audioContext = new AudioContext()
const gainNode = audioContext.createGain()
gainNode.connect(audioContext.destination)
gainNode.gain.value = 0.1
const oscillator = audioContext.createOscillator()
oscillator.connect(gainNode)
oscillator.type = "square"
oscillator.frequency.setValueAtTime(987.766, audioContext.currentTime)//B
oscillator.frequency.setValueAtTime(1318.51, audioContext.currentTime + 0.08)//E
oscillator.start()
oscillator.stop(.5)

Be careful not to specify gain.value or your ears will die...(super loud). My sense of sound was not up to par, and I couldn't make out the sound of the power-up and entering the clay pipe no matter how I tried, so I had to analyze it at about 10% speed.(I don't think it is possible for normal people.)

If you listen carefully, there are some strange things. but I tried to do a lot of things with WebAudio-PulseOscillator, but I just thought, "I'll just use the default sound." and "I'll do it with what I have!"

If you really work hard, you could probably make something serious by having it read midi and MML with the technology to make synthesizers, and it would be interesting to make an application for it in electron.

important point

I thought it would be tasteless to use only buttons, so I tried to reproduce the dots using table tags, but this is a "bonus" because of the rights issue.

Correspondence table

If you are interested in doing something similar, this might be useful.

note	Hz	etc
A	6.875
A#	7.283
B	7.716
C	8.175	MIDI LOW
C#	8.661
D	9.177
D#	9.722
E	10.3
F	10.913
F#	11.562
G	12.249
G#	12.978
A	13.75
A#	14.567
B	15.433
C	16.351
C#	17.323
D	18.354
D#	19.445
E	20.601
F	21.826
F#	23.124
G	24.499
G#	25.956
A	27.5	Piano Low
A#	29.135
B	30.867
C	32.703
C#	34.647
D	36.708
D#	38.89
E	41.203
F	43.653
F#	46.249
G	48.999
G#	51.913
A	55.0
A#	58.27
B	61.735
C	65.406
C#	69.295
D	73.416
D#	77.781
E	82.406
F	87.307
F#	92.498
G	97.998
G#	103.826
A	110.0
A#	116.54
B	123.47
C	130.812
C#	138.591
D	146.832
D#	155.563
E	164.813
F	174.614
F#	184.997
G	195.997
G#	207.652
A	220.0
A#	233.081
B	246.941
C	261.625
C#	277.182
D	293.664
D#	311.126
E	329.627
F	349.228
F#	369.994
G	391.995
G#	415.304
A	440.0
A#	466.163
B	493.883
C	523.251
C#	554.365
D	587.329
D#	622.253
E	659.255
F	698.456
F#	739.988
G	783.99
G#	830.609
A	880.0
A#	932.327
B	987.766
C	1046.502
C#	1108.73
D	1174.659
D#	1244.507
E	1318.51
F	1396.912
F#	1479.977
G	1567.981
G#	1661.218
A	1760.0
A#	1864.655
B	1975.533
C	2093.004
C#	2217.461
D	2349.318
D#	2489.015
E	2637.02
F	2793.825
F#	2959.955
G	3135.963
G#	3322.437
A	3520.0
A#	3729.31
B	3951.066
C	4186.009	Piano HIGH
C#	4434.922
D	4698.636
D#	4978.031
E	5274.04
F	5587.651
F#	5919.91
G	6271.926
G#	6644.875
A	7040.0
A#	7458.62
B	7902.132
C	8372.018
C#	8869.844
D	9397.272
D#	9956.063
E	10548.081
F	11175.303
F#	11839.821
G	12543.853	MIDI HIGH
G#	13289.75
A	14080.0
A#	14917.24
B	15804.265
C	16744.036
C#	17739.688
D	18794.545
D#	19912.126	HUMAN HIGH
E	21096.163
F	22350.606
F#	23679.643
G	25087.707
G#	26579.5

How to develop the plugin deal with i18n in Figma Plugin?

kurokky（黒木シンタロー） — Sat, 12 Mar 2022 13:29:40 +0000

Hi, guys!

Where are you live? L.A? Ottawa? Melbourne? Am I? I'm live in Tokyo.

As many of you know, it's very difficult to handle internationalization. In particular, units of currency and inches, centimeters are very tricky.
I have traveled to U.S and Cebu, Hanoi, HongKong several times, and every time I arrive in a country and see the expiration date on yogurt at the airport kiosk, my head crashes. And, If I were to move from Seattle to Vancouver, it would be unbelievable to me as a Japanese person that the notation would be different even though we are in the same English-speaking country.(Actually, it's not.)

Of course, in the current web world, there are i18n libraries in Javascript and other server side languages, so there is nothing wrong with converting from unixtime to your local time. Yes, within the web world... This is determined based on the value of the browser's "window.navigator.language", but unfortunately, no function or variable to obtain such an environment variable was found in the API of Figma Design's Plugin.

But it is engineers who confront such problems, isn't it? In this article, I will write about my own solution.

Retrieve from UI screen.

I've written in conclusion, but this is the way to do it. (Of course, a few tips are necessary, so please read to the end if you can.)

Figma Plugin can be developed in two types with or without UI screen.

What?" You want to make a plugin with no UI that supports internationalization?" I was the same way. So this title.
The Figma plug-in UI has a mode in which the UI is not displayed.

Oh, you who think that because I am Japanese, my English is even weirder than it originally was, look at the sample below.

figma.showUI(__html__,{width:0,height:0, title:""})
figma.ui.hide()

Yes, this is HIDE mode!

Let's make the sample a little more clear.

When internationalizing an alert.

Normally, it is recommended to use 'Figma.notify' instead of 'Alert' in Javascript when warning users in Figma. However, as mentioned above, Figma API does not have a way to obtain user language information, so internationalization is supported by using hide mode and combining it with HTML on the UI side.

Append '"ui":"ui.html",' to manifest.json.

{
  "name": "AlertSample",
  "id": "XXXXXXXXXXXXXXXX",
  "api": "1.0.0",
  "main": "code.js",
  "ui":"ui.html",
  "editorType": [
    "figma"
  ]
}

Add function to call ui.html from code.js. (This is a file that runs in the background.)


function showAlert(message) {
    figma.showUI(__html__,{width:0,height:0, title:""})
    figma.ui.hide()
    figma.ui.postMessage({type:"alert", message:message})
}

main(){
    //Figma.notify("Hi!")
    showAlert({en:"Hi!",es:"Hola!"})
}

main()

ui.html as shown below.

<script>
onmessage = (event) => {
  if (event.data.pluginMessage.type === "alert"){
    let massage = event.data.pluginMessage.message.en
    if (window.navigator.language == "es"){
      massage = event.data.pluginMessage.message.es
    }
    alert(massage)
  }
}
</script>

It's easy. But this still has bugs. The plugin does not disappear when the alert is closed. Adding "figma.closePlugin()" to code.js will exit without an alert, so this is also not cool.

"Then what should I do?"

OK! Go back to code.js and close it again.

Final Code


function showAlert(message) {
    figma.showUI(__html__,{width:0,height:0, title:""})
    figma.ui.hide()
    figma.ui.postMessage({type:"alert", message:message})
}

main(){
    //Figma.notify("Hi!")
    showAlert({en:"Hi!",es:"Hola!"})
}

main()

figma.ui.onmessage = (msg) => {
    if (msg.kind === "exit"){
        figma.closePlugin()
        return
    }
}

<script>
onmessage = (event) => {
  if (event.data.pluginMessage.type === "alert"){
    let massage = event.data.pluginMessage.message.en
    if (window.navigator.language == "es"){
      massage = event.data.pluginMessage.message.es
    }
    alert(massage)
    parent.postMessage({ pluginMessage: { kind: 'exit', type:""} }, '*')
    return
  }
}
</script>

Yes, this way we could easily support internationalization. The sample code is in Javascript and does not use the i18n library, but this method should make it easy to support multilingualization using json files, which are often used. (It is the same as using TypeScript.)

In addition to the alert, I can easily use things like window.confirm, which does not exist in the Figma API, to receive language as an argument from ui.html and process each language separately.

Sum up

I hope that the world will soon become a peaceful place where people can travel a lot.

What's the best way how to a movie file convert to an animation image(animation gif or animation png or webP)?

kurokky（黒木シンタロー） — Mon, 28 Feb 2022 08:14:31 +0000

Hi, guys!

What format do you use when you really need to convert a movie file such as mp4 to an animation image file?
I think the most popular solution is to convert to gif, but it only supports 256 colors, so in recent years it is better to use animation png or webp. And the file size varies depending on whether the movie file has a large number of pixels or a small number of pixels, and most importantly, has it been converted beautifully? Wouldn't you like to see with your own eyes whether the file size is different depending on whether the movie file has many or few pixels?

Today, I've tried to make some animated images from some movie files using FFmpeg to make them clearer,and let's find out the best way to do this in 2022!

About formats

Name	Extension	Number of pixels	Alpha Channel
GIF	.gif	256	OK
Animation PNG	.apng/.png	full colors	OK
WebP	webp	full colors	OK

In Japan, animation png is one of the famous image formats in the sticker function of the SNS chat application called LINE.

Commands

The original movie files are mov file (fps60) that captures the screen of my Mac, and I used ffmpeg and other tools to converted these files.(I used a Raspberry Pi as the conversion machine.)

-- gif --
# Don't set anything and just make a gif.
ffmpeg -i gradation.mov gradation_default.gif

# with fps10 and a color palette.
ffmpeg -i gradation.mov -filter_complex "[0:v] fps=10:-1,split [a][b];[a] palettegen [p];[b][p] paletteuse" gradation_palette.gif

-- apng --

# Don't set anything and just make an apng(Infinite loop).
ffmpeg -i gradation.mov -plays 0 gradation_default.apng
ffmpeg -i gradation.mov -plays 0 -framerate 10 gradation_fps10.apng
# with fps10 and a color palette.
# ffmpeg -i gradation.mov -vf palettegen g_palette.png #I made a color palette once I got curious.
# About 0.3x, which might be the slowest.
ffmpeg -i gradation.mov -i g_palette.png -framerate 10 -filter_complex paletteuse -plays 0 gradation_palette.apng
# use gif2apng
gif2apng gradation_palette.gif gradation_palette2.apng

-- webp --
# Don't set anything and just make a webp(Infinite loop).
ffmpeg -i gradation.mov -loop 0 gradation_default.webp
# with fps10 and the highest quality
ffmpeg -i gradation.mov -vcodec libwebp -quality 100 -filter:v fps=fps=10 -lossless 0 -loop 0 -an -vsync 0 gradation_10_q100.webp
# with fps10 and the lowest quality
ffmpeg -i gradation.mov -vcodec libwebp -quality 0 -filter:v fps=fps=10 -lossless 0 -loop 0 -an -vsync 0 gradation_10_q000.webp
# with fps10 and preset is 4 and compression level is 6(the highest.)
ffmpeg -i gradation.mov -vcodec libwebp -compression_level 6 -filter:v fps=fps=10 -lossless 0 -loop 0 -preset 4 -an -vsync 0 gradation_10_lv6.webp
# with fps10 and preset is 4 and compression level is zero(the lowest.)
ffmpeg -i gradation.mov -vcodec libwebp -compression_level 0  -filter:v fps=fps=10 -lossless 0 -loop 0 -preset 4 -an -vsync 0 gradation_10_lv0.webp

File size Results

st_count.mov

extension	name	size	percentage
mov	original	1.4MB	100%
gif	st_count_default	96K	6.6%
gif	st_count_palette	40K	2.7%
apng	st_count_default	732K	51.0%
apng	st_count_fps10	732K	51.0%
apng	st_count_palette	192K	13.3%
apng	st_count_palette2	40K	2.7%
webp	st_count_default	16K	1.1%
webp	st_count_10_q100	1.5M	107.1%
webp	st_count_10_q000	212K	14.7%
webp	st_count_10_lv6	804K	56%
webp	st_count_10_lv0	804K	56%

As mentioned above, if the original image has a small number of pixels, converting it to a gif without any options will not increase the file size.

extension	name	size	percentage
mov	original	1.8MB	100%
gif	gradation_default	1.1M	61.1%
gif	gradation_palette	2.2M	122%
apng	gradation_default	2.2M	122%
apng	gradation_fps10	2.2M	122%
apng	gradation_palette	6.9M	383%
apng	gradation_palette2	1.5M	83%
webp	gradation_default	35K	1.8%
webp	gradation_10_q100	363K	19.6%
webp	gradation_10_q000	71K	3.8%
webp	gradation_10_lv6	120K	6.5%
webp	gradation_10_lv0	120K	6.5%

In this case as well, the gifs with the specified color palette are larger than the original size. Also, all apngs (except gif2apng) are enlarged from their original size.

The problem is image quality.

Please take a look at this page and check it out for yourself.(Sorry, you can see Japanese on the screen, but it doesn't matter because it's just an image.)

The webp of the gradient is a concern, but I feel it is a concern by default (quality 75 if nothing is specified). The parameters also vary depending on the original movies, so I think the results are subtle. (Well, I guess you should use webm instead of webp for certain movies...)

I think it's a matter of "how much can you tolerate", so each of us must choose what you can compromise on.
(For the simple gradient shown in the sample, it is much better to animate the svg with css.)

Sum up

As expected, I was more concerned about the color reduction than the file size when making gifs without parameters.
If you don't care about the file size too much because IE is going to say good-bye, I think it would be a good idea to use WebP. (IE11 also works if you use the picture tags, but it's a pain to use different tags...)
However, there are many platforms that do not support WebP instead of their own sites, so you will need to be careful about that.

In 2022, there will be more options for images in various situations, so I would like to encourage everyone who runs a website or is a designer to think about it.

This will reduce server costs and reduce the number of traffic users have to deal with, which will definitely improve both costs and UX!

I have mede a tool easily convert your SVG file deal with dark mode.

kurokky（黒木シンタロー） — Thu, 03 Feb 2022 15:23:00 +0000

Hi guys,

Today I would like to introduce a super cool tool for Web Designer and Webfront Engineer. In 2022, Internet Explorer will finally become unusable. This is A SUPER HAPPY NEWS for all web-front engineers, but I think it also signals the beginning of the next battle for designers and engineers. One of those battles is DARK MODE SUPPORT.

What’s Hybrid SVG?

SVG files can support both light mode and dark mode by inserting the following CSS this(Click Here For More Info!).

@media (prefs-color-scheme: dark)

Check out the Favicon on this page for an example and try changing Dark mode or Light mode(Sorry this page is only japanese).
That's very cool!!!!

So, I call SVG files that can support multiple modes “Hybrid SVG”.

Headache problem

The ability to do this transformation in Drawtools (e.g. Illustrator) is not provided (at least from what I can tell).

So, who will be responsible for these tasks? Front-end engineers? Designers?

If it’s just one or two colors, a designer might be able to open a text editor and handle it...

However, What if the file can not be edited by other designer? What if the designers don’t have the skills, experience, or time to change a lot of colors accurately? What if the designer says “Hey, I’m not a programmer!“?

Also, it's strange for an engineer to use the "sed command" for a designer's little curiosity.

Let's resolve

There’s no use complaining about it.

My motto are "Better than nothing" and "Do it myself rather than say complain."

OK, Just did that!

I made Hybrid SVG Maker.

That is where the “Hybrid SVG Maker” comes in handy.

You don't want to upload a design that's not out in the world yet to another server right?　That site makes it easy to create SVG files that support color substitution and dark mode without having to upload the SVG to a server.

Sum up

It is still in beta, but please try it out.

How to display SVG files and change colors dynamically in React Native.

kurokky（黒木シンタロー） — Thu, 13 Jan 2022 03:30:50 +0000

Hi guys,

In Japan, I have often heard that React Native(RN) is "dead" or "not good" or " Flutter is best" since about three years ago.
Still, it's a solid fact that FaceBook, Instagram ranks high among the apps used in the world. I often tired when I search for "I try to do something on RN", all I get is old information or information that is not buildable.

Please note that the content of this article is also my method.

Why do need to change colors dynamically?

Because I should support Dark Mode!
Sadly? I think the proportion of UI / UX in application development is increasing year by year. No matter how much Jetpack Compose (Android) and SwiftUI (iOS) evolve, the burden on us developers will not decrease.(Especially, I think that animations in screen transitions are demons.)

Complaints Aside, let's display the SVG files.

Use react-native-svg-transformer.

I've seen some articles about using "react-native-svg-uri", but I continue to use "react-native-svg-transformer".(I don't think I've experienced react-native-svg-uri working properly.)

yarn or npm install react-native-svg

yarn add react-native-svg
npx pod-install
yarn add --dev react-native-svg-transformer

2. Rewrite "metro.config.js" in the root directory where "App.js" is located.

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

3. You should be able to use it by importing the SVG file and specifying the size in JSX.

import Logo from './logo.svg'
/*(omission)*/
<Logo width={100} height={100} />

Yes, this is the way as per the official documentation so far.

Changing colors dynamically1 (for single color)

Just change the fill part of the SVG file to "currentColor" (the same way you change the SVG color in HTML)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" fill="#f00"/>
</svg>

Change the above to the following.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" fill="currentColor"/>
</svg>

Set it in style on JSX.

<Logo width={100} height={100} style={{color:'#ccc'}}  />

Dynamically changing colors2 (multiple colors, but no more than 5 colors)

This is another way to use SVGR, as described in the react-native-svg-transformer page.

Create a file named ".svgrrc" in the root directory where "App.js" is located.
Change the fill value of the SVG file to one of the five colors "#000,#f00,#ff0,#ff1,#f11".(In other words, no more than five colors can be changed.)
Write ".svgrrc" as follows.

{
  "replaceAttrValues": {
    "#000": "{props.aaa}",
    "#00f": "{props.bbb}",
    "#ff0": "{props.ccc}",
  }
}

4. Specify values for JSX.(It is possible to use only one color.)

<Logo width="100" height="100" aaa={"#f00"} />

Problems with the SVGR

It did not work properly unless the fill values of the relevant SVG file was a specific number such as "#000".
In conclusion, the SVG color replacement is only for 3 digits of RGB, and the possible replacement strings are as follows.

RGB
#000
#f00
#ff0
#ff1
#f11

The combination of websafe colors 0,3,6,9,c almost didn't work.(I couldn't believe that "#f0f" and "#0ff" weren't allowed.)
I guess this means that you don't need to dynamically change things that have a lot of colors.

Here are didn't work

#fff
#00f
#ccc
#222-999
#11f
#1f1
#1ff
#f01
#f1f
#f12
#0ff
#f01
#ff0
#ff1
#f1f
#3ff
#321
#f03
#90f
#100
#101

If I want to change more than five colors, I should probably create a separate SVG file in the first place, but according to the SVGR specification, I should be able to change even six-digit RGB values, and it should even support regular expressions...

Sum up

These up to you to decide if that's true.(Same as the other articles.)

I made a plugins weekly ranking site for all Figma Design Tool users.

kurokky（黒木シンタロー） — Fri, 07 Jan 2022 07:45:23 +0000

Hi guys,

I have developed a website(https://pexr.net) for all Figma Design Tool users.(Of course, it's also for developers who are not designers.)

Why did you make that?

I have developed some Figma Plugins. And then, whenever that time I have to check when "Are there any similar plugins on official page?"
But, that is not good for me(or same developers).

For Example

Can't see the tag informations without going to the detail pages.
Can't see the list of completely new creations.
Descending the order of "Installs" that I see only the standard ones that I can find in some blogs.
Ascending the order of "Installs" that I have to see a lot of unpopular plugins.

I felt that the opportunity loss was so huge in such a situation.
My motto are "Better than nothing" and "Do it myself rather than say complain."

OK, Just do it!

How does the ranking algorithm?

Basic Ranking excludes plugins that have been released more than 6 months after their v1.0.0 release and have once exceeded 1,000 DL. And then, It also excludes those that do not have 10 DL per week.

How does it work?

It is made to be a almost JAMstack. Actually I used Github Pages and my Raspberry Pi at the very beginning.　However, the Free plan requires a repositoriy to be public and I have to keep the build machine powered on to run the batch only once a week.
That's very inefficient for me!!!!

So, I got a domain and rent a VPS for the webserver and batch server.

Technical problems

The official website is not Server-side rendering(SSR), you can not do the usual method (download using wget or curl) that's why　I had to use headless chrome.
I use the cui version of Inkscape to generate png file from SVG due to day of OGP image tag. However, the date notation could not be shown divided between Japan, the UK, and the USA.
I set NginX so that it can be displayed without the extension.(To make it a bit cooler)
I use the RANK function of sqlite3. (I was surprised because I didn't have this function when I started using it.)

I meant to convert the image to WEBP using ImageMagic etc..., but directly linking the one on the original site and

Sum up

I seem to have completely forgotten English.