Posts Tagged ‘interactive’

Processing.js – Missing Documentation

Saturday, September 10th, 2011

The Processing.js project is really cool. It allows you to run Processing .pde files inside (HTML5 compatible) web browsers using Javascript. You can pass data back and forth between the two programs, access the DOM with Processing, and you don’t need any plugins or Java.

Click here to run this Processing sketch in your browser

One caveat… When importing a Processing .pde file into the HTML5 canvas you must access the files on a web server or by using localhost (a server running on your computer, e.g. MAMP) because most (all modern?) web browsers don’t allow file:/// access for security reasons. Unfortunately this is not intuitive as Javascript should run in the browser regardless of file:/// access. Nor is it mentioned in any of the Processing.js Quick Start documentation. I found it by testing, and then confirmed it in their README. Darn, need to remember to read (all of) the instructions.

UPDATE: A friend pointed out that the problem accessing the .pde file could be due to the same origin policy. Though not explicitly stated on the Github page for Processing.js, they do mention that disabling same origin setting in your browser is a(n undesirable) workaround.

Some web browsers (e.g., Chrome) require secondary files to be loaded from a web server for security reasons. This means loading a web page that references a Processing.js sketch in a file via a file:/// URL vs. http:// will fail. You are particularly likely to run into this problem when you try to view your webpage directly from file, as this makes all relatively links file:/// links.

BBC News reports on Give Me My Data

Friday, June 25th, 2010

BBC News reports on Give Me My Data. Their website and video player is pretty clunky, and while they avoid crediting the developer, its still a nice plug to wake up to.
http://news.bbc.co.uk/2/hi/programmes/click_online/8744514.stm

Picture 2

New yourarthere.net website is live

Saturday, May 22nd, 2010

After 4 months the new yourarthere.net website and member-run content management system is now live. Thanks to Braylin and Brittany Morales, Beth Lee, and Chris Cumbie for all their hard work.

The site is valid XHTML/CSS and runs on PHP/MySQL using the Codeigniter framework. All the details from our research from inception onward are archived here.

This site is based around the idea that members should have control of the content on the website. Every member has a profile where they can add images, text, tags, and events to promote their artwork or group. Members can create a new profile for every domain they host with yourarthere.nets.

Picture 6

Picture 8

Fading an LED with PWM and a Potentiometer

Saturday, May 8th, 2010

Using a potentiometer and PWM on an Arduino to fade an LED.

  1.  
  2. /* POT to LED test -> by Owen Mundy March 11, 2010
  3.    from: http://itp.nyu.edu/physcomp/Labs/AnalogIn
  4. —————————————————————*/
  5.  
  6. int potPin = 0;    // Analog input pin that the potentiometer is attached to
  7. int potValue = 0;  // value read from the pot
  8. int led = 9;      // PWM pin that the LED is on.  n.b. PWM 0 is on digital pin 9
  9.  
  10. void setup() {
  11.   // initialize serial communications at 9600 bps:
  12.   Serial.begin(9600);
  13.   // declare the led pin as an output:
  14.   pinMode(led, OUTPUT);
  15. }
  16.  
  17. void loop() {
  18.   potValue = analogRead(potPin); // read the pot value
  19.   analogWrite(led, potValue/4);  // PWM the LED with the pot value (divided by 4 to fit in a byte)
  20.   Serial.println("hello");      // print the pot value back to the debugger pane
  21.   delay(10);                     // wait 10 milliseconds before the next loop
  22. }
  23.  

Here is the schematic for the above project.

Using PWM and a potentiometer to fade an LED and drive a stepper motor, powered by a Boarduino RBBB.

  1.  
  2. /*
  3.   Owen Mundy
  4.  July 29, 2009
  5.  
  6.  p. 262 of Physical Computing
  7.  Using BBB to run stepper motor by manually moving steppers
  8.  
  9.  */
  10.  
  11. int pin1 = 3;                 // PWM
  12. int pin2 = 5;                 // PWM
  13. int pin3 = 6;                 // PWM
  14. int pin4 = 9;                 // PWM
  15. int ledpin = 13;              // LED
  16. int led = false;              // LED monitor
  17. int motor_time_lapse = 80;
  18.  
  19. int potPin = 0;      // Analog input pin that the potentiometer is attached to
  20. int potValue = 0;    // value read from the pot
  21. int ledPotPin = 11;  // PWM pin that the LED is on.  n.b. PWM 0 is on digital pin 9
  22.  
  23.  
  24. void setup()
  25. {
  26.   pinMode(pin1, OUTPUT);      // sets the pin as output
  27.   pinMode(pin2, OUTPUT);      // sets the pin as output
  28.   pinMode(pin3, OUTPUT);      // sets the pin as output
  29.   pinMode(pin4, OUTPUT);      // sets the pin as output
  30.   pinMode(ledpin, OUTPUT);    // sets the pin as output
  31.  
  32.   // initialize serial communications at 9600 bps:
  33.   Serial.begin(9600);
  34.   // declare the led pin as an output:
  35.   pinMode(ledPotPin, OUTPUT);
  36. }
  37.  
  38. void loop()
  39. {
  40.   potValue = analogRead(potPin); // read the pot value
  41.   analogWrite(ledPotPin, potValue/4);  // PWM the LED with the pot value (divided by 4 to fit in a byte)
  42.   Serial.println(potValue);
  43.  
  44.   digitalWrite(pin1, HIGH);   // on
  45.   digitalWrite(pin2, LOW);    // off
  46.   digitalWrite(pin3, HIGH);   // on
  47.   digitalWrite(pin4, LOW);    // off
  48.   delay(motor_time_lapse);    // wait
  49.  
  50.  
  51.   digitalWrite(pin1, LOW);    // off
  52.   digitalWrite(pin2, HIGH);   // on
  53.   digitalWrite(pin3, HIGH);   // on
  54.   digitalWrite(pin4, LOW);    // off
  55.   delay(motor_time_lapse);    // wait
  56.  
  57.   digitalWrite(pin1, LOW);    // off
  58.   digitalWrite(pin2, HIGH);   // on
  59.   digitalWrite(pin3, LOW);    // off
  60.   digitalWrite(pin4, HIGH);   // on
  61.   delay(motor_time_lapse);    // wait
  62.  
  63.  
  64.   digitalWrite(pin1, HIGH);   // on
  65.   digitalWrite(pin2, LOW);    // off
  66.   digitalWrite(pin3, LOW);    // off
  67.   digitalWrite(pin4, HIGH);   // on
  68.   delay(motor_time_lapse);    // wait
  69.  
  70.   blink();
  71. }
  72.  
  73. void blink()
  74. {
  75.   if (led == false)
  76.   {
  77.     led = true;
  78.     digitalWrite(ledpin, HIGH); // on  
  79.   }
  80.   else
  81.   {
  82.     led = false;
  83.     digitalWrite(ledpin, LOW); // on  
  84.   }
  85. }

FSU Art Review System Live

Wednesday, November 11th, 2009

The FSU Art Review System is live.

More images online here.

20091111_art_review_home2

20091111_art_review_edit_files

gmap_mouseIntersection_oop

Monday, July 6th, 2009

gmap_mouseintersection_oop

http://owenmundy.com/work/_sketches/gmap_mouseIntersection_oop/

Oxygen

Friday, May 8th, 2009

lp_lesson1

http://owenmundy.com/work/_sketches/lp_lesson1/

Moving through Learning Processing by Daniel Shiffman.