//CREATIVE CODING
void setup() {
For the last 3 weeks me and my classmates have been taking a Creative Coding course and learning Processing. We had to understand the basic principles of coding language and apply them to a range of different design tasks. As a final task, we had to design our own individual coded idea for the annual Design Matters conference. This post highlights important skills I obtained in the process and a presentation of my solution to Design Matters '21.
}
void draw() {
week1 (theBasics);
We started out learning the absolute basics like how to make a circle appear on screen and how to change the background color. Once we had the basics down we moved on to imitating poster art with simple(and not so simple) geometric shapes.
// To replicate the posters it was necessary to make use of loops. For example the orange rectangle (example to the left) had to be duplicated a whole bunch of times in the x and y axis. I also had to use "translate()" to move the 0.0 coordinate down and to the right. Lastly, I used "pushMatrix/popMatrix" to continuously move the anchor point to the center of the rectangle when rotating the angle.
Another important principle of coding we learned the first week was arrays. We learned that arrays are like a drawer with different containers, but all with the same label on. More accurately it's a collection of variables of the same type.
// In this example, I made use of arrays to give the shape random colors. 5 different colors were given an interval from 0 to 4 with "color[]". Then, the stroke color was determined by a random number between this interval. By using "randomSeed" I could pick any variation I liked (two examples above). In the example to the right I used functions on top of the array to duplicate the shape with different variables.
week2 (nextLevelShit);
In this week we were introduced to image manipulation and sinus/cosinus. The latter being very mathematical made it harder for me to grasp and I was definitely tested during this week. But it was also exciting to see how much difference one equation can do in the final output.
// By using "color sample" and "brightness(sample)" I was able to translate the lightness and darkness of an image to create this interesting output. It's definitely something I will consider using in the future!
// In this example I made a shape with 12 points distributed equally in a 360 degree circle. The points were connected using "vertex" that works much like pen tool in Illustrator. To find these points it was necessary to use the equation cos(AngleBetweenPoints * i) for the x position and sin(AngleBetweenPoints * i) for the y position. This is still kind of tricky for me to understand fully, but by tweaking the variables it kind of made sense.
week3 (designMatters);
For the remainder of the course we were each assigned to create a code that was based on "The Black Box" model ( input > coding magic > new output). The input was to be tweets made live at the event and I decided to transform them into unique galaxies with stars and planets orbiting the center of the screen.
// Inspiration images from Pinterest.
//CONCEPT
The idea was to assign each letter in the tweet to either a star or a planet, all different in size and color. Meanwhile, the amount of words in the tweet would determine how many rings would radiate from the center. The result would be varying depending on how long a tweet was and what was written in it. Also, rare letters like "z" or symbols like "#" would be bigger planets to make sure only a few of the appear each time.
// My first attempt at creating the galaxy. I added a pulsating motion using
"scale(map(sin(frameCount*0.03), -, -, -, -));". Also, I added
"rotate(frameCount*0.01);" making the whole shape slowly rotate, which creates the illusion that the star is orbiting along the ring.
// Removing background = Glitch in the matrix.
//FINAL RESULT
//REFLECTION
Creative Coding is a useful tool to master and I was impressed to see how fast you can go from making circles and squares to creating complicated designs. I still find coding to be a foreign language which I am nowhere fluid in but it seems less intimidating now. This is still not my preferred approach to design but I definitely see its value, especially when you want to make quick changes to a complicated design.
I can imagine future projects where I could find use for it but I probably won't be jumping back in it immediately. Although, I will not be afraid of returning to Processing after gaining the knowledge I build up this week. I could easily see myself working with it especially if I find assistance in youtube tutorials etc.
}
