Welcome to my website, where I will be posting
all the worthy p5.js sketches I have produced. If you don't know what p5.js is, it's a
javascript library based on processing, a java based library. It is formed on the idea of giving the user
creative freedom, by making it easier for the user to interact with javascript, while still
being able to use javascript's full potential. If you want to learn more, go to this
site.
I program using p5.js as a hobby, as I
find it intresting and fun. I am mostly using this site to archive and showcase my creations. This site is
made to be more practical than beautiful. Please message me if you have any comments or questions.
This was my first ever sketch which
I took seriously. It took me a lot of time to complete it as I had to figure a way to draw each
triangle accurately. I eventually found a way by plotting a grid of points them linking specific
points which were used to create the triangles. I also implemented a functionality which makes you
able to change between black and white, and color, as well as changing the saturation and brightness.
You are able to refresh the code also, as all the colors are chosen randomly.
Creating this hexagon was more difficult than it seems. Making the actual hexagon was relatively
easy, but drawing the lines was quite annoying as I had to have a perfect angle and distance for each line, as
it made all the lines look all squished if I used the side length as the top line.
I tried adding a slider to add more or fewer lines but it started looking very weird when the user changes it,
however I can change it in the source code.
There is not much to say about this sketch. I made it using the flower of life
pattern. If you don't know what it is, it's just some circles repeated in a specific order, only I did it a
little less sophisticated, I only used the not overlapping circles. Then I linked all the circles' centers
with each other, creating this pattern called the Metraton's cube
which apparently is this symbolic religious pattern. To add a little more bling to this pattern, I made it change color.
This sketch was one of the easier ones to complete. It uses the same principal as the sketch with the colorful triangles,
except the triangle pattern is simpler and I distorted the points by randomly changing the x and y. I had to zoom in the sketch
as I had to cover up the edges as you can see the background, I tried adding points outside the canvas but it didn't work as the program
encountered problems when changing the vector of points in the negative and 0 area, which was annoying. Another problem I had,
was that when scaling in the picture, transform(width/s, height/2)
didn't work meaning I had to do it manually and I hate that.
Linking dots was definitely one of the harder sketches to complete, I made it harder on myself for not using
classes but I didn't try using them until the matrix rain sketch. I spent a lot
of time debugging and trying to find solutions to obstacles I had in my way; finding the dots which need to be linked
was really hard. As well as all that, it was my first time using perlin noise,
which I used to move around the dots naturally, although it is vastly superior to random()
,I dislike the fact that perlin noise is not random and is pre-calculated, meaning I had to mess around with the values that control
the noise so all the dots don't mimic each other. I saw something similar used on a website (I forgot what it is called) that
links your cursor to some falling dots which are behind some shapes, maybe I could do something like that in the future.
This was my most ambitious project so far. I used more advanced techniques, analyzed the real matrix rain
and used that as a guideline to what I need to do. Although my code may not look exactly like that, it's because I stepped it down
as it was getting very slow when displaying all the characters and randomly generating and seeing if it should use the same character, so it looks like
the character stays in the same place, or change the character. I used a third party font file (credit to Norfok for the file)
as I can't get inverted Japanese characters using the standard utf-8 character set. Most tutorials don't make the rain display like in the real thing,
they make each column move constantly, instead it should move down one row every set amount of frames or seconds.
I tried adding functionality for the sliders like in some of the other sketches, but do to the nature of the code I wasn't able to do that as if a value
change while the code is worked on, it will bring up errors and stop working. Also, I don't think my way of doing it was the most efficient way of doing it.
In this sketch is where I first messed around with the third dimension and WEB-GL. The program itself wasn't as hard to finish, but the visualization part was hard, but I didn get the hang of it further I went as I got used to thinking about where would the points go on the cube in 3D. I didn't put as much effort into this as other sketches, but it still looks cool.