Mike and I expanded on my Highlights project last week and came up with this. I’m still not sure why it’s taking so long to play.

//global variables
int ballWidth = 10;

Circle myCircle;
Circle circle2;

void setup()
{
  size (600, 600);
  smooth();
  background(0);
  //frameRate(30);
  myCircle = new Circle(10, 400, 10);
  circle2 = new Circle(590, 200, 10);
}

void draw()
{
  background(0);

  //draw colored balls
  for (int i=0; i * ballWidth < width; i++)
  {
    for (int a=0; a * ballWidth < height; a++)
    {
      int ballX = ballWidth*i + ballWidth/2;
      int ballY = ballWidth*a + ballWidth/2;

      fill(map(ballX,0,width, 0,255), frameCount, map(ballY, 0, height, 0, 255));
      ellipse(ballX, ballY, ballWidth, ballWidth);
    }
  }

  //determine coordinates of the highlights
  /*float column = random(0, width/ballWidth);
  int newColumn = int(column);
  int randomX = newColumn * ballWidth+ ballWidth/2;
  float columnY = random(0, height/ballWidth);
  int newColumnY = int(columnY);
  int randomY = newColumnY * ballWidth + ballWidth/2;*/

  //draw highlights
  //drawHighlight(randomX, randomY);
  //drawHorizontalHighlight(randomX, randomY);

  myCircle.moveIt();
  myCircle.showIt();

  drawHighlight(myCircle.x, myCircle.y);
  drawHorizontalHighlight(myCircle.x, myCircle.y);

  circle2.moveIt();
  circle2.showIt();

  drawHighlight(circle2.x, circle2.y);
  drawHorizontalHighlight(circle2.x, circle2.y);

}//end draw

void drawHighlight (int _x, int _y)
{
  for (int d=0; d*ballWidth <= width; d++)
  {
    //bottom spoke
    fill(255, 255, 255, 100);
    ellipse(_x, _y+ d*ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 70);
    ellipse(_x + ballWidth, _y+ d*ballWidth, ballWidth, ballWidth);
    ellipse(_x - ballWidth, _y+ d*ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 40);
    ellipse(_x + 2*ballWidth, _y+ d*ballWidth, ballWidth, ballWidth);
    ellipse(_x - 2*ballWidth, _y+ d*ballWidth, ballWidth, ballWidth);
  }
  for (int d=0; d*ballWidth <= width; d++)
  {
    //top spoke
    fill(255, 255, 255, 100);
    ellipse(_x, _y- d*ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 70);
    ellipse(_x + ballWidth, _y- d*ballWidth, ballWidth, ballWidth);
    ellipse(_x - ballWidth, _y- d*ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 40);
    ellipse(_x + 2*ballWidth, _y- d*ballWidth, ballWidth, ballWidth);
    ellipse(_x - 2*ballWidth, _y- d*ballWidth, ballWidth, ballWidth);
  }
}//end drawHighlight

void drawHorizontalHighlight (int _x, int _y)
{
  for (int d=0; d*ballWidth <= height; d++)
  {
    //left spoke
    fill(255, 255, 255, 100);
    ellipse(_x +d*ballWidth, _y, ballWidth, ballWidth);
    fill(255, 255, 255, 70);
    ellipse(_x + d*ballWidth, _y+ ballWidth, ballWidth, ballWidth);
    ellipse(_x + d*ballWidth, _y- ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 40);
    ellipse(_x + d*ballWidth, _y+ 2*ballWidth, ballWidth, ballWidth);
    ellipse(_x + d*ballWidth, _y- 2*ballWidth, ballWidth, ballWidth);
  }
  for (int d=0; d*ballWidth <= height; d++)
  {
    //right spoke
    fill(255, 255, 255, 100);
    ellipse(_x - d*ballWidth, _y, ballWidth, ballWidth);
    fill(255, 255, 255, 70);
    ellipse(_x - d*ballWidth, _y + ballWidth, ballWidth, ballWidth);
    ellipse(_x - d*ballWidth, _y- ballWidth, ballWidth, ballWidth);
    fill(255, 255, 255, 40);
    ellipse(_x - d*ballWidth, _y+ 2*ballWidth, ballWidth, ballWidth);
    ellipse(_x - d*ballWidth, _y- 2*ballWidth, ballWidth, ballWidth);
  }
}//end drawHorizontalHighlight

// Cirlce Class
class Circle
{
  int x;
  int y;
  int xSpeed = 30;
  int ySpeed = 30;
  int circleSize;
  color circleColor;

  Circle(int _x, int _y, int _size)
  {
    x = _x + 5;
    y = _y + 5;
    circleSize = _size;
    //circleColor = color(random(255));
    circleColor = 255;
  }

  void moveIt()
  {
    x = x + xSpeed;
    y = y + ySpeed;

    if (x > width || x < 0)
    {
      xSpeed = xSpeed * -1;
    }

    if (y > height || y < 0)
    {
      ySpeed = ySpeed * -1;
    }
  }

  void showIt()
  {
    fill(circleColor);
    ellipse(x, y, circleSize, circleSize);
  }
}

Use the arrow keys on your keyboard to draw something. Change the color of the pen to blue by tapping ‘b,’ green by tapping ‘g,’ and red by tapping ‘r.’

Just a little throwback to using keystrokes for drawing pictures.

I really wanted to have a key were you can switch from a ‘draw’ mode to a ‘move’ mode so you can move the cursor to somewhere else before drawing again, but I couldn’t figure out how to do that with out erasing everything. How do you keep some of the screen intact while erasing other parts?

int ballWidth = 10;
int ballRadius = ballWidth /2;

int ballX = ballRadius;
int ballY = ballRadius;

int[] ballColor = {
  231, 0, 51
};
String ballColorText = "RED";

int opacity = 200;

int ballCount = 0;

boolean ballDraw = false;
PFont font;

void setup() {
  frameRate(5);
  size(400, 400);
  background(0);

  smooth();
  fill(255);

  //draw the main background grid
  for (int i=0; i * ballWidth < width; i++) {    
    for (int a=0; a * ballWidth < height; a++) {
      ellipse(ballWidth*i +ballRadius, (ballWidth * a+ballWidth/2), ballWidth, ballWidth);
    }
  }
}

void draw() {
  fill(0);
  rect (0, height - 50, width, 50);
  fill(0, 102, 153);
  text ("Count: " + ballCount, width -100, height - 20);
  text ("Draw color: " + ballColorText, 10, height - 20);
  //println(frameCount);
  if (keyPressed) {
    if (key == ' ') {
      //setup();

      ballDraw = !ballDraw;
      //  ballX
    }
  }
}

void keyPressed() {
  fill(ballColor[0], ballColor[1], ballColor[2], opacity);
  if (key == CODED) {
    switch (keyCode) {
    case LEFT :
      ellipse(ballX - ballWidth, ballY, ballWidth, ballWidth);
      ballX -= ballWidth;
      ballCount++;
      break;
    case RIGHT :
      ellipse(ballX + ballWidth, ballY, ballWidth, ballWidth);
      ballX += ballWidth;
      ballCount++;
      break;
    case UP :
      ellipse(ballX, ballY - ballWidth, ballWidth, ballWidth);
      ballY -= ballWidth;
      ballCount++;
      break;
    case DOWN :
      ellipse(ballX, ballY + ballWidth, ballWidth, ballWidth);
      ballY += ballWidth;
      ballCount++;
      break;
    default :
      break;
    }
  }
  switch (key) {
  case 'g' :
    //fill in green
    println("Green pressed!");
    //ballColor = {140, 235, 93};
    ballColor[0] = 140;
    ballColor[1] = 235;
    ballColor[2] = 93;
    ballColorText = "GREEN";
    break;

  case 'r' :
    //fill in green
    println("Red pressed!");
    ballColor[0] = 231;
    ballColor[1] = 0;
    ballColor[2] = 51;
    ballColorText = "RED";
    break;

  case 'b' :
    //fill in green
    println("Blue pressed!");
    ballColor[0] = 0;
    ballColor[1] = 102;
    ballColor[2] = 153;
    ballColorText = "BLUE";
    break;

  default:
    break;
  }
}

I wanted to created a highlight effect over a grid. Originally I wanted to highlight to be diagonal, but it was getting to be difficult. The hardest part about this was figuring out which circle in the grid needed to be which color. I ended up with two identical, nested for-loops: one for the background, and second for finding where the mouse was. I also had to call the setup function inside of draw, which I’m almost sure is a not a good idea. That’s probably why this page is super sloooow.

//global variables
int ballWidth = 10;


void setup() {
  size (600, 600); 
  smooth();
 background(0);

  for (int i=0; i * ballWidth < width; i++) {    
    for (int a=0; a * ballWidth < height; a++) {
      int ballX = ballWidth*i + ballWidth/2;
      int ballY = ballWidth*a + ballWidth/2;

      fill(ballX, 0, ballY);
      ellipse(ballX, ballY, ballWidth, ballWidth);
    }
  }
}


void draw() {
  setup();

  for (int i=0; i * ballWidth < width; i++) {    
    for (int a=0; a * ballWidth < height; a++) {
      int ballX = ballWidth*i + ballWidth/2;
      int ballY = ballWidth*a + ballWidth/2;

      if (((mouseX >= ballWidth*i) && (mouseX <= ballWidth*i+ballWidth))
        && ((mouseY >= ballWidth*a) && (mouseY <= ballWidth*a+ballWidth))) {
  
        for (int d=0; d*ballWidth <= width; d++) {
          fill(255, 255, 255, 100);
          ellipse(ballX, ballY+ d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 70);
          ellipse(ballX + ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 40);
          ellipse(ballX + 2*ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - 2*ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);  
      }
         for (int d=0; d*ballWidth <= width; d++) {
          fill(255, 255, 255, 100);
          ellipse(ballX, ballY- d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 70);
          ellipse(ballX + ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 40);
          ellipse(ballX + 2*ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - 2*ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
        }
      }
    }
  }
}

Having gone over some basics in Processing, our first assignment was to create our own simple screen drawing, programmically. I chose to try to replicate a piece by Ron Gang called Windmill. Below is the original oil on canvas by Gang.

Here is my version created using Processing. Continue reading →