top of page
Writer's pictureElise Guay

creative coding // tutorial & practice

Yesterday we had not only our first ever tutorial but our first creative coding tutorial. I had taken notes within one of the codes from the second workshop which helped Paul see where I'm at. My main question was: should I know how to write code from scratch? To which he (thankfully) responded, no, we don't expect you to know how to write code from scratch after two workshops. I was relieved to hear this because I was frankly having breakdowns over the fact that I couldn't magic a code out of thin air. With my seemingly straight forward questions answered, I forged ahead on my own. I felt very much like that meme of Bilbo Baggins that says, "I'm going on an adventure!"

I sat for a bit and was slightly overwhelmed with where to even begin. I enjoyed making the contact sheets with the randomized rectangles. Instead of jumping into that, I went back to the beginning with just a few rectangles. I started with the original three, in a 960x960 canvas, using HSB color coding. I then added a couple more, and made them all different colors using the color selector tool. I didn't like how a couple of them overlapped, so I tried to rearrange them by moving the fill and rect codes around, which to my surprise, worked. I followed this simple success with a fist pump, which thankfully no one saw. I then added some random numbers into the width and height to adjust the placement of the rectangles on the canvas. I discovered that adding either a plus or minus with a number after the width and height affected the position of the rectangles on the canvas. I spent some time plugging random numbers in until I got the desired results, even figuring out that if the three number that affect the size and shape of the rectangle are all the same, you end up with a rounded, not-quite-a-circle-but-close shape. I've never been so happy to see colored rectangles on the screen. I ended up with this lovely piece of abstract art, which isn't typically my preferred style, but in this instance I could have kissed Kandinsky. Below is the code I used and the result.






After this great success, I played around with the same rectangles, but this time I added the stroke back into it. I thought the randomization element was super neat, so I added that in as well, just to see what would happen. Much to my surprise, it did a thing. Maybe not quite as cool as the one we learned in class, but it was better than receiving error messages. I made a couple contact sheets using the randomization function as well as the saveFrame function, which is also super neat. Below is the code I used along with the contact sheets I made. I decided that 100 frames was too many, so I reduced it to 30 in order to see the differences better.





The next step was taking the fill out of the rectangles and having just the stroke. This was easy enough, however I could not for the life of me figure out why some of them were black and some of them were a weird grey or tan color. I did some research and couldn't find an answer so I may have to bring this up in the workshop today or in the support on Thursday. Below is the code I used and the contact sheet I made.






The next step was playing around with the inverted filter which appealed to my love of all things black (bats, creepy things, Halloween) and pastel (unicorns, glitter, pink and turquoise), which I am aware are very contradictory but I just like them. Below are the code and contact sheet.






The last thing I did was add circles. This where things started to get complicated again. I tried first to add a quadrilateral, but there were SO many numbers I said...nope. So I figured a circle would be easier to deal with. I wasn't completely incorrect. There are a few things that happened here that I couldn't figure out. The first being why the background turned grey despite the color code for white being entered? I tried a few different things, like adding another number for opacity but that didn't do anything for it. After messing with it for a bit, I chalked it up to a loss and kept going. I added three circles and figured out how to randomize them in the top left of the canvas, but from there I couldn't quite figure out how to get them anywhere else. Another thing I noticed was that even in the random command, the same colors would come up at the same time, for example, two of the same color green, or red. I adjusted the color codes and it still happened so I'm not sure what the deal with that is, but it just poses another question for Saint Paul. Below is the code with the contact sheets of both the regular contact sheet and the one with the inverted filter.





Below is a second version of the code with a couple questions: why isn't my background white and how do I save without having to click every time? Basically I couldn't figure out how to let it run and save multiple frames. I know we went over it in class but it wasn't in my notes for some reason so I'll have to ask about that as well.







3 views0 comments

Recent Posts

See All

Comments


bottom of page