# A1: Meta, Metta ## Computational Experience Design ### Exploration of Concepts, Feelings: Meta, Metta > "the quality of the **imagination** is **to** **flow**, and not to freeze" Ralph W. Emerson **Feeling Flow: Embodied:** positive affect, calm, low-activation states, low stress \ **Express Concepts**: Using geometric forms, colors to represent ideas. ### Meta, Metta: Higher Levels of Abstraction, Loving Kindness [**Meta:** ](http://www.literaturepage.com/read/emersonessays2-17.html)**Meta** (from the [Greek](https://en.wikipedia.org/wiki/Ancient_Greek) μετα-, [meta-](https://en.wiktionary.org/wiki/meta-), meaning "after" or "beyond") is a prefix meaning more comprehensive or transcending[ \[Wikipedia\]](https://en.wikipedia.org/wiki/Meta) [**Metta**](https://en.wikipedia.org/wiki/Maitr%C4%AB) : Mettā is a Pali word, from maitrī itself derived from mitra which, states Monier-Williams, means "friendly, amicable, benevolent, affectionate, kind, good-will",[\[13\]](https://en.wikipedia.org/wiki/Maitr%C4%AB#cite_note-MWD-13) as well as a form of "love, amity, sympathy [\[Wikipedia\]](https://en.wikipedia.org/wiki/Maitr%C4%AB#Maitr%C4%AB_and_Mett%C4%81) ## Assignment Tasks: Review the assignment tasks, look through the [**Inspiration**](https://kdoore.gitbook.io/cs1335/project-1/pshape/sept-16-code/diagram-and-art-expression) content below to find links, ideas, etc. Complete the tasks to create your gitbook and a gitbook page that documents your process. Submit on eLearning using the submission template. Remember to upload a zip file your processing project to eLearning ### 1. Create your personal [Gitbook](https://www.gitbook.com/): You will submit screenshot and a link to your gitbook page as part of your assignment submission. 1. Recommended: Create a [**GitHub Account**](https://github.com/) 2. Create a [**Gitbook**](https://www.gitbook.com/) Account using your GitHub account. 3. Create a Gitbook, Public, Personal Notes: Name it: 4. Create a page: Assignment 1: 5. Find: Share-Link - you'll include this in your submission document 6. After completing steps below, take **a screenshot** of a portion of your gitbook page using the share link to open as a **web-document** (not in edit mode) 7. [Gitbook Quickstart Guide](https://docs.gitbook.com/getting-started/quick-start) See Example Template Gitbook Page l linked below: {% embed url="" %} Example Gitbook Named: Learning Cycles {% endembed %} ### 2. Abstract Concepts - Concrete Feelings: **Meta: transcend, higher level order.** **Metta, loving kindness practice** 1. **Song:** **Feeling Flow:** Select and list a song that evokes **positive, relaxing, calm feelings** for you: 1. Provide a link to the song, artist, lyrics, or album. 2. **Example:** Wildfire by the Wild Feathers 3. 2. **Conceptual art - Concept: Meta, Metta** **Create a Sol Lewitt** inspired sketch to explore the concepts of metta, and/or meta 1. **Create a simple pencil sketch on paper and list the rules, procedures** used to create the artwork so that someone else could create the same artwork from the listed rules. 2. **Gitbook: Take a screenshot** of the sketch, **insert the image** on your gitbook page 3. **Gitbook:** **List the procedure, rules** that you followed in making the sketch. 4. **Gitbook:** **Paragraph:** Include one or two sentences using paragraph markup to explain the connection between the concept - idea, and the artwork - expression 5. [**Data-Flow, Nodebox:** ](#5-nodebox-tom-d-desmedt)**Procedural, Generative Design** 1. [ **Download, Install Nodebox**](https://www.nodebox.net/download/) 2. Open Nodebox, Open Examples from the Edit Menu: 3. Select an Example program. (See images below) 4. Take a screenshot of the starting design 5. **Customize:** Make Modifications to several nodes, add a node to create your version of the design 6. Take a Screenshot of the final design 7. **Gitbook:** Insert both images into gitbook. 8. **Gitbook:** Write a simple description of some of the changes you made to create your version. ![Menu: File > Open Examples](https://2312795435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgCFUL-cVHjEcqM%2F-MSEophmtdHNL2LWgLKd%2F-MSOPMxg0W8HCyY95_dk%2FScreen%20Shot%202021-01-31%20at%2011.01.32%20AM.png?alt=media\&token=289beac4-ef3b-41b4-a8e3-e769b05e5b67) ![Switch from Topics Tab to Basics Tab](https://2312795435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgCFUL-cVHjEcqM%2F-MSEophmtdHNL2LWgLKd%2F-MSOPRXCdedt8m0c9Pe7%2FScreen%20Shot%202021-01-31%20at%2011.01.47%20AM.png?alt=media\&token=8dc76d79-182d-4382-ab73-fc4ddd9a7726) 1. [**Code - Java, Processing:**](https://kdoore.gitbook.io/cs1335/getting-started/pde-code-editor) \ **Create simple Processing program** that uses shapes, colors to represent the concepts of **meta and/or metta.**\ Use basic processing functions for geometric shapes, fill, stroke. See processing documentation, examples, tutorials to learn basic code statements for colored shapes. No animation or interaction required. Use setup( ), size( ) functions to insure the canvas size is 400x400 pixels or larger. Arrange shapes to represent the concept. 1. **Gitbook: Heading H3** List Concept: Meta, Metta, or both. 2. **Gitbook:** Image: insert a screenshot of your canvas as an image on your gitbook. 3. **Gitbook:** Code: Copy and paste as code on your gitbook. 4. **Gitbook:** Paragraph: Write a description of how your design reflects your concept. ## Inspirations: ### Book: [If Life is a Game, These are the Rules:](https://kdoore.gitbook.io/cs1335/resources-and-references/resources/games-rules) **Cherie Carter-Scott** **Rule 1: You will receive a body** * Acceptance * Self-Esteem * Respect * Pleasure ### 2. Introduction to Mindfulness: [Mindfulness Awareness Research Center](https://www.uclahealth.org/marc/covid19-mindfulness) UCLA MARC- Covid Mindfulness Resources {% embed url="" %} [Metta: Loving Kindness Meditation](https://www.uclahealth.org/marc/mpeg/05_Loving_Kindness_Meditation.mp3) UCLA MARC - mp3 - audio ### Wellbeing Research: > #### Application to Education > > A focus on wellbeing, broadly defined, in university student populations is important because students are a high-risk population for mental health conditions. Critically, levels of mental distress are increasing, and have been doing so even prior to the COVID pandemic.[38](https://journals.sagepub.com/doi/10.1177/21649561211073077) Depression and suicide-related outcomes in university undergraduate students have a pooled prevalence of 21%,[39](https://journals.sagepub.com/doi/10.1177/21649561211073077) which is considerably higher than the point prevalence estimate of depression in the general population, estimated at 12.9%.[40](https://journals.sagepub.com/doi/10.1177/21649561211073077) In response, we have developed a five-week module on wellbeing science that has been structured around the GENIAL framework.[41](https://journals.sagepub.com/doi/10.1177/21649561211073077),[42](https://journals.sagepub.com/doi/10.1177/21649561211073077) **This module promotes a sense of connectedness to self (individual wellbeing), others (collective wellbeing) and nature (planetary wellbeing), consistent with social ecological theory.** Students are introduced to the concept of ‘sustainable’ happiness and wellbeing, which has been defined in several different – yet complementary – ways. **Students learn how to ‘sustain’ improvements to wellbeing by drawing on theories of behaviour change**[**43**](https://journals.sagepub.com/doi/10.1177/21649561211073077) **while also placing happiness and wellbeing within the context of environmental ‘sustainability’,**[**44**](https://journals.sagepub.com/doi/10.1177/21649561211073077) **in which strategies to promote wellbeing do not involve the exploitation of other people, the environment or future generations.** Students are encouraged to identify activities to promote their mental and physical wellbeing (through interventions to increase positive affect[32](https://journals.sagepub.com/doi/10.1177/21649561211073077) and/or positive health through, for example, physical activity[33](https://journals.sagepub.com/doi/10.1177/21649561211073077)); community wellbeing (e.g. orientation to promote good[45](https://journals.sagepub.com/doi/10.1177/21649561211073077)) and planetary wellbeing (e.g. nature-based mindfulness[46](https://journals.sagepub.com/doi/10.1177/21649561211073077)) while reflecting on how they might work towards overcoming the many sociostructural constraints to wellbeing through, for example, contributions to social change (e.g. volunteering; civic engagement; activism) through commitment to something greater than oneself (i.e. self-transcendence).[22](https://journals.sagepub.com/doi/10.1177/21649561211073077) **Wellbeing is therefore broadly defined and characterised by a focus on multi-levelled perspectives, ensuring that there is scope to improve the wellbeing of students themselves, while also encouraging students to reflect on how they might contribute to collective and planetary wellbeing, supporting efforts for positive societal change**. ### **3. Inspiration Artist:** ### **Sol Lewitt - Conceptual, Minimal Art** > The **idea** is the **machine** that makes the art **Sol Lewitt** > [LeWitt ](https://en.wikipedia.org/wiki/Sol_LeWitt)is regarded as a founder of both [Minimal](https://en.wikipedia.org/wiki/Minimal_art) and [Conceptual art](https://en.wikipedia.org/wiki/Conceptual_art).[\[4\]](https://en.wikipedia.org/wiki/Sol_LeWitt#cite_note-GuggenheimMuseum-4) His prolific two and three-dimensional work ranges from wall drawings (over 1200 of which have been executed) to hundreds of works on paper extending to structures in the form of [towers](https://en.wikipedia.org/wiki/Tower), [pyramids](https://en.wikipedia.org/wiki/Pyramid), geometric forms, and progressions. These works range in size from books and gallery-sized installations to [monumental](https://en.wikipedia.org/wiki/Monument) outdoor pieces. [Wikipedia](https://en.wikipedia.org/wiki/Sol_LeWitt) > In conceptual art the **idea of concept** is the most important aspect of the work.1 **When an artist uses a conceptual form of art, it means that all of the planning and decisions are made beforehand and the execution is a perfunctory affair.** The **idea becomes a machine that makes the art.** This kind of art is not theoretical or illustrative of theories; **it is intuitive,** it is involved with all types of mental processes and it is purposeless. It is usually free from the dependence on the skill of the artist as a craftsman. It is the **objective of the artist who is concerned with conceptual art to make his work mentally interesting to the spectator, and therefore usually he would want it to become emotionally dry.** There is no reason to suppose, however, that the conceptual artist is out to bore the viewer. It is only the expectation of an emotional kick, to which one conditioned to expressionist art is accustomed, that would deter the viewer from perceiving this art [Paragraphs on Conceptual Art](https://kdoore.gitbook.io/cs1335/resources-and-references/resources/conceptual-art#paragraphs-on-conceptual-art-sol-lewitt), , {% embed url="" %} {% embed url="" %} {% embed url="" %} {% embed url="" %} #### [Paragraphs on Conceptual Art - Sol Lewitt: pdf](https://monoskop.org/images/3/3d/LeWitt_Sol_1967_1999_Paragraphs_on_Conceptual_Art.pdf) ### 4. [Modeling Creativity:](https://kdoore.gitbook.io/cs1335/resources-and-references/resources/creativity#modeling-creativity-tom-d-desmedt) Tom D. DeSmedt, > Intuitively, a **model** for **(artistic) artificial creativity** appears to involve the steps illustrated in figure 1. A **“good idea”**, that is, a novel and appropriate solution to a given problem, is selected or **combined from a pool of many possible ideas** (chapters 4 and 5). **A work (of art) that captures this idea is then created** (chapters 2 and 3). **The work is then evaluated** by the author or a community of knowledgeable peers (chapters 6 and 7). Following a **negative evaluation, the idea is subsequently adapted** (chapter 1). We will test this conjecture in a number of case studies and ground it in the literature. {% embed url="" %} Valence (Tom De Smedt, Lieven Menschaert & Ludivine Lechat, 2010) is an interactive installation developed in NodeBox for OpenGL ([http://www.cityinabottle.org/nodebox](https://www.youtube.com/redirect?q=http%3A%2F%2Fwww.cityinabottle.org%2Fnodebox\&redir_token=QUFFLUhqbWl4WWl4T0pKTFR1WEpuOV9fenNSbElrcE5Od3xBQ3Jtc0tuSHU4bXcybWszMXg1dXFiMnlJbVk1dzJJVWluZ3c5MnZHRWZGWXZNTlB6YnBnTVIyQW1TWUtCbGFTUnFvcmhUT3hwS2JhVG1INk5QVlN5aEpFOU5HeG01V0xTY2RNRGdZcU1QZDZua0p2endmelN3Zw%3D%3D\&event=video_description\&v=9ZTy5P8ud0c)) **that represents the player's affect (relaxation or arousal) by measuring alpha brain waves, using a wireless EEG headset.** ### 5. [Nodebox: ](https://www.nodebox.net/download/) Tom D. DeSmedt Nodebox is a visual programming application based on the paradigm of data-flow, as opposed to control-flow paradigm used in Java. Generative art, parametric architecture and design applications often use the data-flow paradigm which uses a network of connected nodes to represent transformations to data that flows through the system. ![Modified Nodebox Example](https://2312795435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgCFUL-cVHjEcqM%2F-MRkvzFXx16gMvxN7Jf8%2F-MRl2Ru0RnHraVQcyVUK%2FScreen%20Shot%202021-01-23%20at%203.00.42%20PM.png?alt=media\&token=fb424d25-c447-40a9-9620-51dfb3c77ce0) ### [Computational Experience Design: Experience](https://kdoore.gitbook.io/computational-experience-design/adaptive-systems/humanist-lens/experience) - link ```clike // Some code /* Available uniforms: // mm_ModulationColor contains red, green, blue levels & surface opacity in alpha // The multiplication in the fragment shader is done by MadMapper, so you shouldn't need that uniform vec4 mm_ModulationColor; // Blend Mode, see possible values in Definitions below. This is handled by default by MadMapper so you should need it uniform int mm_BlendMode; // Used to know if we're rendering to the preview or to an output fullscreen / desktop window / syphon-spout-NDI uniform bool mm_IsRenderingPreview; // The index of the surface in the project (not recommended to use that) uniform int mm_SurfaceIndex; Available inputs: // The normalized texture coordinate for this pixel. Should be accessed with "vec4 FX_NORM_PIXEL(vec2 uv)" in vec2 mm_FragNormCoord; // Normalized position of this vertex in the surface output geometry (independent of input rectangle) in vec2 mm_SurfaceCoord; // Alpha of this point generated from surface / mask feathering. This is automatically handled by MadMapper and // should not be used in an FX in float mm_Alpha; Main Fragment Shader calls fxColorForPixel(...) and then apply modulation color and transparency (feathering / masking), then might adjust color depending on blending mode / highlight selection... */ /*{ "CREDIT": "MadTeam", "TAGS": ["graphics"], "VSN": 1.0, "DESCRIPTION": "Describe your FX here", "MEDIA": { "REQUIRES_TEXTURE": false, "GL_TEXTURE_MIN_FILTER": "LINEAR", "GL_TEXTURE_MAG_FILTER": "LINEAR", "GL_TEXTURE_WRAP": "CLAMP_TO_EDGE", }, "INPUTS": [ { "LABEL": "Speed", "NAME": "fx_speed", "TYPE": "float", "DEFAULT": 0.1, "MIN": 0.0, "MAX": 1.0 }, { "LABEL": "Blend", "NAME": "fx_blend", "TYPE": "float", "DEFAULT": 0.1, "MIN": 0.0, "MAX": 1.0 }, ], "GENERATORS": [ {"NAME": "fx_time", "TYPE": "time_base", "PARAMS": {"speed": "fx_speed", "speed_curve": 2, "link_speed_to_global_bpm":true}}, ] }*/ #include "MadNoise.glsl" vec4 fxColorForPixel(vec2 mm_FragNormCoord) { vec2 uv; uv.x = fract(mm_FragNormCoord.x+fx_time); uv.y = mm_FragNormCoord.y; float n = vnoise(uv * sin(fx_time)) - 0.5; //float return FX_NORM_PIXEL(uv + mix(0.0,n,fx_blend)); } ```