SlideShare a Scribd company logo
1 of 69
Download to read offline
Sketching in Code / Processing
  Marcin Ignac @ JUG, May 2010, Poznań

How I use Processing to do prototyping in almost every project.

(screenshot from Wiild Life interactive animation http://marcinignac.com/projects/
2008/10/12/wiild-life)
Me, 27, programmer, designer, artist
I live and work in Copenhagen, DK
PROCESSING
                         open source, cross-platform,
                         multimedia programming language



 What is it?

Processing was founded by Ben Fry and Casey Reas in 2001 while both were John Maeda's
students at the MIT Media Lab. http://processing.org
Environment

Code editor. Set of basic libraries. Script compiler. Application and applet exporter.
Programming Language
  Beginner

Basic scripting. Static images.
Programming Language
  Intermediate

Functions. Draw loop is executed every frame. Easy acces to keyboard and mouse for
interaction.
Programming Language
  Advanced

Modularity. Classes. External libraries.
Programming Language
  Expert

Eclipse. Beside better code editor it’s easier to manage your code and writing your own
libraries.
Open Source
  Community

http://processing.org - forum, examples
http://openProcessing.org - gallery of projects with source code
Open Source
  Libraries

3rd party libraries can provide us with better video handling, more advanced 3d, procedural
geometry or physics.
Cross-platform
Java: Linux, Mac, Mobile, PC
Cross-platform
  Android

(Photo by creativeapplications.net)

More: http://android.processing.org/
Cross-platform
  JavaScript

All basic Processing functionality was recently ported to Javascript. Audio, video and 3d soon
will be also possible with technologies like HTML5 and WebGL.

More: http://processingjs.org/
Example Projects

Why I called it multimedia or interactive media programming language.
‘Art’

After I finished Computer Science at Poznan University of Technology I studied at the
Academy of Fine Arts in Poznan where I was exposed to both traditional art...
Media

... and some more contemporary stuff like video and interactive installations.
“That what is the first”

One of my favourite art pieces I made. There is an image of a woman projected on the wall.
When visitor comes closer to the picture, the woman becomes younger and younger.

It was was the first time I used Processing (for motion tracking).
Motion Tracking

Recorded image is processed and moving objects are detected to termine their distance to
the target.
Context

The art work was exhibited in a abandoned building in the center of Poznan.
My Mother

Video: http://vimeo.com/666152
CIID
  Copenhagen Institute of Interaction Design

In 2008 I moved to Denmark to take part in the pilot year of new interaction design course.
Greetings gestures

On of our first projects at CIID completed during Computational Design course. The idea was
to record hand movements of people greeting each other. They were comming from different
cultures so the gestures varied a lot.

(Photo by just.Luc / Flickr)
Wii Remote

Controlling device for Nintendo Wii was an obvious choice. It has bluetooth connection and
motion sensors.
Recording
Darwiin Remote

We used DarwiinRemote to connect to the Wii Remote via Bluetooth and record the data.
Korea


                                                               USA

                                                               Denmark #1


                                                               Denmark #2

                                                               Italy

 Data                                                          India

We have collected data for both hands and heads. I decided to use hand data only.
Colors: xAcc (red), yAcc (green), zAcc (blue), pitch (yellow), roll (light blue)
Experiments

I started buy just displaying the raw data (previous slide). Next step was to use the time and
acceleration values to alternate shape of set of cubes in 3d space.
Demo

I made an interactive application to explore different possibilited and parameters.

Video: http://vimeo.com/1905763
Final posters

Three final designs were made.
Exhibition

All the posters were exhibited at Danish Design School at the end of 2 weeks course.

(Photo by toujjval / Flickr)
VJ-ing

I recorded some of the experiments and used them later at one of my vj shows.

Video: http://vimeo.com/2630365
More: http://marcinignac.com/blog/2008/11/03/vj-vorg/
Have Fun

My first Wii Remote test :) “White brick in space”
3D Drawing

At the exhibition I met Flemming Tvede Hansen (Ph.D-Scholar, DKDS) who asked me if it was
possible to use Wii to draw in 3d. I said yes. And few days later I had working prototype. We
used Wii Remote’s build in IR-Camera and some IR LEDs.

Video: http://vimeo.com/2238077
We proceeded by making interactive app that Flemming used to explore various dynamic
shapes. This first version was able to do just flat 2D drawings.
Second version was able to export 3d models. It was still limited to one 2d plane though.
Final version was fully capable of drawing in 3d. It was controlled by both mouse or Wii
Remote.
Computational Design

Some of the designs were even printed in 3d.
3D Print
3D Print
Serial Port




 External Hardware

Processing can be very easily connected to external hardware. For example throught serial
port.
Left Rotate Right Next




  Arduino Controller

Arudino board with 3 buttons and light sensor.

Want to know more how to build your own stuff?
http://arduino.cc - Arduino home page
http://protolab.pbworks.com - Stanford prototyping tutorials
http://fritzing.org - Circuit design tool
http://www.partly-cloudy.com/misc/toolkits/listall - list of Arduino alternatives
Demo

I showed game controller made in 30min. Tree buttons control position and rotation of the
brick. When you cover the light sensor the current brick is dropped down.

I used modified version of Tetris code from http://leo.lobato.org/processing/tetrisclone/
index.html

More about my Arduino projects: http://marcinignac.com/blog/tag/arduino/
Wi-Fi




  External Hardware

Another possibility is to use Internet / WiFi connection.
Demo

I used multitouch TouchOSC app to simultaneously control two particle systems. oscP5
library was used to handle communication part in Processing (parsing messages in OSC
protocol).
Realtime, everytime.

In september 2009 I joined shiftcontrol studios (http://shiftcontrol.dk/)
Live Visuals
  DR P3 Guld’09

Our first project together. Live audio reactive visuals for Mike Sheridan during danish radio
music awards show.

More & Video: http://marcinignac.com/projects/2009/01/26/DR-P3-Guld'09
Live Visuals
DR P3 Guld’09
Control App

For the purpose of the show we developed audio reactive app. Generated visuals were then
displayed on LED screen on the stage.
Projection Mapping
Projection Mapping

When we project an image on the surface in front of the projector the image looks nice.

More: http://marcinignac.com/blog/2009/12/09/projection-mapping-in-3d/
Projection Mapping

The bigger the projection angle the more image is distored.
Projection Mapping

We can fix that by projecting image from projector point of view. Together with some cleaver
masking we can achieve very good results.
Experiments in the studio

Audio reactive bars on the pipes in our studio.

Video: http://vimeo.com/7504037
Experiments in the studio

Sun ‘behind’ the pipes.

Video: http://vimeo.com/7504182
Projection Mapping

Sun’s trick explained. In the places where there are pipes we simply display black color.
Experiments in the studio

Some more advanced masking.

Video: http://vimeo.com/7504276
Experiments in the studio

I use just one projector here.

Video: http://vimeo.com/7630261
Eskulap Club
  Poznań 2009

I fall 2009 I was invited to do some interactive installation in Eskulap Club, Poznan. I decided
to do something with the ceiling.
Mapping Setup

I designed software that allowed me to map particular sides of the cubes and display
animations on them.
3xI
  Vivisesja, Poznań 2009

In the final setup I was using one laptop and two projectors. There was also in InfraRed
sensor on the floor so whenever somebody was passing by the animation was changing.

More: http://marcinignac.com/projects/2009/11/20/3xI
ProjectedQuads

More & Source Code: http://marcinignac.com/blog/2010/01/31/projectedquads-source-
code/
Sketching in Code
  a.k.a. prototyping

Sketching on paper, Prototyping interactions, Interactive Sketches
Reasons to sketch: testing ideas, exploring posibilities, when i start i kind of know what i
want to achieve but actual results my vary ;)
Keep everything

Save all ideas / code. You never know when you will need to go back to an older version.
Dynamic Identity

In our latest project we are looking at properties of paper and how this style can be replicated
in code.
Paper Folding
  Processing

My first experiment was to simulate origami-like paper folding. You can select two triangles
and bend virtual paper along the edge between them.

Video: http://vimeo.com/11810679
Mesh Deformation
  C++ / Lib Cinder

Second sketch was build for iPad to test multitouch interactions. Using fingers you can
squeeze the mesh and deform it.

Video: http://vimeo.com/11899479
Cloth Simulation
  Processing / Traer Physics

Latest sketch involved some physics. The two highest points is where the fingers will be. I has
to be yet tested on multitouch device.

Video: http://vimeo.com/11911657
Exploring by prototyping.
    Understanding by making.
    Learning while playing.




Simply start making stuff. Right now! Even if you don’t fully understand what you want to do.
Just try it, whatever is in your mind. You can’t fully understand something until it’s visible,
tangible so don’t wait. Play with it, learn from it observe, fix it or build it again.
Thank you!
marcinignac.com

More Related Content

Similar to Sketching in Code

Digital Fabrication Studio 0.3 3D Scanning
Digital Fabrication Studio 0.3 3D ScanningDigital Fabrication Studio 0.3 3D Scanning
Digital Fabrication Studio 0.3 3D ScanningMassimo Menichinelli
 
Advanced View Arduino Projects List - Use Arduino for Projects 3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 3.pdfAdvanced View Arduino Projects List - Use Arduino for Projects 3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 3.pdfWiseNaeem
 
Digital Fabrication Studio: 3D Scanning
Digital Fabrication Studio: 3D ScanningDigital Fabrication Studio: 3D Scanning
Digital Fabrication Studio: 3D ScanningMassimo Menichinelli
 
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdfAdvanced View Arduino Projects List - Use Arduino for Projects-2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdfWiseNaeem
 
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdfAdvanced View Arduino Projects List - Use Arduino for Projects-2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdfWiseNaeem
 
New media studio 2 veerle van der sluys
New media studio 2   veerle van der sluysNew media studio 2   veerle van der sluys
New media studio 2 veerle van der sluysMADNewMedia
 
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdfAdvanced View Arduino Projects List - Use Arduino for Projects-3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdfWiseNaeem
 
Advanced View Arduino Projects List - Use Arduino for Projects.pdf
Advanced View Arduino Projects List - Use Arduino for Projects.pdfAdvanced View Arduino Projects List - Use Arduino for Projects.pdf
Advanced View Arduino Projects List - Use Arduino for Projects.pdfIsmailkhan77481
 
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdfAdvanced View Arduino Projects List - Use Arduino for Projects-3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdfWiseNaeem
 
Vipul divyanshu documentation on Kinect and Motion Tracking
Vipul divyanshu documentation  on Kinect and Motion TrackingVipul divyanshu documentation  on Kinect and Motion Tracking
Vipul divyanshu documentation on Kinect and Motion TrackingVipul Divyanshu
 
Advanced View Arduino Projects List - Use Arduino for Projects 1.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 1.pdfAdvanced View Arduino Projects List - Use Arduino for Projects 1.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 1.pdfWiseNaeem
 
From Prototype to Kickstarter to Production: How blink(1) was made
From Prototype to Kickstarter to Production: How blink(1) was madeFrom Prototype to Kickstarter to Production: How blink(1) was made
From Prototype to Kickstarter to Production: How blink(1) was madetodbotdotcom
 
Building second screen TV apps
Building second screen TV appsBuilding second screen TV apps
Building second screen TV appsvrt-medialab
 
Advanced View Arduino Projects List - Use Arduino for Projects 2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 2.pdfAdvanced View Arduino Projects List - Use Arduino for Projects 2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 2.pdfWiseNaeem
 
Advanced view arduino projects list use arduino for projects (2)
Advanced view arduino projects list   use arduino for projects (2)Advanced view arduino projects list   use arduino for projects (2)
Advanced view arduino projects list use arduino for projects (2)WiseNaeem
 

Similar to Sketching in Code (20)

Fab Academy 2015: 3D Scanning
Fab Academy 2015: 3D ScanningFab Academy 2015: 3D Scanning
Fab Academy 2015: 3D Scanning
 
Digital Fabrication Studio 0.3 3D Scanning
Digital Fabrication Studio 0.3 3D ScanningDigital Fabrication Studio 0.3 3D Scanning
Digital Fabrication Studio 0.3 3D Scanning
 
Advanced View Arduino Projects List - Use Arduino for Projects 3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 3.pdfAdvanced View Arduino Projects List - Use Arduino for Projects 3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 3.pdf
 
Digital Fabrication Studio: 3D Scanning
Digital Fabrication Studio: 3D ScanningDigital Fabrication Studio: 3D Scanning
Digital Fabrication Studio: 3D Scanning
 
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdfAdvanced View Arduino Projects List - Use Arduino for Projects-2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdf
 
Vision pk1
Vision pk1Vision pk1
Vision pk1
 
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdfAdvanced View Arduino Projects List - Use Arduino for Projects-2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-2.pdf
 
New media studio 2 veerle van der sluys
New media studio 2   veerle van der sluysNew media studio 2   veerle van der sluys
New media studio 2 veerle van der sluys
 
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdfAdvanced View Arduino Projects List - Use Arduino for Projects-3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdf
 
Advanced View Arduino Projects List - Use Arduino for Projects.pdf
Advanced View Arduino Projects List - Use Arduino for Projects.pdfAdvanced View Arduino Projects List - Use Arduino for Projects.pdf
Advanced View Arduino Projects List - Use Arduino for Projects.pdf
 
CT_DATFSM_v2
CT_DATFSM_v2CT_DATFSM_v2
CT_DATFSM_v2
 
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdfAdvanced View Arduino Projects List - Use Arduino for Projects-3.pdf
Advanced View Arduino Projects List - Use Arduino for Projects-3.pdf
 
Vipul divyanshu documentation on Kinect and Motion Tracking
Vipul divyanshu documentation  on Kinect and Motion TrackingVipul divyanshu documentation  on Kinect and Motion Tracking
Vipul divyanshu documentation on Kinect and Motion Tracking
 
Devraj_Nataraj_CV_PDF
Devraj_Nataraj_CV_PDFDevraj_Nataraj_CV_PDF
Devraj_Nataraj_CV_PDF
 
Advanced View Arduino Projects List - Use Arduino for Projects 1.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 1.pdfAdvanced View Arduino Projects List - Use Arduino for Projects 1.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 1.pdf
 
3D in Android
3D in Android3D in Android
3D in Android
 
From Prototype to Kickstarter to Production: How blink(1) was made
From Prototype to Kickstarter to Production: How blink(1) was madeFrom Prototype to Kickstarter to Production: How blink(1) was made
From Prototype to Kickstarter to Production: How blink(1) was made
 
Building second screen TV apps
Building second screen TV appsBuilding second screen TV apps
Building second screen TV apps
 
Advanced View Arduino Projects List - Use Arduino for Projects 2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 2.pdfAdvanced View Arduino Projects List - Use Arduino for Projects 2.pdf
Advanced View Arduino Projects List - Use Arduino for Projects 2.pdf
 
Advanced view arduino projects list use arduino for projects (2)
Advanced view arduino projects list   use arduino for projects (2)Advanced view arduino projects list   use arduino for projects (2)
Advanced view arduino projects list use arduino for projects (2)
 

Recently uploaded

Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentationssuser8fae18
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Mustafa
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designKhushiGandhi15
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...Amil baba
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理cyebo
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfJon Freach
 
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfExplaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfFreixa Home Design
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfoliodhrumibshah13
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...Amil baba
 
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfCADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfDuyDo100
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..GB Logo Design
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Projectbuvanatest
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...JIT KUMAR GUPTA
 
Top 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxTop 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxe-Definers Technology
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationajroy0196
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidiLivengood
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...Amil baba
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeCarlgaming1
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign designAkankshaD3
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理cyebo
 

Recently uploaded (20)

Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfExplaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfCADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
Top 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxTop 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptx
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 

Sketching in Code

  • 1. Sketching in Code / Processing Marcin Ignac @ JUG, May 2010, Poznań How I use Processing to do prototyping in almost every project. (screenshot from Wiild Life interactive animation http://marcinignac.com/projects/ 2008/10/12/wiild-life)
  • 2. Me, 27, programmer, designer, artist I live and work in Copenhagen, DK
  • 3. PROCESSING open source, cross-platform, multimedia programming language What is it? Processing was founded by Ben Fry and Casey Reas in 2001 while both were John Maeda's students at the MIT Media Lab. http://processing.org
  • 4. Environment Code editor. Set of basic libraries. Script compiler. Application and applet exporter.
  • 5. Programming Language Beginner Basic scripting. Static images.
  • 6. Programming Language Intermediate Functions. Draw loop is executed every frame. Easy acces to keyboard and mouse for interaction.
  • 7. Programming Language Advanced Modularity. Classes. External libraries.
  • 8. Programming Language Expert Eclipse. Beside better code editor it’s easier to manage your code and writing your own libraries.
  • 9. Open Source Community http://processing.org - forum, examples http://openProcessing.org - gallery of projects with source code
  • 10. Open Source Libraries 3rd party libraries can provide us with better video handling, more advanced 3d, procedural geometry or physics.
  • 12. Cross-platform Android (Photo by creativeapplications.net) More: http://android.processing.org/
  • 13. Cross-platform JavaScript All basic Processing functionality was recently ported to Javascript. Audio, video and 3d soon will be also possible with technologies like HTML5 and WebGL. More: http://processingjs.org/
  • 14. Example Projects Why I called it multimedia or interactive media programming language.
  • 15. ‘Art’ After I finished Computer Science at Poznan University of Technology I studied at the Academy of Fine Arts in Poznan where I was exposed to both traditional art...
  • 16. Media ... and some more contemporary stuff like video and interactive installations.
  • 17. “That what is the first” One of my favourite art pieces I made. There is an image of a woman projected on the wall. When visitor comes closer to the picture, the woman becomes younger and younger. It was was the first time I used Processing (for motion tracking).
  • 18. Motion Tracking Recorded image is processed and moving objects are detected to termine their distance to the target.
  • 19. Context The art work was exhibited in a abandoned building in the center of Poznan.
  • 21. CIID Copenhagen Institute of Interaction Design In 2008 I moved to Denmark to take part in the pilot year of new interaction design course.
  • 22. Greetings gestures On of our first projects at CIID completed during Computational Design course. The idea was to record hand movements of people greeting each other. They were comming from different cultures so the gestures varied a lot. (Photo by just.Luc / Flickr)
  • 23. Wii Remote Controlling device for Nintendo Wii was an obvious choice. It has bluetooth connection and motion sensors.
  • 25. Darwiin Remote We used DarwiinRemote to connect to the Wii Remote via Bluetooth and record the data.
  • 26. Korea USA Denmark #1 Denmark #2 Italy Data India We have collected data for both hands and heads. I decided to use hand data only. Colors: xAcc (red), yAcc (green), zAcc (blue), pitch (yellow), roll (light blue)
  • 27. Experiments I started buy just displaying the raw data (previous slide). Next step was to use the time and acceleration values to alternate shape of set of cubes in 3d space.
  • 28. Demo I made an interactive application to explore different possibilited and parameters. Video: http://vimeo.com/1905763
  • 29. Final posters Three final designs were made.
  • 30. Exhibition All the posters were exhibited at Danish Design School at the end of 2 weeks course. (Photo by toujjval / Flickr)
  • 31. VJ-ing I recorded some of the experiments and used them later at one of my vj shows. Video: http://vimeo.com/2630365 More: http://marcinignac.com/blog/2008/11/03/vj-vorg/
  • 32. Have Fun My first Wii Remote test :) “White brick in space”
  • 33. 3D Drawing At the exhibition I met Flemming Tvede Hansen (Ph.D-Scholar, DKDS) who asked me if it was possible to use Wii to draw in 3d. I said yes. And few days later I had working prototype. We used Wii Remote’s build in IR-Camera and some IR LEDs. Video: http://vimeo.com/2238077
  • 34. We proceeded by making interactive app that Flemming used to explore various dynamic shapes. This first version was able to do just flat 2D drawings.
  • 35. Second version was able to export 3d models. It was still limited to one 2d plane though.
  • 36. Final version was fully capable of drawing in 3d. It was controlled by both mouse or Wii Remote.
  • 37. Computational Design Some of the designs were even printed in 3d.
  • 40. Serial Port External Hardware Processing can be very easily connected to external hardware. For example throught serial port.
  • 41. Left Rotate Right Next Arduino Controller Arudino board with 3 buttons and light sensor. Want to know more how to build your own stuff? http://arduino.cc - Arduino home page http://protolab.pbworks.com - Stanford prototyping tutorials http://fritzing.org - Circuit design tool http://www.partly-cloudy.com/misc/toolkits/listall - list of Arduino alternatives
  • 42. Demo I showed game controller made in 30min. Tree buttons control position and rotation of the brick. When you cover the light sensor the current brick is dropped down. I used modified version of Tetris code from http://leo.lobato.org/processing/tetrisclone/ index.html More about my Arduino projects: http://marcinignac.com/blog/tag/arduino/
  • 43. Wi-Fi External Hardware Another possibility is to use Internet / WiFi connection.
  • 44. Demo I used multitouch TouchOSC app to simultaneously control two particle systems. oscP5 library was used to handle communication part in Processing (parsing messages in OSC protocol).
  • 45. Realtime, everytime. In september 2009 I joined shiftcontrol studios (http://shiftcontrol.dk/)
  • 46. Live Visuals DR P3 Guld’09 Our first project together. Live audio reactive visuals for Mike Sheridan during danish radio music awards show. More & Video: http://marcinignac.com/projects/2009/01/26/DR-P3-Guld'09
  • 47. Live Visuals DR P3 Guld’09
  • 48. Control App For the purpose of the show we developed audio reactive app. Generated visuals were then displayed on LED screen on the stage.
  • 50. Projection Mapping When we project an image on the surface in front of the projector the image looks nice. More: http://marcinignac.com/blog/2009/12/09/projection-mapping-in-3d/
  • 51. Projection Mapping The bigger the projection angle the more image is distored.
  • 52. Projection Mapping We can fix that by projecting image from projector point of view. Together with some cleaver masking we can achieve very good results.
  • 53. Experiments in the studio Audio reactive bars on the pipes in our studio. Video: http://vimeo.com/7504037
  • 54. Experiments in the studio Sun ‘behind’ the pipes. Video: http://vimeo.com/7504182
  • 55. Projection Mapping Sun’s trick explained. In the places where there are pipes we simply display black color.
  • 56. Experiments in the studio Some more advanced masking. Video: http://vimeo.com/7504276
  • 57. Experiments in the studio I use just one projector here. Video: http://vimeo.com/7630261
  • 58. Eskulap Club Poznań 2009 I fall 2009 I was invited to do some interactive installation in Eskulap Club, Poznan. I decided to do something with the ceiling.
  • 59. Mapping Setup I designed software that allowed me to map particular sides of the cubes and display animations on them.
  • 60. 3xI Vivisesja, Poznań 2009 In the final setup I was using one laptop and two projectors. There was also in InfraRed sensor on the floor so whenever somebody was passing by the animation was changing. More: http://marcinignac.com/projects/2009/11/20/3xI
  • 61. ProjectedQuads More & Source Code: http://marcinignac.com/blog/2010/01/31/projectedquads-source- code/
  • 62. Sketching in Code a.k.a. prototyping Sketching on paper, Prototyping interactions, Interactive Sketches Reasons to sketch: testing ideas, exploring posibilities, when i start i kind of know what i want to achieve but actual results my vary ;)
  • 63. Keep everything Save all ideas / code. You never know when you will need to go back to an older version.
  • 64. Dynamic Identity In our latest project we are looking at properties of paper and how this style can be replicated in code.
  • 65. Paper Folding Processing My first experiment was to simulate origami-like paper folding. You can select two triangles and bend virtual paper along the edge between them. Video: http://vimeo.com/11810679
  • 66. Mesh Deformation C++ / Lib Cinder Second sketch was build for iPad to test multitouch interactions. Using fingers you can squeeze the mesh and deform it. Video: http://vimeo.com/11899479
  • 67. Cloth Simulation Processing / Traer Physics Latest sketch involved some physics. The two highest points is where the fingers will be. I has to be yet tested on multitouch device. Video: http://vimeo.com/11911657
  • 68. Exploring by prototyping. Understanding by making. Learning while playing. Simply start making stuff. Right now! Even if you don’t fully understand what you want to do. Just try it, whatever is in your mind. You can’t fully understand something until it’s visible, tangible so don’t wait. Play with it, learn from it observe, fix it or build it again.