How to Upload Processing Sketch on Website

Week 16. INTERFACE AND Awarding PROGRAMMING

write an application that interfaces with an input &/or output device that you made, comparing as many tool options as possible.

WARNING!!! This webpage is following a different template than the rest of the assignment as I need a blank html page to embed the processing design hither beneath

Assignements

• Described your process using words/images/screenshots
• Explained the the GUI that you made and how yous did information technology
• Outlined problems and how you fixed them
• Included original code

Feedback: This is really fun to meet sensor information (from an arduino) being displayed on your screen thanks a script in procesing. I attempted to do the same in the software Blender thanks to a class we got merely this was unfortunately too circuitous for me to produce.

Embedding a processing sktech onto my mysite

To achieve this, i followed a well explained tutorial that y'all tin can find hither. Beneath are the primary steps I followed

• 1. Open up an existing processing sketch that I slightly modified to empathise the code better (line length, colour background)
• one. Saved my processing file
• two. Export the processing files to the aforementioned binder where yous will be creating your html page (This is very important as I found out a html page referencing a processing sketch that is in a different folder will not piece of work.

In your website

• i. Create a new HTML document
• 2. Place a copy of your Processing PDE file into the same folder equally your HTML document. In this case our PDE file is named "Processing1.pde"
• three. Place a re-create of the processing.js library file into the same folder as your HTML document. (Information technology needs to be in the same binder) You can become a copy of this file from the processingjs.org website
• 4. In the head of your document, place the post-obit lawmaking to load in the processingjs library:

  <script type="text/javascript" src="processing.js"></script>          

• In the body of your certificate create a canvas tag that references your PDE file, like this:

  <canvas information-processing-sources="myProgram.pde"></sail>          

Finally in the header of your html page, place the following css to create the canva that will display your processing scrip

        <        
style blazon="text/css"> 			pre { 				background-colour: #EEE; 				padding: 15px; 			} 			 			#theCanvas { 				width: 500px; 				margin: auto; 				border: 5px solid black; 				display: block; 			} 		></mode type="text/css">
      

Here's a live example (click and move your mouse to draw)

Notes from the instructables that I accept non tried:

If you are planning on using external artwork you lot will need to upload your avails to your website along with your PDE source code file. And then add the post-obit "preloader" directive at the top of your sketch as a comment - this will tell ProcessingJS to accept the files available when your sketch begins running.

/* @pjs preload="file1.png","file2.png","file3.jgp"; */

Links

(processingJS library) Primary source of this instructable

Using processing to graphically represent the data you are getting from your arduino sensor

I wanted to get the data from the pressure sensor I was working on with Arduino (Pee-ometer) project. Here are the steps I followed:

Note that to make the readind of the information in Arduino more easy to read, I used rolling average rather that raw sensor data, to avoid the value display irresolute too ofttimes.

In Arduino

Bank check the data in Arduino Monitor, to ensure you are tracking the right information, in my case Serial.println("average");

Shut now the serial monitor every bit it is the using your USB port to communicate with your monitor, and you volition need the port complimentary to communicate with processing.

In the Arduino code add: void setup(){ while (!Serial); delay(1000); Serial.begin(9600);

In Void loop: Serial.write(average);//Serial communication This is the data I volition be sendint to processing

Ship the code to Arduino

In Processing

We had in form a tutorial of Processing, which helped me further understand how the graphical representation in processing was working. I was not able to create a whole new sketch on my own (I just modified an existing one). For my final project I volition look into creating a sketch in Processing because it represents data beautifully, and tin can commmunicate 2 ways with Arduino (Make a light blink for example if touching a push on a a screen

The imporant part in processing is to ensure it gets the data y'all are sending from Arduino. In My instance, those are 3 lines of code in the processing script

import processing.serial.*; //Import Serial library

Series port; //Series port name // object

PrintWriter output; //Text file for writing sensor data.

Links

Arduino sketch to collect data input from the Force sensor and send those data to the serial port

Processing sketch to receive information from the serial port and display it on the screen existent fourth dimension

Interface of information in blender from data coming from Arduino

holdenefing1953.blogspot.com

Source: http://archive.fabacademy.org/archives/2017/fablabbcn/students/48/Processing/processing.html

Share this post