- What is your content?
- Designing postcards for countries’ exhibitions in EXPO 2020.
- What is the intended form?
- The theme of the postcards is called “Exploring Greatness through Trivialness”, which refers to different countries’ national and traditional patterns and icons to generate more modern patterns as the pictures of postcards by programming.
- Why is this done in code?
- In terms of organized variations of colors, repetition, rotation, size… of patterns, manually drawing via hand or image editing programs usually take much more time on doing redundant work like copying and pasting.
For the art assignment, I knew from the beginning that I wanted to do something in the Vaporwave style. And though, at first, I though that would mean glitching images to make it more retro, I eventually settled on instead doing this tron-esque vaporwave album cover. My main motivation for the pivot was because we’re going to cover pixel sorting and images later in the semester.
The randomization here is relatively basic: I have mountains being generated in a similar style to my “Martian” poster and the grid lines also change color everytime. I think the hardest part of the sketch was probably figuring out the log() function, since I’d never used it before and we hadn’t discussed it in class. Unfortunately, after I got the below screen captures, I didn’t save my most recent changes (switching from random to noise), but you can still find my sketch here!
Assignment: Pick an idea for your final project. It can be any design project (screen, print, textile, etc) that is better done in code than by hand. It is up to you to come up with a good idea for a project that is worthwhile spending 4 weeks on. Make a slideshow with only three slides, answering one of the questions below per slide. Post a PDF of your slides on the documentation blog and be ready to present it in class.
- What is your content? (I’m designing a logo for Bronx Zoo)
- What is the intended form? (It’ll be one dynamic logo that can change to look like all the animals)
- Why is this done in code? (It allows me to write one piece of code to produce all the different variations of the logo)
This week, we visited several methods of introducing randomisations to our sketch. Aaaand the assignment for this week is to recreate an existing artwork with code.
Check them out here: http://alpha.editor.p5js.org/tirzatirza14/sketches/HyMBelIkG
In approaching this assignment, I wasn’t sure what kind of artwork I should try to recreate. To approach this, I gave myself several rules. The first one being, I should choose an artwork that is seemingly easy to recreate. It should give me that “OH IT’S EASY” feel the moment I look at it. At this stage, I found several artworks. Afterwards, I sat with each work (there were about 5 of them) and came up with possible gameplans. Of 5 of them, I figured that the one that was comfortable enough, but also challenging was Ellsworth Kelly’s Study for “Cité”.
When tackling this work, I figured that they consist of what seems to be 20 smaller panels that each carries 5 rectangles that tbh, seems random to me. So I identified that to make these rectangles, I could draw 4 vertex points and fill it with black. I did this firstly by placing hard numbers. After I got a hang of it, I did one panel with 5 rectangles manually. And then, I tried to write a simple maths formula and push it to an array. However, in the process, I noticed that some vertex points would be placed very far down the panel. To solve this, I introduced a simple constrain.
i then drew the rectangles by using the for loop. However, I noticed that they all are of the same shapes instead of being rectangles of different shapes (um like rotation, direction, etc). I tried using random() but since there’s only one vector position for each point, even though the position is randomised, they’re not randomised for each time a point is drawn. To solve this, I then decided to create 4 alternative points for each point of the rectangle. Soooo for instance, to draw the Top Left of the rectangle, there are 4 points (that’s chosen randomly) and each time the for loop calls for a point to draw, it’ll select one from the 4 alternatives randomly (confusing, I knooow). This was pretty tricky because then I need to create a two-dimensional array by pushing the vector points with for loops.
However, once I was done with pushing the points into the array, the problem became, “how do I call them randomly??”. To solve this, I created a randomisation function that I call as I draw the points. (I explained this is in three lines but really, the process took forever for me to figure out).
looks a tiny bit more decent but still meh??
After that, the problem became, “how do I reproduce this panel, 5×4?”. To tackle this, I initally used p5 graphics and looped through them 20 times. However, I saw that while it does repeat the graphics, the black rectangles are not drawn randomly.
they’re not random?? help??
I then decided to use the good old for loops to redraw the rectangles and distribute them such that there are 20 panels (of them). I was surprised at how 1) easy it was to redraw them using for loops instead of p5 graphics and 2) how I didn’t remember that for loop was an option.
I finally had this as the final um result:
I think the main take away from this assignment is that, it definitely reinforces my skills in creating arrays with for loops. I used to think that it was pretty much on top of my head… but well… not so much with 2d array, apparently. Moreover, I was surprised that I had to use 4 nested for loops… This actually made me very confused, like, which one goes to which loop?? But I guess I’m glad I got it all figured out although I like to think there must be a simpler approach to this.
I took this design by sol lewitt to redesign it in code and added a bit animation. Basically, I used Delaunay Triangulation Algorithm. To make things simply, the Delaunay Triangulation Algorithm gives you a bunch of point on the canvas and connect the closest three point to triangles. And the triangles won’t be overlapping. This design reminded me of this algorithm so much. Although in this image there are not only triangles, I used only triangles in my design because I want to apply the algorithm. As for the color of the design, I didn’t use pure white and black. I used #eeeeee and #1e2630 to make it more natural.
This is the demo video:
This is the link to p5 editor: https://alpha.editor.p5js.org/RonanChang/sketches/HkCKpgUkz
Firstly, I created a vector array containing a bunch of points including the four points of the canvas. Then I used delaunay.triangulate() to convert the vector array into a 2-element array which is already arranged in triplets (more details below). And then, every three points I draw a triangle. Inside every triangle, I draw quad() proportionally. I used lerp() to divide each triangle and I used lerpColor() to make the animation effect.
Things that I learned and used:
preload function: I used preload() to load delaunay.js library.
Delaunay.triangulate() expect a list of vertices (which should be a bunch of two-element arrays, representing 2D points) and it will return you an array, arranged in triplets, representing triangles by indices into the passed array.
Array.map function let us create an Array of 2 elements arrays [ [x,y],[x,y],..] from our array of PVector.
Arrow function: a simple version of “function”
lerp() and lerpColor() : to pick a number or color between
~~ doule tildes function truncates a floating point number and keeps the integer part, a little bit like floor(). When the number is larger than 0, it does floor(). When the number is negative, it does math.floor().
For this week’s assignment, I decided to work with one of the Olivetti posters, and I chose the one below.
What attracted me to this poster was the geometric shapes, and the boldness of the three colours used (orange, white and black). We had looked at drawing shapes using vectors and directions in class, and I wanted to continue practising those techniques for the assignment, and get more familiar working with vectors.
So I’m working on Yayoi Kusama’s avant-garde (even til this day) pumpkins.
To begin with, these are her pumpkins:
And these are my
Essentially I created a strip that mimics the texture of the pumpkins. Curves are sine waves. Size of the dots are randomised. Their relative position to the base lines are Perlin noised. Colour patterns are directly picked from photos of Yayoi Kusama’s pumpkins. See code here.
If it were not for art, I would have killed myself a long time ago.
- How do I make sure that there’s a significance color difference between the background, the cirlce and the arc???
- How to make sure the background blocks next to each other do not have the same color?
For this week’s assignment, we were supposed to pick an art piece and replicate it in code. I picked Vassily Kandinsky’s work Several Circles as he’s a famous abstract painter. Here are my results compared to original Kandinsky’s work. https://alpha.editor.p5js.org/heyasiya/sketches/HJuno1iA-
The process was relatively complex. First, I drew noise waves to replicate the uneven background. Then, we get to the noise circles behind the blue circle. Then, I drew blue and black circles and then randomized colorful circles to create the cluster we have in the original picture. I think the most problematic part of the process was creating the noise waves in the background because I wanted them to be a little bit transparent but at the same time have a stroke and also have them all in different sizes in one loop. That was made with help of Rune as I was a little dum-dum and couldn’t figure it out by myself. Another problem I had was the transparency of the circles because I had them all saved into the array and when I tried to work with the transparency after giving the color value, it simply didn’t work. Turns out, all I had to do is to change the transparency value in the array itself. That is all for the process part, here are a few pictures describing the process.