I devised a game using the Walker model Dan Schiffmann gives in the Processing tutorials There are elaborate instructions here on my Github page. It’s basically a 4 player betting game to see which direction the Walker will go. There is some dice rolling built in to give the illusion of choice and skill :) I built it because I love to gamble and would love to play this with friends. Future upgrades include new graphics, character development for an emcee, and interactive functionality to read the dice and weight the dice rolls properly.
Self Portrait
I already had started Schiffman's Coding Train, although I hadn't used the p5.js web editor yet. I had been in Processing. So I had a bit of a head start, but also was happy to (painstakingly) learn the arc(), curve(), and bezier() functions more precisely. I also wasn't used to a bit of the syntax, but it wasn't much of a hassle.
I knew I wanted to draw my face with the glasses using opacity. To pick my RGB colors, I used this website and copy/pasted from there. There may be better sites but that was the first one on Google.. ( I wonder if there is a setup function or class you can load that would allow simple word input for colors?)
I wish I knew a better way to draw the shapes so that the relationships could be maintained if the drawing was scaled, but I could only really do so much with dividing width and height. Also, I would want to know more about how Reneissance painters use mathematics like the Golden Ration to scale their drawings properly.
To help with navigation, knowing where my x and y values were as I hovered over say, the rim of the glasses, I put the code into a draw() function and used print(mouseX, mouseY); with Auto-Refresh turned on. This helped me estimate where to draw lines to and such so that they intersected as needed.
Also, I would // each new line of code so that Auto-Refresh would work until i was ready to preview each new line...
// arc(But I realized that if I type the function and close the parenthesis that followed, the code would not make the drawing disappear...
arc();One question I had was - how could I draw the teeth using sin() function? I had to eyeball the curve of the lips and it was a pain in the ass. I also made a variable for the upper lip values which made things a tad easier.
var y = height / 1.55 + 2; line(168, y, 168, 292); line(180, y, 180, 300); line(192, y, 192, 306); line(204, y, 204, 306); line(216, y, 216, 303); line(228, y, 228, 296);
I would like to know a more streamlined way of drawing so that the picture could scale if the canvas size changed. One thing that would have helped was to know if there was a way to reflect something across the screen?
Towards the end, I had to cut myself off from being too obsessive as I was getting into minor tweaks to the eye brows and eye shapes to change the emotion. Very subtle changes in values were significant in effect!