Simple drawing program with Processing

128x128 pixel 1.5" full colour OLED display with MicroSD card slot. [Product page]
Post Reply
Things
Posts: 36
Joined: Mon Aug 26, 2013 3:47 pm
Location: Cairns, Australia
Contact:

Simple drawing program with Processing

Post by Things » Sun Sep 29, 2013 6:14 am

Wrote some simple code to make a basic drawing program, using Processing and an Arduino with the OLED module. It simply sends a bit of data about the mouse position, colour and brush size over serial. Colours can be selected through keyboard keys 1-9, and brush size adjusted using mouse scroll wheel. You can clear the whole display with rightclick.

It's very basic, but proof of concept :D

Image

Arduino code:

Code: Select all

#include <SPI.h>
#include <SD.h>
#include <FTOLED.h>
const byte pin_cs = 7;
const byte pin_dc = 2;
const byte pin_reset = 3;
String serial_data[4];  // String for incoming serial data
int varcounter = 0;  // For storing serial to array
Colour drawCol;
OLED oled(pin_cs, pin_dc, pin_reset);

void setup()
{
  Serial.begin(115200);
  oled.begin();
}

void loop() {
if (Serial.available() > 0){
  int nnn;
  delay(10);
  while (Serial.available() > 0) {
    char c = Serial.read();
     if (c == 'c'){
      oled.clearScreen();
      serial_data[2] = "1";
    }
    if (c == ',') {
      varcounter++;
    }
    if (c != ',' && c != '.'){
    serial_data[varcounter] += c;
    }
    if (c == '.'){
       for (int i = 0; i<4; i++)
       serial_data[i] = "";
       varcounter = 0;
    }
  }
  switch (serial_data[2].toInt()){
    case 1:
      drawCol = BLACK;
      break;
    case 2:
      drawCol = WHITE;
      break;
    case 3:
      drawCol = RED;
      break;
    case 4:
      drawCol = GREEN;
      break;
    case 5:
      drawCol = BLUE;
      break;
    case 6:
      drawCol = YELLOW;
      break;
    case 7:
      drawCol = CYAN;
      break;
    case 8:
      drawCol = MAGENTA;
      break;
    case 9:
      drawCol = LIGHTBLUE;
      break;
  }      

  oled.drawFilledCircle(serial_data[0].toInt(),map(serial_data[1].toInt(),0,127,127,0),serial_data[3].toInt(),drawCol);
  }
}



Processing code (Note serial only works on the x86 processing):

Code: Select all

 
 
 import processing.serial.*;
 Serial port;
 color drawcol = color(255,255,255);
 char colKey = '2';
 float wheel = 1.0;
 
 void setup() {
 size(168, 128);
 frameRate(140);
 background(0,0,0);
 println("Available serial ports:");
 println(Serial.list());

 port = new Serial(this, "COM12", 115200);  

 }
 
 void draw() {
 stroke(255);
 line(128,0,128,128);
   if (keyPressed){
     colKey = key;
      switch(key){
   case '1':
     drawcol = color(0,0,0);
     break;
   case '2':
     drawcol = color(255,255,255);
     break;
   case '3':
     drawcol = color(255,0,0);
     break;
   case '4':
     drawcol = color(0,255,0);
     break;
   case '5':
     drawcol = color(0,0,255);
     break;
   case '6':
     drawcol = color(255,255,0);
     break;
   case '7':
     drawcol = color(0,255,255);
     break;
   case '8':
     drawcol = color(216,191,216);
     break;
   case '9':
     drawcol = color(175,238,238);
     break;
 } 
}
 
if (mousePressed == true){
  if (mouseButton == RIGHT){
    port.write("c");
    background(0,0,0);
  } else{
 port.write("." + constrain(mouseX,0,127) + "," + constrain(mouseY,0,127) + "," + colKey + "," + int(wheel));
 noStroke();
 fill(drawcol);
 ellipse(constrain(mouseX,0,127),constrain(mouseY,0,127),int(wheel) * 2,int(wheel) * 2);
    }
  }
  noStroke();
  fill(0);
  rect(129,0,39,128);
  fill(drawcol);
  ellipse(148,20,int(wheel) * 2,int(wheel) * 2);
}
 void mouseWheel(MouseEvent event) {
  wheel = constrain(wheel + event.getAmount(),1,12);
  println(int(wheel));
}

Dan

angusgr
Freetronics Staff
Freetronics Staff
Posts: 853
Joined: Tue Apr 09, 2013 11:19 pm
Location: Melbourne, Australia
Contact:

Re: Simple drawing program with Processing

Post by angusgr » Sun Sep 29, 2013 11:46 pm

Nice work Dan. :) Any chance of a video?

Things
Posts: 36
Joined: Mon Aug 26, 2013 3:47 pm
Location: Cairns, Australia
Contact:

Re: Simple drawing program with Processing

Post by Things » Mon Sep 30, 2013 6:36 am

Will try grab one this week :)

Things
Posts: 36
Joined: Mon Aug 26, 2013 3:47 pm
Location: Cairns, Australia
Contact:

Re: Simple drawing program with Processing

Post by Things » Thu Oct 03, 2013 1:07 am


angusgr
Freetronics Staff
Freetronics Staff
Posts: 853
Joined: Tue Apr 09, 2013 11:19 pm
Location: Melbourne, Australia
Contact:

Re: Simple drawing program with Processing

Post by angusgr » Thu Oct 03, 2013 4:35 am

Neat, thank you!

Post Reply