Jia-Rey Chang's Portfolio of Students' Works

Students’ Works

CONTENTS

01 Physical Computing & Digital Fabrication

02 Creative Coding

03 Architecture Graduation Project

04 3D Modeling

05 Interaction Design & Creative Technologies

06 Open Tutorials

01sw Physical Computing & Digital Fabrication

Selected Projects under the MetaBody category were also exhibited in MediaLab Prado, Madrid in the summer of 2014 and 2015 at the MetaBody annual conferences and exhibitions.

(MetaBody Project Website: http://metabody.eu/) (Projects under MetaBody, 2014: http://metabody.eu/es/imf-madrid-2014/ ) (Projects under MetaBody, 2015: http://metabody.eu/es/imf-2015-madrid/)

Description “Physical Computing & Digital Fabrication” tutored by Jia-Rey Chang includes both the interactive and digital fabrication projects which have been physically realized in the past few years.

In the “MetaBody” session, selected projects developed in 2 different Master Design Studio in HyperBody LAB, TU Delft(MSC_2 in 2014 & 2015) will be shown under the “MetaBody”. “MetaBody” is a Europe Culture project involving the media artists, digital music composers, choreographers, dancers, performers, programmers, designers, and architects from 7 different countries to cooperate and develop projects and performances (http://metabody.eu/). The major discourse of the MetaBody is to question the homogenization expressions educated by the current information mediums and to release and induce the already-formulated body by interacting with pro-activeness architectural space. All the projects here were built in 1:1 scale where the students have to not only confront the construction matters through Digital Fabrication but also to implement the physical computing in the project to make an interactive installation as an immersive proactive space.

“InteractiveBody” workshops tutored by Jia-Rey Chang are a series of 1-2 weeks long workshops regularly taking place in the past 4 years in the master design studio of the HyperBody LAB, TU Delft. It focused on the “Physical Computing” techniques including basic coding, the usage of Arduino, and motion tracking technology with Kinect. A particular Design assignment would be delivered at the very beginning, such as designing an emotion monster, a transformable architecture/furniture...etc., as a goal. Through 2-3 days technical tutoring session along with design discussions in groups, and another 1-2 days for digital fabrication, several scaled interactive projects/prototypes would be achieved as the students’ first fundamental experiment to examine what they learned from the workshops.

MetaBody 2014 = Inter-Performing Environment design Studio REFLECT-EGO Reflectego aims to discuss the balance of physical and imagery components in our brain’s construction of reality.

The view and experience that we hold of space and our position in it consist of both actual objects and altered descriptions that we interpret to represent reality. By visually distorting the space in our surrounding and by unexpected repositioning of the self in relation to the environment through movement, awareness can be created of the proprioceptive determination and our self-perception in the twilight of the physical and virtual world.

Our design derives from a kaleidoscopic composition of faceted mirrors. In a Kaleidoscope the constructed perceived image consists of actual physical objects and a multiplicity of reflections of this. Through small movements of the objects the constructed images change dramatically due to the amplification of change by visual multiplication of the movement. In our project the user will become the physical object inside a kaleidoscope in which he sees his image scattered and recomposed as a result of his behavior.

The structure consists of a suspended faceted mirror-surface. It hovers and maneuvers above and as a reply to user behavior. The structure folds, flips and expands to create dynamic compositions of the real world objects by alternating angles of reflection. The user interacts with the structure as a piece of the puzzle whilst recomposing the total image.

REFLECT-EGO Students Members: Oana Anghelache Rob Moors Guus Mostart Eldin Fajkovic Jacqueline Huang Mick van Rooijen

video_link: https://vimeo.com/118525103 https://vimeo.com/113264230

information_link:

http://ipe.hyperbody.nl/index.php/project04:Frontpage

MetaBody 2014 = Inter-Performing Environment design Studio roboZoo RoboZoo aims at establishing the artificial environment of the interactive swarm of robots. Synergetic integrity with such a substance is the subject of our interest. Investigation of models of behaviours plays a paramount role in the presented concept. The possibility of shaping the environment by artificial creatures bring about the potential for dynamic system and its adaptability to the outer and inner changes.

Motion and visual expression of each independent robot evokes instantenous response in the environment. People perceiving remodelled swarm of artficial creatures are forced to reestablish themsleves in the space in real time.

Borders are constituted mutually by robots and humans, as they are sending signals to respective sensors.

Therefore they are both altering behaviours.

Mutual communications between both people and robots actuate the ceasless spatial reconfiguration. Robotic sensors are detecting every change in the ecosystem and trigger a constant loop of unexpected transformations.

The balance between autonomy and control induces people to discover each independent principle. These essences trigger effortless processes of comprehension and immediate interaction.

roboZOO Students Members: Chris Pydo Guang Yang Jan Paclt Kasper Siderius Radoslaw Flis Javid Jooshesh

video_link: https://vimeo.com/99301681 https://vimeo.com/113264651

information_link:

http://ipe.hyperbody.nl/index.php/project01:Frontpage

video of Inter-Performing Environment projects_Summary_link: https://vimeo.com/99547203

MetaBody 2015 = Inter-Activating Environment design Studio Textrinium The main appearance of the structure is based on the mathematical embedded minimal surface discovered in 1982

by Celso José da Costa. The topology is created by puncturing a compact surface, therefore becoming a finite topology. The current design is a topologically thrice-punctured torus which is deformed until the planer end becomes catenoidal. The topology can be described using the Weierstrass zeta and the Weierstrass elliptic functions. The name of the project is Textrinium based on the interweaving of different components within the textile, architecture and mathematical geometry. Textrinium is a textile based structure that interacts with its surroundings by change in kinetic energy, shade shifting of colours by differentiating in resistance andintegrated sensors like ultrasonic and conductive wire. All the used components are part of the same knitted fabric. The structure is supported by an internal skeleton composted out of glassfiber. Extensive research in material systems, topology optimisation, stress and deformation simulation within fabrics, weaving patterns and fibre directionality, integrating (knitting) sensing, sewing techniques exploration, actuation and control systems within the textiles, thermo-chromic textile based applications, phosphorescence applications and computation numerically controlled fabrication are part of the research and design workshop.

Textrinium Students Members: Bob Heester Dimitra Dritsa Esther Slagter Marien Teeuw

video_link: https://www.youtube.com/watch?v=A0fysKRDaeU

information_link: http://re.hyperbody.nl/index.php/Msc2G5:Frontpage

MetaBody 2015 = Inter-Activating Environment design Studio [S]caring-ami Project ‘{S}caring-ami ’ is a representation of the fear of the unknown and the misunderstood. It is about the understanding of what love can create and allow you to become. We invite you to engage with {S}caring-ami and unlock the creature’s heart; to break down his fear of love and progressively turn his natural state of defense, to a warm embracing being. Collectively we urge you to show this misunderstood and scared creature the type of love he craves so he can learn to embrace you back. Through dialogue we can break down the walls and build up trust between two unknowns, the user and the creature.

[S]caring-ami Students Members: Giulio Mariano Alessandro Giacomelli Anisa Nachett Yizhe Guo Xiangting Meng

video_link: https://www.youtube.com/watch?v=-gvIzfyk6fs

information_link: http://re.hyperbody.nl/index.php/Msc2G6:Frontpage

interactiveBody V1-6 workshop, HyperBody MSc programs, 2013-16 “Interactive Body” workshops are a series of regular workshops focusing on Physical Computing. Along with the master design studio of HyperBody, it becomes a fundamental workshop in every semester to not only teach the students how to confront the tasks of Physical Computing but also give them the interactive design thinking from the architectural design point of view. Different design assignments, such as emotive monster, spatially reconfigurable items, transformable furniture...etc., related to design studio task were given at the beginning.

During 1-2 week of learning and experimenting, the master students were able to pick up the basic coding knowledge, physical computing techniques with Arduino, and interactive design thinking. By applying the digital fabrication techniques and the physical computing they learned from the workshop, each group would provide their own working interactive prototype as a proof of their design concept. More than 20 prototypes have been produced through the workshops, and the students are also able to apply the knowledge to their design projects later on.

InteractiveBody Students Members: Thanks for all the MSc1, MSC2 students who had been contributed to the workshops and make the workshops at a great level of developments and joyful.

Interactive Body V1.0: https://vimeo.com/61092607 http://multimod.hyperbody.nl/index.php/WorkshopB:frontpage Interactive Body V2.0: http://2628climator.hyperbody.nl/index.php/WorkshopA:frontpage http://2628climator.hyperbody.nl/index.php/Workshop2:_Shared:Presentations Interactive Body V3.0: http://m4h.hyperbody.nl/index.php/Msc1workshop:workshop01 Animated Body: http://ipe.hyperbody.nl/index.php/Workshop2:frontpage http://ipe.hyperbody.nl/index.php/Workshop1:groups Interactive Body V4.0: https://vimeo.com/123616248 http://re.hyperbody.nl/index.php/Msc2workshop:workshop06 Interactive Body V5.0: https://vimeo.com/145983370 http://ex25.hyperbody.nl/index.php/Msc1workshop:workshop01

02sw Creative Coding

Description

In the session of “Coding”, a couple of examples and outcomes from the coding workshops tutored by Jia-Rey Chang since 2011 were presented here, as well as the Interaction Design and Topics in Art/Design/Technology courses in UD. The resulting outcomes varied accordingly from simple but fundamental coding techniques to advanced level coding.

Through basic “Processing” coding tutorials, the students are able to build up their fundamental coding techniques from scratch. By simple, detailed, and fun examples, the conceptual coding ideas, such as variables, for loop, condition, class, object-oriented, function...etc., are efficiently delivered to the students step by step in a short time. The basic coding workshops are mainly designed for the first-year master students who joining the HyperBody LAB as their design studio. More advanced techniques, such as 3D objects and environment, library utilization, and tasks like building up one’s own swarm behavior, are usually taught as a prerequisite knowledge to deliberate their design strategy before working on their graduation project.

Jia-Rey Chang was also invited to a couple of international workshops mainly utilizing his Processing techniques implementing to the design tasks. For example, the workshop titled as “FATAMORGANA” was held by the student organization, OSSA in Warsaw in 2011. And the “AGILE” workshop cooperated amongst TU Delft, the University of Adelaide from Australia, Jiaotong University and Tianjin University of China as a joint session for one week.

The original intention of these workshops/courses is to let the students get to know creative coding and to furthermore induce them with simple but interesting examples while learning. Through the process of tutoring, the students were not only trained to gain the coding capabilities but also to shift their design thinking out of the traditional box.

BASIC GRPHIC Through using very basic coding methods, such as geometry, for loop, condition, color...etc., the students were able to create fruitful and delightful 2D and 3D digital graphics.

projects_link: http://re.hyperbody.nl/index.php/Msc2G0:workshop1 http://ipe.hyperbody.nl/index.php/Workshop1:students

The “Fata Morgana” workshop was held by a student organization ,OSSA, in Warsaw (winter 2011). The task was to activate the old city of Warsaw through different design strategies and methods. A conceptual idea of taking 4 photos under categories of people, culture, transportation, and monument representing Warsaw was generated during the workshop. After pixelating the selected photos, the pixel became the agents of the swarm with certain speed and parameters defined by the students. By releasing the swarm amongst the 4 selected photos, the agents were able to influence each other with their internal forces to generate the resulting forms, which were taken as a representation of the city, Warsaw.

information_link:

https://vimeo.com/31401118 http://pandalabccc.blogspot.nl/2011/11/fata-morgana-workshop-inwarsaw.html http://pandalabccc.blogspot.nl/2011/11/fata-morgana-workshop-inwarsaw-process.html

related_project = emotive matters: https://vimeo.com/44517205

Swarmmy Workshop

The “Swarmmy” workshop was set up for the students to learn how to utilize the “Plethora” library developed by Jose Sanchez in Processing to generate swarm behavior simulation. During the workshop, the students not only conceptually learned the crucial swarm behavior principles of “Separation”, “Alignment”, and “Cohesion” but also were able to implement them into scripts to make swarm simulations along with their design projects.

video_link https://vimeo.com/39280102 information_link

http://pandalabccc.blogspot.nl/2012/03/hyperbodyswarmmyworkshopresultprocessin.html http://pandalabccc.blogspot.com/2012/03/swarmmy-chair.html

Agile Workshop

The “Agile” workshop is a cooperation amongst HyperBody, TU Delft, the University of Adelaide of Australia, Jiaotong University and Tianjin University of China as a joint program. Experimenting with students from 3 different countries within one week, the workshop focused on utilizing digital tools to potentially generate the infinite creativity of the architectural design regardless of the constraint of the materials. 3 different design locations were set in Rotterdam, Adelaide, and Beijing as an initiate experimental site. The idea was to search for a general design solution which can be applied to any other location by tweaking the parameters as an adjustable model. Jia-Rey Chang was in charge of 2 “Rotterdam” groups in the workshop. One of the groups utilized the swarm behavior as a form-finding method to generate the resulting form as an iconic pavilion in accordance with the diversity of the transportation speed. And the other group took the idea of designing a reconfigurable pavilion as an innovative Maker space. This Maker space were composed of numerous mobile building blocks as agents of a swarm freely transporting on site to support the immediate required space for the Makers.

projects_link: http://ex25.hyperbody.nl/index.php/Shared:AgileFabNL5 http://ex25.hyperbody.nl/index.php/Shared:AgileFabNL6 related_projects_link: http://ex25.hyperbody.nl/index.php/Msc3workshop:workshop01

03sw Graduation Project

Description The “TRANSPLANTABLE URBAN ORGANS” is one of the Master graduation projects that Jia-Rey Chang tutored. The original topic of the graduation project is to design a World Expo Pavilion in Rotterdam, 2025. The student (Eldin Fajkovic) interpreted the idea of “transplantable urban organs” by indicating the transplantable organs as several transportable/mobile spaces, and a fixed host body as one of the harbor of Rotterdam.

The pavilion was designed as a multiple-functional space not only in terms of spatial usages but also from the cultural aspects. And it is not only to be considered as a temporary pavilion but also considerate to be sustainable after the Expo period. The strategy is to distribute these transplantable organs(space) to other urban locations in Rotterdam but still remain its functions for the general public. And the fixed body as a public space can be used to host temporary events and festivals.

An interactive zone was designed in the pavilion to provide different circulation as different spatial experiences though the intelligent system of the pavilion. The audience would lead to diverse journeys every time to experience different intriguing and joyful adventures. A physical interactive prototype was made to enhance this idea and also with a digital simulation.

Transplantable Urban Organs Tutor Team: Nimish Biloria, Karel Vollers, Jia-Rey Chang Master Student: Eldin Fajkovic Rotterdam is preparing a bid to host the World Expo in 2025, which should support the move towards a new sustainable reality. Considering the main theme Rotterdam is proposing: 'Changing Currents', the pavilion design is focused on concepts of post-event transplantability, ambient interactivity and landscape traffic-linking. The main functionality of the pavilion exists in twofold. One is a heavy base, defining a static pedestrian traffic network, while the second exists of demountable and transplantable organs, hosting functions based on urban themes of future traffic, community and activity.

The whole pavilion is linked together by its constantly changing character, obtained through the real-time alteration of the ambient layer. Influenced by the location, speed and density of the visitors, the pavilion re-arranges its routes in a physical manner and reflects its e-motive state through a virtual ambient layer. In a sense the pavilion becomes an ever-changing and responsive organism, with the ability to donate its urban-based functional organs afther the World Expo, to be deployed on other suitable urban landscapes of Rotterdam. ...Eldin Fajkovic

project information: http://www.fajkovic.com/tuo.html http://ex25.hyperbody.nl/index.php/project04:Progress

04sw 3D Modeling

Description “3D Modeling” is a fundamental core-courses for sophomore in Art&Design Department, Univerisity of Delaware. The main goal here is to Introduce how to use 3D-modeling software to generate virtual models and computer animations. However, Jia-Rey Chang also uses this course to talk about the current trends in 3D modeling and summarized them into 3 major categories, which are “R2V”, “V2R”, and “VxR”.

“R2V” = Reality to Virtual, which is the essential step while learning 3D Modeling software. Basically training the skill of translating the existing physical objects into the virtual environment. However, it is also implied the notion of "V2V" that to generate ideas directly in the virtual environment with 3D modeling tools. In other words, after being familiar with the modeling methods, it is crucial to have the ability to create projects immediately with the skills learned. “V2R” focuses on current Digital Fabrication fashion to realize physical objects from the virtual environment. Therefore, if the intention of the model is going to use certain Digital Fabrication tools, then the model will be designed and generated accordingly. “VxR” talks about the mixture of Virtual and Physical environment, which touches the hot topic of VR, AR, MR, or even spatial computing called nowadays. It is to introduce the future trend of how 3D modeling is going to influence the current creative industry and somehow reminding the crucial point of having 3D modeling skills.

According to the time limitation and the skill sets of sophomore students, the course mainly emphasizes on the part of “R2V”, but deliver the notion of “V2R” and “VxR” mostly within lectures as introductions. Students learn “Rhinoceros” as their first 3D Modeling software to understand the basic function and terminology of 3D Modeling. Afterward, “Cinema4D” is introduced to the students in order to provide them the animation skills.

(All students don’t have 3D Modeling skills at the first.)

Animals After 2-3 classes of learning on the 3D Modeling software, Rhinoceros, the sophomore utilize the software to .create animal objects within their imaginations.

Movie Monument After analyzing one out of 6 PIXAR short animations, the students should transform either the emotion status, relationship amongst the characters, or whatever focuses they picked to design an experience path, like the gameplay of Monument Valley, or like a ride in an amuzement part. It is not only to review/display the capability of the students’ 3D modeling skills but also to train their abilityes on developing a design project from scratch.

Movie Monument

Movie Monument

Self-Potrait = Monster Version

the task is to create a “Self Portrait” in a relatively abstract way, which is stated as “Monster Version” here. Use the imagination on exaggerating one’s own personality/characteristics and manage to transform those personality/characteristics into a monster-self as a short 3-10 second animation. It does not have to be a 4-limbs + 1 head human-droid (a human-kind of figure). It can be a group of spheres, a flying mess, or a creature.

video_link https://vimeo.com/304865989 video_link https://vimeo.com/337543605

video_link https://vimeo.com/377865134

video_link https://vimeo.com/421112947

video_link https://vimeo.com/491715241

video_link https://vimeo.com/558770487

Disney Dash = Exploring NFT

“Exploring NFT” is a summer scholars university-funded student’s project tutored by Jia-Rey Chang. Seeing the inevitable trend of NFT, the student thought that this emergence has challenged the way artists attach value to their art. Therefore, the students took this opportunity to investigate NFT by actually making an NFT art to gain an understanding of how NFT’s can enhance an artist’s practice and determine its value in the world of commercial art. A series of visual representations (3D Models creation) “Disney Dash” attempts to emphasize/reflect the great concern of the impact while the global corporate, such as Disney, step into the NFT world as a capital empire. (https://www.kiralikethesun.com/design/character-design)

video_link https://vimeo.com/304865989 video_link https://vimeo.com/337543605

05sw Interaction Design & Creative Technologies

Description

“Interaction Design & Creative Technologies” collect students’ outcome from 2 courses including Core-interactive media for Freshmen/Sophmore, and Interaction Design for Junior/Senior under visual communication pathway.

In the Web design project, students were asked to develop their first-ever website design following a step-by-step sequence (Strategy, Scope, Structure, Skeleton, Surface) based on the human subject they picked (celebrity/artist/author/athlete...etc). Following the procedure, they will learn the fundamental elements of UX/UI design from scratch.

In the Innovative Interface Design, the students were asked to develop an interface for an innovative product idea to solve their daily problems. It not only helps them re-polish their UX/UI design skill but also force them to think out of the box of the definition about “Interaction Design”. Emerging technology, such as AI, robotics, facial recognition...etc., was highly encouraged to include in their design. As a designer, the idea is not to become the expert of emerging technology, but to understand how you can embrace and apply this technology to assist your design.

The Creative Technology Exploration session, it shows how students developed interactive design/artwork by using creative coding(Processing) or visual coding(Cables.gl) techniques under Jia-Rey Chang’s guidance.

“PostMalone/Facial Filter” project is one of their innovative exercises to ask the students to develop an Instagram facial filter under a certain marketing campaign they proposed. “Whatever” project intends to be flexible on the topics but let the students freely use the creative technique they learned to express their individual statements by creating design/art projects to arouse the problem they address.

Web Design

“Emma Chamberlain”, the YouTuber was chosen as the subject of this assignment by the student. She intended to develop an informational/functional personal website to not only provides information about Emma Chamberlain but also sells her related merchandise within the website. This project shows her creative idea, constructive structure, and aesthetic taste of UX/UI design and this is her very first web design.

Innovative Interface Design | Sage

To solve the problem of taking care of your plants remotely while you’re at work/school, the student proposed the idea of “Sage”. Sage is an interactive app that connects the physical world to the digital world. Sage helps plant lovers to learn about how to properly care for all of their plants all in one app. Users can identify unknown plants, connect accessories, and more!

Innovative Interface Design | Strive

Fiding it hard to memorize and schedule the tasks and plan that is not in front of you and desperately would like to have a personal assistant to arrange it, the student proposed the “Strive” idea. Strive is a pocket-size projector that provides a multi-touch interface projected on any surface to show your calendar, schedule, tasks, projects’ deadlines, to-do list, memos, notes, sketches...etc, for you to easily plan your schedule and remind you of your critical events.

Whatever

After a semester of learning creative coding, “Whatever” is the final project that can be seen as a summarize of the whole learning process. The students are asked to pick a (social) topic that they would like to address, such as sustainability, social distancing, racism, women’s right, or LGBT…etc and to use the creative tools learned as your media to express individual statement.

video_link https://vimeo.com/421686361

video_link https://vimeo.com/558772432

Facial Filter = PostMalone

A fun and trendy practice to let the students use Spark AR to develop a Facial Filter that is initiated from a mask, special makeup, facial tattoo ideas. Through this project, they learned the basic understanding of how AR works 3 dimensionally and how to implement their skills to develop up-to-date design projects.

05 Open Tutorials

TUTORIALS A number of on-line tutorials were prepared and improved for students during the past few years. The tutorials include techniques of Processing from basic to advance as Creative Coding, Arduino as Physical Computing, and Kinect as Motion Tracking Technology. These tutorials were made as open-source materials not only for the students at schools but also people who are interested to do the self-learning through these simple, fundamental, but interesting examples.

PROCESSING A Little Bit Processing Tutorials: https://issuu.com/archgary/stacks/7c6ce14cb5824893aabecc82ebde4d36 P00=introduction/ P00=Download & Install/ P01=HelloWorld/ P02=Condition/ P03=ForLoop/ P03=Clock/P04=easyFunction/ P05=3D & Library/ P06 =SimpleUI/ P07=arrayList/ P07=simplePractice/ P08=photograph/P09=movieMaker

A Little Bit Advance Processing Tutorials: https://issuu.com/archgary/stacks/784fa968d3604cf98e257a96c20b13c0 P101=Swarm/ P102=SwarmAttractor/ P103=SwarmAttract2Line/ P104=Terrain

ARDUINO Interactive Body Workshop: https://issuu.com/archgary/stacks/d0d7bb13dd8444f88cac9ba4049d3091 A00=introduction/ A01=Arduino Blink/ A02=Arduino Sensor/ A03=Arduino Servo/ A04=Arduino Shape Memory Alloy/ A05=Grasshopper/ A06=Firefly

KINECT Body Instrument https://issuu.com/archgary/stacks/d0d7bb13dd8444f88cac9ba4049d3091 000=introduction/ 000=Download & install/ 001=basic/ 002=Skeleton Tracking 2D/ 003=Skeleton Tracking 3D

’stnedutS skroW

’stnedutS skroW