Project 3

My project is this randomly generated abstract landscape and the numbers on the screen represent the latitudes and longitude of places. My original idea was to generate random landmarks of some of my favorite cities but I went to an art exhibition by a RISD professor last Thursday. He made these art works that are abstract landscapes. I looked at his art works and thought to myself that my project did not have to real places, I could just make abstract landscapes like these.

 

 

 

Research Post 5: Pj5 library

p5 sound library: p5.sound extends p5 with web audio functionality including audio input, playback, analysis and synthesis.

example: load and play sound using preload()

reference links:

https://p5js.org/reference/#/libraries/p5.sound

https://p5js.org/examples/sound-load-and-play-sound.html

 

Sophia_ResearchPost5

p5.Speech was created by Luke DuBois to connect sketches to speech, so that they may talk and listen. It allows you to interact with speech recognition APIs and web speech. his type of technology is really interesting as it speeds up/simplifies communication between us and a computer. It is also useful for those with physical difficulties with typing.

http://ability.nyu.edu/p5.js-speech/

An example of this: http://ability.nyu.edu/p5.js-speech/examples/02speechbox.html

In this example, you can type out what you want it to say. You can then alternate the volute, speech rate, and pitch.

Kyle_ResearchPost5

p5.js Library: p5.play

This is a library used for the creation of games or playthings. P5.play has a Sprite class to control different objects in a 2D space. It does not use events and does not support 3D.

link to library:

http://molleindustria.github.io/p5.play/

link to example:

http://molleindustria.github.io/p5.play/examples/index.html

Generate Landscape Ideas

  1. For this idea, I am planning to have a car going in the frame, and the background is the buildings, trees, and houses.

 

2. The second idea is kind of similar to the first one, but this one is a bear walking in the forest.

 

3. My last idea is the ocean, the fishes are swimming.

Research Post 05

The subject I chose from the p5 library is the p5.play. This is a javascript mostly for animation. It provides classes for the object in 2D spaces. It doesn’t support 3D and events. But it is simple and easy to use. All in all it is really helpful for those people who want to make animation using javascript. 

p5.play:http://molleindustria.github.io/p5.play/

some interesting examples:http://molleindustria.github.io/p5.play/examples/index.html#

p5 library – ResearchPost5

p5.scribble

The library p5.scribble allows users to draw out primitive 2D features with a sketch style. It’s a different aesthetic from the conventional and smooth look of regularly coded p5 shapes and details and allows room for more roughness in the drawings. Filling in color creates a scribbling effect that isn’t completely cohesive as well.The hand drawn look presents a friendlier approach to the program, particularly when it comes to displaying charts and data collection.

In order to use, this file has to be included:

/path/to/p5.scribble.js

And then you have to create an instance:

var scribble = new Scribble();              // global mode
var scribble = new Scribble( p5Instance );  // instance mode

p5.scribble also allows users to change the general appearance of the scribble effect, including the neatness and bowing of the lines and the amount of offset allowed in coordinates.

scribble.bowing = yourValue;          // changes the bowing of lines
scribble.roughness = yourValue;       // changes the roughness of lines
scribble.maxOffset = yourValue;       // coordinates will get an offset, here you define the max offset
scribble.numEllipseSteps = yourValue; // defines how much curves will be used to draw an ellipse

library link: https://github.com/generative-light/p5.scribble.js

code example: https://github.com/generative-light/p5.scribble.js/blob/master/examples/chart.html

This is a usage of p5.scribble in making a bar graph with various line visuals.

 

Research Post 05

The p5js library that I chose to talk about in this post was p5.play, as described it “sprites, animations, input and collision functions for games and gamelike applications” and the created of this code library was Paolo Pedercini. When looking around the website I saw many cool animations that he has created one particular game that was interesting was called, “everyday the same dream” (link: http://www.molleindustria.org/everydaythesamedream/everydaythesamedream.html). When you play you are a husband who wakes up to go to work everyday. It is like the daily life type game and you find out that the main character is always late for work and gets called out for it by his wife and boss at work.

here are some images:

Sophia_Generative Landscape Ideas

 

  1. Show a coral reef growing in the ocean. Start with sand at bottom of ocean, and slowly grow each piece till it fills up the screen. Could have unexpected parts when fish come and interact with it.

2. A garden/flowers growing. They are growing, as the background changes with rain clouds, sunlight, and dark/night

3. Show CO2 cycle, and how it builds up in atmosphere from various sources

3 Concepts for Generative Landscape

Idea #1: Outer Space

There would be planets and asteroids floating around and maybe a rocket ship would pass by.

Idea #2: Dinosaurs

There would be dinosaurs walking around and eating plants, and a pterodactyl can fly by. Or a meteor could crash.

Idea #3: Ocean

There would be lots of fishes hanging around and then they swim away when a shark passes by.