Smiley Project Generates smiley faces based on random feature selection so you can create lots and lots of unique smileys Further things to try Add in color each face has extra color Extra features such as hair ears glasses Animate features each face has slight movements eyes looking around Advanced Single face that translates between emotions Mouth face movement communication speech Smiley face generator create lots of unique smileys document body style height 700px Encapsulate face class const Face function var lineWidth_ 10 var lineStyle_ black var backStyle_ orange var openEyeSize_ 15 var closedEyeSize_ 30 var eyeSeparation_ 40 var eyeBrowMadSeparation_ 30 var eyeBrowSadSeparation_ 50 var eyeBrowYOffset_ 60 var mouthSize_ 50 var mouthYOffset_ 20 no feature var none function var drawClosedEyeUp function ctx ctx beginPath ctx arc 0 0 closedEyeSize_ 0 Math PI true ctx stroke var drawClosedEyeDown function ctx ctx beginPath ctx arc 0 closedEyeSize_ closedEyeSize_ Math PI 0 true ctx stroke var drawOpenEye function ctx ctx beginPath ctx arc 0 0 openEyeSize_ 0 Math PI 2 true ctx fill var drawEyes function ctx eyeFunc for var ii 0 ii 2 ii ctx save ctx translate eyeSeparation_ eyeSeparation_ 2 ii 0 eyeFunc ctx ctx restore var drawOpenEyes function ctx ctx save ctx translate 0 closedEyeSize_ 0 5 drawEyes ctx drawOpenEye ctx restore var drawWink function ctx ctx save ctx translate 0 closedEyeSize_ 0 5 ctx save ctx translate eyeSeparation_ 0 drawOpenEye ctx ctx restore ctx save ctx translate eyeSeparation_ 0 ctx beginPath ctx moveTo 20 0 ctx lineTo 20 0 ctx stroke ctx restore ctx restore var drawClosedEyesDown function ctx drawEyes ctx drawClosedEyeDown var drawClosedEyesUp function ctx ctx save drawEyes ctx drawClosedEyeUp ctx restore var drawSmile function ctx ctx save ctx translate 0 mouthYOffset_ ctx beginPath ctx arc 0 0 mouthSize_ Math PI 0 true ctx stroke ctx restore var drawLaugh function ctx ctx save ctx translate 0 mouthYOffset_ ctx fillStyle lineStyle_ ctx beginPath ctx arc 0 0 mouthSize_ Math PI 0 true ctx fill ctx fillStyle backStyle_ ctx beginPath var s lineWidth_ mouthSize_ ctx translate 0 lineWidth_ ctx scale 1 s 1 3 1 s 2 ctx arc 0 0 mouthSize_ Math PI 0 true ctx fill ctx restore var drawFrown function ctx ctx save ctx translate 0 mouthYOffset_ ctx beginPath ctx arc 0 mouthSize_ mouthSize_ 0 Math PI true ctx stroke ctx restore var drawAntiLaugh function ctx ctx save ctx translate 0 mouthSize_ mouthYOffset_ ctx fillStyle lineStyle_ ctx beginPath ctx arc 0 0 mouthSize_ 0 Math PI true ctx fill ctx fillStyle backStyle_ ctx beginPath var s lineWidth_ mouthSize_ ctx translate 0 lineWidth_ ctx scale 1 s 1 3 1 s 2 ctx arc 0 0 mouthSize_ 0 Math PI true ctx fill ctx restore var drawSurprize function ctx ctx save ctx translate 0 mouthYOffset_ mouthSize_ 2 ctx beginPath ctx arc 0 0 mouthSize_ 2 0 Math PI 2 true ctx stroke ctx restore var drawHrm function ctx ctx save ctx translate 0 mouthYOffset_ mouthSize_ 2 for var ii 2 ii 2 ii ctx beginPath ctx arc mouthSize_ 2 5 ii 0 mouthSize_ 5 ii 2 Math PI 0 ii 2 0 Math PI true ctx stroke ctx restore var drawPucker function ctx ctx save ctx translate 0 mouthYOffset_ mouthSize_ 2 ctx beginPath ctx arc 0 0 mouthSize_ 4 0 Math PI 2 true ctx fill ctx restore var drawBrows function ctx browFunc separation for var ii 0 ii 2 ii ctx save ctx translate separation separation 2 ii eyeBrowYOffset_ ctx scale ii 1 1 1 browFunc ctx ctx restore var drawMadBrow function ctx ctx save ctx beginPath ctx moveTo 20 20 ctx lineTo 20 20 ctx stroke ctx restore var drawMadBrows function ctx drawBrows ctx drawMadBrow eyeBrowMadSeparation_ var drawSadBrow function ctx ctx save ctx beginPath ctx moveTo 20 20 ctx lineTo 20 20 ctx stroke ctx restore var drawSadBrows function ctx drawBrows ctx drawSadBrow eyeBrowSadSeparation_ var parts_ none drawMadBrows drawSadBrows drawOpenEyes drawClosedEyesUp drawClosedEyesDown drawWink drawSmile drawLaugh drawFrown drawAntiLaugh drawSurprize drawHrm drawPucker var randInt function range return Math floor Math random range var draw function ctx partIndices ctx lineWidth lineWidth_ ctx strokeStyle lineStyle_ ctx fillStyle backStyle_ ctx beginPath ctx arc 0 0 120 0 Math PI 2 true ctx fill ctx stroke ctx save ctx translate 0 20 ctx fillStyle lineStyle_ for var ii 0 ii parts_ length ii var funcs parts_ ii var index partIndices ii funcs index ctx ctx restore var partIndices_ var partKeys_ var drawNextRandomFace function ctx if partIndices_ partIndices_ for var ii 0 ii parts_ length ii var funcs parts_ ii partIndices_ push randInt funcs length pick a random part to change var partIndex randInt parts_ length change that part var funcs parts_ partIndex Don t pick the same part var newPart randInt funcs length 1 if newPart partIndices_ partIndex newPart partIndices_ partIndex newPart draw ctx partIndices_ return draw draw drawNextRandomFace drawNextRandomFace function main var canvas document createElement canvas canvas width 128 canvas height 128 var ctx canvas getContext 2d var numImages 40 var images var imageNdx 0 var drawFace function ctx clearRect 0 0 canvas width canvas height ctx save ctx scale canvas width 256 canvas height 256 ctx translate 128 128 Face drawNextRandomFace ctx ctx restore pool of images if empty create var img images imageNdx if img img new Image images imageNdx img document body appendChild img imageNdx imageNdx 1 numImages img src canvas toDataURL var setNumFaces function console log window innerWidth window innerWidth console log window innerHeight window innerHeight console log document body scrollHeight document body scrollHeight console log document body offsetHeight document body offsetHeight console log document body clientHeight document body clientHeight console log window clientHeight window clientHeight console log window scrollHeight window scrollHeight console log window offsetHeight window offsetHeight var across Math floor document body clientWidth canvas width var down Math floor document body clientHeight canvas height numImages Math max 1 across down remove un needed images while images length numImages document body removeChild images images length 1 images splice images length 1 1 if images length imageNdx imageNdx images length add needed images while images length numImages drawFace setNumFaces var drawFaceAndContinue function drawFace setInterval drawFaceAndContinue 1000 update face 1 seconds window onload function main console log ready
drawBrows function ctx browFunc separation for var ii 0 ii 2 ii ctx save ctx translate separation separation 2 ii eyeBrowYOffset_ ctx scale ii 1 1 1 browFunc ctx ctx restore var drawMadBrow function ctx ctx save ctx beginPath ctx moveTo 20 20 ctx lineTo 20 20 ctx stroke ctx restore var drawMadBrows function ctx drawBrows ctx drawMadBrow eyeBrowMadSeparation_ var drawSadBrow function ctx ctx save ctx beginPath ctx moveTo 20 20 ctx lineTo 20 20 ctx stroke ctx restore var drawSadBrows function ctx drawBrows ctx drawSadBrow eyeBrowSadSeparation_ var parts_ none drawMadBrows drawSadBrows drawOpenEyes drawClosedEyesUp drawClosedEyesDown drawWink drawSmile drawLaugh drawFrown drawAntiLaugh drawSurprize drawHrm drawPucker var randInt function range return Math floor Math random range var draw function ctx partIndices ctx lineWidth lineWidth_ ctx strokeStyle lineStyle_ ctx fillStyle backStyle_ ctx beginPath ctx arc 0 0 120 0 Math PI 2 true ctx fill ctx stroke ctx save ctx translate 0 20 ctx fillStyle lineStyle_ for var ii 0 ii parts_ length ii var funcs parts_ ii var index partIndices ii funcs index ctx ctx restore var partIndices_ var partKeys_ var drawNextRandomFace function ctx if partIndices_ partIndices_ for var ii 0 ii parts_ length ii var funcs parts_ ii partIndices_ push randInt funcs length pick a random part to change var partIndex randInt parts_ length change that part var funcs parts_ partIndex Don t pick the same part var newPart randInt funcs length 1 if newPart partIndices_ partIndex newPart partIndices_ partIndex newPart draw ctx partIndices_ return draw draw drawNextRandomFace drawNextRandomFace function main var canvas document createElement canvas canvas width 128 canvas height 128 var ctx canvas getContext 2d var numImages 40 var images var imageNdx 0 var drawFace function ctx clearRect 0 0 canvas width canvas height ctx save ctx scale canvas width 256 canvas height 256 ctx translate 128 128 Face drawNextRandomFace ctx ctx restore pool of images if empty create var img images imageNdx if img img new Image images imageNdx img document body appendChild img imageNdx imageNdx 1 numImages img src canvas toDataURL var setNumFaces function console log window innerWidth window innerWidth console log window innerHeight window innerHeight console log document body scrollHeight document body scrollHeight console log document body offsetHeight document body offsetHeight console log document body clientHeight document body clientHeight console log window clientHeight window clientHeight console log window scrollHeight window scrollHeight console log window offsetHeight window offsetHeight var across Math floor document body clientWidth canvas width var down Math floor document body clientHeight canvas height numImages Math max 1 across down remove un needed images while images length numImages document body removeChild images images length 1 images splice images length 1 1 if images length imageNdx imageNdx images length add needed images while images length numImages drawFace setNumFaces var drawFaceAndContinue function drawFace setInterval drawFaceAndContinue 1000 update face 1 seconds window onload function main console log ready