qwerty colour,

Share your Work

textextex

in Share your Work • 1 year ago

I'm currently at a very rudimentary early level with Processing. I stuck this piece together with a cute little book and some of the examples as reference. It's pretty Frankenstein.

You hit the QWERTY keys to change the colour of the shape while dragging it around the screen, the movement of the cursor is tracked and looped.

Eventually I want to work sound in to it, so each key corresponds to a different sound, manipulated by the position of the cursor. This would just layer up and loop audio-visual chaos.

If anyone has any suggestions for improvement, please feel free to add, I'm sure there's a lot of work to be done.

int currentFrame = 0;
PImage[] frames = new PImage[24];
int lastTime = 0;

void setup() {
size(640, 360);
smooth();
background(255, 255, 255);
for (int i = 0; i < frames.length; i++) {
    frames[i] = get(); // Create a blank frame
}
}

void draw()
{
int currentTime = millis();
if (currentTime > lastTime+30) {
    nextFrame();
    lastTime = currentTime;
}
if(keyPressed) {
    if (key == 'q' || key == 'Q') {
      fill(0, 0, 255);
    }
} else {
    fill(255);
}
rect(mouseX, mouseY, -10, 10);
if(keyPressed) {
    if (key == 'w' || key == 'W') {
      fill(0, 255, 0);
    }
} else {
    fill(255);
}
rect(mouseX, mouseY, 10, -10);
   if(keyPressed) {
    if (key == 'e' || key == 'E') {
      fill(255, 0, 0);
    }
} else {
    fill(255);
}
rect(mouseX, mouseY, 10, 10);
   if(keyPressed) {
    if (key == 'r' || key == 'R') {
      fill(0, 255, 255);
    }
} else {
    fill(255);
}
rect(mouseX, mouseY, 10, 10);
   if(keyPressed) {
    if (key == 't' || key == 'T') {
      fill(255, 255, 0);
    }
} else {
    fill(255);
}
rect(mouseX, mouseY, 10, 10);
   if(keyPressed) {
    if (key == 'y' || key == 'Y') {
      fill(255, 0, 255);
    }
} else {
    fill(255);
}
rect(mouseX, mouseY, 10, 10);
}

void nextFrame()
{
frames[currentFrame] = get(); // Get the display window
currentFrame++; // Increment to next frame
if (currentFrame >= frames.length) {
    currentFrame = 0;
}
image(frames[currentFrame], 0, 0);
}

Replies(4)

jbum

Re: qwerty colour,

1 year ago

This is a really clever idea, thanks for posting it!

Here I've cleaned up your sketch a bit.

1) I got rid of the initialization loop in setup (which called get() on all the images) as this adds to the initial start-up time of the sketch. Instead, I don't display images if they are set to null.

2) I cleaned up the keyboard handling in your draw loop.

3) I removed some redundant calls to rect().

4) I got rid of the millis() stuff, which was intended to slow down your frame rate, and instead, slowed down the frame rate in setup.

5) Your code which was wrapping the counter can be simplified using the modulo operator, so I simplified it. The

classic way to do a wrapping counter is:

ctr = (ctr + 1) % length;

or if you want to go backwards

ctr = (ctr + length - 1) % length;

int currentFrame = 0;
PImage[] frames = new PImage[24];
int lastTime = 0;
void setup() {
size(640, 360);
smooth();
background(255, 255, 255);
frameRate(33);
}
void draw()
{
nextFrame(); // use frameRate(33), in setup to get the desired framerate
if (keyPressed) {
switch (key) {
case 'q':
case 'Q': fill(0, 0, 255); break;
case 'w':
case 'W': fill(0, 255, 0); break;
case 'e':
case 'E': fill(255, 0, 0); break;
case 'r':
case 'R': fill(0, 255, 255); break;
case 't':
case 'T': fill(255, 255, 0); break;
case 'y':
case 'Y': fill(255, 0, 255); break;
default: fill(255); break;
}
} else {
fill(255);
}
rect(mouseX, mouseY, -10, 10);
rect(mouseX, mouseY, 10, -10);
rect(mouseX, mouseY, 10, 10);
}
void nextFrame()
{
frames[currentFrame] = get(); // Get the display window
currentFrame = (currentFrame + 1) % frames.length;
if (frames[currentFrame] != null)
image(frames[currentFrame], 0, 0);
}

jbum

Re: qwerty colour,

1 year ago

If you replace the rect code with this, it looks cool:

if (pmouseX > 0 && pmouseX > 0 && frameCount > 24)

line(pmouseX, pmouseY, mouseX,mouseY);

Also, it's nice if you stick a

noCursor();

in the draw routine.

I took the liberty of posting a simplified version of this (with credit to you) on my blog.

Here's a 24 frame GIF animation I made with this technique.

http://imgur.com/MV6Nf

textextex

Re: Re: qwerty colour,

1 year ago

Wo-hoah! Good moves jbum! I stumbled across the codes in one of the examples and just stuck them together with some other stuff I was trying out. Thanks a lot for your rejig with notes.

I've done a couple of different versions of the rect codes…

if (pmouseX > 0 && pmouseX > 0 && frameCount > 24);
noStroke();
rect(pmouseX, pmouseY, mouseX, mouseY, -7, 7);noCursor();
rect(pmouseX, pmouseY, mouseX, mouseY, 7, -7);
rect(pmouseX, pmouseY, mouseX, mouseY, 7, 7);

and

if (pmouseX > 0 && pmouseX > 0 && frameCount > 24);
line(pmouseX, pmouseY, mouseX,mouseY);
rect(pmouseX, pmouseY, mouseX, mouseY, -7, 7);noCursor();
rect(pmouseX, pmouseY, mouseX, mouseY, 7, -7);
rect(pmouseX, pmouseY, mouseX, mouseY, 7, 7);

(I'd like to be able to have the line and the noStroke rectangles but haven't hit the nail on the head yet)
It turns out that it makes the size of the box distort depending on its location, the bottom right being massive & the top left tiny.

Would there maybe be a way that you could toggle this effect on and off with the caps lock or shift key?

jbum

Re: qwerty colour,

1 year ago

Here's a basic framework for turning an effect on/off via those keys. The basic idea is that you use a boolean variable to control which lines of code you execute in the draw routine.

boolean effectIsOn = true;
void setup()
{
size(500,500);
textAlign(CENTER,CENTER);
background(255);
fill(0);
}
void draw()
{
background(255);
if (effectIsOn) {
text("EFFECT IS ON",width/2,height/2);
filter(BLUR);
} else {
text("EFFECT IS OFF",width/2,height/2);
}
}
void keyPressed()
{
if (key == CODED) {
println("coded key pressed, keyCode = " + keyCode);
if (keyCode == SHIFT) { // for caps lock use KeyEvent.VK_CAPS_LOCK
println("Shift key pressed");
effectIsOn = !effectIsOn;
}
}
}

Top Reply

qwerty colour,

Replies(4)

Re: qwerty colour,

Re: qwerty colour,

Re: Re: qwerty colour,

Re: qwerty colour,

Statistics

Tags

Actions

Related Posts