I ran into challenges with the previous DHT22 sensor to p5js assignment. I performed another test run using input from a button. With this, I was able to connect the p5.js web editor to the arduino, and have an image on the screen of the web editor change when the button input changed.<\/p>\n
Arduino sketch below:<\/p>\n
const int buttonPin = 2;\r\nint buttonValue = 0; \r\n\r\nvoid setup() {\r\n \/\/ put your setup code here, to run once:\r\n pinMode(buttonPin, INPUT);\r\n Serial.begin(9600);\r\n\r\n}\r\n\r\nvoid loop() {\r\n \/\/ put your main code here, to run repeatedly:\r\n buttonValue = digitalRead(buttonPin);\r\n Serial.println(buttonValue);\r\n delay(10);\r\n\r\n}<\/pre>\np5js sketch:<\/p>\n
let serial; \r\nlet newData = \"waiting for data\";\r\n\r\nfunction setup() {\r\n createCanvas(windowWidth, windowHeight);\r\n serial = new p5.SerialPort();\r\n serial.list();\r\n serial.open('COM5');\r\n serial.on('connected', serverConnected);\r\n serial.on('list',gotList);\r\n serial.on('data',gotData);\r\n serial.on('error',gotError);\r\n serial.on('open',gotOpen);\r\n \r\n}\r\n\r\nfunction serverConnected() {\r\n print(\"Connected to Server\");\r\n}\r\n\r\nfunction gotList(thelist) {\r\n print(\"List of Serial Ports:\");\r\n \r\n for (let i=0; i < thelist.length; i++) {\r\n print(i + \" \" + thelist[i]);\r\n \r\n }\r\n}\r\n\r\nfunction gotOpen() {\r\n print(\"Serial Port is Open\");\r\n}\r\n\r\nfunction gotClose() {\r\n print(\"Serial Port is Closed\");\r\n newData = \"Serial Port is Closed\";\r\n}\r\n\r\nfunction gotError(theerror) {\r\n print(theerror);\r\n}\r\n\r\nfunction gotData() {\r\n let currentString = serial.readLine();\r\n trim(currentString);\r\n if (!currentString) return;\r\n console.log(currentString);\r\n newData = currentString;\r\n}\r\n\r\nfunction draw() {\r\n background(245,245,245);\r\n fill(50,50,200);\r\n text(newData,10,10);\r\n \r\n \r\n if (newData == 0) {\r\n rectMode(CENTER);\r\n rect(width\/2,height\/2,100,100);\r\n } else {\r\n ellipse(width\/2,height\/2,200,200);\r\n \r\n }\r\n \r\n}<\/pre>\nNext, for the Crit1 project, I want to be able to record or represent the actions of the plant turntable with p5js.<\/p>\n
Resources and Demos:<\/p>\n