Difference between revisions of "User:Dionne/Process Tools of the Trade"

From DigitalCraft_Wiki
Jump to navigation Jump to search
 
(83 intermediate revisions by the same user not shown)
Line 1: Line 1:
[http://opensource.wdka.nl/wiki/User:Dionne '''Back to wiki page''']
 
 
 
 
== '''THEME TACTILITY''' ==
 
== '''THEME TACTILITY''' ==
  
Line 21: Line 18:
 
  • An escape from your digitized everyday life*<br>
 
  • An escape from your digitized everyday life*<br>
 
  • To reconnect with people in your surroundings<br>
 
  • To reconnect with people in your surroundings<br>
• To redefine your own identity<br>
 
 
  • Ability to change & adapt to our fast fashion industry<br>
 
  • Ability to change & adapt to our fast fashion industry<br>
 
  • Gives a new textile experience<br>
 
  • Gives a new textile experience<br>
Line 28: Line 24:
 
It is an escape from your digitized everyday life and daily rituals. <br>
 
It is an escape from your digitized everyday life and daily rituals. <br>
 
This surface is a respond to our contemporary society’s digitization. <br>
 
This surface is a respond to our contemporary society’s digitization. <br>
It will help you to reconnect with people in your surroundings, because you can experience it with as many people as you like. <br>
+
It will help you to reconnect with people in your surroundings, because you can experience it with more then one persons. <br>
It will redefine your own identity and show others where you stand for. <br>
 
 
This surface has the ability to change & adapt to our fast fashion industry without having to throw it away immedieatly, this can be used for a longer period of time. <br>
 
This surface has the ability to change & adapt to our fast fashion industry without having to throw it away immedieatly, this can be used for a longer period of time. <br>
 
All together this will give you a new textile experience. <br>
 
All together this will give you a new textile experience. <br>
Line 88: Line 83:
 
  wires embedded within. Kong picked the best shapes in terms of ergonomics and in terms of electrical sensitivity. <br>
 
  wires embedded within. Kong picked the best shapes in terms of ergonomics and in terms of electrical sensitivity. <br>
  
== '''RESEARCH''' ==
+
== '''RESEARCH DOCUMENT''' ==
 
[[User:Dionne Research Tools of the Trade]]
 
[[User:Dionne Research Tools of the Trade]]
  
Line 123: Line 118:
 
  [[File:Tools of the Trade concept17.jpg | 900px]]
 
  [[File:Tools of the Trade concept17.jpg | 900px]]
 
  Instructions of what the outcome would be while using these objects. With a base of five black strokes.
 
  Instructions of what the outcome would be while using these objects. With a base of five black strokes.
 +
 +
[image]
 +
I tried to laser cut the foam, to get more smooth lines. Because there weren't any default settings for this material
 +
and this thickness I had to try it out with different settings a few times.
 +
 +
== '''SINTERKLAAS SURPRISE''' ==
 +
 +
Denise had to unbox my sinterklaas surprise and record it on the webcam.
 +
I gave her a box with all the above objects in it without any explanation.
 +
At first she didn't know what to do with these little objects. She started to feel them in different ways and tried
 +
to come up with the purpose of it. Also she gave good feedback. The triangle, cirkel and square shapes she found
 +
less interesting and simple and would not inspire her or encourage her. Although the more difficult shapes she found
 +
inspiring and triggering and she was interested in the purpose of these. Which was also my intention, because I want to
 +
see how far I can go with this material. She also said go crazy with them and leave the simple objects out. Then she said
 +
maybe these are something to paint or brush with, or weave with. So she came close..  And then with  one object
 +
she said, maybe this is a computer mouse.. So now she was coming very close to its purpose. She played a lot with
 +
the shapes and discovered new forms by pulling, pushing, bending etc. of the objects. She also started to build
 +
them on top of each other to see wether it was a construction of loose pieces.  She gave me lots to think about, the
 +
products do not speak for themselves yet, and the shapes aren't interesting  and exciting enough. The material though
 +
is nice, because she got triggered to touch them and play with them, and that is exactly what I wanted her to do. So I
 +
know I have to work on the design now, but of course the technical side as well.<br>
 +
[[File:Denise-sinterklaas surprise digital craft.png | 400 px]]
 +
 +
'''Plan of action'''
 +
So what's next?<br>
 +
Step 1: Concept (A tool that makes print through a tangible but digital way)
 +
Step 2: Sketches (Different shapes and sizes)
 +
Step 3: Experiments (Clay, Foam, Laser Cut, Glue)
 +
Step 4: Processing (Try outs with mouse)
 +
Step 5: Sensors / Aurdino (Make the technical parts)
 +
Step 6: Building the foam device (Build the technical parts in the foam)
 +
Step 7: Building the connection to the laptop (USB)
 +
 +
== '''PROCESSING''' ==
 +
 +
=== '''BASICS''' ===
 +
() = parameters
 +
syntax = de formule van de code
 +
size canvas = '''size(x,y);'''
 +
smooth =  '''smooth();''' ??
 +
add color = RGB (red, green, blue)
 +
greyscale = 0 tot 255 (0) = black, (255) = white
 +
background = '''background(R,G,B);'''
 +
stroke = outline '''stroke(R,G,B);'''
 +
fill = interior '''fill(R,G,B);'''
 +
// ..... = text line in the code
 +
rect = '''rect(x,y,width,height);'''
 +
ellipse = '''ellipse(x,y,width,height);'''
 +
order = the 2nd code line is on top of the first code line and so on
 +
arc = section of an ellipse '''arc(x, y, width, height, start, stop);'''
 +
spline curve = '''curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);'''
 +
control point = cp
 +
continuous spline curve = '''beginShape(); curveVertex(); endShape();'''
 +
bezier curve =  '''bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2);'''
 +
continuous bezier curve = '''bezierVertex(cpx1, cpy1, cpx2, cpy2, x, y);'''
 +
 +
* '''Use arc()''' when you need a segment of a circle or an ellipse. You can’t make continuous arcs or use them as part of a shape.
 +
* '''Use curve()''' when you need a small curve between two points. Use curveVertex() to make a continuous series of curves as part of a shape.
 +
* '''Use bezier()''' when you need long, smooth curves. Use bezierVertex() to make a continuous series of Bézier curves as part of a shape.
 +
 +
 +
At [https://processing.org processing.org] I learned the basics of processing by a nice tutorial from Daniel Shiffman step by step:
 +
 +
'''1: SHAPE'''
 +
Draw a picture made of ellipses and rectangles!
 +
'''Reminders:'''
 +
To draw a rectangle: rect(a,b,c,d);
 +
To draw an ellipse: ellipse(a,b,c,d);
 +
a — X (horizontal) location of the shape's upper-left corner
 +
b — Y (vertical) location of the shape's upper-left corner
 +
c — width of the shape
 +
d — height of the shape
 +
 +
[[File:Processing tutorial 3.png | 600px]]
 +
 +
'''2: COLOR'''
 +
Add color to your design!
 +
'''Reminders:'''
 +
Set the background color: background(r,g,b);
 +
Set the outline color: stroke(r,g,b);
 +
Set the interior color: fill(r,g,b);
 +
 +
Don't forget, you need to call stroke() and fill() before you draw the shape!
 +
R — amount of red, from 0 (none) to 255 (maximum)
 +
G — amount of green, from 0 (none) to 255 (maximum)
 +
B — amount of blue, from 0 (none) to 255 (maximum)
 +
 +
[[File:Processing tutorial 4.png | 600px]]
 +
 +
'''3: INTERACT'''
 +
Animate your program using mouseX and mouseY!
 +
'''Syntax for setup() and draw(), here is a reminder:'''
 +
void setup() {
 +
  size(500,400);
 +
} <br>
 +
  void draw() {
 +
  background(0,0,0);
 +
  fill(255,255,255);
 +
  ellipse(mouseX,mouseY,60,60);
 +
} <br>
 +
We recommend a maximum canvas size of 500 by 400 pixels for this tutorial.
 +
 +
[[File:Processing tutorial 6.png | 600px]]
 +
 +
'''4: QUESTIONS'''
 +
Use a mouse press to change what your program is doing!
 +
Here is an example of drawing a different color depending on whether the mouse is pressed.
 +
void setup() {
 +
  size(500,400);
 +
} <br>
 +
void draw() {
 +
  background(0);
 +
  if (mousePressed) {
 +
    fill(0,255,0);
 +
  } else {
 +
    fill(255,0,0);
 +
  }
 +
  ellipse(mouseX,mouseY,60,60);
 +
  }<br>
 +
You could also consider drawing the background only when the mouse is pressed. For example:
 +
void setup() {
 +
  size(500,400);
 +
  background(0);
 +
} <br>
 +
void draw() {
 +
  if (mousePressed) {
 +
    background(0);
 +
}
 +
  ellipse(mouseX,mouseY,60,60);
 +
} <br>
 +
When I clicked on the canvas the blue shapes appeared, when I didn't clicked the red shapes appeared.
 +
[[File:Processing tutorial 8.png | 600px]]
 +
[[File:Processing tutorial 9.png | 600px]]
 +
 +
'''SAVE PRINT'''
 +
I also want to know how to export the print to an image, because then it can be used as a digital print. It goes like this:
 +
[[File:Save in processing.png | 700px]]
 +
Simon helped me with this, and put it in the code, so when the mouse is pressed it saves the file as a PNG. Example:
 +
[[File:Processing.png | 500px]]
 +
Outcome Example:
 +
[[File:Save testje png.png |500px]]
 +
 +
==='''SHAPES'''===
 +
 +
I managed to make the first simple basic shapes, although for me they weren't that easy to figure out.
 +
With the drawings I made before in my mind I start to experiment with the shape of multiple lines on a canvas.
 +
I did the Pull, Bend, Curve and Tilt functions. Wherever your mouse goes it starts to Pull, Bend Curve or Tilt.
 +
 +
[[File:Processing pull.png | 500px]] [[File:Processing curve.png | 500px]]
 +
 +
[[File:Processing-Bend.png | 500px]] [[File:Processing-Tilt.png |500px]]
 +
 +
I've made a GIF to show how the shapes move.
 +
[[File:UgFNNg.gif |300px]] [[File:S2TPOU.gif |400px]]
 +
[[File:UnbizT.gif |300px]] [[File:9IGDU-.gif | 300px]]
 +
 +
==='''CODE'''===
 +
 +
[[File:Processing serialBend 1.png | 900px]]<br>
 +
[[File:Processing serialBend 2.png |900px]]<br>
 +
This is the code I used which is connected to the arduino and the sensors flex, force and light.
 +
 +
== '''SENSORS''' ==
 +
 +
Because I am going to experiment with sensors I decided to buy the '''Essential Sensor Kit''' from [https://www.antratek.nl Antratek.nl]
 +
 +
[[File:Kit-sensor-1.png |800 px]]
 +
[[File:Kit-sensor-2.png |500px]]
 +
[[File:Kit-sensor-3.png |300px]
 +
 +
== '''ARDUINO''' ==
 +
 +
[[File:Arduino serialBend.png | 800px]]<br>
 +
This is the code I used to connect the sensors to the computer, I can connect the flex, force or light sensor on.

Latest revision as of 20:39, 24 January 2016

THEME TACTILITY

• Sensory ability
• E-textiles
• stimulates the sense to touch
• makes the fabric come to life
• interact with the user*
• Playful three dimensional effect
• Tactile experience
* You can only fully experience the fabric by touching it

The theme that I am going to work with for the tools & trade project is: tactility.
In combination with the craft textile surface design.
The surfaces that I want to make have a sensory ability and are e-textiles.
They stimulate the sense to touch and it makes the fabric come to life.
It wil interact with the user, because you can only fully experience the fabric by touching it.
It will have a playful three dimensional effect which will give a tactile experience.

• An escape from your digitized everyday life*
• To reconnect with people in your surroundings
• Ability to change & adapt to our fast fashion industry
• Gives a new textile experience
*A respond to our contemporary society’s digitization

A few scenarios that exist while using these surfaces are the following:
It is an escape from your digitized everyday life and daily rituals.
This surface is a respond to our contemporary society’s digitization.
It will help you to reconnect with people in your surroundings, because you can experience it with more then one persons.
This surface has the ability to change & adapt to our fast fashion industry without having to throw it away immedieatly, this can be used for a longer period of time.
All together this will give you a new textile experience.

Craft: Designing prints and patterns for textiles through the digital software Adobe Illustrator. 
Problem: The physical experience between the user and the computer is very limited. There is not much interaction with the software other then clicks and swipes on a trackpad, mouse or pen.
Tool(Kit): A tangible visualization of enhanced Illustrator tools that are physically exiting and triggers the sense to touch. It creates a relation of the physical interface between humans and computers.
Goal: The tools exist out of ergonomic responsible shapes and materials, and are comfortable to work with. They respond on the software Illustrator and create new possibilities and results in the field of Textile Print Design.
Software: The Illustrator tools are redefined and enhanced. The tools are responsive through capacitive touch and motion sensors.
Research: To the existence of the trackpad/mouse/tablet/pen etc. To understand why and how they are made the way they are today.
Statement: Write a good statement why this is useful for me and others and why this should change.

INSPIRATION

TACTILITY-Tools-Of-The-Trade5.jpg

Graduated from the Design Academy Eindhoven with Print in Motion garments. 
They produce visual effects as the wearer moves.
This is called the moiré effect.
Although this is more about motion instead of touch, I like that her approach make the prints come to life.
TACTILITY-Tools-Of-The-Trade6.jpg
Is an augmented modeling tool that lets you design 3d printed wearables directly on your body. 
It uses depth sensing and projection mapping to detect and display touch gestures on the skin.
Every design is ready to be 3d printed and worn back on the body.
This project makes 3d printing accessible for the user and stimulates your touch senses.
TACTILITY-Tools-Of-The-Trade7.jpg
Designed 'Tactile Dialogues' which is a textile object in the form of a pillow with integrated vibration elements that react on touch. 
Their goal is to trigger physical communication patterns between a person with severe dementia and a family member.
What I like about this project is that it let the user reconnect with people they're surrounded with.
TACTILITY-Tools-Of-The-Trade8.jpg
As a result of the dominance of visual and digital information in design, the surface qualities of our 
immediate surroundings are often disregarded.
She says 'We live in a polished environment with little focus on haptic experiences'.
The diversity of tactile stimuli in nature is significantly larger than in our artificial surroundings.
With her project she questioned 'Why couldn't man made objects offer, similarly stimulating experiences?'.
She times to translate natures qualities into interior surfaces.
Tools of the Trade concept3.jpg
Marie Rouillon: Questions how can material experiences reconnect people with tactility in our digitised lives? The interactions that we
entertain with everyday devices are lacking sensibility, tactility and sensory experiences. As a textile designer, Rouillon is
particularly interested in what we call the sense(s) of touch. Daily Haptics has emerged as a response to this insight, through her
design, she is creating tactile experiences in order to reconnect people with tactility. Comprised of cups that look the same but feel
different, this series responds to contemporary society’s digitization and aims to re-engage people with tactile, material experiences.
Visual information alone is not enough, one needs to touch it to get full information. ‘I took the decision to communicate my
concept through everyday objects, without digital tools, in order to stress even more this urge to touch and experience the
everyday world we live in, through multi-sensory experiences.’
Tools of the Trade concept11.jpg
Royal College of Art graduate Ming Kong has created an elastic  conductive material that can be moulded into different shapes, and to 
create a haptic interface for manipulating digital models and files. Kong was frustrated with designing interfaces for electronics
products using only flat buttons, so decided to create three-dimensional tools for navigating digital environments. To do this, he
developed a conductive silicon-based material that can sense touch and directional movement across its surface, without sensors or
wires embedded within. Kong picked the best shapes in terms of ergonomics and in terms of electrical sensitivity.

RESEARCH DOCUMENT

User:Dionne Research Tools of the Trade

MATERIAL EXPERIMENTS

CLAY

Tools of the Trade concept.jpg 
For the first experiments I took clay as a material to see which kind of shapes and forms I can make with my hand.
With the Illustrator tools in mind I created a visualization. Although the outcome is very tangible, it is very stiff and 
has a hard surface. This will restrict the playful effect and fully experience the function of each tool.
So clay is not the best material to work with, it gets hard and then it will break. I need a material that is flexible and
elastic, which you can stretch out of proportion but when letting go of it, it'll return to it's original shape.
Maybe silicone will work better.
Tools of the Trade concept2.jpg

POLYURETHANE FOAM

IMG 3413.JPGIMG 3414.JPG
IMG 3415.JPGIMG 3416.JPG
Sketches I made for my second material experiment. With these I try to redefine hand gestures
we can make, and make these gestures useful in the objects, such as, pulling, pinching, pressing,
crumbling etc.

Tools of the Trade concept15.jpg
With this experiment I searched for a material that responds on touch. A material where you can press, pinch
and pull on. That's why I started experimenting with polyurethane foam. I bought two pieces from the market in
Rotterdam and started cutting, folding and gluing it together. As a reference to the sketches I made.
The end result are these crazy forms, that triggers you to touch and are also pleasant to touch. Only the parts
where it is glued it became a hard surface. I've made some instructions so you can see how to use them.
Now I want to find out if I can make my own foam out of malls. But first I will start sketching more specifically.
Tools of the Trade concept16.jpg
Instructions of how to use the little objects.
Tools of the Trade concept17.jpg
Instructions of what the outcome would be while using these objects. With a base of five black strokes.
[image]
I tried to laser cut the foam, to get more smooth lines. Because there weren't any default settings for this material 
and this thickness I had to try it out with different settings a few times.

SINTERKLAAS SURPRISE

Denise had to unbox my sinterklaas surprise and record it on the webcam.

I gave her a box with all the above objects in it without any explanation. 
At first she didn't know what to do with these little objects. She started to feel them in different ways and tried 
to come up with the purpose of it. Also she gave good feedback. The triangle, cirkel and square shapes she found 
less interesting and simple and would not inspire her or encourage her. Although the more difficult shapes she found 
inspiring and triggering and she was interested in the purpose of these. Which was also my intention, because I want to 
see how far I can go with this material. She also said go crazy with them and leave the simple objects out. Then she said 
maybe these are something to paint or brush with, or weave with. So she came close..  And then with   one object 
she said, maybe this is a computer mouse.. So now she was coming very close to its purpose. She played a lot with 
the shapes and discovered new forms by pulling, pushing, bending etc. of the objects. She also started to build 
them on top of each other to see wether it was a construction of loose pieces.  She gave me lots to think about, the 
products do not speak for themselves yet, and the shapes aren't interesting  and exciting enough. The material though 
is nice, because she got triggered to touch them and play with them, and that is exactly what I wanted her to do. So I 
know I have to work on the design now, but of course the technical side as well.
Denise-sinterklaas surprise digital craft.png
Plan of action
So what's next?
Step 1: Concept (A tool that makes print through a tangible but digital way) Step 2: Sketches (Different shapes and sizes) Step 3: Experiments (Clay, Foam, Laser Cut, Glue) Step 4: Processing (Try outs with mouse) Step 5: Sensors / Aurdino (Make the technical parts) Step 6: Building the foam device (Build the technical parts in the foam) Step 7: Building the connection to the laptop (USB)

PROCESSING

BASICS

() = parameters
syntax = de formule van de code
size canvas = size(x,y);
smooth =  smooth(); ??
add color = RGB (red, green, blue)
greyscale = 0 tot 255 (0) = black, (255) = white
background = background(R,G,B);
stroke = outline stroke(R,G,B);
fill = interior fill(R,G,B);
// ..... = text line in the code
rect = rect(x,y,width,height);
ellipse = ellipse(x,y,width,height);
order = the 2nd code line is on top of the first code line and so on
arc = section of an ellipse arc(x, y, width, height, start, stop);
spline curve = curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);
control point = cp
continuous spline curve = beginShape(); curveVertex(); endShape();
bezier curve =  bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2);
continuous bezier curve = bezierVertex(cpx1, cpy1, cpx2, cpy2, x, y);
  • Use arc() when you need a segment of a circle or an ellipse. You can’t make continuous arcs or use them as part of a shape.
  • Use curve() when you need a small curve between two points. Use curveVertex() to make a continuous series of curves as part of a shape.
  • Use bezier() when you need long, smooth curves. Use bezierVertex() to make a continuous series of Bézier curves as part of a shape.


At processing.org I learned the basics of processing by a nice tutorial from Daniel Shiffman step by step:

1: SHAPE
Draw a picture made of ellipses and rectangles!
Reminders:
To draw a rectangle: rect(a,b,c,d);
To draw an ellipse: ellipse(a,b,c,d);
a — X (horizontal) location of the shape's upper-left corner
b — Y (vertical) location of the shape's upper-left corner
c — width of the shape
d — height of the shape

Processing tutorial 3.png
2: COLOR
Add color to your design!
Reminders:
Set the background color: background(r,g,b);
Set the outline color: stroke(r,g,b);
Set the interior color: fill(r,g,b);

Don't forget, you need to call stroke() and fill() before you draw the shape!
R — amount of red, from 0 (none) to 255 (maximum)
G — amount of green, from 0 (none) to 255 (maximum)
B — amount of blue, from 0 (none) to 255 (maximum)

Processing tutorial 4.png
3: INTERACT
Animate your program using mouseX and mouseY!
Syntax for setup() and draw(), here is a reminder:
void setup() {
  size(500,400);
} 
void draw() { background(0,0,0); fill(255,255,255); ellipse(mouseX,mouseY,60,60); }
We recommend a maximum canvas size of 500 by 400 pixels for this tutorial. Processing tutorial 6.png
4: QUESTIONS
Use a mouse press to change what your program is doing!
Here is an example of drawing a different color depending on whether the mouse is pressed.
void setup() {
 size(500,400);
} 
void draw() { background(0); if (mousePressed) { fill(0,255,0); } else { fill(255,0,0); } ellipse(mouseX,mouseY,60,60); }
You could also consider drawing the background only when the mouse is pressed. For example: void setup() { size(500,400); background(0); }
void draw() { if (mousePressed) { background(0); } ellipse(mouseX,mouseY,60,60); }
When I clicked on the canvas the blue shapes appeared, when I didn't clicked the red shapes appeared. Processing tutorial 8.png Processing tutorial 9.png
SAVE PRINT
I also want to know how to export the print to an image, because then it can be used as a digital print. It goes like this:
Save in processing.png
Simon helped me with this, and put it in the code, so when the mouse is pressed it saves the file as a PNG. Example:
Processing.png
Outcome Example:
Save testje png.png

SHAPES

I managed to make the first simple basic shapes, although for me they weren't that easy to figure out. 
With the drawings I made before in my mind I start to experiment with the shape of multiple lines on a canvas.
I did the Pull, Bend, Curve and Tilt functions. Wherever your mouse goes it starts to Pull, Bend Curve or Tilt.

Processing pull.png Processing curve.png

Processing-Bend.png Processing-Tilt.png

I've made a GIF to show how the shapes move.
UgFNNg.gif S2TPOU.gif
UnbizT.gif 9IGDU-.gif

CODE

Processing serialBend 1.png
Processing serialBend 2.png
This is the code I used which is connected to the arduino and the sensors flex, force and light.

SENSORS

Because I am going to experiment with sensors I decided to buy the Essential Sensor Kit from Antratek.nl

Kit-sensor-1.png Kit-sensor-2.png [[File:Kit-sensor-3.png |300px]

ARDUINO

Arduino serialBend.png
This is the code I used to connect the sensors to the computer, I can connect the flex, force or light sensor on.