janicema_project3_process


 * Project 3 process**

Sketches and research:

- concept for the illustration style

British History: Type: Chronological Interactions: mouse click, zoom The first is a visual timeline allowing the viewer to ‘explore all of British history, from the Neolithic to the present day’. You can zoom in and out of different periods in history, following pre-set themes or jump around to learn about specific points in time.

The concept for this project is to focus on the different discipline in design. The infographic will show the career info includes: a description of the career, earnings, career path and the statistic for male and female that has engage to this career. The target audience of this infographic are students and people who are interest in working in the design field. This infographic allows them to learn more about the career, and provides them a clear understanding about the career path in design. This will be very helpful for them to start planning their future career path. The setting for this infographic is shown on a illustrated image. Each image is linked to one design field. When user click on the object, a box will popup showing the description. There is also a zoom button, which shows the career path, earnings and statistic in a deeper view. I have tried different attempts in processing, such as zooming an object, and changing the size of an object. It was not successful at first, but I still tried to make the basic structure work.
 * Concept:**

Type: Spatial Interactions: Mouse click, zoom

- final copy slides 1) Home page 2) Description for graphic design 3) Zoom in to the career path, earnings and statistic



Processing: codes for

**Zoom**

PImage a; boolean onetime = true; int[][] aPixels; float sval = 1.0; float nmx, nmy; int res = 5;

void setup { size(200, 200, P3D); noFill; stroke(255); aPixels = new int[width][height]; a = loadImage("zoom.jpg" ); for(int i=0; i 1.0) { nmx = nmx + (mouseX-nmx)/20; } if (abs(mouseY - nmy) > 1.0) { nmy += (mouseY-nmy)/20; } if(mousePressed) { sval += 0.005; } else { sval -= 0.01; } if(sval > 2.5) { sval = 2.5; } if(sval < 1.0) { sval = 1.0; } translate(width/2+nmx*sval-100, height/2+nmy*sval-100, -50); scale(sval); rotateZ(PI/9-sval+1.0); rotateX(PI/sval/8-0.125); rotateY(sval/8-0.125); translate(-width/2, -height/2, 0); float rr, gg, bb, tt; for(int i=0; i<height; i+=res) { for(int j=0; j<width; j+=res) { rr = red(aPixels[j][i]); gg = green(aPixels[j][i]); bb = blue(aPixels[j][i]); tt = rr+gg+bb; stroke(rr, gg, gg); line(i, j, tt/10-20, i, j, tt/10 ); } } }

void keyPressed { if(key == '1') { res = 1; } else if (key == '2') { res = 2; } else if (key == '3') { res = 3; } else if (key == '4') { res = 4; } else if (key == '5') { res = 5; } }


 * Mouse press + sizing**

import processing.pdf.*;

boolean saveOneFrame = false;

void setup { size(600, 600); }

void draw { if(saveOneFrame == true) { beginRecord(PDF, "Line.pdf"); } background(255); stroke(0, 20); strokeWeight(20.0); ellipse(mouseX, 0, width-mouseY, height); fill(random(400), random(200),random(400)); if(saveOneFrame == true) { endRecord; saveOneFrame = false; } }

void mousePressed { saveOneFrame = true; }

Bibliography : British History, "http://blog.immediatefuture.co.uk/category/infographics/" May 2007. Career Cruising, "http://www.careercruising.com/Main/Index.aspx?LoginID=a3d2a593-87cb-4a8c-9ccb-f6cf3ba1f8af-" 2008 Anaca Technologies Limited. Design Statistics, "http://www.graphicdesignschools.com/guidance/graphic-design-career-statistics.html" 2007 A Monster Company. Processing tutorial, "http://processing.org/discourse/yabb_beta/" 2007.