The below gallery contains both found and observed images that I find to be Blessed|Blursed|Cursed, mostly of the Cursed variety. At this point I’m still uncertain about what my definition of cursed media is but I think these images do a fair job at helping me to have a better understanding of what it takes for media to be cursed.
Sometimes I find myself staring out into space to relive stress and re-center however, lately staring into space hasn’t been enough. So I decided to make my final project an interactive distraction. I wanted to focus on user interaction, making it easy for the user to adjust the output and understand how the changes they were making effected the end result. The ability to re-start the graphic was also important.
Since the UI was an import aspect of this project I wanted to focus on making it easily understandable. My first iteration was not the most user friendly.
In the above version all of the sliders for the starting position of four shapes were grouped together, followed by two sliders that control global variables, followed by sliders for color and stroke for each of the shapes. The order didn’t really make any sense. The other aspect of this interface that I disliked, and pointed out by John Henry, was that the user had to have all the shapes actively on screen. Adding a check-box to allow the user to select what shapes were seen made it so the user had more control over the graphic that was produced.
In the final UI global variables and the ability to re-size and reset the graphic are located at the top of the UI, each shape and all sliders associated with it are grouped together. A check-box turns the shapes on and off. The value is displayed to the right of each slider for those that control the shape’s position. I didn’t feel like it was necessary to display the vale for the color and stroke since those elements don’t change the way the shapes behave, and the values aren’t important for the user to really understand how the changes to the sliders effect the position and size of the shapes.
The images above show some of the combinations produced with the adjustment of various sliders. The first image is “in-set” with the UI showing under it. The other two images show the graphic as “full-screen”.
I would like to continue the development of this sketch there are a few different ides I would like to implement.
line(), beginShape() and endShape().
The code is long so feel free to skip it and head over to the working sketch found here. https://editor.p5js.org/phil-in-a-can/sketches/d4J4kzzvH
This is the main sketch.
let x1 = 0;
let y1 = 0;
let x2 = 50;
let y2 = 50;
let x3 = 25;
let y3 = 25;
let x4 = 30;
let y4 = 75;
let rep = 2;
let col1 = 10;
let col2 = 100;
let col3 = 200;
let col4 = 300;
let strk1 = 1;
let strk2 = 1;
let strk3 = 1;
let strk4 = 1;
let frmRt = 30
let shape1 = false;
let shape2 = false;
let shape3 = false;
let shape4 = false;
let deg1 = 0.33
let deg2 = 0.33
let deg3 = 0.33
let deg4 = 0.33
function setup() {
createCanvas(400, 400);
background(0, 0, 0);
angleMode(DEGREES);
colorMode(HSB, 360, 100, 100, 100);
// rectMode(CENTER);
// frameRate(frmRt);
create_ui();
}
function draw() {
frameRate(frmRt);
slider_value('Rep', rep);
slider_value('frmRt', frmRt);
slider_value('x1', x1);
slider_value('y1', y1);
slider_value('Degrees1', deg1);
slider_value('x2', x2);
slider_value('y2', y2);
slider_value('Degrees2', deg2);
slider_value('x3', x3);
slider_value('y3', y3);
slider_value('Degrees3', deg3);
slider_value('x4', x4);
slider_value('y4', y4);
slider_value('Degrees4', deg4);
noFill();
translate(width / 2, height / 2);
// push();
// rectMode(CENTER);
if (shape1) {
ellipseMode(CENTER);
push();
// stroke(0, random(0, 85), 0);
// stroke(85, random(0, 85), 85);
strokeWeight(strk1);
stroke(col1, 100, 100, 50);
rotate(x1 / deg1);
// rect(x, y, rep * (random(1, 10)), rep * (random(1, 10)));
// ellipse(t1, t2, 10, t1 + 45);
ellipse(x1, y1, 10, x1 + 45);
// rect(x, y, rep * x + 1, y + 5);
// x = x + 5
pop();
x1 = x1 + rep;
if (x1 > width) {
x1 = 0;
y1 = y1 + rep;
}
} else {}
if (shape2) {
push();
ellipseMode(CENTER);
// translate(x*0.33,random(10,200));
// translate(0, 0);
rotate(x2 / deg2);
// fill(0,random(0, 255), 255,0);
// stroke(85, random(85, 170), 170);
// stroke(0, random(85, 170), 0);
strokeWeight(strk2);
stroke(col2, 100, 100, 50);
// rotate(x1 / 0.33);
// ellipse(x1, y1, 10, x1 + 45);
// circle(x, y, rep * (random(1, 10)));
ellipse(x2, y2, 20, x2 + 45);
pop();
x2 = x2 + rep;
if (x2 > height) {
x2 = 0;
y2 = y2 + rep
}
} else {}
if (shape3) {
push();
ellipseMode(CENTER);
// translate(x*0.33,random(10,200));
// translate(0, 0);
rotate(x3 / deg3);
// fill(0,random(0, 255), 255,0);
// stroke(0, random(170, 255), 0);
// stroke(170, random(170, 255), 255);
strokeWeight(strk3);
stroke(col3, 100, 100, 50);
// rotate(x1 / 0.33);
ellipse(x3, y3, 40, x3 + 45);
// circle(x, y, rep * (random(1, 10)));
pop();
x3 = x3 + rep;
if (x3 > height * 1.5) {
x3 = 0;
y3 = y3 + rep
}
} else {}
if (shape4) {
push();
rotate(x4 / deg4);
strokeWeight(strk4);
stroke(col4, 100, 100, 50);
// triangle(0, 0,x4, 20, y4, 75);
// triangle(30, 75, x2 + 58, y + 20, y1 + 86, y2 + 75);
triangle(x4, y4, x4 + 100, y4 + 150, x4 + 200, y4 + 250);
pop();
x4 = x4 + rep;
if (x4 > height) {
x4 = 0;
y4 = y4 + rep
}
} else {}
}
And here is the code for the UI.
function create_ui() {
createP();
{
let a_button = createButton('resize-full');
a_button.mousePressed(function() {
resizeCanvas(windowWidth, windowHeight);
background(0, 0, 0);
});
// createP();
} {
let a_button = createButton('resize-inset');
a_button.mousePressed(function() {
resizeCanvas(400, 400);
background(0, 0, 0);
});
// createP();
} {
let a_button = createButton('reset');
a_button.mousePressed(function() {
// translate(windowWidth/2,windowHeight/2);
fill(0);
rect(-windowWidth / 2, -windowHeight / 2, windowWidth, windowHeight);
});
createP();
} {
let a_span = createSpan('Rep:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 10, rep, 0.25);
a_slider.style('width', '200px');
a_slider.input(function() {
rep = a_slider.value();
});
// createP();
}{
let elm = createSpan().id('Rep');
elm.style('font-size', '20px');
elm.style('color:magenta');
} {
let a_span = createSpan('frmRt:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(10, 100, frmRt);
a_slider.style('width', '200px');
a_slider.input(function() {
frmRt = a_slider.value();
});
// createP();
}{
let elm = createSpan().id('frmRt');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
}
// X1,Y1
{
let a_check = createCheckbox('Shape 1', shape1);
a_check.style('font-size', '25px');
a_check.style('color:cyan');
a_check.changed(function() {
shape1 = this.checked();
});
createP();
} {
let a_span = createSpan('x1:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 100, x1);
a_slider.style('width', '200px');
a_slider.input(function() {
x1 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('x1');
elm.style('font-size', '20px');
elm.style('color:magenta');
} {
let a_span = createSpan('y1:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 100, y1);
a_slider.style('width', '200px');
a_slider.input(function() {
y1 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('y1');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('Degrees:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(-0.99, 0.99, deg1, 0.01);
a_slider.style('width', '200px');
a_slider.input(function() {
deg1 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('Degrees1');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('color 1:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 360, col1);
a_slider.style('width', '200px');
a_slider.input(function() {
col1 = a_slider.value();
});
} {
let a_span = createSpan('stroke 1:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 5, strk1);
a_slider.style('width', '200px');
a_slider.input(function() {
strk1 = a_slider.value();
});
createP();
}
// x2,y2
{
let a_check = createCheckbox('Shape 2', shape2);
a_check.style('font-size', '25px');
a_check.style('color:cyan');
a_check.changed(function() {
shape2 = this.checked();
});
} {
let a_span = createSpan('x2:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 200, x2);
a_slider.style('width', '200px');
a_slider.input(function() {
x2 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('x2');
elm.style('font-size', '20px');
elm.style('color:magenta');
} {
let a_span = createSpan('y2:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 200, y2);
a_slider.style('width', '200px');
a_slider.input(function() {
y2 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('y2');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('Degrees:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(-0.99, 0.99, deg2, 0.01);
a_slider.style('width', '200px');
a_slider.input(function() {
deg2 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('Degrees2');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('color 2:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 360, col2);
a_slider.style('width', '200px');
a_slider.input(function() {
col2 = a_slider.value();
});
// createP();
} {
let a_span = createSpan('stroke 2:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 5, strk2);
a_slider.style('width', '200px');
a_slider.input(function() {
strk2 = a_slider.value();
});
createP();
}
// x3,y3
{
let a_check = createCheckbox('Shape 3', shape3);
a_check.style('font-size', '25px');
a_check.style('color:cyan');
a_check.changed(function() {
shape3 = this.checked();
});
} {
let a_span = createSpan('x3:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 500, x3);
a_slider.style('width', '200px');
a_slider.input(function() {
x3 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('x3');
elm.style('font-size', '20px');
elm.style('color:magenta');
} {
let a_span = createSpan('y3:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 500, y3);
a_slider.style('width', '200px');
a_slider.input(function() {
y3 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('y3');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('Degrees:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(-0.99, 0.99, deg3, 0.01);
a_slider.style('width', '200px');
a_slider.input(function() {
deg3 = a_slider.value();
});
// createP();
} {
let elm = createSpan().id('Degrees3');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('color 3:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 360, col3);
a_slider.style('width', '200px');
a_slider.input(function() {
col3 = a_slider.value();
});
// createP();
} {
let a_span = createSpan('stroke 3:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 5, strk3);
a_slider.style('width', '200px');
a_slider.input(function() {
strk3 = a_slider.value();
});
createP();
}
//x4,y4
{
let a_check = createCheckbox('Shape 4', shape4);
a_check.style('font-size', '25px');
a_check.style('color:cyan');
a_check.changed(function() {
shape4 = this.checked();
});
} {
let a_span = createSpan('x4:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 100, x4);
a_slider.style('width', '200px');
a_slider.input(function() {
x4 = a_slider.value();
});
// createP();
}{
let elm = createSpan().id('x4');
elm.style('font-size', '20px');
elm.style('color:magenta');
} {
let a_span = createSpan('y4:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 100, y4);
a_slider.style('width', '200px');
a_slider.input(function() {
y4 = a_slider.value();
});
// createP();
}{
let elm = createSpan().id('y4');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('Degrees:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(-0.99, 0.99, deg4, 0.01);
a_slider.style('width', '200px');
a_slider.input(function() {
deg4 = a_slider.value();
});
// createP();
}{
let elm = createSpan().id('Degrees4');
elm.style('font-size', '20px');
elm.style('color:magenta');
createP();
} {
let a_span = createSpan('color 4:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 360, col4);
a_slider.style('width', '200px');
a_slider.input(function() {
col4 = a_slider.value();
});
// createP();
} {
let a_span = createSpan('stroke 4:');
a_span.style('font-size', '20px');
a_span.style('color:cyan');
let a_slider = createSlider(0, 5, strk4);
a_slider.style('width', '200px');
a_slider.input(function() {
strk4 = a_slider.value();
});
}
}
function slider_value(label, num) {
let elm = select('#' + label);
num = round(num, 2);
// elm.html('[' + label + ' ' + num + '] ');
elm.html('[' + num + '] ');
}
If you have stuck around this long you aerie a champion, as always please share your thoughts in the comments.
As an Industrial Designer I live in a world of creation dictated by usefulness, sleekness, and functionality. However, I have always been fascinated by objects that at first seem useful but in the end show how incredibly useless they truly are. My journey into objects that are useless in not any easy one, my formal training and continued professional practice make it difficult for me to produce an object for the sake of that object. I challenged myself to take an object that most people can relate to and also understand the usefulness on first glance. Upon further inspection of the object, in this case a lamp, the user realizes the uselessness of the object.
I took visual inspiration from the concrete usage in Russian Architecture and contrasted it with copper, a material that exists in a dichotomic state being both cold and visually warm. So the bones of this object have come together to form something of interest slightly not square and imperfect in so many ways. The viewer is forced to reconcile the uneasy feeling of something that is seemingly unbalanced. The Lamp shade, angled back towards the base of the object puts a focus on the users hands as they interact with two metal protrusions from the base. These metal posts are points of interaction, no adjustability to the positioning of the light is offered, no ability to change the height the light, it is simply there.
As I mentioned in my previous entry, my original intention was to use gesture control to change position of the lens as well as the brightness of the light. Below is the code that attempts to limit a stepper motor to have only 90 degrees of rotation. For some reason the stepCount variable would not update while using the APDS9960 gesture sensor. I gained two very important pieces of information from this lengthy process.
Below is the code for using the gesture sensor to control the stepper.
#include "Stepper.h"
#include "Adafruit_APDS9960.h"
Adafruit_APDS9960 apds;
int stepCount = 0;
const int stepsPerRevolution = 1026; // change this to fit the number of steps per revolution
// for your motor
// initialize the stepper library on pins 8 through 11:
Stepper myStepper(stepsPerRevolution, 9, 10, 11, 12);
void setup() {
// set the speed at 60 rpm:
myStepper.setSpeed(10);
// initialize the serial port:
Serial.begin(9600);
if (!apds.begin()) {
Serial.println("failed to initialize device! Please check your wiring.");
}
else Serial.println("Device initialized!");
//gesture mode will be entered once proximity mode senses something close
apds.enableProximity(true);
apds.enableGesture(true);
}
void loop() {
// step one revolution in one direction:
// uint8_t gesture = apds.readGesture();
if (stepCount < 510) {
uint8_t gesture = apds.readGesture();
if (gesture == APDS9960_DOWN) myStepper.step(51);
stepCount = stepCount + 51;
delay(100);
if (gesture == APDS9960_UP) myStepper.step(-51);
stepCount = stepCount - 51;
delay(100);
// if (gesture == APDS9960_LEFT) myStepper.step(513);
// if (gesture == APDS9960_RIGHT) myStepper.step(-513);
Serial.print("stepCount:");
Serial.println(stepCount);
}
}Conceptually the idea is to have a lamp that really only functions as an interaction with the lamp. Basically a useless lamp. Brightness is controlled via a rotary potentiometer placed on the left-hand side of the base and the lens position is controlled by a rotary potentiometer placed on the right-hand side of the base. There is a bit of discovery involved as the pots are not labeled on purpose. At this point you might be asking yourself “Why would I want/need to control the position of the lens?” Well ,my friend, I’ll tell you. This particular lamp has not one but two lenses, each lens is a composite of a lenticular array and a linear polarizing filter. The idea was to change the relative position of the lenses to change the light quality. What I basically ended up doing, not on propose I might add, was creating a variable detraction grating. This was not my intended outcome however, my goal was to change the quality of the light by rotating two lenses in relation to each other. In that sense I was fully successful in that goal.
so now lets look at the code I used for the final implementation, two variables allow the position of the lens and the brightness to be adjusted independently of each other.
#include <Servo.h>
Servo servoMotor;
int servoPin = 3;
const int lampPin = 9;
void setup() {
Serial.begin(9600);
pinMode(lampPin, OUTPUT);
servoMotor.attach(servoPin);
}
void loop() {
// Lamp Operation
int sensorValue = analogRead(A0);
int outputValue = map(sensorValue, 0, 1023, 50, 255);
analogWrite(lampPin, outputValue); //Adjust Lamp Brightness
Serial.println(outputValue);
//Servo Operation
int analogValue = analogRead(A1);
int servoAngle = map(analogValue, 0, 1023, 0, 95);
if (millis()% 20 <2) {
servoMotor.write(servoAngle);//Change Postion of Servo
}
Serial.println(servoAngle);
}
Fabrication of the lamp was not without challenge either. Aesthetically I wanted it to have an almost unfished industrial quality to it. Make the user feel a little uneasy while using it and also question why it was made. Unsealed concrete and raw copper tube were the materials I chose. They compliment each other well, over time and with continued usage both materials will gain a patina. The copper will patina fairly uniformly but the concrete on there other and will really only change in the places the user touches it. This will provide future users with more clarity of where the interaction points are but also speak to the object having some kind of history.
The physical object was basically one big problem solving endeavor. Casting concrete is fairly easy, but with a limited time frame and realizing this piece is a one-off it didn’t really make sense to make silicone molds of parts created just for this.
I used “flex-cones” as the mold for the lamp head. The voids would give some interesting detail to the form. But, and this is a big but, voids mean holes which means I couldn’t pour a liquid into it. So I used packing tape to create a shell over the cone. This covered the voids as well as gave some added rigidity to the mold. I also need a way to keep the inner cone and outer cone separated so the concrete could be poured into it. I unfortunately forgot to take pictures of this step. I used a hollow threaded rod at top of the cones to keep them separate. This also gave me a whole at the top of the lamp head in which I was able to pass the wiring though.
The base of the lamp was created in a similar fashion. A 2.5QT bucket was used for the base with three pipes used to create holes for the upright and the two potentiometers.
Again this was a two part mold to create a cavity in order to house the microcontroller and the potentiometers. This resulted in a very this slab where the upright would penetrate the base. Concrete can be very brittle when side load is placed on it. The slab was only about 0.25″ thick which would not support weight of the Lampe head. A second pour into part of the void created a slab that was thick enough to support the load placed on it from the lamp head.
I had to make extensions for the horn that I used. Brass tubing made quick work of this. The extension allowed me to place the servo behind the LED so as to no interrupt the light with the servo.
Final assembly was not a cake walk either. My hands are big, the inside of the lamp head is small, need I say more. Patients, tweezers, and some super sludgy metal (music) got me to a point where it all came together.
And Finally the lamp in all it’s uneasy glory.
There are so many changes I would make to this project, for one I would like to make this base 1’x1’x4′ so it basically sits on a pedestal. I would also want to make the able the head moor extrema to really show how useless it is. I wasn’t able to get this to run from wall power only. When the board was being powered from the wall, both the LED and the servo acted very erratically. The LED would go to full brightness at 50% through the potentiometer’s rotation and then fade back down in the other 50% of rotation. And the servo would not start to activate until about 30% through the rotation of the potentiometer and then would not actually turn, it would bounce back and forth between the starting position and about 10 degrees. I’m not sure why this behavior was being exhibited it could be because of a grounding issue or possibly power, but I don’t think it is power. I tested using 12V, 15V, and 16V all with about 3.5 amps. I tried to use a two 1000μF capacitors which didn’t really help at all. I keep the capacitor I used for the servo since it helped to clean up the output and removed some of the bounciness of the movement.
For the moist part I am fairly happy with the way this turned out. I set out to make a useless lamp that had two interactions brightness and light quality, both were achieved. As always I welcome feedback in the comments.
The time has come, to pay the re… I mean for the final project. I’ve struggled with a concept for this project. Final projects can be a real stress and that’s when it hit me, maybe I should make something that relaxes me. Color, movement, and the ability to control a number of different parameters in order to change the visual to match my mood. I started with basic shapes with noFill() in order to create patterns that change over time. I’m still looking at different ways to change the patterns.
let x = 0;
let y = 0;
let x1 = 150;
let y1 = 150;
let x2 = 300;
let y2 = 300;
let x3 = 450;
let y3 = 450
let rep = 2;
let col1 = 10;
let col2 = 100;
let col3 = 200;
let col4 = 300;
let strk1 = 1;
let strk2 = 1;
let strk3 = 1;
let strk4 = 1;
let frmRt = 30
function setup() {
createCanvas(400, 400);
background(0);
angleMode(DEGREES);
colorMode(HSB,360,100,100,100);
// rectMode(CENTER);
// frameRate(frmRt);
create_ui();
}
function draw() {
frameRate(frmRt);
noFill();
translate(width / 2, height / 2);
// push();
// rectMode(CENTER);
ellipseMode(CENTER);
push();
// stroke(0, random(0, 85), 0);
// stroke(85, random(0, 85), 85);
strokeWeight(strk1);
stroke(col1,100,100,50);
rotate(x / 0.33);
// rect(x, y, rep * (random(1, 10)), rep * (random(1, 10)));
// ellipse(t1, t2, 10, t1 + 45);
ellipse(x, y, 10, x + 45);
// rect(x, y, rep * x + 1, y + 5);
// x = x + 5
pop();
push();
ellipseMode(CENTER);
// translate(x*0.33,random(10,200));
// translate(0, 0);
rotate(x1 / 0.33);
// fill(0,random(0, 255), 255,0);
// stroke(85, random(85, 170), 170);
// stroke(0, random(85, 170), 0);
strokeWeight(strk2);
stroke(col2,100,100,50);
// rotate(x1 / 0.33);
// ellipse(x1, y1, 10, x1 + 45);
// circle(x, y, rep * (random(1, 10)));
ellipse(x1, y1, 20, x1 + 45);
pop();
push();
ellipseMode(CENTER);
// translate(x*0.33,random(10,200));
// translate(0, 0);
rotate(x2 / 0.33);
// fill(0,random(0, 255), 255,0);
// stroke(0, random(170, 255), 0);
// stroke(170, random(170, 255), 255);
strokeWeight(strk3);
stroke(col3,100,100,50);
// rotate(x1 / 0.33);
ellipse(x, y, 40, x2 + 45);
// circle(x, y, rep * (random(1, 10)));
pop();
push();
rotate(x3 / 0.33);
strokeWeight(strk4);
stroke(col4,100,100,50);
triangle(30, 75, x + 58, y + 20, y1 + 86, y2 + 75);
pop();
x = x + rep;
if (x > width) {
x = 0;
y = y + rep;
}
x1 = x1 + rep;
if (x1 > height) {
x1 = 0;
y1 = y1 + rep
}
x2 = x2 + rep;
if (x2 > height) {
x2 = 0;
y2 = y2 + rep
}
x3 = x3 + rep;
if (x3 > height) {
x3 = 0;
y3 = y3 + rep
}
}This is the main body of code, there is a second file for the UI elements. I really like working this way, where the UI elements or DOMs are not in the main code. It makes it much easier to read and work though.
All of the above images are from the same sketch using the sliders to change the different parameters for the objects drawn to the canvas.
A working version of the sketch can be found here
I’ve also been playing with a particle system using Perlin Noise however, it feels very iterative on some existing code. I like the way it looks and I have been thinking about adding slider to control many of the variables. Not sure which direction I want to go. Here are two examples of the output. The values as of now are hard coded so changes have to be made manually.
A working version of the sketch can be found here
It’s the final countdown… For the final project of PCOMP I wanted to work with light and movement. This idea was hatched from two different project ideas. One having to to with using lenticular lenses and changing the spacing to in turn changing an image. The question “do I want to make a light?” And here we are, I am making a light. Don’t get me wrong, I really enjoy lighting projects and as an industrial designer I have work on a number but none have been interactive in the way I hope this one will be.
The concept revolves around lenticular lenses. Lenticular lenses have many paradelle grooves etched into the surface. When used in a traditional way they can “animate” a still image.
My goal is to change the light quality when the lenticular lenses change orientation and to be able to adjust brightness. Originally I wanted to make both of these operations use gesture control however, I have come to find out that gesture with a small sensor is flakey at best. After working for what seemed like days it became apparent that the use of gesture to control the functionality of the lamp would lead to frustration on the end user’s part, and that is not good design. Interaction is a very important part of how design plays a part in our everyday life. To see if my inclination was correct I play tested the interaction with a few users. All user had the same response to the system. It was hard to use, unpredictable, and didn’t really function well. Just because the thought of an interaction seems cool doesn’t make the right choice if the functionality is lost.
#include "Stepper.h"
#include "Adafruit_APDS9960.h"
Adafruit_APDS9960 apds;
const int stepsPerRevolution = 1026;
Stepper myStepper(stepsPerRevolution, 9, 10, 11, 12);
void setup() {
// set the speed at 60 rpm:
myStepper.setSpeed(10);
// initialize the serial port:
Serial.begin(9600);
if (!apds.begin()) {
Serial.println("failed to initialize device! Please check your wiring.");
}
else Serial.println("Device initialized!");
//gesture mode will be entered once proximity mode senses something close
apds.enableProximity(true);
apds.enableGesture(true);
}
void loop() {
// step one revolution in one direction:
uint8_t gesture = apds.readGesture();
if (gesture == APDS9960_DOWN) myStepper.step(100);
if (gesture == APDS9960_UP) myStepper.step(-100);
if (gesture == APDS9960_LEFT) myStepper.step(513);
if (gesture == APDS9960_RIGHT) myStepper.step(-513);
}
This is the code I used for the gesture sensor. I was using the Adafruit APDS-9960 for gesture control. Up or down was to incidentally change the position of the stepper and left or right was to bring the stepper to either end of the travel. There was about a 50% failure rate with gesture control. I also need to set a limit for the stepper since I was really only using 90 degrees of rotation. I tried to do this with a variable to keep track of the number of increments the motors had turned but could never get it work correctly with the gesture. I’m not sure why but the counter variable never changed when the action occurred. I switched to a potentiometer just to see if it was an issue with code or something to due with the sensor. I was able to get the counter to work with the potentiometer but I’m still not satisfied that my code was the problem while using the gesture sensor.
After much struggle and testing I have decided to make two changes, I will be using a servo instead of a stepper. This actually makes more sense since the servo I chose is limited to 90 degrees of rotation, this alleviates the need for either code based limits or the use of a limit switch. I could have used a limit switch in this situation but ultimately space is at a premium inside the lamp housing and using the servo reduces need space overall. The other change is to abandon the gesture control as the interaction was more frustrating that it was worth. I instead will be using two rotary potentiometers for control of the brightness and the light quality. I considered using capacitate touch pads for both actions but I was unable to acquire them in time to prototype this integration and make the needed changes to the physical object.
#include <Servo.h>
Servo servoMotor;
int servoPin = 3;
const int transistorPin = 9; // connected to the base of the transistor
void setup() {
Serial.begin(9600);
pinMode(transistorPin, OUTPUT);// set the transistor pin as output:
servoMotor.attach(servoPin);
}
void loop() {
int analogValue = analogRead(A1);
int servoAngle = map(analogValue, 0, 1023, 0, 90);
if (millis()% 20 <2) {
servoMotor.write(servoAngle);
}
// read the potentiometer:
int sensorValue = analogRead(A0);
// map the sensor value to a range from 0 - 255:
int outputValue = map(sensorValue, 0, 1023, 30, 255);
// use that to control the transistor:
analogWrite(transistorPin, outputValue);
Serial.println(outputValue);
}
The above code is what I’m currently using to drive the functionality of the lamp.
The final step in building the circuit is to make it so it runs off a single power supply. Currently I have both the servo and the lamp running off of a DC power jack and the Arduino Nano is running from USB power. This should be fairly straight forward to accomplish.
To be continued in my next post…
How does one visualize sound? Is it through color? Through shape? Through line? What about the sound is being visualized? Quality? Pitch? Amplitude? Volume? These are all good questions, and I will answer none of them. But what I will do is tell you how I took sound, in this case a song, and visualized the fft.analyze() which returns an array of amplitude values. These values range between 0 and 255; I decided to use HSB color space making it a bit easier to have a varied range of colors represented.
However, let me start by saying working with sound and trying to visualize it is extremely frustrating. I could never achieve what I was looking to do. I was not successfully able to make each square a different color representing a different index position in the fft.analyze() array. I’m sure it has something to do with the way this block of code is written.
for (y_pos = 0; y_pos <= height; y_pos += a_size * 1.5) {
for (x_pos = 0; x_pos <= width; x_pos += a_size * 1.5) {
var spectrum = fft.analyze();
for (var i = 0; i < spectrum.length; i++) {
// var spec2 = spectrum[i];
// var col = map(spec2, 0, 255, 0, 360)
var col = map(spectrum[3], 0, 255, 0, 360)
noStroke();
fill(col, 100, 100);
rect(x_pos, y_pos, a_size, a_size);
}
}
But hey, this is what learning is all about; fail often and fail early so to set yourself up for success in the future. All in all I was able to produce something that is interesting and visualizes the sound in a unique way. I was also able to work on adding doms through the use of a secondary .js file as well as making the whole sketch responsive to window size.
The single color working sketch can be found here
https://editor.p5js.org/phil-in-a-can/sketches/XYvmTBJPv
As always I welcome feedback in the comments section and if you figure out how to make each square a different color, please let me know!!
Well what can I say, “I get by with a little help from some friends”. After reaching out to my cohort and having a few discussions a solution to my issue came to the surface.
The updated and working sketch can be found here
https://editor.p5js.org/phil-in-a-can/sketches/aqFqyHpnz
The function draw() was updated with the following code.
function draw() {
background(0);
var spectrum = fft.analyze();
for (let x = 0; x < 13; x++) {
for (let y = 0; y < 13; y++) {
if (spectrum[x + y *13]) {
var col = map(spectrum[x + y * 13], 0, 255, 0, 360)
noStroke();
fill(col, 100, 100);
}
rect(x*width/19*2, y*height/19*2, width / 19, width / 19);
}
}
}
Thanks to David Currie for the help with this.
Motor control is the topic for this week, specifically DC Nano motors and stepper motors. The biggest take-away from this weeks material is that the inclusion of an H-Bridge is imperative if bi-directional rotation is needed.
This block of code is running on an Arduino Nano 33 IoT and the circuit is using a MOSEFT instead of a transistor. I tried using a different transistor, NPN, 60V 200mA (2N3904), than the on called out in the lab however, I was unable to get a working circuit with it. The specs on the data sheet made me think it would do the job but no such luck. The MOSFET had no issues at all. This circuit also includes the use of a potentiometer in order to control the rotation speed.
const int transistorPin = 9; // connected to the base of the transistor
void setup() {
// set the transistor pin as output:
pinMode(transistorPin, OUTPUT);
}
void loop() {
// read the potentiometer:
int sensorValue = analogRead(A0);
// map the sensor value to a range from 0 - 255:
int outputValue = map(sensorValue, 0, 1023, 0, 255);
// use that to control the transistor:
analogWrite(transistorPin, outputValue);
}
Once the circuit with the MOSFET was successful it was time to use an H-Bridge in order to control the direction of the motor. A small slide switch was used in order to select rotation direction. This circuit still includes the use of a potentiometer in order to control speed of rotation. The H-Bridge used here has two motor inputs however, in this example I used only one input.
const int switchPin = 2; // switch input
const int motor1Pin = 3; // Motor driver leg 1 (pin 3, AIN1)
const int motor2Pin = 4; // Motor driver leg 2 (pin 4, AIN2)
const int pwmPin = 9; // Motor driver PWM pin
int analogValue = 0;
int spd = 0;
void setup() {
// set the switch as an input:
pinMode(switchPin, INPUT);
// set all the other pins you're using as outputs:
pinMode(motor1Pin, OUTPUT);
pinMode(motor2Pin, OUTPUT);
pinMode(pwmPin, OUTPUT);
// set PWM enable pin high so that motor can turn on:
digitalWrite(pwmPin, HIGH);
}
void loop() {
// if the switch is high, motor will turn on one direction:
if (digitalRead(switchPin) == HIGH) {
digitalWrite(motor1Pin, LOW); // set leg 1 of the motor driver low
// digitalWrite(motor2Pin, HIGH); // set leg 2 of the motor driver high
analogValue = analogRead(A0);
spd = analogValue / 4;
analogWrite(motor2Pin, spd);
}
// if the switch is low, motor will turn in the other direction:
else {
// digitalWrite(motor1Pin, HIGH); // set leg 1 of the motor driver high
digitalWrite(motor2Pin, LOW); // set leg 2 of the motor driver low
analogValue = analogRead(A0);
spd = analogValue / 4;
analogWrite(motor1Pin, spd);
}
}
The final item on the agenda of motors and the H-Bridge was to control a stepper motor. Again here we use a Dual TB6612FNG for the H-Bridge and a Small Reduction Stepper Motor – 12VDC 32-Step 1/16 Gearing from Adafruit as the motor. There were tow steps to this lab, I was unable to get the first portion of the lab to work. Here is the code for unsuccessful initialization of the stepper.
#include "Stepper.h"
const int stepsPerRevolution = 513; // change this to fit the number of steps per revolution
// for your motor
// initialize the stepper library on pins 8 through 11:
//Stepper myStepper(stepsPerRevolution, 8,9,10,11);
Stepper myStepper(stepsPerRevolution, 9,10,11,12);
int stepCount = 0; // number of steps the motor has taken
void setup() {
// initialize the serial port:
Serial.begin(9600);
}
void loop() {
// step one step:
myStepper.step(1);
Serial.print("steps:" );
Serial.println(stepCount);
stepCount++;
delay(500);
}I believe this is due to the specific stepper I had on hand. After reading the documentation there was a note “you shouldn’t use interleaved or micro-stepping to control” this made me consider moving on to the second half of the lab without success in the first part. This paid off, this block of code was successful on the first try.
#include "Stepper.h"
const int stepsPerRevolution = 513; // change this to fit the number of steps per revolution
// for your motor
// initialize the stepper library on pins 8 through 11:
Stepper myStepper(stepsPerRevolution, 9,10,11,12);
void setup() {
// set the speed at 60 rpm:
myStepper.setSpeed(10);
// initialize the serial port:
Serial.begin(9600);
}
void loop() {
// step one revolution in one direction:
Serial.println("clockwise");
myStepper.step(stepsPerRevolution);
delay(500);
// step one revolution in the other direction:
Serial.println("counterclockwise");
myStepper.step(-stepsPerRevolution);
delay(500);
}I will note that in the first section of this lab with power connected and the circuit triple checked, when holding the stepper the pulse could be felt. This lead me to believe it was power issue however, that was not the case. The specs for this stepper showed it would function with as little as 5V, I used both a 9V battery and a a 12V wall wort with no change in observation.
I see the final project looming in the distance, ideas float in and out, maybe something to do with digital collage I will attempt… just one thought of many.
This week I dive into the wide world of sound in p5.js. Sound can be input into p5.js via recording, .mp3, .wav, etc.; or via a microphone. In this case I’m using the later and more specifically the microphone embedder in my webcam. P5 sound is a vast topic and has almost as many functions () as does the regular p5 library. At this point I’ve only really looked into using a few: p5.SoundFile, p5.Amplitude, p5.AdioIn, and p5.FFT. I’ve been just using these basics to start to understand how p5 processes sound, most notably many of these functions() return an array of data which can be accessed and used as data points.
Project 2 focuses on using graphical elements to represent or visualize the sound from either a recording or p5.AudioIn().
let fft;
let mic;
let spectrum;
let x_pos;
let y_pos;
let a_size = 40;
let rect_alpha = 255;
var snapshots = [];
var counter = 0;
var total = 49;
function setup() {
createCanvas(400, 400);
fft = new p5.FFT();
mic = new p5.AudioIn();
mic.start();
fft.setInput(mic);
}
function draw() {
background(220);
spectrum = fft.analyze();
// let col = map(s/4,0,spectrum.length,0,360);
fill(spectrum);
// fill(col);
for (y_pos = 0; y_pos <= height; y_pos += a_size * 1.5) {
for (x_pos = 0; x_pos <= width; x_pos += a_size * 1.5) {
rect(x_pos, y_pos, a_size, a_size);
}
}
// console.log(col);
// console.log(spectrum);
}
// }
The above code is what I have been able to produce thus far for this project. The Idea is to use fft.analyze() to get an array of amplitude values and use them to change the color of a matrix of squares. As of now I am able to pass in the same vale to each square, my goal is to make each square a different color based on the different indices in the fft.analyze() array. I believe my next step is to first map the values the array holds which range from 0-255 to 0-360 so it matches with the HSB color space. Then I need to find a way to assign each square a different value from the array.
The working p5 sketch can be found here:
https://editor.p5js.org/phil-in-a-can/sketches/xQhpObKQS
Questions, comments, or tips always welcome in the comments section of this post.
#define OSX 0 #define WINDOWS 1 #define UBUNTU 2 #include "Keyboard.h" #include "Adafruit_VL53L0X.h" //#include "Mouse.h" Adafruit_VL53L0X lox = Adafruit_VL53L0X(); unsigned long startMillis; //some global variables available anywhere in the program unsigned long currentMillis; const unsigned long period1 = 4000; //the value is a number of milliseconds const unsigned long period2 = 8000; const unsigned long period3 = 12000; const unsigned long period4 = 12100; //const unsigned long period5 = 12000; const byte ledPinG = 6; //Green const byte ledPinY = 8; //Yellow const byte ledPinR = 10; //Red //bool lights; int platform = WINDOWS; int distance = 0;
void setup() {
Serial.begin(9600); //start Serial in case we need to print debugging info
Keyboard.begin();
// lights = TRUE;
pinMode(ledPinG, OUTPUT);
pinMode(ledPinY, OUTPUT);
pinMode(ledPinR, OUTPUT);
if (!lox.begin()) {
// Serial.println(F("Failed to boot VL53L0X"));
while (1);
}
startMillis = millis(); //initial start time
}
void loop() {
currentMillis = millis();
while (currentMillis - startMillis < period4) {
currentMillis = millis(); //get the current "time" (actually the number of milliseconds since the program started)
if (currentMillis - startMillis >= period1 && currentMillis - startMillis < period2) //test whether the period has elapsed
{
digitalWrite(ledPinG, HIGH);
digitalWrite(ledPinR, LOW);
} if
(currentMillis - startMillis >= period2 && currentMillis - startMillis < period3)
{
digitalWrite(ledPinY, HIGH);
digitalWrite(ledPinG, LOW);
} if (currentMillis - startMillis >= period3 && currentMillis - startMillis < period4)
{ digitalWrite(ledPinR, HIGH);
digitalWrite(ledPinY, LOW);
currentMillis and startMillis variables in keeping time. We realized that at the end of the cycle, these variables would need to be reinitialized for the next cycle to occur. We also debugged and put in a while loop to get the entire cycle including the keyboard emulator and distance sensor sections to start over again as well.} if (currentMillis - startMillis >= period4) {
// lights = !lights;
switch (platform) {
case WINDOWS:
Keyboard.press(KEY_LEFT_CTRL);
Keyboard.press(KEY_LEFT_ALT);
Keyboard.press('s');
delay(10);
Keyboard.releaseAll();
}
}
}
if (currentMillis - startMillis >= period4) {
VL53L0X_RangingMeasurementData_t measure;
distance = measure.RangeMilliMeter;
lox.rangingTest(&measure, false); // pass in 'true' to get debug data printout!
if (measure.RangeStatus != 4) { // phase failures have incorrect data
Serial.print("Distance (mm): "); Serial.println(measure.RangeMilliMeter);
// // digitalWrite(ledPinR, HIGH);
if (distance > 850) {
delay(1);
Keyboard.press(KEY_UP_ARROW);
Keyboard.releaseAll();
delay(2000);
startMillis = currentMillis;
}
}
}
Serial.print(startMillis);
Serial.println(currentMillis);
// if (currentMillis - startMillis >
}
#define OSX 0
#define WINDOWS 1
#define UBUNTU 2
#include "Keyboard.h"
#include "Adafruit_VL53L0X.h"
//#include "Mouse.h"
Adafruit_VL53L0X lox = Adafruit_VL53L0X();
unsigned long startMillis; //some global variables available anywhere in the program
unsigned long currentMillis;
const unsigned long period1 = 4000; //the value is a number of milliseconds
const unsigned long period2 = 8000;
const unsigned long period3 = 12000;
const unsigned long period4 = 12100;
//const unsigned long period5 = 12000;
const byte ledPinG = 6; //Green
const byte ledPinY = 8; //Yellow
const byte ledPinR = 10; //Red
//bool lights;
int platform = WINDOWS;
int distance = 0;
void setup() {
Serial.begin(9600); //start Serial in case we need to print debugging info
Keyboard.begin();
// lights = TRUE;
pinMode(ledPinG, OUTPUT);
pinMode(ledPinY, OUTPUT);
pinMode(ledPinR, OUTPUT);
if (!lox.begin()) {
// Serial.println(F("Failed to boot VL53L0X"));
while (1);
}
startMillis = millis(); //initial start time
}
void loop() {
currentMillis = millis();
while (currentMillis - startMillis < period4) {
currentMillis = millis(); //get the current "time" (actually the number of milliseconds since the program started)
if (currentMillis - startMillis >= period1 && currentMillis - startMillis < period2) //test whether the period has elapsed
{
digitalWrite(ledPinG, HIGH);
digitalWrite(ledPinR, LOW);
} if
(currentMillis - startMillis >= period2 && currentMillis - startMillis < period3)
{
digitalWrite(ledPinY, HIGH);
digitalWrite(ledPinG, LOW);
} if (currentMillis - startMillis >= period3 && currentMillis - startMillis < period4)
{ digitalWrite(ledPinR, HIGH);
digitalWrite(ledPinY, LOW);
} if (currentMillis - startMillis >= period4) {
// lights = !lights;
switch (platform) {
case WINDOWS:
Keyboard.press(KEY_LEFT_CTRL);
Keyboard.press(KEY_LEFT_ALT);
Keyboard.press('s');
delay(10);
Keyboard.releaseAll();
}
}
}
if (currentMillis - startMillis >= period4) {
VL53L0X_RangingMeasurementData_t measure;
distance = measure.RangeMilliMeter;
lox.rangingTest(&measure, false); // pass in 'true' to get debug data printout!
if (measure.RangeStatus != 4) { // phase failures have incorrect data
Serial.print("Distance (mm): "); Serial.println(measure.RangeMilliMeter);
// // digitalWrite(ledPinR, HIGH);
if (distance > 850) {
delay(1);
Keyboard.press(KEY_UP_ARROW);
Keyboard.releaseAll();
delay(2000);
startMillis = currentMillis;
}
}
}
Serial.print(startMillis);
Serial.println(currentMillis);
// if (currentMillis - startMillis >
This is the continuation and conclusion of Project 1. Last we I talked about the nature of the pixel[] array and how to access and manipulate it. There were some major performance issues with the way I wrote the preliminary code, namely trying to use the slider.value directly in the context of a for loop to manipulate the pixels[]. Top fix this performance issue I created function create_ui. And using a variable I stored the slider.value to use in the pixels[]. After making this change there was no noticeable lag when adjusting the sliders.
function create_ui() {
createP();
// createSlider(min, max, [value], [step])
let = slider1 = createSlider(0, 255, slider_r);
slider1.input(function() {
slider_r = slider1.value();
});
createP();
// createSlider(min, max, [value], [step])
let = slider2 = createSlider(0, 255, slider_g);
slider2.input(function() {
slider_g = slider2.value();
});
createP();
// createSlider(min, max, [value], [step])
let = slider3 = createSlider(0, 255, slider_b);
slider3.input(function() {
slider_b = slider3.value();
});
createP();
// createSlider(min, max, [value], [step])
let = slider4 = createSlider(0, 255, 128);
slider4.input(function() {
slider_lum = slider4.value();
});
}The above code shows the function create_ui, there are four sliders controlling Red, Green, Blue, and Alpha of any image loaded into the sketch.
Below is the important part of the code in terms of performance and where the manipulation of the image takes place.
a_vid.pixels[index + 0] = slider_r; a_vid.pixels[index + 1] = slider_g; a_vid.pixels[index + 2] = slider_b; a_vid.pixels[index + 3] = random(0, slider_lum);
After the changes were made everything worked as expected using an image.
One very important note is this line of code.
bg = loadImage('images/PPC_3141-2.JPG');Followed by this line.
background(bg);
These two lines of code load the image as the background() color, this allows all four element (Red, Green, Blue, and Alpha) of the original image to be adjusted.
When I ported the code over to use the webcam instead it work…kind of. I’m note sure as to why the right portion of the image was unaffected by the manipulations in the code. This is the next thing I would like to tackle. The code is basically the same except for the needed lines to createCapture(VIDEO). Left is an image showing the results of the code.
Image based sketch
https://editor.p5js.org/phil-in-a-can/sketches/WWDafDYLU
WebCam based sketch
https://editor.p5js.org/phil-in-a-can/sketches/WdNJzVlnD