Category: 3. Generative Thing

I chose to generate different types of stars for this exercise. After researching the star function, I found that stars are something that can be generated in a wide variety of ways through the number of points. I decided to create a star generator that varies based on the number of size, points and color. At first, I brainstormed whether or not to keep the overall size of the stars to be the same, however, I ended up choosing to have them vary in size as well so that they would have an overlapping effect as the user continues to click to generate more. 

Link: https://editor.p5js.org/katrinamorgan/sketches/BsbmdhRym

For this project I created a sword generator which creates variation in the silhouette of the blade, the length of the blade, the color of the blade, the length, color, and shape of the handle, and the outline color for the entire sword. Each time the code is run, a completely new sword is generated.

To create randomness for this project I utilized the “random” function in p5.js. For color randomness, three variables representing RGB values were created for the outline, blade color, and handle color. Originally the outline color can be any random color from 0-255, while the blade color ranged from 140-255 with the intention of restricting to a lighter color palette, and the handle color was from 0-90 trying to achieve a darker color palette. However I quickly realized the RGB values don’t work like that and allowed a full color range instead.

I would’ve liked to spend more time adding jewels/designs on the blade and handle however that would require me to store the width of the component to make sure the design wouldn’t exceed the width. It would also require coming up with multiple pattern algorithms. I believe this code can generate up to 9.67 x 10¹³ different sword combinations!

Link: https://editor.p5js.org/ozioma/sketches/b-PSu_BUk 

For the Generative Design project, I wanted to create different shapes of teeth, specifically molars. Conceptually, I was thinking about my personal relationship to the teeth in my mouth. I have a lot of deep cavities, and it is something that has become a large part of my life. I was interested in representing the way my teeth were transforming over time. When cavities are filled the dentist will drill into your tooth, and I wanted to showcase literal pieces of the teeth missing. In its inception, I wanted to  have cavities be shown on the teeth and change shape each time the mouse was pressed. Unfortunately, I could not find a way to change the custom cavity shapes in a way that looked natural. The top image is a digital sketch I made in Procreate and the bottom image is the P5Js rendition. I find that I struggle with adding as much detail as I would like in P5Js, especially because I can see it in my head and draw it very clearly. However, I enjoyed learning how to work with variables for this project. https://editor.p5js.org/ri0la/sketches/jmcuWw-2d

Upon doing some basic google searches of random art on processing and p5js, I stumbled upon this unicorn, which was made using only triangles. The triangle-based leaves of my sunflower were inspired by this.

Unicorn: https://openprocessing.org/sketch/582870

I wanted something that is simplistic, symmetric and just appealing to the human eye so I decided to go for a sunflower. The variation ideas came along as I started to code. I laid down some rough sketches of the leaves first as those were the initial part of my design. I had to figure out a nice way of laying the triangles and I did that through trial and error of multiple sketches. After that, I had some coordinates noted down for the triangles (this was done alongside some coding). Then the idea of the random yellow seed pattern came up and I had some difficulty figuring out a code for that. I noted down the aspects that I want to vary randomly. 

The final decision was made so that the aspects I am varying are reasonably doable for a class project. As for the chances of the variations occurring, they are as follows:

• There is 9.99% chance of the background being black, otherwise it is white.
• The leaves can be rotated 45 degrees to be diagonal. This can happen only 9.99% of the time. The other times, the leaves are standard (on the axes).
• There is a small 6.66% of the evil eye appearing in the middle of the flower, otherwise it is a variation of yellow seeds. The yellow seed positions are also randomized.
• As for the stem, the standard color is green, but there is a 6.66% chance of a golden stem with a red outline and an 8.88% chance of a blue stem.

Link to code:

https://editor.p5js.org/AhmadAlmohtadi/sketches/Pow37R2QO

Traditional Chinese Text Armories (Links to code)

Results:

Initial Sketches:

Reflection:

Traditional Chinese Text Armories are inspired by the word cloud, a novelty visual representation of text data. My generator will produce different traditional Chinese armories made of Chinese texts. These steps are how I managed unpredictability and control in my system. However, though these algorithms are delightfully surprising, they can often be too uncontrollable to provide the constraint-satisfaction needed for gameplay or other highly constrained artifacts.

1. Arrange my words on the canvas! Distribution is the most straightforward kind of generative method. I have a lot of words and a canvas that I can spread them out across. My system has carefully chosen parameters that can be set for each option and the conditional functions can look compare the fixed parameters to make choices.
2. To make my pattern look more like armor, I make my pattern symmetrical.
3. Save the texts and colors in arrays to make the choice of texts and colors more artistic.
4. I want to draw eyes for each generated armor. These created armories s are a bit like the face makeup in Beijing opera.

Bibliography:

• Kate Compton, “So you want to build a generator…”https://galaxykate0.tumblr.com/post/139774965871/so-you-want-to-build-a-generator 
• Tag cloud:https://en.wikipedia.org/wiki/Tag_cloud
• Takawo,a creative coder based in Japan.   https://openprocessing.org/user/6533?o=288&view=sketches

For my generative design, I made it design different characters.

Link to code: https://editor.p5js.org/aysabellegalvez/sketches/nHXG5oCmF

Reflection: I programmed unpredictability by having the code randomly generate a number from a certain range and set up a bunch of if/else statements based on what number was chosen. The colors of every feature are also randomly generated (except the mouth and white part of the eyes). The shape of the characters were based on the Among Us characters, since they were simple and cute. 

LINK TO CODE

For my generative thing, I created a sketch that generates random flowers when the canvas is clicked on. There are three different categories of flowers and each category has two variations, meaning there are six total types of flowers that can be generated. Each flower has a random stem height, stem width, stem color, petal stroke width, petal stroke color, and petal fill color, and two flower categories have a random petal size. To manage unpredictability, I used if statements and the random function. I used both of these to determine which flower type to generate, and I used the random function to determine all colors, except the background color. To manage control, I used the MousePressed function, created my own functions, and created global variables. I created my own functions in order to better organize my code, make the MousePressed function more readable, and make it easier to reuse code, and I created global variables in order to make it easier to change certain numbers, such as the red in RGB, and to make it easier to reuse certain numbers, such as the stem height. Overall, I am happy with my results because my sketch is able to create numerous unique flowers.

Initial Sketch:

Bibliography:

https://editor.p5js.org/brain/sketches/2N3oI7V3x

Face Generator

Result:

Sketch:

Reflection:

I choose to generate some random faces for this project. I sketched out some of my thoughts. I want face shape, eyes, nose, and mouth to change each time I run the program. I also want to change the background color for each generation. The most difficult part of the code is Bezier vertex, I had to watch several tutorials about it, to understand what it does, but I really like the outcome of it, and I want to use it more often for later projects. For unpredictability, I have a variable storing a random integer, and the random integer will cause different combination of eyes, nose, and mouth. I give basically every shape the same y position, so it won’t be out of place, and I also have a very small range of random face size, so that the four ellipses, which build up the face, won’t be too far away and don’t look like a face. When I do the practice for the face generator, I did an ellipse generator, where it will be given different size, shape, transparency and color, the outcome of it is interesting, but if I have more time, I want to see if I can make all the ellipse not overlap with each other, so it can be more interesting than a bunch of color stack together.

Random Practice:

Citation:

xinxin. “Face Generator V.2.” P5.Js Web Editor, https://editor.p5js.org/xinxin/sketches/TLlFLVdD1.

code: https://editor.p5js.org/ys4136/sketches/NOw4a6WMq

This is the fish generator that I created. A fish will be generated each time people press the mouse. Throughout this project, I learned that the order among commands is very important, and subtle differences in the code will make the entire code does things that are completely different. 

This project also helped me to get to know loop functions and functions that run once only better. 

Link: https://editor.p5js.org/stpaloma23/sketches/4uJoH2gF3

Reflection: For my Generative thing! I created a unique name generator. When creating a random name generator, I wanted the background to always produce a different gradient along with the text style changing. When designing this generator I faced a few issues along the way. First I had to figure out how to create the gradient effect. To do this I followed a youtube tutorial. When making the background figuring out when I wanted to call the random color picker was important. When I had the random color picker in the for loop I got stripes, not the desired effect, but then I realized I only wanted to pick a random color once, so I moved it outside the for-loop. See below for the problem.  

Another issue I had to think about was how I wanted to form the names. I chose to go with the pattern of consonant then vowel. I figured that this could create the most realistic names, and be pronounceable. I first was doing all of the name logic in the for loop, however, I realized because of my conditional statements, every name was starting with a vowel, and seemed a bit unnatural. To fix this, I first added a consonant or vowel as the first letter, then I went to the for-loop. 

Another issue I faced was when I was using the pressMouse() feature. When I would press the mouse I would get this issue: 

The new names would generate and add on to the original name. I was very confused as to why this was happening. after moving some things around I realized that my issue was with where I declared nameArray. I declared it as a global array, this meant every time I was pressing the mouse, it was adding the new names to the old names creating this long string. To fix this, I moved the nameArray inside the nameCreator function to fix this issue. 

All and All, I’m content with the outcome of my name generator. It was a good exercise to solidify my knowledge on for-loops and global variables and random. 

Bibliography: 

P5js reference documentation

Help with gradient: https://www.youtube.com/watch?v=DJgDW3F68Xc