Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript In-Browser Character Generator Confusion

CaityKo

Coder
I have been searching the internet like crazy for an answer to this question. I'm a bit frazzled so my wording of things might be off, but I hope you can get the idea.

I want to make a generator like this: which basically loads in pre-drawn .png photos of lines, shading, markings and they can be recolored using hex codes.

So the final result is a unique character.
20200825_191647.jpg
I know I seem like an annoying noob and all but it would mean a lot to me if I'm just pointed in the right direction. I've been told by a creator of a generator similar that it is very simple coding- yet he never disclosed WHAT exactly.

I'm assuming its HTML, CSS and javascript combined but what specifically should I be looking at to make this work!
 
Hi CaityKo

What you need is a javascript use.
  • First you need a png in which you already know what colors are used.
  • Then you paint a png on canvas element.
  • Then you extract raw pixel data from canvas to an array.
  • Then you loop over array, replacing existing color1 pixels with new color2 pixels
  • Then you put back your new raw pixel data to canvas
This is just changing flat areas of colors. To apply a shading, you have to have a separate gray png to combine it with altered color map.

May I ask, what do you need the generator for?
 
Last edited:
Thank you for your reply!

I'm an artist and I have .png files I'm wanting to make to create a wolf character generator for wolf roleplay. I'm not nearly as educated enough to create a functioning website so I'll just be fine with the generator for now. Aha

I just want a generator that is as simple as I can get it, for now, for this simple purpose.

(Sketch for a banner I've done)

Untitled76_20200825163918.png

In the example shown in the original post, they are using hex codes to recolor the image- however I've decided I just want to create specific colors available through a dropdown menu. What kind of javascript would be used to link the dropdown option to change the overlaying image upon pressing a "preview" button once all options are specified?

Again, thank you so much for your reply. This has given me something to research on and hopefully attempt soon!
 
Last edited:
Great artwork, I like it very much.

Well, dropdown boxes and picking colors can be done using html elements, that's an easy part. Actual rendering image to change colors would take a javascript and png color and shadow maps. But this is no task for a beginner. How about hiring a professional? The whole job shouldn't take more than five working days, maybe less for an experienced programmer.

Also, how do you stand with SVG (scallable vector graphics - Inkscape, Adobe Illustrator, Corel Draw, ...)? Having images in SVG instead of PNG would simplify things a lot. You'd just have to change SVG polygon colors, maybe using php or something similar. Then the programming work boils down to 2-3 days, I think.
 
Last edited:
Ok then, good luck, and you can find us here if you get stuck. And I really recommend considering SVG instead of PNG. For example, there is an option in Inkscape for tracing imported bitmaps into vector graphics. Then if you simplify and group similar areas, you can save it as SVG.

SVG is actually an XML file similar to HTML. By examining it, you can detect places where different colors are applied to polygons/curves. By embedding SVG in HTML and putting <id="xyz..." ...> on polygons/curvers you can reach these elements by id from javascript, then you just apply different colors to them.

And lastly, with embedding SVG, you maybe don't even need javascript and id mess. Maybe you can get away only with CSS from which you should be able to change polygons/curves colors, but I'm not entirely sure about this.
 
Last edited:
I didnt see your edit of the SVG until now, I'll definitely look into that if it makes this at least somewhat easier.

And I'm sure I'll be posting for help for sure...I'm highly motivated to make this, I know it might be challenging for a beginner in javascript and all- and maybe being determined to START with this project will bite me in the bum later on...but I gotta try! I've wanted to make something like this for years honestly.

//edit: also I'm sorry if I came off rude in my former comment. I was at the grocery store and I skimmed through- thank you for the compliment on my art as well, I appreciate that and your suggestions!
 
My sorry, the fault is all mine... I should try to understand people more carefully before touching the keyboard. I should recognize your enthusiasm already. I honestly support your web designing intentions.
 
Thank you! That means a alot.

This website: evosaur.com/dinodemo
Is a better example of what I'd want to try exactly.

Would I still go about it the same way as you stated above?

Edit// even if mine turns out super ugly and the coding is messy my first attempt I'm okay with that haha
 
I could only recommend, hopefully you'll refer other sources as well.

So, something like evosaur.com/dinodemo would be something you'd like to do, but with your own drawings and species?

I need some info...

First, what are your starting materials? Paper drawings or computer graphics? If computer graphics, are they bitmaps or vectors? Are they PNGs (bitmaps) as you already stated? It would be great if you could reconstruct all of them directly in vector image graphics program like Inkscape (that's the free one, pretty stable by my impression). You could also import PNGs and additionally process them in Inkscape, but PNGs are more messy solution. //edit: if you want photorealistic drawings choose bitmap graphics; if you want sketchy illustrations with polygonal shading, choose vector graphics.

Next, what are your current experiences with (1) CSS + HTML, (2) javascript, and (3) server scripting or XSLT? Some combination of these would be required to polish up to proceed. I can help you pick an optimal combination depending on your starting materials and your current knowledge.
 
Last edited:
Yes it would be my own drawings, colors, markings etc, and the only thing similar to evosaur would be the dropdown options- I believe the creator of that even has preset base colors for the creatures so theres no use of hex codes.

I'm currently more experience with .png type drawing files but I actually downloaded inkscape today to try that out if it would help me.

As for coding knowledge, I would say I'm pretty experienced with HTML and CSS. I've done it one and off for years and took 3 years classes in high school for front-end web design which really only consisted of HTML/CSS teachings, unfortunately.

I have absolutely no knowledge of Javascript or anything else you have mentioned. I know that's gonna make it hard, but I at least have to try.

Edit// would inspecting the webpage help me any in how they did their generator? Or is that not recommended?
 
I inspected their page, and they render output bitmap on their server (server side scripting), then send it as finished image to browser (we can also do this blending in browser via javascript, but it is more data to download to compose a single image, and data may be expensive, depending on traffic). I suspect they have a base of bitmaps for different features in different colors for different species, then they just blend it on a single image with different transparency maps. That's how I'd do it if I wanted photorealistic renderings, with bitmaps. I'd recomment either server side scripting, or javascript if you take this path.

But be sure to check out what you can do with Inkscape, if it is suitable for you as an artist. You can play with different sets of transparent drawing shadings, for example. You can have an illustration pen outline as the first group. Then you can have some filling color polygons as the second group. Then you can have black polygons with designed shading transparency as the third group on top of it, to shade everything what's beneath, being either color. We'd be similarly composing images out of image parts in HTML. This is what I like with vector graphics, HTML can behave as a programmatic composing tool, possibly combining template drawing parts. Outcome may be one of thousands combinations, but having templates reduces repeating artwork to a reasonable amount. And it takes less data than bitmaps. I recommend no javascript, but XSLT (less known, but well supported native template engine) if you take this path.

Either way, bitmaps, or vectors, the trick is to draw finished templates with shading transparency, and save them as picture files. You pick amount and complexity of combinations you want to expose in browser. Once you wisely decide what kind of combinations are in play, draw an example template images set, put it in some folder, and do the HTML user interface with dropdown boxes and just a placeholder for the resulting image. I, or someone here can help you then to compose vectors or bitmaps, whatever you decide, it shouldn't be so tricky. The most of the time after that goes on populating template base with actual artwork - that will be the key of impressing visitors. Of course, there can always be a button to download resulting image if you want that.

That would be the starting point. Some time later, if you want to dive into javascript, you may want to add crazy image moon explosion effects and moving sun lens flair effects, emphasizing an animated pterodactylus flying into sunset, while clouds flickering thousands colors under a rainbow, above colorerd mountain peaks, all reflecting in a lake of thousand colors under the waterfall, of course, again in thousands of colors. Well, you get the idea, I'm not an artist :)
 
Last edited:
I really appreciate the time you have taken to help me. I feel better educated about where to start! I've started playing around with Inkscape and a few other illustration programs to practice. I'll need a few days to compose my practice images, and get a base site set up and coded. I'll update then!

Again, thank you so much!
 
You're welcome, looking forward to hear from you soon.

P.S.
Make sure all your template canvases are exactly the same size, while positioning sub-drawings at correct places. You know, you draw the whole illustration and do same-template-feature grouping (very useful command) and save it all. Then isolate wanted feature-group by deleting every other group, and save that feature-group under a different name. Repeat this for all the features you want to control separately. All-template-same-canvas-size policy is important because it will make later compositing a breeze, you'll see. We'll just stack feature-groups on top of each other inside a single html div, possibly changing main colors of each group, and they should all fit at correct places.
 
Back
Top Bottom