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