Category Archives: Processing

Prismatic Box

When I started this project, I wanted to make a controller that could manipulate an image in Processing.  The design of this controller would be similar to this one from HitBox, but with slightly different button positions:


I bought 12 buttons from Video Games New York and took a sturdy cardboard box from my apartment.  Here’s a stock image of the Light Blue buttons:

From there, I brought my materials to the ITP 4th Floor to get wires, solder, and various tools.  I measured the size of the buttons to determine the size of the holes I would need to cut into the box.  Once the measurements were complete, I slid the buttons in.

Box with Buttons

Next came the wiring.  I’ve actually never used solder before this project, but I learned very quickly with a little help.  I started by soldering the wires from the 4th floor to the buttons on one side and the Arduino cables on the other.  I was only able to wire half of the buttons before Tuesday’s class since I also wanted to work on the Processing program.

Wires for Six

The initial thought was for Processing was to display what button is being pressed.  However I thought this would be boring, so I tried to make something more exciting.  Since this controller design is intended for video games, I decided to make a circle that would move around based on button presses.  However, it became difficult for me to implement animations in a way that I wanted.

As exciting as this would have been, I came to the realization that the important part of my project was the hardware.  Still, I didn’t want to just show button presses in Processing.

First DemoWhile showing my progress in class, Drew suggested that I should have the colors of the buttons on my controller blend in Processing.  I really liked this idea because it was simpler than the animated circle, but more exciting than the basic buttons.  I decided that blending colors would be the basis of my new program.

The next day, I got back to wiring.  I had to secure some of the original solder joints with heat shrink wraps.  After that I soldered the rest of the wires to the other six buttons.  Then figured out how properly attach my buttons to the breadboard in circuit.  I also decided that didn’t need the white buttons anymore because they were having trouble staying in the breadboard.  On top of that, I didn’t want to use that color in my new Processing program.

Wires in Breadboard

Once everything was wired, I programmed the Arduino to communicate with my computer.  Here’s the code for that:

Now the only thing left was the program in Processing.  I decided to alter the “ArrayBallsAddSubtract” code from class to allow for Arduino input.  I also changed numerous parameters including as the colors, sizes, and opacity of the balls.  You’ll find my code and a video demo below:



I learned so much over the course of this project between hardware design, soldering, and programming.  But if there’s one thing I learned this week that trumps everything else, it was to know my limits.

I’m the type of person who has grand elaborate ideas.  These ideas are great in theory, but practically I don’t always have the skills, knowledge, or time to complete them.  Eventually, I get so fixated on these ideas that I become frustrated when I can’t finish them.  But during this project I was able to change course when I noticed things weren’t working, specifically with Processing.

Despite being disappointed in this change originally, I realized that I had already created something I was really proud of.  I’ve wanted to make a controller like this for over a year, and the fact that I was able to do so is amazing to me.  On top of that, I was still able to program software to demonstrate this controller.  Sure, it wasn’t the software I originally had in mind, but it’s something I was within my abilities.

At the end of the day (or week as it may be), I’m ecstatic that I was able to develop something I’ve thought about for a long time.  But more importantly, I’m happy that I could surpass the such a big creative obstacle: myself.

Draw a line based on a color in a video


Swap out a color with another one in a video


Putting it all together

Code from class, circuit schematics, etc. are at the bottom

Let’s get the chocolate in the peanut butter

Continue reading

Triangular Portrait

Hi all,

I experimented with making a portrait by using triangles.

Here is the code:

PImage img;

void setup() {
size(300, 335);
img = loadImage(“portrait.jpg”);
img.filter(POSTERIZE, 10);

void draw() {


for (int y = 0; y < img.height; y+=10 ) {
for (int x = 0; x < img.width+5; x+=5) {
int loc = x + y*img.width;


if (x %10 == 0) triangle(x-5, y, x, y+10, x+5, y);
else triangle(x-5, y+10, x, y, x+5, y+10);

void mousePressed() {

Here is the image:




I also add a save function. If I press the mouse when it is running,  a image will be saved in the folder. The file name is random number from 0-10.

After doing this, I tried to modify my code to see if I could make the code to show the process of paint with triangles. And I think the “save” function will be very nice for showing the whole image development. I haven’t worked it out, but if anyone knows any reference that is close to this idea, please let me know:)


moving on up

  • objects
    • class
    • constructor
    • (new tabs!)
  • arrays
    • arrays plus for loops



code from class




code from class

Echo’s Self-portrait

Hi All,

Here is my self-portrait. I constructed the basic shapes first, then used the mouse to draw the rest detail part.




Step2: Finished Version



Here is my code:

float lineWidth = 3;
PFont f;

void setup(){
size(600, 600);
f = loadFont(“Avenir-Medium-48.vlw”);
fill(244, 211, 228);
rect(530, 0, 70, 70);
rect(530, 70, 70, 70);
fill(233, 61, 40);
rect(530, 140, 70, 70);
fill(101,163,188); //circle_back
noStroke(); //circle_back
fill(0); //hair_bottom
noStroke(); //hair_bottom
rect(185,175,120, 110);//hair_bottom
fill(244, 211, 228); //face
noStroke(); //face
ellipse(245,200,90,130); //face
fill(0); //hair_top
noStroke(); //hair_top
arc(245,175,120, 110, PI, TWO_PI);//hair_top
ellipse(220,200,40,40); //left glass
ellipse(270,200,40,40); //right glass
fill(244, 211, 228);
ellipse(220,200,30,30); //left glass
fill(244, 211, 228);
ellipse(270,200,30,30); //right glass
fill(244, 211, 228); //neck
noStroke(); //neck
rect(230,230,30,60); //neck

void draw(){
text(“Hello! I’m Echo.”, 190, 340);
if (mousePressed){
line(mouseX, mouseY, pmouseX, pmouseY);
if(mousePressed && mouseX >= 530 && mouseY<= 70){
stroke(244, 211, 228);
if(mousePressed && mouseX >= 530 && mouseY<= 140 && mouseY >=70){
if(mousePressed && mouseX >= 530 && mouseY>= 140){
stroke(233, 61, 40);

void keyPressed(){
if(key == ‘+’){
if (key == ‘-‘){
if (lineWidth <= 0){
if(key == ‘ ‘){
fill(220, 10, 180);
rect(700, 0, 100, 100);
rect(700, 100, 100, 100);

Self Portrait (With a Nice Soundtrack!)


Hey guys!

I hope you enjoy this video of me drawing myself…  quite terribly, I might add.  I’m not the best at drawing and apparently I can overlook filling in the skin on my face.  But I’m still VERY proud of the program and the music choice from Mario Paint.  It seemed fitting!

Additionally, here’s my code for this program:

Primitive Drawing

Processing :: Setup//draw (just like loop())

  • size
  • width and height
  • background
  • coordinate system
  • line
  • point
  • ellipse (ellipseMode)
  • stroke/nostroke/fill/nofill
  • rect (rectMode)
  • mouseX mouseY

code from class