Arduino Class Two HW: Sensor and Keyboard Input to LED

https://www.youtube.com/watch?v=3cl2bjT84zY&feature=youtube_gdata_player Sensor to LED

https://www.youtube.com/watch?v=AT8t9pa-Gx8&feature=youtube_gdata_player keyboard to LED

 

Playing with oF

I try to explore openFrameworks which is very first time to use. From the example code, imageSubsectionExample, I changed image subsection function to video subsection function which is more fun!

No class today!

Just a reminder – we will not be meeting today. Have a happy holiday and we’ll catch up next week!

Midterm Project: Game and Controller

For my midterm project I decided to combine my final code project during Bootcamp with what we have been working on in CCLab.

Building off what we learned in the Coding Class of Bootcamp and the Dorkshop on object oriented game development I created a game based on the Old windows game Oregon Trail. For this recreation I decided to focus on one specific aspect of the game which was the hunting part. Using Illustrator I recreated the artwork with vector based sprites instead of bitmaps. While I converted this back into bitmap form via still image GIFs, the quality was much higher then the original game could hold. After getting these images I imported them into a processing Sketch.

Using the methods taught in the object oriented I correlated each of these sprites to different tabs and made it so that they populated randomly each time the game was started. In essence this randomized the environment by changing the amount and location of the bushes and trees.

CCLAB:

For the purposes of the midterm, my problem was two fold. Making sure this code worked properly and connecting this code to the arduino to make a functional controller for my game.

I began with the code for the game it self. The major thing I solved was adding the location change to the player so that he would also “spawn” randomly at a different point in the game environment. While this was similar to the spawning of the plants  inside the environment this needed to be tweeked for a character that would be controlled by the user. Next was the hard part, getting the game to speak to the controller. Since I could not get Node.Js to work properly between the Microsoft oriented machine to the arduino  I searched for another method of creating serial communication with the Arduino. After an extensive search on the web I found a couple methods  (the most helpful of which is noted below in the references section) as to how to create this communication.  With minimal tweeking I pulled together these two formulas for processing and arduino sketches. (see sketches section)

The Final projectet had several issues as far as functionality. I managed to get the programs to communicate by having the sketch uploaded into the arduino continually pulse out the letter “A” until processing received it through serial communication and responded. This “handshake” between programs theoretically should allow me to export button presses on the arduino via serial com to the processing sketch as text, and this text would act as a prompt for the button. Unfortunately, while the handshake was made, processing habitually over read or dismissed the text from the arduino. In the cases of the over reading it would simply recieve a long string of text of the same phrase that was not read. Further work is neccessary to resolve these issues.

Arduino Breadboard:

SKETCHES

PROCESSING SKETCH ————————————————————

import processing.serial.*; //import the Serial library
Serial myPort; //the Serial port object
String val;

float angle = 0;
int numFoliage;
int numFoliage2;
int numFoliage3;
Tree [] treePop;
Bush1 [] bush1Pop;
Bush2 [] bush2Pop;
Festus MMF;
Bullet bshot;

void setup() {
size(800, 800, P3D);
rectMode(CENTER);

myPort = new Serial(this, Serial.list()[0], 9600);
myPort.bufferUntil(‘\n’);

numFoliage = int (random(1, 5));
numFoliage2 = int (random(1, 5));
numFoliage3 = int (random(1, 5));
treePop = new Tree[numFoliage3];
bush1Pop = new Bush1[numFoliage];
bush2Pop = new Bush2[numFoliage2];
MMF = new Festus(1);
bshot = new Bullet(1);

for (int i = 0; i < numFoliage; i++) {
bush1Pop[i] = new Bush1(i);
}
for (int i = 0; i < numFoliage2; i++) {
bush2Pop[i] = new Bush2(i);
}
for (int i = 0; i < numFoliage3; i++) {
treePop[i] = new Tree(i);
}
}
void draw() {
angle += 0.005;
background(150, 150, 200);
fill(110, 230, 140);

rect(width/2, height/2, width, height);
// for (int i = 0; i < numFoliage; i++) {
// bush1Pop[i].update();
// bush2Pop[i].update();
// treePop[i].update();
// }
for (int i = 0; i < numFoliage; i++) {
bush1Pop[i].update();
}
for (int i = 0; i < numFoliage2; i++) {
bush2Pop[i].update();
}
for (int i = 0; i < numFoliage3; i++) {
treePop[i].update();
}
bshot.fire();
MMF.update();
MMF.display();
println(bshot.shoot);
// pushMatrix();
// translate(width/2, height/2);
// rotateX(-200);

// popMatrix();
// fill(55, 89, 22);
// rect(100, 100, 50, 50);
// rect(290, 230, 50, 50);
// rect(300, 400, 50, 50);
// popMatrix();
}
void keyPressed() {

if (key==CODED) {
if (keyCode==UP) {
MMF.p1UP = true;
MMF.festate = 0;
}
if (keyCode==DOWN) {
MMF.p1DOWN = true;
MMF.festate = 1;
}
if (keyCode==LEFT) {
MMF.p1LEFT = true;
MMF.festate = 2;
}
if (keyCode==RIGHT) {
MMF.p1RIGHT = true;
MMF.festate = 3;
}
}
if (key == ‘ ‘) {
bshot.xPos = MMF.xPos;
bshot.yPos = MMF.yPos;
bshot.state = MMF.festate;
bshot.shoot = true;
}
}
void keyReleased() {

if (key==CODED) {
if (keyCode==UP) {
MMF.p1UP = false;
}
if (keyCode==DOWN) {
MMF.p1DOWN = false;
}
if (keyCode==LEFT) {
MMF.p1LEFT = false;
}
if (keyCode==RIGHT) {
MMF.p1RIGHT = false;
}
}
}
void serialEvent( Serial myPort) {

val = myPort.readString();
println(val);

if (val.equals(“button1”)) {
bshot.xPos = MMF.xPos;
bshot.yPos = MMF.yPos;
bshot.state = MMF.festate;
bshot.shoot = true;
}

}

ARDUINO SKETCH ——————————————————————

// constants won’t change. They’re used here to
// set pin numbers:
int buttonPin = 2; // the number of the pushbutton pin
int ledPin = 13; // the number of the LED pin

// variables will change:
int buttonState = 0; // variable for reading the pushbutton status

void setup() {
// initialize the LED pin as an output:
pinMode(ledPin, OUTPUT);
// initialize the pushbutton pin as an input:
pinMode(buttonPin, INPUT);
Serial.begin(9600);
establishContact();
}

void loop(){
// read the state of the pushbutton value:
buttonState = digitalRead(buttonPin);

// check if the pushbutton is pressed.
// if it is, the buttonState is HIGH:
if (buttonState == HIGH) {
// turn LED on:
digitalWrite(ledPin, HIGH);
Serial.println(“Button1”); //send back a hello world
delay(50);
}
else {
// turn LED off:
digitalWrite(ledPin, LOW);
}
}

void establishContact() {
while (Serial.available() <= 0) {
Serial.println(“A”); // send a capital A
delay(300);
}
}

References:

https://learn.sparkfun.com/tutorials/connecting-arduino-to-processing/tips-and-tricks

https://npmjs.org/package/serialport

Soohyun Midterm !

I made a game that can play with arduino inputs which is a controller of the game. I wanted to explore more about node.js. I referenced Paweena’s example codes. Thank you master Paweena !

/index.html/ CODE

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css&#8221; />
<style>
body {
margin: 0px;
padding: 0px;
}

h1{
margin-left: 20px;
font-family: Helvetica;
color:#ffffff;
}

h2{
margin-left: 20px;
font-family: Helvetica;
color:#ffffff;
}
</style>

</head>
<body style=”background: #252525″>
<h1>Let’s Play with Arduino !!</h1>
<h2 id=”score”> SCORE : 0</h2>
<canvas id=”awesomeCanvas” width=1000 height=550></canvas>
<script type=”text/javascript”>

</script>

<br><br>
<div id=”slider”></div>

<script src=”http://localhost:9001/socket.io/socket.io.js”></script&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script&gt;
<script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js”></script&gt;
<script>

var socket = io.connect(‘http://localhost:9001&#8217;);

var canvas = document.getElementById(“awesomeCanvas”);
var ctx = canvas.getContext(“2d”);
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var color = ‘#FFFFFF’;
var ballColor;
var ballSize = 30;
var s = 0;
var start = false;

var numberOfBalls = 20;

window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function animate(playerBar, balls, canvas, context, startTime) {

// update
var time = (new Date()).getTime() – startTime;

var gravity = 30;

for(var i =0; i < numberOfBalls; i++){
balls[i].y = balls[i].y + 0.05 * gravity;

}

socket.on(‘pot’, function(data) {
playerBar.x = canvasWidth-80 -data;
});
for(var i =0; i < numberOfBalls; i++){
if(balls[i].color == color && balls[i].x >= playerBar.x -3 && balls[i].x + 30 <= playerBar.x + playerBar.width + 3 && balls[i].y >= 50){
balls[i].x = 5000;
console.log(“success!”);
s++;
$(‘#score’).append(s);

}

}
// clear
context.clearRect(0, 0, canvas.width, canvas.height);

drawPlayerBar(playerBar, ctx);

for(var i =0; i < numberOfBalls; i++)
drawBalls(balls[i], ctx);
// request new frame
requestAnimFrame(function() {
animate(playerBar, balls, canvas, context, startTime);
});
}

var playerBar = {
x: canvasWidth/2,
y: canvasHeight – 20,
opacity : 0.1,
width: 100,
height: 50
};

var balls = new Array(numberOfBalls);

for(var i = 0; i < numberOfBalls; i++){
var randomMaker = Math.random() * 10;

if(randomMaker >= 0 && randomMaker < 2){
ballColor =’white’;
}else if(randomMaker >= 2 && randomMaker < 4){
ballColor =’red’;
}else if(randomMaker >= 4 && randomMaker < 6){
ballColor =’yellow’;
}else if(randomMaker >= 6 && randomMaker < 8){
ballColor =’green’;
}else if(randomMaker >= 8 && randomMaker < 10){
ballColor =’blue’;
}

balls[i] = {
x: Math.random()*canvasWidth,
y: Math.random()* canvasHeight * i * -1,
opacity: 0.1,
color: ballColor
};
}

function drawPlayerBar(playerBar, context){
context.beginPath();
context.rect(playerBar.x, playerBar.y, playerBar.width, playerBar.height);
context.fillStyle = color;
context.fill();

if(start){
context.rect(playerBar.x, 0, playerBar.width, canvasWidth);

// add linear gradient
var grd = context.createLinearGradient(0, 0, 0, canvas.height);
grd.addColorStop(0, ‘#252525’);
grd.addColorStop(1, color);
context.fillStyle = grd;
context.fill();
}
}

 
function drawBalls(ball, context){
context.beginPath();
context.arc(ball.x, ball.y, ballSize, 0, 2 * Math.PI, false);
context.fillStyle = ball.color;
context.fill();
}

socket.on(‘pot’, function(data) {

playerBar.x = canvasWidth-80 -data;

// $(‘#pot’).animate({
// ‘height’: data,
// ‘width’ : data
// }, 100);
});
socket.on(‘button’, function(data) {

if(data == 25451){
color = ‘white’;
}else if(data == 25956){
color = ‘red’;
}else if(data == 28535){
color = ‘yellow’
}else if(data == 25966){
color = ‘green’
}else if(data == 30053){
color = ‘blue’
}

start = true;

});

 

// wait one second before starting animation
//setTimeout(function() {
var startTime = (new Date()).getTime();
animate(playerBar, balls, canvas, ctx, startTime);
//}, 10);
</script>
</body>
</html>

/ comm.js / CODE

// old stuff
var connect = require(‘connect’),
fs = require(‘fs’),
util = require(‘util’),
io = require(‘socket.io’).listen(9001), // WS port
port = 9000, // HTTP port

// new stuff
// define a class
SerialPort = require(“serialport”).SerialPort,
// ls /dev/tty.*
sPort=”/dev/tty.usbmodem1411″,
//sPort = “/dev/tty.usbserial-AM01PK24″,
// create an instance (object)
arduino = new SerialPort(sPort, {
baudrate: 9600
});

// create web server using connect
connect.createServer(
connect.static(__dirname + ‘/public’) // two underscores
).listen(port);
util.log(‘the server is running on port: ‘ + port);

// init socket.io
io.set(‘log level’, 1);
io.sockets.on(‘connection’, function(socket) {
util.log(‘Ooooooh, someone just poked me :)’);
socket.on(‘led’, function(data) {
// sending binary data
var ledOn = new Buffer(1), // Buffer is an array and Buffer(1) means 1 index array
ledOff = new Buffer(1);
ledOn[0] = 0x01; // 1
ledOff[0] = 0x00; // 0
// shorthand ledOn = new Buffer([0x01])

if(data === true) {
// turn on
arduino.write(ledOn);
util.log(‘LED ON’);
} else {
// turn off
arduino.write(ledOff);
util.log(‘LED OFF’);
}
});
socket.on(‘slider’, function(data) {
aHex = data.toString(16);
bHex = ‘0x’ + aHex;
cHex = new Buffer([bHex]);
// util.log(‘Z’ + cHex + ‘X’);
arduino.write(‘O’ + cHex + ‘P’);
});
});

// function that converts int to hexadecimal
// we communicate to Arduino using hex (binary)

// serial port
var receivedData, sendData;

arduino.on(‘open’, function() {
console.log(‘opening port’);
// console.log((11).toString(16));
// setInterval(toggle, 1000);
});

// receive data
arduino.on(‘data’, function(data) { // data comes in Buffer < >
// try removing toString()
// util.log(data);
receivedData += data;
// basically says if there’re ‘E’ and ‘B’ signals
if (receivedData.indexOf(‘E’) >= 0 && receivedData.indexOf(‘B’) >= 0) {
// save the data between ‘B’ and ‘E’
sendData = receivedData.substring(receivedData.indexOf(‘B’) + 1, receivedData.indexOf(‘E’));
receivedData = ”;
util.log(sendData);
// parse data to browser
io.sockets.emit(‘pot’, sendData);
// socket.io
// emit, on, broadcast.emit, io.sockets.emit
}

if (receivedData.indexOf(‘S’) >= 0 && receivedData.indexOf(‘F’) >= 0) {
// save the data between ‘B’ and ‘E’
sendData = receivedData.substring(receivedData.indexOf(‘S’) + 1, receivedData.indexOf(‘F’));
receivedData = ”;
util.log(sendData);
// parse data to browser
io.sockets.emit(‘button’, sendData);
// socket.io
// emit, on, broadcast.emit, io.sockets.emit

}
});

/ comm_app.ino / CODE

const int outputPin = 13;
int potPin = 0;
int sensorVal = 0;
int prevVal = 0;
String inputString = “”;

int soundPin = 12;
int buttons [] = {2,3,4,5,6};
int buttonState [5];

void setup()
{
pinMode(outputPin, OUTPUT);
Serial.begin(9600);

//pinMode(outputPin, OUTPUT);
for(int i=0; i<5; i++){
pinMode(buttons[i], INPUT);
}
pinMode(soundPin, OUTPUT);
}

void loop()
{
noTone(soundPin);
for(int i=0; i<5; i++)
buttonState[i] = digitalRead(buttons[i]);

//pot
sensorVal = analogRead(potPin);
if(prevVal != sensorVal) {
// if(prevVal < sensorVal+10){
// for(int i = 0; i <5; i++){
// tone(soundPin, 100+i*100);
// delay(50);
// //delay(80);
// }
// }else if(prevVal > sensorVal+10){
// for(int i = 5; i >= 0; i–){
// tone(soundPin, 100+i*100);
// delay(50);
// //delay(80);
// }
// }

Serial.print(‘B’);
Serial.print(sensorVal);
Serial.print(‘E’);
prevVal = sensorVal;
}
delay(100);

if(buttonState[0] == HIGH){ //black
Serial.print(‘S’);
Serial.print(‘black’);
Serial.print(‘F’);
toneEffect();
}else if(buttonState[1] == HIGH){ //red
Serial.print(‘S’);
Serial.print(‘red’);
Serial.print(‘F’);
toneEffect();
}else if(buttonState[2] == HIGH){ //yellow
Serial.print(‘S’);
Serial.print(‘yellow’);
Serial.print(‘F’);
toneEffect();
}else if(buttonState[3] == HIGH){ //green
Serial.print(‘S’);
Serial.print(‘green’);
Serial.print(‘F’);
toneEffect();
}else if(buttonState[4] == HIGH){ //blue
Serial.print(‘S’);
Serial.print(‘blue’);
Serial.print(‘F’);
toneEffect();
}

// arduino reads Serial
if (Serial.available() > 0) {
int incomingByte = Serial.read();

if (incomingByte == 1) { // 0x01 = char 1
for(int i = 0; i <5; i++){
tone(soundPin, 100+i*100);
delay(50);
}
noTone(soundPin);
}
}
}

void toneEffect(){

if(buttonState[0]){
tone(soundPin,300);
delay(100);
}else if(buttonState[1]){
tone(soundPin,600);
delay(100);
}else if(buttonState[2]){
tone(soundPin,900);
delay(100);
}else if(buttonState[3]){
tone(soundPin,1200);
delay(100);
}else if(buttonState[4]){
tone(soundPin,1500);
delay(100);
}

noTone(soundPin);

}

Midterm_Helen

I wanted to make a webpage which shows both time and weather. There are three circles for hour, minute and second. The circles changed by realtime, and for fourth space I put the sun and moon images for indicating daytime and nighttime. During 6AM to 6PM, a sun image is shown up, and after 6PM to before 6AM, a moon image is shown up.

This is my code.

<!DOCTYPE html>
<html>
<body onload=”setTime();”>

<canvas id=”myCanvas1″ width=”200″ height=”300″ style=”border:0px solid #d3d3d3;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id=”myCanvas2″ width=”200″ height=”300″ style=”border:0px solid #d3d3d3;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id=”myCanvas3″ width=”200″ height=”300″ style=”border:0px solid #d3d3d3;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id=”myCanvas4″ width=”300″ height=”300″ style=”border:0px solid #d3d3d3;”>
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c1=document.getElementById(“myCanvas1”);
var c2=document.getElementById(“myCanvas2”);
var c3=document.getElementById(“myCanvas3”);

var ctx1 = c1.getContext(“2d”);
var ctx2 = c2.getContext(“2d”);
var ctx3 = c3.getContext(“2d”);

var pi = Math.PI/30;

var H_timer;
var M_timer;
var S_timer;

var hour;
var min;
var sec;
// Time now
function setTime() {

var now = new Date();
hour = now.getHours();
min = now.getMinutes();
sec = now.getSeconds();

S_Clock();
M_Clock();
H_Clock();
}

// hour
function H_Clock()
{
ctx1.clearRect(0, 0, c1.width, c1.height);
ctx1.beginPath();
ctx1.strokeStyle = ‘#000000’;
ctx1.lineWidth = 20;
ctx1.arc(100,100,70,pi*45,pi*(45+(hour*2.5)));
ctx1.stroke();
ctx1.closePath();
ctx1.font=”30px Helvetica”;
ctx1.fillStyle = ‘#000000’;
if(hour == 24) hour = 0;
ctx1.fillText(hour+””,85,110);
hour = hour + 1;
}

//function DAY()
if(18 > hour && hour > 6) {
//DAY
var canvas = document.getElementById(‘myCanvas4’);
var context = canvas.getContext(‘2d’);
var imageObj01 = new Image();

imageObj01.onload = function() {
//where to draw image at top left
context.drawImage(imageObj01, 0, -30);
};
//image source
imageObj01.src = ‘http://vremebo.com/images/weather/clear-night.png&#8217;;
}else {

//function NIGHT()
// if(hour > 18 && 6 > hour)
//NIGHT
var canvas = document.getElementById(‘myCanvas4’);
var context = canvas.getContext(‘2d’);
var imageObj02 = new Image()
width: 200
height: 200;

imageObj02.onload = function() {
//where to draw image at top left
context.drawImage(imageObj02, 0, -30);
};
//image source
imageObj02.src = ‘http://indywx.com/wp-content/uploads/2013/10/Status-weather-clear-icon.png&#8217;;
}
// Min
function M_Clock()
{
ctx2.clearRect(0, 0, c2.width, c2.height);
ctx2.beginPath();
ctx2.strokeStyle = ‘#515151’;
ctx2.lineWidth = 10;
ctx2.arc(100,100,70,pi*45,pi*(45+min));
ctx2.stroke();
ctx2.closePath();
ctx2.font=”30px Helvetica”;
ctx2.fillStyle = ‘#515151’;
if(min == 60) {
min = 0;
H_Clock();
}
ctx2.fillText(min+””,85,110);
min = min + 1;
}

// Sec
function S_Clock()
{
ctx3.clearRect(0, 0, c3.width, c3.height);
ctx3.beginPath();
ctx3.strokeStyle = ‘#a5a5a5’;
ctx3.lineWidth = 1;
ctx3.arc(100,100,70,pi*45,pi*(45+sec));
ctx3.stroke();
ctx3.closePath();
ctx3.font=”30px Helvetica”;
ctx3.fillStyle = ‘#a5a5a5’;
if(sec == 60) {
sec = 0;
M_Clock();
}
ctx3.fillText(sec+””,85,110);
sec = sec + 1;
S_timer = setTimeout(“S_Clock()”, 1000); //

}

</script>

</body>
</html>

 

 

oF HW – Sandra

https://vimeo.com/79987742

Midterm Arduino – Sandra

https://vimeo.com/79987355

Get a daily random inspiration!

Openframeworks HW

For the assignment, I used the billboard example and  made some changes such as the object and the color.  I will continue to explore it and try to combine it with my motion graphics project.

 

Meta Post – openframeworks

I played around with a few different examples and came up with a camera that cycles through all the colors. I like it because I’m a narcissist. Also, this video is so meta because I’m videoing it videoing me. Perfect for the awkward narcissist. 🙂