ResearchPost5

JiYoung_ResearchPost05 (p5bots)

P5bots is a library aids interaction between (p5js) browsers and microcontrollers like the Arduino Unos, as well as anything else running Firmata. It was created by Sarah Groff- Palermo as a part of the Google Summer of Code 2015 project. Through this library, users can draw with buttons and control motors from the browser.  p5bots is made of two sets of files: the client file, called p5bots.js, which is included in the index; and the server files, called p5bots-server. A project that uses this library is “Singing the p5js Blues.” It is a browser window is controlled by an Arduino Uno, and values are taken from a slider before being mapped to the notes in a scale on the browser.

  • Link to the Project: “Singing the p5js Blues”- https://youtu.be/ODSCQRi6kyQ
  • Link to the library- https://github.com/sarahgp/p5bots

 

by JiYoung
ResearchPost5

Kasper_ResearchPost5

The p5.Particle is a library which adds particle support to p5.js, created by Robert Cock. The Particle object, which is simply a data definition, and the Fountain object, which encapsulates all the needed properties for creating Particle, can be used to create data-driven effects. In this library, all particles that are defined in the parent Fountain has a common properties, such as gravity. It is easy for user to add per-particle properties, such as color. When a Particle’s “location” is greater than the canvas height, “life” is greater than or equal to one, or “partSize” is less than 0.1 or 3, the Particle will be deallocated.

Library Link: https://github.com/bobcgausa/cook-js#how-does-this-work

Code Example: http://jsfiddle.net/bobcook/rLvhc8h2/

This example shows generating pattern with rate.

 

 

ResearchPost5

Research Post 5

The GUI library for p5.js is a library by Martin Schneider designed to add a GUI with items that the user can interact with to adjust elements of an image to a processing code. GUI items that this library can add include sliders, text bars, and drop down menus. These items can be interacted with to change elements including but not limited to form, color, and position.

A GUI is created with the createGui() function. To add items to theGUI, the gui.addGlobals() function is used.

An example of a work done with this library would be this sketch of pac man created by Martin Schneider himself. In this work, the user can change the color of pac man with a color wheel and the size of pac man’s mouth with a slider.

Library: https://github.com/bitcraftlab/p5.gui

Example: https://bitcraftlab.github.io/p5.gui/examples/pacman/

by Eddie
ResearchPost5

Geolocation Library

https://github.com/bmoren/p5.geolocation

This library provides techniques for acquiring, watching, calculating, and geofencing user locations. Some of the functions are geoCheck(), getCurrentPosition(), watchPosition() and clearWatch().

An example of code making use of geo location:

var distance;

function setup(){

distance = calcGeoDistance(46.785844, -92.015965, 44.940834, -93.311287, ‘mi’)

print(distance);

}

This function calcGeoDistance calculates the distance between two coordinates. The last part ‘mi’ indicates units.

by Karen
ResearchPost5

Crystal research post 5

p5.collide2D

https://github.com/bmoren/p5.collide2D#collidelinecircle

p5.collide 2D library contains functions that detect collision between 2 2D geometry, including points, circles, rectangles, lines, polygons, triangles, and arc. All functions returns a boolean value: when two shapes collide, it return true, while two don’t collide, it return false. And it also contain a function called collideDebug(). Once two geometries collide, this function draw an ellipse at the collision point when applicable and calculable.

Example: https://bmoren.github.io/p5.collide2D/examples/swords/index.html

This is a sword game. So when one player is attacked by another’s sword, it will turn to red for 100 ms, meaning that the player gets hurt.

 

ResearchPost5

Angie-ResearchPost05

Mappa is a library created by Cristóbal Valenzuela that allows maps to have overlays. This is useful for creating visual representations involving maps, whether its static or interactive. The library is compatible with different map formats, such as Google Maps, Mapbox, and Mapquest. The library contains methods such as creating/setting up the map, creating overlays, and converting latitudes and longitudes to pixels(and vice versa).

Animated Meteorite Landings shows the 5,000 largest registered meteorite landings across the world. It displays the meteorite’s s path and displays an animation of the meteorite crashing/exploding as it reaches its crash destination. The user can use their mouse to move the map around and zoom in and out.

by Angie
ResearchPost5, Uncategorized

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.

 

by Thao Minh
ResearchPost5

Claudia_ResearchPost5

p5.js Library: Dimension

This add-on to p5.js is intended to extend the p5 vector functions to any number of dimensions. The users can use as many points and dimensions as they like, as long as it’s less than 52. Currently I believe all the standard vector functions in p5 can be used in the same way using this add-on. The function used to do the calculations for sum of vectors:

result = nAdd(pos1, pos2);

And the vectors can be created like this:

var pos1 = nVector(int, int, int, int);

link to library: https://github.com/Smilebags/p5.dimensions.js

example of an animated rotating 4D hypercube: https://github.com/Smilebags/p5.dimensions.js/blob/master/libraries/p5.dimensions.js

by Claudia