First sketch in p5.js

Create your own screen drawing: self-portrait, alien, monster, etc. Use 2D primitive shapes – arc(), curve(), ellipse(), line(), point(), quad(), rect(), triangle() – and basic color functions – background(), colorMode(), fill(), noFill(), noStroke(), stroke(). Remember to use createCanvas() to specify the dimensions of your window and wrap all of your code inside a setup() function. Here’s a sample example: Zoog

I wanted to explore the differences between Processing and p5.js, since I have some experience with the first one, so I started exploring the Reference so I could see what changed with the primitive shapes. I realized that there were a few shapes that I am not used to work with, so I decided to explore them in my sketch.

I made a very simple fluffy for, using a loop to repeatedly create arcs. At first I thought the starting point of the arc would be the point in which the actual line started, so I imagined all arcs spreading out of one point, and when I realized that was actually the center of the ellipse, I tried to diferentiate the positions randomly so I got the arcs to form a blue mass in the center of the screen.

After that, I decided to try the belzier, that I also never used, and I had a lot of trouble trying to imagine where the line would be when I defined the xy of a point. When I finally understood it, I added the eyes and base, so it looked a bit more creature-like, and decided to add another layer of random curves, so it would look like it had this furry aspect both behind and in front of the arms.

Since the proposal was to have all in setup, I made a static version of it, which I thought to be kind of boring. Therefore, I made an animated version that I still haven’t figured out how to embed in here, so I made this GIF.

Here are the links to the code:

Static: https://editor.p5js.org/mardefronteira/sketches/SJ4yRBedm

Animated: https://editor.p5js.org/mardefronteira/sketches/SyCEa-Q_7

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s