[RANDOM BAND NAME GENERATOR] + [P5 RANDOM NAMING]
Bands generated from the site have actually been famous!
play here: https://email@example.com/sketches/SyEY0o2s7
I ran through countless problems with this exercise.
- http vs. https – took me 2 hours to work out that I was missing an ‘s’
- API rate exceeded – I cannot query data after sometime
The code would not run
- html over canvas – I cannot create the canvas on top of DOM element
The original design:
Play here: https://firstname.lastname@example.org/sketches/ry2KRL7iX
An attempt to create a spirotrope (spirograph + zoetrope).
Varying petals: https://email@example.com/sketches/B1KBjyF5X
Strobe petals: https://firstname.lastname@example.org/sketches/HyUpyTcqX
Next step: varying strobe
I have always wanted to make spirographs so I experimented with the equations. I turned these into objects with various properties including sizes, numbers of petals and shapes. I used the array function to duplicate the flowers.
I tried to make the objects communicate in a way that if one is smaller than 100 pixels, make every other one ‘red’. However, I could not get this to work in time and only those which are smaller than 100 pixels would turn red.
The sketch: https://email@example.com/sketches/rk9nyrKcm
For this week’s assignment, I partnered up with Yunze to work on his previous assignment. [SET GOAL] We began thinking about what we want to happen. In this case we decided we wanted to make the button an on/off button (or switch). Once it is on, shuffle the pattern. [SUBTRACT] We removed the previous functions that are irrelevant to the new design. [DIVIDE WORK] We divided the work by having one of us do the pattern part (Yunze) and once of us do the button part (Me). [COMBINE WORK] We combined the work and went through our finished codes.
I very much enjoy the process of going through other people’s codes to understand their thinking and seeing alternative ways of executing the same design.
Week 3 Home Work:
- Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Later we’ll look at how this compare to interface elements we’ll get for free from the browser.
- Create an algorithmic design with simple parameters. (One example is 10PRINT, example code).
- Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.
NOTE: I made a rollover last week so I’m starting with 2 & 3!
2. Create an algorithmic design with simple parameters.
For this I wanted to create sea waves with an algorithm which moves them up and down and sparkle when one wave crosses another.
I tried drawing points then lines but could not join them algorithmically.
I then tried to make a circular one and join them by angle instead but faced the same problem.
Question “How do I make the program remember one random point (a generated value and draw something after that point?”
I decided to study the for loop again. This is the furthest I got but will continue to work on it this coming week.
I was inspired by the appearance of the project ‘Time in Color’ by Scott Thrift. Scott tries to create a clock which represents a 24 hour day using sunrise / sunset like colors.
I wanted to take it further and make the gradient change according to time.
A sketch of what I wanted to make.
As I began to code, the gradient became too overwhelming so I focused on the changing of color based on the mouse position.
I did this by tracking the angle of the mouse in relation to the center of the circle. However, the top and bottom were the same. Therefore, I had to use the ‘if’ function to distinguish the two.
To present the function ‘random’, I made the background different in greyscale each time the code is run.
To make it more fun and aesthetically appealing I experimented with the tracing of the mouse. This resulted in a Kandinsky mobile feel.
This is the final output.
version 1: https://editor.p5js.org/embed/HywwAYpu7
version 2: https://editor.p5js.org/embed/SkeehRTuQ