Week 2: I need to be more organized!!

Updated: Sep 23, 2020

For this week assignment I have found inspiration in all kinds of Bauhaus pattern and shapes:

I designed a graphic for 2020 in Adobe illustration:

The plan was easy (or so I thought..) :

  1. For the random function: the shapes color will change every time the graphic will reload

  2. For element that changes over time, independently of the mouse: I decided that the shapes will move until they create the numbers

  3. And I wanted to create a black ellipse controlled by the mouse that will erase the numbers.

I started by drawing the shapes. luckily It was much easier than last time, and I did it pretty fast, even the arc was much simpler to create.

I started with the random function. I want the shapes colors to change every time the graphic reloads. I imagine that all shapes will change their color together, but every shape will change to a different color.

I thought to define each color in "let" and then use the random function.

It didn't go so well.... because when I change the value of each color, each time the graphic was reloaded the color that I changed its value changed to the new value in addition to other shapes, so it created a situation that few shapes were in the same color.

So I realized I needed to define each color and then in the setup I wrote a palette of all the colors and created a random function. I didn't like the way it look so I decided to create different palettes and run a list that will change every reload.

It worked, but I then realize I need to be really organized: first I need to define all my "ingredients", then in the setup I write the code that run at the beginning and then I need to write the part that will change every frame.

I wanted to add animation to the shapes. I started from the arcs: I know I can change the values of every variables by first define them with let and using the equal sign later.

First I set the starting point for the movement at the setup and then in the draw function wrote the new position instead of the old position. But, I wanted that the animation will stop at some point... but I didn't know how to do it.. that's why I didn't do it even though I wanted to.

For the mouse movement I wanted to create some kind of an eraser - a shape that will be dragged with the mouse (mouseDragged) in the same color as the background, I did something similar when I did the Rainbow Paintbrush in p5.js assignment (https://editor.p5js.org/ds6298/present/6Iv45y2O2).

But for some reason the shapes acted weird:

It took quite a while to realize the background should "move"to draw function because it needs to reload with the new changed shapes and I'm still not sure why I it happened when I wrote the dragged mouse function (or maybe I only then noticed it), but any way the eraser didn't work because the shapes kept being drawn agin and again, I guess I wonder if I p5 has support for layers???

So I completely change my plan for the mouse and did a background change on every click. I feel like I'm missing a lot of knowledge in order to really get the result I wanted, but here is the final result:

The code: https://editor.p5js.org/ds6298/sketches/jb__aQkrG

10 views0 comments

Recent Posts

See All