{"author_link":"\/users\/niborious","author_name":"niborious","author_uid":"niborious","comments":[],"epoch":1544004254,"event":"LD43","format":"md","ldjam_node_id":135896,"likes":20,"metadata":{"p_key":"126239","p_author":"niborious","p_authorkey":"1003511","p_urlkey":"342357","p_title":"How Woobliticus's Art is Procedurally Generated","p_cat":"LDJam ","p_event":"LD43","p_time":"1544004254","p_likes":"20","p_comments":"0","p_status":"WAYBACK","us_key":"1003511","us_name":"niborious","us_username":"niborious","event_start":"1543536000","event_key":"71","event_name":"LD 43"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD43","removed_author":false},"_superparent":120415,"_trust":5,"author":3511,"body":"## Creating art directly from code with zero base art assets\nFeel free to play the game first for context\nhttps:\/\/ldjam.com\/events\/ludum-dare\/43\/sacrifices-to-wooblicitus\n\n![Screen Shot 2018-12-05 at 1.20.29 AM.png](\/\/\/raw\/7bd\/z\/1f041.png)\nSince people have been commenting positively on my games artstyle, I thought it would be cool to talk about how I made it. Procedurally generating art is something that I have always been very interested in, and I have created many different kinds of random character creators in the past. \n\nPeople are usually surprised to learn that the type of procedural generation I do does not use any base art assets. The game actually has zero physical art files at all, all of the art is generated when you play the game directly from pure javascript code. \n\nIt is all basically randomization of proportions and positions of the things relative to each other. \n- Random head size\n- random body size. - The body is always a trapezoid of random dimensions with two legs at the bottom. \n- random face position\n- random eye distance and size\n- random eyebrow distance and curve\n- random mouth pose\n- random amount of hair strands\n- random length of hair strands\n- random width of hair strands\n- random curve style of hair. \n\n### Wobbly Circles\nBut the coolest part is probably how it randomizes the head shape. There is a function I wrote called wobblyCircle that basically creates an imperfect circle - in a way it is mimicking a hand drawn circle. \n#### Randomly mimicking hand drawn circles\n![Screen Shot 2018-12-05 at 1.53.34 AM.png](\/\/\/raw\/7bd\/z\/1f04f.png)\nI also wanted to give the head a randomized outline thickness that changed along the circle, but I found I didn't even need to do this directly. Instead I just draw a random wobbly circle in black, and then draw the regular head as a different random wobbly circle with an outline on top. The bottom black circle bleeds through different amounts in different areas which makes the outline look irregular.\n#### Random outline thicknesses\n![Screen Shot 2018-12-05 at 1.54.44 AM.png](\/\/\/raw\/7bd\/z\/1f050.png)\n\n### Demons\n\n\nThe demons of the game use the same code as the townsfolk with a few modifications:\n- They are green\n- They have horns of random length\n- Their heads are way more wobbly\n- Their eyebrows are always angry\n\n![Screen Shot 2018-12-05 at 1.34.45 AM.png](\/\/\/raw\/7bd\/z\/1f047.png)\n\n### Animations\n\nBecause of the way the system was set up, I can easily change the facial expression by just changing a few values.\n- When they attack, I can make the mouth open and the eyebrows angry.\n![Screen Shot 2018-12-05 at 1.41.41 AM.png](\/\/\/raw\/7bd\/z\/1f04a.png)\n- When they are scared, I can make the mouth sad, the eyebrows worried, and the eyes bigger and trembling\n![Screen Shot 2018-12-05 at 1.45.16 AM.png](\/\/\/raw\/7bd\/z\/1f04c.png)\n- And then when they die it is similar, but their eyes get smaller and their mouths are open\n![Screen Shot 2018-12-05 at 1.47.59 AM.png](\/\/\/raw\/7bd\/z\/1f04d.png)\n\nI really enjoy making procedural art, and I hope this was interesting. Feel free to let me know if you would like me to go in more detail about anything.\nThanks!\n\nHere is the game if you would like to play it\nhttps:\/\/ldjam.com\/events\/ludum-dare\/43\/sacrifices-to-wooblicitus\n\n","comments":7,"comments-timestamp":"2018-12-06T20:00:51Z","created":"2018-12-05T09:20:48Z","files":[],"files-timestamp":0,"id":135896,"love":20,"love-timestamp":"2018-12-05T15:57:42Z","meta":[],"modified":"2018-12-06T20:00:51Z","name":"How Woobliticus's Art is Procedurally Generated","node-timestamp":"2018-12-05T18:55:15Z","parent":121571,"parents":[1,5,9,120415,121571],"path":"\/events\/ludum-dare\/43\/sacrifices-to-wooblicitus\/how-woobliticuss-art-is-procedurally-generated","published":"2018-12-05T10:04:14Z","scope":"public","slug":"how-woobliticuss-art-is-procedurally-generated","subsubtype":"","subtype":"","type":"post","version":408154},"node_metadata":{"n_key":"135896","n_urlkey":"342357","n_parent":"121571","n_path":"\/events\/ludum-dare\/43\/sacrifices-to-wooblicitus\/how-woobliticuss-art-is-procedurally-generated","n_slug":"how-woobliticuss-art-is-procedur","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"3511","n_created":"1544001648","n_modified":"1544126451","n_version":"408154","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/43\/sacrifices-to-wooblicitus\/how-woobliticuss-art-is-procedurally-generated","text":"## Creating art directly from code with zero base art assets\nFeel free to play the game first for context\nhttps:\/\/ldjam.com\/events\/ludum-dare\/43\/sacrifices-to-wooblicitus\n\n![Screen Shot 2018-12-05 at 1.20.29 AM.png](\/\/\/raw\/7bd\/z\/1f041.png)\nSince people have been commenting positively on my games artstyle, I thought it would be cool to talk about how I made it. Procedurally generating art is something that I have always been very interested in, and I have created many different kinds of random character creators in the past. \n\nPeople are usually surprised to learn that the type of procedural generation I do does not use any base art assets. The game actually has zero physical art files at all, all of the art is generated when you play the game directly from pure javascript code. \n\nIt is all basically randomization of proportions and positions of the things relative to each other. \n- Random head size\n- random body size. - The body is always a trapezoid of random dimensions with two legs at the bottom. \n- random face position\n- random eye distance and size\n- random eyebrow distance and curve\n- random mouth pose\n- random amount of hair strands\n- random length of hair strands\n- random width of hair strands\n- random curve style of hair. \n\n### Wobbly Circles\nBut the coolest part is probably how it randomizes the head shape. There is a function I wrote called wobblyCircle that basically creates an imperfect circle - in a way it is mimicking a hand drawn circle. \n#### Randomly mimicking hand drawn circles\n![Screen Shot 2018-12-05 at 1.53.34 AM.png](\/\/\/raw\/7bd\/z\/1f04f.png)\nI also wanted to give the head a randomized outline thickness that changed along the circle, but I found I didn't even need to do this directly. Instead I just draw a random wobbly circle in black, and then draw the regular head as a different random wobbly circle with an outline on top. The bottom black circle bleeds through different amounts in different areas which makes the outline look irregular.\n#### Random outline thicknesses\n![Screen Shot 2018-12-05 at 1.54.44 AM.png](\/\/\/raw\/7bd\/z\/1f050.png)\n\n### Demons\n\n\nThe demons of the game use the same code as the townsfolk with a few modifications:\n- They are green\n- They have horns of random length\n- Their heads are way more wobbly\n- Their eyebrows are always angry\n\n![Screen Shot 2018-12-05 at 1.34.45 AM.png](\/\/\/raw\/7bd\/z\/1f047.png)\n\n### Animations\n\nBecause of the way the system was set up, I can easily change the facial expression by just changing a few values.\n- When they attack, I can make the mouth open and the eyebrows angry.\n![Screen Shot 2018-12-05 at 1.41.41 AM.png](\/\/\/raw\/7bd\/z\/1f04a.png)\n- When they are scared, I can make the mouth sad, the eyebrows worried, and the eyes bigger and trembling\n![Screen Shot 2018-12-05 at 1.45.16 AM.png](\/\/\/raw\/7bd\/z\/1f04c.png)\n- And then when they die it is similar, but their eyes get smaller and their mouths are open\n![Screen Shot 2018-12-05 at 1.47.59 AM.png](\/\/\/raw\/7bd\/z\/1f04d.png)\n\nI really enjoy making procedural art, and I hope this was interesting. Feel free to let me know if you would like me to go in more detail about anything.\nThanks!\n\nHere is the game if you would like to play it\nhttps:\/\/ldjam.com\/events\/ludum-dare\/43\/sacrifices-to-wooblicitus\n\n","title":"How Woobliticus's Art is Procedurally Generated","wayback_source":[]}