News & Recent Projects @cordy-seps - Tumblr Blog

Posts

I have been doing research to get a fuller understanding of UX and my place in that role, having graduated recently with a masters in industrial design. I came across this diagram by Dan Saffer that helped me get a better understanding of the different fields within UX and how they overlap. I hadn't seen it before so thought I'd share. Given my graphic design and illustration background paired with the projects I have tackled recently both in school and in my freelance work, I fit well within the Interaction Design segment with visual design, human factors and industrial design in my skillset. I am excited to dig deeper into the field of interaction design. Where do you fit? Is there anything you would want to add to this diagram? I noticed that service design is missing from this model.

For more on this diagram and interaction design click here.

#ux ui design #interaction design #industrial design #visual design #job search

This visualization was developed using Processing! The red bubbles indicate gas fluctuations in my house over time. The sensor detects Volatile Organic Compounds (VOCs) such as gases and alcohols - ex: Ethanol, Alcohol, Carbon Monoxide and Carbon Dioxide. In the visualization, smaller bubbles indicate better air quality (low VOCs), while larger bubbles show lowered air quality (high VOCs).

Code:

PImage houseMap; color[] rainbow = {#FFFFCD, #CC5C54, #F69162, #85A562, #7AB5DB}; color[] palette = rainbow; PFont labelFont;

Table gasData; int rowCount; int d = 10; float size = 10; int row = 1;

void setup() { size(650, 752); houseMap = loadImage("floorPlan-All.jpg"); gasData = new Table("gasCompare+time.tsv"); rowCount = gasData.getRowCount(); println("rowCount = " + rowCount); //labelFont = loadFont("GillSans-Bold-18.vlw"); frameRate(30); }

void draw() { image(houseMap, 0, 0); fill(#EA3213,99);

smooth(); noStroke();

//for (int row = 1; row < rowCount; row = row+10) {

// GAS - kitchen float gasKitchen = (gasData.getFloat(row, 1)); println("kitchen-gasvalue = " + gasKitchen); size = map(gasKitchen, 45, 750, 120, 20); //fill(palette[1], 160); ellipse(70, 450, size, size); //row = row + 300; //delay(250); //redraw();

// GAS - bathroom-lower float gasBathlow = (gasData.getFloat(row, 2)); println("bathlower-gasvalue = " + gasBathlow); size = map(gasBathlow, 45, 750, 120, 10); //fill(palette[1], 160); ellipse(375, 320, size, size); //row = row + 300; //delay(250); //redraw();

// GAS - bathroom-upper float gasBathupper = (gasData.getFloat(row, 3)); println("bathupper-gasvalue = " + gasBathupper); size = map(gasBathupper, 45, 750, 120, 10); //fill(palette[1], 160); ellipse(300, 115, size, size); //row = row + 300; //delay(250); //redraw();

// GAS - basement float gasBasement = (gasData.getFloat(row, 4)); println("basement-gasvalue = " + gasBasement); size = map(gasBasement, 45, 750, 120, 10); //fill(palette[1], 160); ellipse(400, 575, size, size); //row = row + 300; //delay(250); //redraw();

// GAS - dining float gasDining = (gasData.getFloat(row, 5)); println("diningroom-gasvalue = " + gasDining); size = map(gasDining, 45, 750, 120, 10); //fill(palette[1], 160); ellipse(200, 350, size, size); //row = row + 300; //delay(250); //redraw();

// GAS - office float gasOffice = (gasData.getFloat(row, 6)); println("office-gasvalue = " + gasOffice); size = map(gasOffice, 45, 750, 120, 10); //fill(palette[1], 160); ellipse(400, 105, size, size); //row = row + 300; //delay(250); //redraw();

// GAS - LBedroom float gasLBedroom = (gasData.getFloat(row, 7)); println("LBedroom-gasvalue = " + gasLBedroom); size = map(gasLBedroom, 45, 750, 120, 10); //fill(palette[1], 160); ellipse(600, 115, size, size); row = row + 300; delay(250); //redraw(); if(row >= rowCount) { row = 0; } }

// void mousePressed() { // }

Here are a few readings and interpretations from the environmental air quality testing I conducted in my house. Stay tuned for the animated data visual!

Since my last post, I have been working out the kinks for an environmental monitoring device using a BME680 sensor that measures temperature, humidity, barometric pressure and VOC gases.

The interest spurred from the growing trend in air quality monitoring devices and the rise of citizen science as a way to take health into our own hands. Originally I was hoping to take measurements in homes nearest to toxic sites, such as refineries. After reading an article posted by Villanova, it was brought to my attention that weather and traffic patterns have varying impacts block by block in a city, making it very hard to get accurate results from just a select number of recordings. That’s when I decided it may be a more worthwhile experiment to collect data in various places in the household to determine if different rooms held different concentrations of VOC’s throughout the day. Perhaps there could be indicators showing a need for automatic filtration devices connected to a data sensor, such as near a radiator or in a basement prone to collection of gases.

The sensor has been fun and fairly straightforward to work with so far. The hangup for me has been getting it to work with the data logging shield, which translates all collected data to an SD reader to use in visualization tools later. Beware! Make sure you use a CR1220 battery any time your power your data shield or you may end up freezing your arduino. Order it ahead of time! I could not find them anywhere.

Additionally, It takes a full 48 hours to “burn in” the metal oxide (MOX) sensor in the BME680, and an additional 30 mins each time you turn it on for it to warm up. Once an equilibrium is reached, any rise in the gas reading correlates with increased air quality, while decreases suggest a lowering of air quality.

To test, I held a sharpie marker up to the reader. It’s incredibly sensitive and fluctuated considerably as I moved it back and forth near the sensor. (see below) The gas readings for the room had stabilized at ~220 kOhms and moved to as low as 29 kOhms with the sharpie near the sensor, slowly returning back up to 220 kOhms after the sharpie was removed.

14:53:24.747 -> Temperature = 75.09 *F

14:53:24.781 -> Pressure = 1001.00 hPa

14:53:24.848 -> Humidity = 33.61 %

14:53:24.848 -> Gas = 213.75 KOhms

14:53:24.848 -> Approx. Altitude = 102.32 m

14:53:25.171 ->

14:53:27.534 -> Temperature = 75.11 *F

14:53:27.569 -> Pressure = 1001.00 hPa

14:53:27.613 -> Humidity = 33.55 %

14:53:27.613 -> Gas = 223.73 KOhms

14:53:27.644 -> Approx. Altitude = 102.32 m

14:53:27.963 ->

14:53:30.338 -> Temperature = 75.11 *F

14:53:30.376 -> Pressure = 1001.00 hPa

14:53:30.376 -> Humidity = 33.49 %

14:53:30.416 -> Gas = 94.24 KOhms

14:53:30.416 -> Approx. Altitude = 102.32 m

14:53:30.773 ->

14:53:33.112 -> Temperature = 75.11 *F

14:53:33.149 -> Pressure = 1001.00 hPa

14:53:33.207 -> Humidity = 33.50 %

14:53:33.207 -> Gas = 71.77 KOhms

14:53:33.207 -> Approx. Altitude = 102.32 m

14:53:33.537 ->

14:53:35.911 -> Temperature = 75.11 *F

14:53:35.945 -> Pressure = 1001.00 hPa

14:53:36.013 -> Humidity = 33.49 %

14:53:36.013 -> Gas = 78.47 KOhms

14:53:36.013 -> Approx. Altitude = 102.32 m

14:53:36.328 ->

14:53:38.704 -> Temperature = 75.11 *F

14:53:38.741 -> Pressure = 1001.00 hPa

14:53:38.741 -> Humidity = 33.51 %

14:53:38.782 -> Gas = 56.00 KOhms

14:53:38.782 -> Approx. Altitude = 102.32 m

14:53:39.132 ->

14:53:41.484 -> Temperature = 75.11 *F

14:53:41.519 -> Pressure = 1001.00 hPa

14:53:41.519 -> Humidity = 33.63 %

14:53:41.584 -> Gas = 29.00 KOhms

14:53:41.584 -> Approx. Altitude = 102.24 m

14:53:41.914 ->

14:53:44.282 -> Temperature = 75.09 *F

14:53:44.317 -> Pressure = 1001.02 hPa

14:53:44.317 -> Humidity = 33.78 %

14:53:44.355 -> Gas = 34.89 KOhms

14:53:44.355 -> Approx. Altitude = 102.24 m

14:53:44.711 ->

14:53:47.068 -> Temperature = 75.11 *F

14:53:47.103 -> Pressure = 1001.02 hPa

14:53:47.103 -> Humidity = 33.87 %

14:53:47.142 -> Gas = 49.85 KOhms

14:53:47.142 -> Approx. Altitude = 102.24 m

14:53:47.493 ->

14:53:49.843 -> Temperature = 75.11 *F

14:53:49.878 -> Pressure = 1001.02 hPa

14:53:49.935 -> Humidity = 33.96 %

14:53:49.935 -> Gas = 31.33 KOhms

14:53:49.935 -> Approx. Altitude = 102.24 m

14:53:50.296 ->

14:53:52.652 -> Temperature = 75.09 *F

14:53:52.652 -> Pressure = 1001.02 hPa

14:53:52.734 -> Humidity = 34.07 %

14:53:52.734 -> Gas = 46.85 KOhms

14:53:52.734 -> Approx. Altitude = 102.24 m

14:53:53.074 ->

14:53:55.416 -> Temperature = 75.11 *F

14:53:55.453 -> Pressure = 1001.02 hPa

14:53:55.492 -> Humidity = 34.06 %

14:53:55.492 -> Gas = 71.96 KOhms

14:53:55.526 -> Approx. Altitude = 102.24 m

14:53:55.845 ->

14:53:58.209 -> Temperature = 75.11 *F

14:53:58.243 -> Pressure = 1001.02 hPa

14:53:58.281 -> Humidity = 33.99 %

14:53:58.281 -> Gas = 92.96 KOhms

14:53:58.314 -> Approx. Altitude = 102.24 m

14:53:58.661 ->

14:54:01.009 -> Temperature = 75.11 *F

14:54:01.047 -> Pressure = 1001.00 hPa

14:54:01.047 -> Humidity = 33.87 %

14:54:01.082 -> Gas = 108.33 KOhms

14:54:01.117 -> Approx. Altitude = 102.24 m

14:54:01.430 ->

14:54:03.812 -> Temperature = 75.13 *F

14:54:03.812 -> Pressure = 1001.02 hPa

14:54:03.870 -> Humidity = 33.75 %

14:54:03.870 -> Gas = 119.75 KOhms

14:54:03.894 -> Approx. Altitude = 102.32 m

14:54:04.235 ->

14:54:06.585 -> Temperature = 75.11 *F

14:54:06.623 -> Pressure = 1000.98 hPa

14:54:06.623 -> Humidity = 33.64 %

14:54:06.676 -> Gas = 127.46 KOhms

14:54:06.676 -> Approx. Altitude = 102.49 m

I finally got the Max and Min readings to work! I added a timestamp notification in there as well. I felt that will come in handy in my later project.

Here is the code for the updated max and min information:

// max/min reading max = -1; min = 1023; for (i = 0; i < NUMSAMPLES; i++) { if (samples[i] > max) max = samples[i]; if (samples[i] < min) min = samples[i]; }

Serial.print("Maximum analog reading "); Serial.println(max);

Serial.print("Minimum analog reading "); Serial.println(min);

OK! Making progress. This is an arduino sketch using a thermistor to measure temperature. The assignment was to get the average from 10 temperature readings over the course of 1 minute. If the temperature increased above 26 degrees C, an LED would need to turn on. In this video, I reduced the delay time so that you could see the readings and the light change faster than 1 minute. As soon as the temperature cools to below 26 degrees C, the light turns back off.

I am still working to have the formula print the max temp and min temp in each segment reading. I tried to use part of the formula supplied to get the average, but I know it is incorrect. You can see what I have commented out //calculate maximum temperature. I will repost that code once I figure it out!

Code:

#define THERMISTORPIN A0 #define THERMISTORNOMINAL 10000 #define TEMPERATURENOMINAL 25 #define NUMSAMPLES 10 #define BCOEFFICIENT 3950 #define SERIESRESISTOR 10000

int samples[NUMSAMPLES];

void setup(void) { Serial.begin(9600); analogReference(EXTERNAL);

pinMode(8, OUTPUT); }

void loop(void) { uint8_t i; float average;

// take N samples in a row, with a slight delay for (i=0; i< NUMSAMPLES; i++) { samples[i] = analogRead(THERMISTORPIN); delay(6000);

// 6000 = 1 min, video is set for 400 ms

}

// average all the samples out average = 0; for (i=0; i< NUMSAMPLES; i++) { average += samples[i]; } average /= NUMSAMPLES;

Serial.print("Average analog reading "); Serial.println(average);

// // calculate maximum temperature // max = 0; // for (i=0; i< NUMSAMPLES; i++) { // max = samples[i]; // } // // Serial.print("Maximum temperature reading "); // Serial.println(max);

// convert the value to resistance average = 1023 / average - 1; average = SERIESRESISTOR / average; Serial.print("Thermistor resistance "); Serial.println(average);

if (average < 9700) { digitalWrite(8,HIGH); } else{ digitalWrite(8,LOW); }

float steinhart; steinhart = average / THERMISTORNOMINAL; // (R/Ro) steinhart = log(steinhart); // ln(R/Ro) steinhart /= BCOEFFICIENT; // 1/B * ln(R/Ro) steinhart += 1.0 / (TEMPERATURENOMINAL + 273.15); // + (1/To) steinhart = 1.0 / steinhart; // Invert steinhart -= 273.15; // convert to C

Serial.print("Temperature "); Serial.print(steinhart); Serial.println(" *C");

delay(1000); }

This is a video of the LED’s from the lighting project in action

Since I am now working on arduino projects again, I wanted to share the work I did last semester that I did for a lighting class. For this project, I strove to achieve a biophilic effect using lighting. Here, LED’s are connected to fiber optic cables and run to resin pods with dichroic film on the front of an old cherry stump that I charred with a torch!

I had to get a friend to help me a little with the code, since I didn’t understand the basics yet. Now that I’ve been working with Java for Processing, it makes so much more sense! I will be posting a video of the lights in action in the next segment.

I was proud of my soldering work for this one. Its hard to tell with the fiber optics running over the arduino board, but the connections I have are pretty tight!

I am also including an image of the CAD model for the arduino housing. Although the final deliverable for this project was sadly not my most elegant (I ran into so many snags), I certainly learned a lot in this process!

Just started working with arduino again! This is something new: working with a photoresistor to make a theramin. Pretty cool!

Remember that duck picture from the last post? I was able to add some new processing to it where you can paint the pixels in an abstract way.

Check it out:

PImage duck = null;

void setup() { size(578, 396); duck = loadImage ("The-Rubber-Duck.jpg"); }

void draw() { //for (int i = 0; i < 00; i++) { float x = random(width); float y = random(height);

color c = duck.get(int(mouseX), int(mouseY)); fill(c); ellipse(mouseX,mouseY, 40,40); noStroke();

c = duck.get(int(mouseX+10), int(mouseY+10)); fill(c); ellipse(mouseX,mouseY, 20,20); }

I am working through pixel processing in Java right now. I am having difficulty figuring out how to make something original from what is posted in the learning videos I am using. I was trying to get a flashlight effect change the color mode to the regular rgb when the mouse rolls over the duck. This is what I have for now! I will post progress!

Here is the code (along with commented out areas that I was working on!):

PImage duck = null;

void setup() { size(578, 396); duck = loadImage ("The-Rubber-Duck.jpg"); }

void draw() { //image(duck, 0, 0); loadPixels(); duck.loadPixels(); for (int x = 0; x < width; x++) { for ( int y = 0; y < height; y++) { //float d = dist( x, y, width/2, height/2); // makes black gradient int loc = x+y*width; //pixels [loc] = color(d); // used with gradient //pixels [loc] = duck.pixels[loc];

//float b = brightness(duck.pixels[loc]); float r = red(duck.pixels[loc]); float g = green(duck.pixels[loc]); float b = blue(duck.pixels[loc]); pixels[loc] = color(b,r,g); //float d = dist(mouseX, mouseY, x, y); if ((mouseX > 110) && (mouseX < 265) && (mouseY > 150) && (mouseY < 300)){ pixels[loc] = color(r,g,b); }

//float factor = map(d, 0, 100, 2, 0); //pixels[loc] = color(r*factor, g*factor, b*factor);

//flashlight //float r = red(duck.pixels[loc]); //float g = green(duck.pixels[loc]); //float b = blue(duck.pixels[loc]); //float d = dist(mouseX, mouseY, x, y); //float factor = map(d, 0, 200, 2, 0); //pixels[loc] = color(r*factor, g*factor, b*factor); } } updatePixels(); }

Here is a quick video of my processing code for a project I’m working on learning Java and processing!

Here is the code (you can see at the bottom where I had to comment out a segment that was causing the music to loop repeatedly over itself):

import processing.sound.*; SoundFile file;

boolean playing = false; PImage img;

void setup() { size(360, 640); background(17, 49, 76); frameRate(30);

file = new SoundFile(this, "Swan-lake-music-box.wav"); file.play();

img = loadImage("man-in-window.png"); }

void draw () {

//house fill(193, 195, 196); rect(85, 70, 200, 500);

line(85, 240, 285, 240);

//arm stroke(255); strokeWeight(2); line(285, 260, 300, 260); line(300, 260, 300, 270); line(300, 270, 315, 270); rect(310, 265, 20, 10); noStroke();

//roof stroke(0); strokeWeight(1); fill(255); rect(75, 55, 220, 40);

fill(104, 25, 44); rect(75, 70, 220, 10);

//top windows fill(255, 90); rect(110, 110, 60, 110);

fill(255, 90); rect(195, 110, 60, 110);

//middle windows fill(255); rect(110, 265, 60, 110);

fill(255); rect(195, 265, 60, 110);

//bottom skinny windows fill(255); rect(110, 420, 35, 80);

fill(255); rect(155, 420, 35, 80);

//door fill(110, 111, 113); rect(210, 400, 70, 140);

fill(104, 25, 44); rect(220, 430, 51, 110);

//doorwindow fill(255); rect(220, 410, 51, 15);

//steps fill(255); rect(200, 525, 90, 25);

fill(255); rect(195, 550, 100, 25);

if ((mouseX > 110) && (mouseX < 265) && (mouseY > 260) && (mouseY < 500)) { fill(163, 110, 217); rect(110, 420, 35, 80); rect(155, 420, 35, 80); rect(110, 265, 60, 110); rect(195, 265, 60, 110); } //song(); //(310, 265, 20, 10) if ((mouseX > 310) && (mouseX < 330) && (mouseY > 265) && (mouseY < 275) && (playing == false)) { file.play(); playing = true; // song(); // alternate to file.play } else if (!((mouseX > 310) && (mouseX < 330) && (mouseY > 265) && (mouseY < 275))){ file.pause(); playing = false; }

if ((mouseX > 110) && (mouseX < 170) && (mouseY > 110) && (mouseY < 220)) { image(img,0,0); } }

// void song() { // noLoop(); // if ((mouseX > 110) && (mouseX < 170) && (mouseY > 260) && (mouseY < 500)) { // file.play(); // } else if (!((mouseX > 110) && (mouseX < 170) && (mouseY > 260) && (mouseY < 500))){ // file.pause(); // } // }

#processing java code art

Branding and Identity for Velvet Earth Herbs

I just finished some awesome logo and labelling work for Alyssa Schimmel of Velvet Earth Herbs! I had so much fun with this project!

Alyssa is a talented herbalist who is starting her own line of tea blends, tinctures, salves and tonics. Be sure to look out for her and her classes at HydroPose Studio and the Random Tea Room in Philadelphia.

Art Nouveau and old apothecary labels played a large part in the inspiration of this design. I illustrated Alyssa’s favorite herbs for the main logo - Dandelion, Yarrow, Mugwort, Elder and Corn Poppies - working the foliage into a circular shape that starts small and builds up to form a powerful wave. The stages of the moon, significant to Alyssa’s herbal methods and teachings, radiate outward from the the logo along the band that will be used to hold the tea tins shut. I can’t wait to see this on the final product!

#VelvetEarthHerbs #natural herbs #tea #logo design #moon stages #herbology

BYO Print Blanket Fort Show

This past month, I collaborated with members from my print studio at BYO Print to put together an installation at The Art Dept. in Philadelphia. We wanted to make a work of art that would invite our visitors to explore, let go for a while and have fun. What better way to do so than build a "grown up" version of a blanket fort!

We created the skeleton/supporting frame of our fort entirely out of used printmaking materials such as rollers, tools, drying racks, and found furniture items. Each member contributed old, unused, or misprinted work, which was then collaged and silkscreened onto the frame and pieces of fabric for the roof.

Our fort included a comfortable reading area with artist zines and comics, fluffy pillows covered in prints, and a secret spy area equipped with crayons and a coloring book made by the members of BYO Print. The cozy ambience inside was topped off with the melodic bio-rhythms of a large fern, made audible by Sam Cusumano at ElectricityforProgress.com - check it out!

In the gallery space outside the fort was a showing of recent prints from the BYO collective. It was a lot of work, but was a very rewarding collaborative experience with a great turnout!

Trending Blogs

Recently Viewed Blogs

News & Recent Projects