Skip to content

[Sticker submission] Miku by Puti Devil. #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
JohnEdwa opened this issue Apr 8, 2021 · 13 comments · Fixed by #75
Closed

[Sticker submission] Miku by Puti Devil. #62

JohnEdwa opened this issue Apr 8, 2021 · 13 comments · Fixed by #75
Milestone

Comments

@JohnEdwa
Copy link

JohnEdwa commented Apr 8, 2021

The default Miku sticker didn't really tickle my fancy, so I made my own using an artwork by ぷちでびる aka Puti Devil I've loved for well over a decade. Thought that I might as well plop it here, if you happened to want to add it in officially.

I couldn't find the official source for the version I used, only the repainted one, so the best I can give is this Konachan post.

miku

@Unthrottled
Copy link
Member

Unthrottled commented Apr 8, 2021

Cute! I'd be down to adding this as Miku's new secondary content. I'll need to find another background that would be paired with this.

I am open to suggestions. I've converted most of the background art used, into the vector/minimalist style. So your suggestions don't have to be in that style, I could convert it if I really like it.

@JohnEdwa
Copy link
Author

JohnEdwa commented Apr 8, 2021

A vectorized version of this same image exists on Deviantart, but I'm not sure if using the same thing twice is the best course of action. Guess it's a fair backup solution.
Otherwise, my experience with the minimalistic vectorized style is limited to a hazy memory of 15 year old anime iPod memes from 4chan, so I can't be much help there. I have no clue what images look good converted to that style.

@Unthrottled
Copy link
Member

but I'm not sure if using the same thing twice is the best course of action

Yeah I don't really care to do that.

I have no clue what images look good converted to that style

I guess I was just looking for any art in general. If I like it and think it has potential, I'll take a bit of create freedom and make something that looks nice (to me at least). Was kind of hoping you knew of a good Miku image, was what I was trying to get at.

Exhibit A
Before After
68907767_p0_master1200 zero_two_dark

@JohnEdwa
Copy link
Author

Hmh. I went for a scavenge hunt, ended up with this one (possibly) from Kuroi. Also ended up with a whole load of new wallpapers for myself, but their general style should prove fairly well why I'm not the best person to try looking for clean and simple backgrounds :)

But in any case, as I can't really do the vectorizing thing, I just used "Mean Curvature Blur" in GIMP to simplify it a bit, which I think ended up working fairly well:
image


I also noticed that for some reason, Visual Studio Code is very bad at handling transparency.
The same image saved at the same 8% layer opacity, except there is a squiggly background colour on the right (i.e like this), has terrible colour banding on the parts that are transparent. Not sure if there is anything one can do here - if the background isn't transparent, then it will work with only one theme colour...

@Unthrottled
Copy link
Member

Unthrottled commented Apr 10, 2021

as I can't really do the vectorizing thing

Sorry for not being clear. I was asking for reference images, because I was going to do that work. It's something I enjoy doing.

except there is a squiggly background colour on the right (i.e like this)

Either I am missing something, but I cannot see the issue in any of the vs code pictures you posted.


So I like the image you posted, them thighs are thicc.

I did my own digging too

I think this one would be nice, having Miku hang out with you as you code

One

This one gives off the same vibes as the existing wallpaper, which is nice

Two

I just liked this one

Three

What do you think?

@JohnEdwa
Copy link
Author

JohnEdwa commented Apr 10, 2021

Sorry for not being clear. I was asking for reference images, because I was going to do that work. It's something I enjoy doing.

Ah, no worries, I understood you perfectly. I would have just preferred to do a mockup in that style if I could have, to better see how it would look. But as I can't I tried something a bit similar, which was to blur it a bit so that the smaller details are removed.

Either I am missing something, but I cannot see the issue in any of the vs code pictures you posted.

If you open these two on separated tabs and switch between them, it's obvious as day and night. Again, same image at 8% opacity but one is a transparent PNG white the other one has been merged in GIMP with a background of the same colour that the theme has.

_color_bg
_transparent_bg

Another thing I noticed is that unless the image is transparent, the theme making it darker for the code window doesn't work. Also breaks showing the full colour image, as the (usually) transparent BG is always drawn over it.

That said, with the flat shaded vectorized images none of this is really an issue.


I did my own digging too

I vote no for the angery miku (even though the song the artwork is referencing is probably one of my favourites) and cast my vote for the second one, but the first is really cute too. I'll most likely continue to use the one I found with the edits I've done to it myself, but you've found very good choices too. Take your pick, what you think would fit the best.


[EDIT] For a full colour image, a good compromise is to add a background but make that be transparent too.
Fixes most of the colour banding while still allowing the darker code window and showing the full waifu, almost being a feature because it isn't as eye-blindlingly bright.

@Unthrottled
Copy link
Member

Aight, so I got lost during our whole "VS Code Glass Pane Wallpaper Issue".
Though it sounds to me like, you got it where you wanted it to, and know enough to goof around with VSCode's CSS.

Just as a heads up, if you are just replacing the image installed by the plugin (Like the same path) then it will probably be overwritten in the future. I have code that enables me to make updates to images without having users update the plugin. So you probably want to change the CSS to point at a file not at that path.

Thanks for the suggestion and talking with me about Miku!

I'll close this issue whenever I complete v10.0.0

@JohnEdwa
Copy link
Author

I have code that enables me to make updates to images without having users update the plugin. So you probably want to change the CSS to point at a file not at that path.

That would indeed be the correct way.
But the lazy way is to just make the miku.png files Read Only :P

I'll take this opportunity to mention that it would be neat if there was a built in way to install a custom wallpaper and sticker instead of having to edit the CSS. I guess the quickest would be to create a "Install Custom Wallpaper" script that would point the CSS to a local file, and then leave it out of the update script.

In any case, huge thanks for making the project as without it I would have never even realized my code editor could be weebified.

@Unthrottled
Copy link
Member

Unthrottled commented Apr 11, 2021

Sounds like you have a use case for vscode-background which does almost what the Doki-Theme does, but I think it's just limited to the editor window and you can do the custom image thing. I imagine it could be tweaked a bit to cover the entire window (you have the CSS from the Doki theme VS Code to give you a boost).

Edit: Weebify all the things! (I'm trying my hardest 😂 )

@JohnEdwa
Copy link
Author

JohnEdwa commented Apr 11, 2021

Yeah I took a look at that, but this modified DT solution works well for me too.

One unrelated bug I noticed though, the bracket pairing highlight is black on dark and white on light Doki-Themes:
themes

@Unthrottled
Copy link
Member

Cool I just fixed that on the JetBrains Plugin, I just used the theme's accent color.

For example here is Miku's

image

@Unthrottled Unthrottled added this to the v10.0.0 milestone Apr 11, 2021
@Unthrottled
Copy link
Member

sample_1f59d66227c5539c52f9776c64b49946d6ba7059 (1)

I changed my mind, I want this. (There is soooooooooo much Hatsune Miku art). Am disappointed that I'll have draw her hair band square things, or whatever the technical term is.

I'm also going to probably change up some of her themes colors (nothing too drastic).

@Unthrottled
Copy link
Member

Well that took longer than I would have liked. I regret choosing art that is highly detailed.

I also updated her syntax coloring a bit (The html, string, & comments) colors.

Before After
Screenshot from 2021-04-30 18-20-43 Screenshot from 2021-04-30 18-34-25

Thank you for the suggestion, I look forward to coding with Hatsune Miku again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants