Student Area

miniverse-excercises

01. One with Everything

https://editor.p5js.org/miniverse/sketches/mT0ISSnKw

02. Quadrilateral Zoo

https://editor.p5js.org/miniverse/sketches/fWiAkq7Sr

03. Spiral

https://editor.p5js.org/miniverse/sketches/8b0d7tQ7C

04. Transitioning Rectangles

https://editor.p5js.org/miniverse/sketches/hk49qtben

 

05. Iteration with Functions

https://editor.p5js.org/miniverse/sketches/SuExwtLfM

06. Random Splat

https://editor.p5js.org/miniverse/sketches/VAki2UVBI

07. Stochastic Elements

https://editor.p5js.org/miniverse/sketches/QagVN1tvV

08. Recoding Schotter

https://editor.p5js.org/miniverse/sketches/_zWqHu2Fb

 

09. Billiard Ball

https://editor.p5js.org/miniverse/sketches/6gRgleEj8

10. One-Person Pong

https://editor.p5js.org/miniverse/sketches/f8gPZkXFz

11. Hitomezashi Sashiko Stitching

https://editor.p5js.org/miniverse/sketches/wIWCKtAjJ

 

12. Imaginary Islands

https://editor.p5js.org/miniverse/sketches/q_TEaAQlx

13. Drawn Line, Three Ways

https://editor.p5js.org/miniverse/sketches/PxXHjbnMK

14. Calligraphic Polyline

https://editor.p5js.org/miniverse/sketches/0KjdO5DJM

15. Longest Line Search

https://editor.p5js.org/miniverse/sketches/Y4PiON6rq

16. Eyes Following Cursor

https://editor.p5js.org/miniverse/sketches/9bRH4R2W2

17. Ripples in a Pond

https://editor.p5js.org/miniverse/sketches/0aRFE612D

18. Butt Generator

https://editor.p5js.org/miniverse/sketches/U3hW2UyHm

19. Angle between Three Points

https://editor.p5js.org/miniverse/sketches/ms9ju_myD

20. Circle from Three Points (Circumcenter)

https://editor.p5js.org/miniverse/sketches/mvfW83xxY

lampsauce-Exercises

Exercises

I had already started before I realized we were supposed to make 20 different sketches. I put all of mine in one sketch and implemented a function switcher instead ¯\_(ツ)_/¯  

(CODE)

  1. One with Everything
  2. Quadrilateral Zoo
  3. Spiral
  4. Transitioning Rectangles
  5. Iteration with Functions
  6. Random Splat
  7. Stochastic Elements
  8. Recoding Schotter
  9. Billiard Ball
  10. 1-Player Pong
  11. Hitomezashi Sashiko Stitching
  12. Imaginary Islands
  13. Drawn Line, Three Ways
  14. Calligraphic Polyline
  15. Longest Line Search
  16. Eyes Following Cursor
  17. Ripples in a Pond
  18. Butt Generator
  19. Angle between Three Points
  20. Circumcenter

marimonda – exercises

code linked to each image!(resized for convenience, all images (but task 8) are 600 x 600).

HAS BEEN FIXED^^^^     

These aren’t great images (They work fine!)! But here’s a little doodle I did with another version of task 14!

Task 15 will show the red line after pressing ‘A’ or ‘a’, to indicate when the user is done drawing lines, after that it will reset the canvas:

Butt Generator! 18. Butt Generator

Plus some extras images I liked:

yanwen-meander

This is such a beautiful project. I really appreciate how Hodgin documented each step that constructed the project in adequate amounts of explanation, both visually and textually. It is fascinating to follow along the process of creating each segment of this procedural generated piece. 

It might be a bit of a stretch but somehow Land Lines by Zach Lieberman and the Google Data Arts Team came up in my mind. Maybe it’s because I found similarities between how both projects used simple lines to either generate organic landscapes or to find existing places based on satellite images. 

yanwen-Timekeeping

To me the most intriguing part of the topic is that while multiple ways of time tracking (e.g Lunar based calendar, Tropical, Solar and Sidereal year) can be traced back to natural phenomenon, the concept of “hour” was actually entirely man made. Besides the structured time-keeping method, Johanna Drucker also mentioned how time can be described through relations and temporality. It is possible to view time from highly subjective perspectives or multiple view points. 

yanwen-clock

 

 

Demo: link  & Repo: link

For my abstract clock project, I wanted to present the passage of time from the perspectives of mayflies, a species with extremely short lives. Adult mayflies have an average lifespan of one day. I wanted to step away from presenting the exact time with seconds, minutes and hours, and instead divide the whole day into 4 stages: emergence, swarming, mating, and death. Since I couldn’t found an exact record of time of transitions, the current version is built with evenly distributing 6 hours to each stage.

Concept: ephemerality/decay/“朝生暮死” (birth in the morning death at dawn)

I went through a lot of adjustments from abstracting the form of mayflies to simple custom shapes, to deciding how each stage should be presented differently from the previous one. Ideally I would like to solve the frame-rate issue and look for more natural ways to show the transitioning.

Toad2 – Clock

Link

Due to being in my room all the time due to quarantine, I feel like it’s hard for me have a sense of time since my room doesn’t get much natural light. Because of this, I wanted to focus upon the cyclical nature of time and inconsistency and shapelessness of time for me. However, I wanted this clock to be able to be read occasionally when everything lines up perfectly as there parts of my life that loosely give my life structure. I also experimented with the concept of countable objects vs many in the way I implemented the number of shapes and allow the user to make the mental shortcut and simply guess and approximate the time.

Progress:

Sketches:

 

miniverse-clock

my code: https://editor.p5js.org/miniverse/sketches/uhuv5GAOY

***EDIT***

my process:

I wanted to make an API based clock where I took the time and searched for a spotify song with related words or numbers in the title. However, because the clock won’t have internet connection when displayed, Golan suggested scraping texts and getting excerpts which mention the time. Those could be  stored statically as small files along with the code. Therefore I wouldn’t need the internet.

To do this, one needs some knowledge of python and mountains of plain text to look at. I had python expertise, and Golan pointed me to a repo with all of Project Gutenberg (database of text out of copywrite) saved as a plain text 8 GB zip file.

The picture below is part of the preprocessing python script I used to parse Gutenberg for a couple hours. I listed calendar key words and looked for them linearly by looping through all the files. I stored the line the keyword was in to a JSON.

This was the first iteration of the clock when I didn’t scrape the text properly and and didn’t read the documentation for p5.js:

changes to the display code from the photos above:

  1. I removed the font. The text has german, Russian, Spanish and other characters that “Vogue.tff” from free fonts.com doesn’t support. Now I use Times New Roman.
  2. I rescraped all the texts and screened for profanity.  The way I scraped before had bugs and was on a computer with not enough processing power.
    1. Here are the scripts for scraping and filtering profanity: https://github.com/himalinig/gutenberg_clock
  3. I include the minutes and seconds. For each text excerpt I also include the title of the text it came from. I restructured the code and read through the p5.js documentation which opened allowed me to fix the irregular highlighting.

Here’s the gifs of the new and improved project:

during the minute:

when the minute changes:

Another one:

Things I learned:

  • Don’t do this the night before. I couple of hours when I wasn’t exhausted was more productive than the all nighter I pulled.
  • Process is important. It was hard to isolate bugs when too many variables could be responsible. Make small changes, test, and then add complexity.
  •  Make changes in order of importance. Small changes that are hard to figure out can be done later.