WORDNIK & GIPHY API DATA

Inspired by

[RANDOM BAND NAME GENERATOR] + [P5 RANDOM NAMING]

https://www.bandnamemaker.com/
Bands generated from the site have actually been famous!

play here: https://editor.p5js.org/nt1475@nyu.edu/sketches/SyEY0o2s7

Screen Shot 2561-10-23 at 11.02.20.png

Screen Shot 2561-10-23 at 10.55.05.png

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
    Screen Shot 2561-10-23 at 10.40.35.pngScreen Shot 2561-10-23 at 10.27.50.png
  • html over canvas – I cannot create the canvas on top of DOM element

Too add:

  • adjectives

The original design:

Screen Shot 2561-10-23 at 10.44.40.png

Screen Shot 2561-10-23 at 10.40.35.png

Flower Object Communication

Screen Shot 2561-10-09 at 10.24.16.png

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://editor.p5js.org/nt1475@nyu.edu/sketches/rk9nyrKcm

RE-ORGANIZING CODES – OBJECT ORIENTED PROGRAMMING


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.

Starting sketch (Yunze’s homework for week 4): https://editor.p5js.org/Yunze/sketches/By1r8ASt7

Finished sketch (week 4 complete homework): https://editor.p5js.org/nt1475@nyu.edu/sketches/SkSSGc0F7

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.

Sea Wave – Where?

Week 3 Home Work:

  1. 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.
  2. Create an algorithmic design with simple parameters. (One example is 10PRINTexample code).
  3. 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.

MVIMG_20180925_111231~2.jpg

I tried drawing points then lines but could not join them algorithmically.

 

Screen Shot 2561-09-25 at 11.39.37.png

I then tried to make a circular one and join them by angle instead but faced the same problem.

MVIMG_20180925_111212~2.jpg

https://editor.p5js.org/nt1475@nyu.edu/sketches/Sk6LbASt7

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.

https://editor.p5js.org/nt1475@nyu.edu/sketches/BJPC0aPtX

The Broken Modernist Clock

Screen Shot 2561-09-20 at 02.00.42.png

Screen Shot 2561-09-20 at 02.00.52.png

Screen Shot 2561-09-20 at 02.00.59.png

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.

https://timeincolor.com/

I wanted to take it further and make the gradient change according to time.

A sketch of what I wanted to make.

Top: AM
Bottom: PM

Screen Shot 2561-09-17 at 21.08.57.png

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.

Screen Shot 2561-09-17 at 21.23.16.png

This is the final output.

version 1: https://editor.p5js.org/embed/HywwAYpu7
version 2: https://editor.p5js.org/embed/SkeehRTuQ