User:Siets

From Graphic Design Arnhem
Jump to navigation Jump to search

Sietske's Generated Faces

Month 1

Week 1

My idea is to use my drawings in combination with code. I want to make generated faces that I can't come up on my own to create something new.

Week 2

Started to create drawings in illustrator to make my own svg library with eyes, heads, noses, etc to make a face. I created a html file to put in the images.

Screen Shot 2019-03-01 at 11.38.42.pngScreen Shot 2019-03-01 at 11.39.09.pngScreen Shot 2019-03-01 at 11.39.56.png

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 	<title></title>
 5 <style type="text/css">
 6 	#ear_left{max-width: 25%;max-height: 25%}
 7 	#head_up{max-width: 25%; vertical-align: top;max-height: 25%}
 8 	#ear_right{max-width: 25%;max-height: 25%}
 9 	#eye_left{max-width: 25%;max-height: 25%}
10 	#nose{max-width: 25%;max-height: 25%}
11 	#eye_right{max-width: 25%;max-height: 25%}
12 	#chin{max-width: 25%;max-height: 25%;margin:auto;}
13 
14 </style>
15 </head>
16 <body>
17 
18 <img id='ear_left' src="notworkingout/ears/left-ear2.svg">
19 <img id='head_up' src="notworkingout/head/top-head3.svg">
20 <img id="ear_right" src="notworkingout/ears/right-ear3.svg">
21 <img id='eye_left' src="eyes/left-eye2.svg">
22 <img id='nose' src="noses/nose3.svg">
23 <img id="eye_right" src="eyes/right-eye3.svg">
24 <img id='chin' src="notworkingout/head/chin2.svg">
25 
26 <div>
27 
28 </body>
29 </html>

Week 3

I looked into html grid to get the faces right next to each other. w3schools grid

Test03html.png

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 .item1 { grid-area: top-head; }
 6 .item2 { grid-area: left-ear; }
 7 .item3 { grid-area: left-eye; }
 8 .item4 { grid-area: nose; }
 9 .item5 { grid-area: right-eye; }
10 .item6 { grid-area: mouth; }
11 .item7 { grid-area: chin; }
12 .item8 { grid-area: right-ear; }
13 
14 .face-container {
15   display: grid;
16   grid-template-areas:
17     'top-head top-head top-head top-head top-head'
18     'left-ear left-eye nose right-eye right-ear'
19     'left-ear mouth mouth mouth right-ear'
20     'chin chin chin chin chin';
21   grid-gap: 5px;
22   background-color: #000;
23   padding: 5px;
24 }
25 
26 .face-container > div {
27   background-color: rgba(255, 255, 255, 0.8);
28   text-align: center;
29   padding: 20px;
30   font-size: 20px;
31   font-family:monospace;
32 }
33 </style>
34 </head>
35 <body>
36 
37 
38 <div class="face-container">
39   <div class="item1">top-head</div>
40   <div class="item2">left-ear</div>
41   <div class="item3">left-eye</div>  
42   <div class="item4">nose</div>
43   <div class="item5">right-eye</div> 
44   <div class="item6">mouth</div> 
45   <div class="item7">chin</div>
46   <div class="item8">right-ear</div>
47 </div>
48 
49 </body>
50 </html>

And I started to use some javascript added to html code to make them generate while refreshing the page

 1 var gezichtsElementen = ['top-head' , 'ear_left' , 'eye_left' , 'nose' , 'eye_right' , 'mouth' , 'chin' , 'ear_right']  
 2 function willekeuriggetal () {
 3   return Math.floor(Math.random() * 9) + 1;
 4 }  
 5 
 6 //i is het random getal
 7 for (var i = 0; i < gezichtsElementen.length; i++) { 
 8   var gezichtsElement = document.getElementById(gezichtsElementen[i]);
 9 
10   var bestand = gezichtsElement.src.split('.');
11   bestand = bestand[0] + willekeuriggetal() + '.' + bestand[1];
12 
13   gezichtsElement.src = bestand
14 
15   console.log(gezichtsElement)
16   console.log(bestand)
17 }

Week 4

The whole code to refresh for new faces

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 .item1 { grid-area: top-head; }
 6 .item2 { grid-area: left-ear; }
 7 .item3 { grid-area: left-eye; }
 8 .item4 { grid-area: nose; }
 9 .item5 { grid-area: right-eye; }
10 .item6 { grid-area: mouth; }
11 .item7 { grid-area: chin; }
12 .item8 { grid-area: right-ear; }
13 
14 .face-container {
15   display: grid;
16   grid-template-areas:
17     'top-head top-head top-head top-head top-head'
18     'left-ear left-eye nose right-eye right-ear'
19     'left-ear mouth mouth mouth right-ear'
20     'chin chin chin chin chin';
21   grid-gap: 0px;
22   background-color: #FFF;
23   padding: 0px;
24   margin: 0 auto;
25   height:100%;
26 }
27 
28 .face-container > div {
29   text-align: center;
30   padding: 0px;
31   font-size: 20px;
32   font-family:monospace;
33 }
34   #top-head{max-width: 100%;}
35   #ear_left{max-height: 100%;}
36   #eye_left{max-width: 60%; padding-top:60%;}
37   #nose{max-width: 100%; padding-top:50%;}
38   #eye_right{max-width: 60%; padding-top:60%;}
39   #ear_right{height: 100%;}
40   #chin{ max-width: 100%;}
41   #mouth {max-width: 100%;}
42 </style>
43 </head>
44 <body>
45 <div class="face-container">
46   <div class="item1"><img id='top-head' src="top-head/top-head.svg"></div>
47   <div class="item2"><img id='ear_left' src="left-ear/left-ear.svg"></div>
48   <div class="item3"><img id='eye_left' src="eyes/left-eye.svg"></div>  
49   <div class="item4"><img id='nose' src="noses/nose.svg"></div>
50   <div class="item5"><img id="eye_right" src="eyes/right-eye.svg"></div> 
51   <div class="item6"><img id='mouth' src="mouth/mouth.svg"></div> 
52   <div class="item7"><img id='chin' src="chin/chin.svg"></div>
53   <div class="item8"><img id="ear_right" src="right-ear/right-ear.svg"></div>
54 </div>
55 </body>
56 <script type="text/javascript">
57  
58 var gezichtsElementen = ['top-head' , 'ear_left' , 'eye_left' , 'nose' , 'eye_right' , 'mouth' , 'chin' , 'ear_right']  
59 function willekeuriggetal () {
60   return Math.floor(Math.random() * 3) + 1;
61 }  
62 
63 //i is het random getal
64 for (var i = 0; i < gezichtsElementen.length; i++) { 
65   var gezichtsElement = document.getElementById(gezichtsElementen[i]);
66 
67   var bestand = gezichtsElement.src.split('.');
68   bestand = bestand[0] + willekeuriggetal() + '.' + bestand[1];
69 
70   gezichtsElement.src = bestand
71 
72   console.log(gezichtsElement)
73   console.log(bestand)
74 }
75 </script>
76 </html>

Month 2

Weeks of April

I want to continue going further with my generated faces and in the end I want them to be able to be printed and/or make a booklet out of them.

I'm fixing all of the SVG files as they didn't save properly with Adobe Illustrator. I'm also drawing new and more faces which takes some time.
Next steps:

  • fixing the SVG so they are better connected and saved without artboard etc
  • Trying to find a new way instead of html grid to get the faces next together so it looks better when printed
  • rotating eyes, noses, mouths etc with javascript so there are even more options and weird outcomes
  • shifting eyes, noses, mouths in their spot up and down
  • maybe some other things


Facegenerator1.pngFacegenerator2.pngFacegenerator3.png

Everytime your refresh, you see some face variations

Beast generator

After Korea I started working on my beast generator. So instead of faces I'm designing a random beast generator inspired by medieval bestiaries. I've designed a new grid and new 'parts' as in legs, tails, noses, ears, eyes etc.

The grid looks something like this:

Beastgrid.png

First sketch

I'm also going to try to give them some colour in the background layer + rotating some features as eyes for example (see code)

FirstBeastSketch.png

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <style>
  5 .item1 { grid-area: tail; }
  6 .item2 { grid-area: back; }
  7 .item3 { grid-area: back-raw; }
  8 .item4 { grid-area: back-law }
  9 .item5 { grid-area: front-raw; }
 10 .item6 { grid-area: front-law; }
 11 .item7 { grid-area: nose; }
 12 
 13 .item8 { grid-area: head; }
 14 .item9 { grid-area: ear; }
 15 .item10 { grid-area: eye; }
 16 .item0 {grid-area: niks;}
 17 .item11 {grid-area: empty; }
 18 
 19 .face-container {
 20   display: grid;
 21   grid-template-areas:
 22     'niks back back back ear head'
 23     'tail back back back front-law head'
 24     'tail back-raw empty empty front-law eye'
 25     'tail back-raw back-law front-raw front-law nose'
 26     'tail back-raw back-law front-raw front-law nose';
 27   grid-gap: 0px;
 28   background-color: transparent;
 29   padding: 0px;
 30   height:100%;
 31   width: 100%;
 32   position:absolute;
 33   top:0px;
 34   left:0px;
 35   z-index: 2;
 36 }
 37 
 38 .face-container > div {
 39   background-color: transparent;
 40   text-align: center;
 41   font-size: 20px;
 42   font-family:monospace;
 43   border: 0px solid red;
 44 }
 45 
 46 
 47 #nose{min-width: 100%; padding-top:-10%;}
 48 #back {padding-top:20%;}
 49 
 50 
 51 .background-container {
 52   display: grid;
 53   grid-template-areas:
 54     'niks back back back ear head'
 55     'tail back back back front-law head'
 56     'tail back-raw empty empty front-law eye'
 57     'tail back-raw back-law front-raw front-law nose'
 58     'tail back-raw back-law front-raw front-law nose';
 59   grid-gap: 0px;
 60   background-color: transparent;
 61   padding: 0px;
 62   height:100%;
 63   width: 100%;
 64   position:absolute;
 65   top:0px;
 66   left:0px;
 67   z-index: 1;
 68 }
 69 
 70 .background-container > div {
 71   background-color: transparent;
 72   text-align: center;
 73   font-size: 20px;
 74   font-family:monospace;
 75   border: 0px solid red;
 76 }
 77 
 78 img {}
 79 
 80 svg { stroke-width: 2px; /*background-color: blue;*/}
 81 
 82 </style>
 83 </head>
 84 <body>
 85 
 86 
 87 <div class="face-container">
 88 
 89   <div class="item0"></div>
 90   <div class="item1"><img id="tail" src="tests/tail1.svg"></div>
 91   <div class="item2"><img id="back" src="tests/back1.svg"></div>
 92   <div class="item3"><img id="back-raw" src="tests/back-raw1.svg"></div>  
 93   <div class="item4"><img id="back-law" src="tests/back-law1.svg"></div>
 94   <div class="item5"><img id="front-raw" src="tests/front-raw1.svg"></div> 
 95   <div class="item6"><img id="front-law" src="tests/front-law1.svg"></div> 
 96   <div class="item7"><img id="nose" src="tests/nose1.svg"></div>
 97 
 98   <div class="item8"><img id="head" src="tests/head1.svg"></div>
 99   <div class="item9"><img id="ear" src="tests/ear1.svg"></div>
100   <div class="item10"><img id="eye" src="tests/eye1.svg"></div>
101  <div class="item11"></div>
102 </div>
103 
104 <div class="background-container">
105 
106   <div class="item0"></div>
107   <div class="item1"></div>
108   <div class="item2"><img src="background1.svg"></div>
109   <div class="item3"></div>  
110   <div class="item4"></div>
111   <div class="item5"><img src="background1.svg"></div> 
112   <div class="item6"></div> 
113   <div class="item7"></div>
114 
115   <div class="item8"></div>
116   <div class="item9"></div>
117   <div class="item10"></div>
118  <div class="item11"></div>
119 </div>
120 
121 </body>
122 <script type="text/javascript">
123  
124 var gezichtsElementen = ['tail' , 'back' , 'back-law', 'back-raw' , 'front-raw' , 'front-law' , 'nose' , 'head' , 'ear' , 'eye'] 
125 var transformeerbareGezichtsElementen = ['eye', 'mouth']
126 
127 
128 function willekeuriggetal (min, max) {  
129   min = Math.ceil(min);
130   max = Math.floor(max);
131   return Math.floor(Math.random() * (max - min)) + min;
132 }  
133 
134 //i is het random getal
135 for (var i = 0; i < gezichtsElementen.length; i++) { 
136   console.log(gezichtsElementen[i]);
137   var gezichtsElement = document.getElementById(gezichtsElementen[i]);
138 
139   var bestand = gezichtsElement.src.split('.');
140   bestand = bestand[0] + willekeuriggetal(1,8) + '.' + bestand[1];
141   gezichtsElement.src = bestand;
142 
143   //console.log(gezichtsElement);
144   console.log(bestand);
145 
146 };
147 
148 var css_transforms = ['transform:rotate($$deg); ',  'padding-top:$$%; '] ; 
149 // 'transform:skew($$deg); '
150 var changes = willekeuriggetal(1,4)
151 var style_change = ''
152 for (var i = 0; i < changes; i++){
153   part = document.getElementById(transformeerbareGezichtsElementen[Math.floor(Math.random() * transformeerbareGezichtsElementen.length)]);
154   console.log(part)
155   transform =css_transforms[willekeuriggetal(0, css_transforms.length)];
156   transform = transform.replace('$$', willekeuriggetal(-30,80));
157   //console.log(transform)
158   style_change = style_change + transform;
159   part.style.cssText = style_change;
160 
161 };
162 </script>
163 </html>

Sketch 2

BeastSketch2.png

Sketch 3

Sketch3.png

Sketch 4

BeastSketch4Edit.png

code

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <style>
  5 .item1 { grid-area: tail; }
  6 .item2 { grid-area: back; }
  7 .item3 { grid-area: back-raw; }
  8 .item4 { grid-area: back-law; }
  9 .item5 { grid-area: belly; }
 10 .item6 { grid-area: front-raw; }
 11 .item7 { grid-area: front-law; }
 12 .item8 { grid-area: nose; }
 13 
 14 .item9 { grid-area: head; }
 15 .item10 { grid-area: ear; }
 16 .item11 { grid-area: eye; }
 17 
 18 .item0 {grid-area: niks;}
 19 .item12 {grid-area: empty; }
 20 .item13 {grid-area: nothin; }
 21 .item14 {grid-area: leeg; }
 22 .item15 {grid-area: kaal; }
 23 .item16 {grid-area: vacant; }
 24 .item17 {grid-area: blokje; }
 25 .item18 {grid-area: vierkant; }
 26 .item19 {grid-area: nul; }
 27 
 28 
 29 
 30 .face-container {
 31   display: grid;
 32   grid-template-areas:
 33     'blokje back back ear head leeg'
 34     'tail empty nul nul eye leeg'
 35     'tail empty front-raw vierkant nose nose'
 36     'back-law back-raw front-raw front-law nose nose'
 37     'back-law back-raw front-raw front-law kaal kaal';
 38   grid-gap: 0px;
 39   background-color: transparent;
 40   height:100%;
 41   width: 100%;
 42   position:absolute;
 43   top:0px;
 44   left:0px;
 45   z-index: 2;
 46   transform: scale(0.9);
 47 }
 48 
 49 .face-container > div {
 50   background-color: transparent;
 51   text-align: center;
 52   font-size: 20px;
 53   font-family:monospace;
 54   border: 0px solid red;
 55 }
 56 
 57 
 58 #eye {/* position:absolute; top: 28%; left:77%; border:0px solid blue;*/}
 59 img#eye {}
 60 /*#nose{min-width: 100%; padding-top:-10%;}*/
 61 /*#back {padding-top:20%;}*/
 62 
 63 
 64 .background-container {
 65   display: grid;
 66   grid-template-areas:
 67     'blokje back back ear niks leeg'
 68     'tail empty nul nul eye head'
 69     'tail empty front-raw vierkant nose nose'
 70     'back-law back-raw front-raw front-law nose nose'
 71     'back-law back-raw front-raw front-law kaal kaal';
 72   grid-gap: 0px;
 73   background-color: transparent;
 74   height:100%;
 75   width: 100%;
 76   position:absolute;
 77   top:0px;
 78   left:0px;
 79   z-index: 1;
 80   transform: scale(0.9);
 81 }
 82 
 83 .background-container > div {
 84   background-color: transparent;
 85   text-align: center;
 86   font-size: 20px;
 87   font-family:monospace;
 88   border: 0px solid red;
 89 }
 90 
 91 
 92 
 93 svg { stroke-width: 2px; /*background-color: blue;*/}
 94 
 95 </style>
 96 </head>
 97 <body>
 98 
 99 
100 <div class="face-container">
101 
102  <!--  <div class="item0"></div> -->
103   <div class="item1"><img id="tail" src="tail/tail.svg"></div>
104   <div class="item2"><img id="back" src="back/back.svg"></div>
105   <div class="item4"><img id="back-law" src="back-law/back-law.svg"></div>
106   <div class="item3"><img id="back-raw" src="back-raw/back-raw.svg"></div>  
107   <div class="item6"><img id="front-raw" src="front-raw/front-raw.svg"></div> 
108   <div class="item7"><img id="front-law" src="front-law/front-law.svg"></div> 
109   <div class="item8"><img id="nose" src="nose/nose.svg"></div>
110 
111   <div class="item9" style="text-align: left; margin-top:15px"><img id="head" src="head/head.svg"></div>
112   <div class="item10"><img id="ear" src="ear/ear.svg"></div>
113   <div class="item11"><img id="eye" src="eyes/eye.svg"></div>
114 
115   <div class="item12"></div>
116   <div class="item13"></div>
117   <div class="item14"></div>
118   <div class="item15"></div>
119   <div class="item16"></div>
120   <div class="item17"></div>
121   <div class="item18"></div>
122   <div class="item19"></div>
123  
124 
125 </div>
126 
127 <div class="background-container">
128 
129   <div class="item0"></div>
130   <div class="item1"></div>
131   <div class="item2"><img src="background1.svg"></div>
132   <div class="item3"></div>  
133   <div class="item4"></div>
134   <div class="item5"><img src="background1.svg"></div> 
135   <div class="item6"></div> 
136   <div class="item7"></div>
137 
138   <div class="item8"></div>
139   <div class="item9"></div>
140   <div class="item10"></div>
141  <div class="item11"></div>
142 </div>
143 
144 </body>
145 <script type="text/javascript">
146  
147 var gezichtsElementen = ['tail' , 'back' , 'back-law', 'back-raw' , 'front-raw' , 'front-law' , 'nose' , 'head' , 'ear' , 'eye'] 
148 var transformeerbareGezichtsElementen = ['eye', 'mouth']
149 
150 
151 function willekeuriggetal (min, max) {  
152   min = Math.ceil(min);
153   max = Math.floor(max);
154   return Math.floor(Math.random() * (max - min)) + min;
155 }  
156 
157 //i is het random getal
158 for (var i = 0; i < gezichtsElementen.length; i++) { 
159   console.log(gezichtsElementen[i]);
160   var gezichtsElement = document.getElementById(gezichtsElementen[i]);
161 
162   var bestand = gezichtsElement.src.split('.');
163   bestand = bestand[0] + willekeuriggetal(1,8) + '.' + bestand[1];
164   gezichtsElement.src = bestand;
165 
166   //console.log(gezichtsElement);
167   console.log(bestand);
168 
169 };
170 
171 var css_transforms = ['transform:rotate($$deg); ',  'padding-top:$$%; '] ; 
172 // 'transform:skew($$deg); '
173 var changes = willekeuriggetal(1,4)
174 var style_change = ''
175 for (var i = 0; i < changes; i++){
176   part = document.getElementById(transformeerbareGezichtsElementen[Math.floor(Math.random() * transformeerbareGezichtsElementen.length)]);
177   console.log(part)
178   transform =css_transforms[willekeuriggetal(0, css_transforms.length)];
179   transform = transform.replace('$$', willekeuriggetal(-30,80));
180   //console.log(transform)
181   style_change = style_change + transform;
182   part.style.cssText = style_change;
183 
184 };
185 
186 </script>
187 </html>

Sketch 5, 6, 7 etc

I finally managed to get random colors and text

Screen-Shot-2019-06-09-at-21.45.41.gif

I still have to fix some images and make new background image shapes though. So not 100% finished yet. But it's getting there.

Background tests:

Background-test.png

Background-test1.png

Background-test2.png

Background-test3.png

Background-test4.png

Background-test5.png

Background-test6.png

Background-test7.png

Background-test7.gif

Project Description

200 words

The Beast Generator

User:Siets/beastgenerator

I’m fascinated by cracks and blobs I find in my home or on the street. They trigger my brain to see weird and silly creatures. But now I was thinking, why not turn this around? I’m always in for cooperations, so why not work together with a computer? I started to make drawings as SVG files to create my own SVG drawing library. I use this to generate new images. In the beginning I was inspired by the artist Mokfolio, and I also started out with random faces, but now it turned into a beast generator inspired by bestiaries from medieval times. So every time you refresh the page, you see a new generated beast. And there are some pretty weird ones! With command-p you can print them and create your very own bestiary with some generated info that comes with every new beast.