Week 12

My computer decided to run extremely slow just before hand-in so I was stressed and felt like a headless chicken. I need to start designing how I want to use the data in the real world. I had suggestions for posters, stickers and cards. Over the years, cards have meant a lot to me when I am going through a rough patch. It can be easier to put feelings down into words and getting letters can make your day as it is full of love, positivity and it means someone was thinking about you even though you feel alone.

I first place in all the answers. As much as I love the colour it feels a little overwhelming so to break it down I decided to focus on one answer at a time. This could be using just one part on an answer or all of it, depending on length. I next started working on placement and colour but I decided that the colour dots stand out better against white. I next looked it how I could translate the answer and explain the question. I decided to put this on the back. I wanted the translation so that people can feel the affirmation that has been given to them.

I also added an extra column into the spreadsheet with my name and word of affirmations project (both in full and as an acronym) to add as a logo and a signature as I found during research.

https://www.lifewire.com/parts-of-a-greeting-card-1077348 says:

“On commercially-produced greeting cards, the back of the card is where you’ll find the name of the greeting card company, logo, copyright notice, and contact information. When making your own greeting cards, you might want to include your name and date or a personal stamp or logo.”

Other examples:

Mockups

When deciding where I would want my design to be located, my first thought was I want them to be a reminder and I know that a place that people could use some affirmations are doctors offices and therapy offices/rooms. However, I wasn’t sure how to convey this message. I then thought about where do people often get cards from and that lead me to bookstores.

Workflow

Below are my two workflows. One I did in class the other at home as I wanted to make it a little more tidy and hopefully more explanation.

Final

I chose an answer from each question to make into a card to show some variety and to get a range of different answers for different questions.

It was cool to see what everyone had designed and it was amazing to see everyones hard work pay off and seeing skills develop.

Outputs

Questions and answers

What I did was take some of the different answers and showing them. As a part of a series it would be cool to see more of the answers on cards as they can help a range of people rather than just having a couple of answers that may not suit the situation.

What are some word of affirmations that you would you say to someone going through a hard time?
I understand what you are going through Want to go for a drive just because I am here for anything you need
You are strong You can do it Kia kaha Keep being brave
You are loved You are worthy You can do this
It is ok to feel overwhelmed We are here for you
Breathe Celebrate the good  Planning moves you forward
I can see that you are struggling Is there anything I can do
What are some word of affirmations that you would want someone to say to you when going through a hard time?
Want to go for a drink Want to hang out How are you really
I am here for you you can do this you are strong
You are loved You are worthy I am here for you Lets do this together
They are here for me That my worries are valid 
You are strong One step forward daily
I can see you Are having a rough time but remember we appreciate you
What would you want to tell your younger self? Any advice?
People will always let you down focus on yourself  do not wait for others Be the best version of yourself
One day at a time Keep asking for help It will get better
It does not get easier as you get older You need to form healthier habits now and deal with with your problems before they ruin your relationships and your health It is okay to ask for help
Keep breathing and take it one day at a time
Save Keep fit Choose happiness
You will get better at this in time
What would you want to tell your future self?
I hope you are better than me
It gets better
I am so proud that you got sober and reached out for help and recovery
Keep breathing and take it one day at a time
Enjoy each day Admire the outdoors Be kind
Remember the lessons I learned
What is a quote that you always replay when things get tough?
Will it matter in five years
She is beautiful piece of broken pottery put back together by her own hands And a critical world judges her cracks while missing the beauty of how she made herself whole again JM Storm
Everyone makes mistakes what matters is how you pick yourself up
All that I know is I am breathing now
I normally just go over the lyrics to my favorite songs
What is your name? This question can be left unanswered if you wish
Joshua
Bridget
Stephen Mills 
Camm
Comments or anything else you want to share?
Sometimes words are not necessary company and a hug can oftentimes be enough I feel guys do not get that sort of support as much as women
Thanks for doing this
Good luck with your project

Next Steps

To take this further, it would be cool to see all the answers as cards. I also would love for people to make their own using a website so that they can add their own affirmations depending on the situation as well as be able to read what others have said.

Code

I ended up taking the blending modes out as they only work in Processing.

import processing.pdf.*;
PGraphicsPDF pdf;

int maxHeight = 20;
int minHeight = 20;
int letterHeight = maxHeight; // Height of the letters
int letterWidth = 20; // Width of the letter

int x = 20; // X position of the letters
int y = 20; // Y position of the letters

boolean newletter; //true or false, tells the draw function if it should be creating ellipses

boolean saveOneFrame = false;
boolean drawFile = false;

int numChars = 26; // There are 26 characters in the alphabet
PImage[] colors = new PImage[numChars+1]; //array of images, 26 letters plus space
Table affirmation;

int headerNumber = 0;

PImage img; // Declare variable “a” of type PImage

void setup() { //runs once
pdf = (PGraphicsPDF)beginRecord(PDF, “wordsofaffirmation15.pdf”);

size(900, 700);
noStroke();
colorMode(HSB, numChars);
//blendMode(DARKEST);
//blendMode(MULTIPLY);
background(0, 0, 100);
saturation(200);
String alphabet = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”; //list of file names

for (int i = 0; i < numChars; i++) { //controls the colours, loop happens 26 times, creates 26 values to the array, sets a hue value for each key
colors[i] = loadImage(alphabet.charAt(i)+”.png”); //starts at 0 = A and loads the file in
}
colors[26]=loadImage(” .png”);
}

void keyPressed() { //press space bar or any other keyboard button
headerNumber++; //goes to next header collumn
background(0, 0, 100); //background colour
drawFile = false; //if not drawFile draw
x = 20; //x position
y = 20; //y position
}

void draw() { //repeats
pdf.nextPage();

if (!drawFile) { //! means if not drawFile

String[] headers = {"What are some word of affirmations that you would you say to someone going through a hard time?", "What are some word of affirmations that you would want someone to say to you when going through a hard time?", "What would you want to tell your younger self? Any advice?", "What would you want to tell your future self?", "What is a quote that you always replay when things get tough?", "What is your name? This question can be left unanswered if you wish", "Comments or anything else you want to share?"};  

affirmation = loadTable("WordsofAffirmation2.csv", "header"); //load table, ignores header
ArrayList<String> allanswers = new ArrayList<String>(); // A string that has all the answers
for (TableRow row : affirmation.rows()) { //a new string starts a new row
  allanswers.add(row.getString(headers[headerNumber]));
}

for (int j = 0; j < allanswers.size(); j++) { //loop through the amount of times there are rows in the .csv
  String row = allanswers.get(j);//stores the row
  for (int i=0; i<row.length(); i++) { //goes through once for every character in the row
    String test = row.charAt(i)+""; //turns the character into a string 
    test=test.toUpperCase(); //makes sure it is a capital letter
    //img = loadImage(test.toUpperCase()+".png");  // Load the image into the program, detects that it is a .png  
    if (row.charAt(i)==' ') { //checks for space, that isn't in the alphabet
      img=colors[26];
    } else {

      img = colors[test.charAt(0)-'A']; //key is typed in, colour is accessed from colour array, string is 1 character long, needs to get the character from the string
      //println(allanswers);
    }




    processing(row.charAt(i), row, i); 
    if (newletter == true) { //checks to see if a letter is needed to be drawn and then draws the letter
      int y_pos;
      if (letterHeight == maxHeight) { //box of letter
        y_pos = y;
        noStroke();
        colorMode(HSB, numChars);
        image(img, x, y_pos, 35, 35 ); //controls image location and size
      } else {
        y_pos = y + minHeight;
        noStroke();
        colorMode(HSB, numChars, 0, 0, 100);
        println(x, y);

        image( img, x, y_pos, letterWidth, letterHeight );
      }
      newletter = false;
    }
  } //end of going through every character
  x = 20; //changes white space on left of sentence
  y+= maxHeight+35; //controls leading
}//back around for a new row
drawFile = true;

}
}

void processing(char letter, String row, int index)
{
// If the key is between ‘A'(65) to ‘Z’ and ‘a’ to ‘z'(122)
if ((letter >= ‘A’ && letter <= ‘Z’) || (letter >= ‘a’ && letter <= ‘z’)) { //converts letter to arrary (colour)
if (letter <= ‘Z’) {
letterHeight = maxHeight; //holds capital letters height
} else {
letterHeight = minHeight; //lower case letters
}
} else {
fill(255); //black
letterHeight = 30;
}

newletter = true; //boolean, true or false

int numberOfCharacters=row.indexOf(‘ ‘, index)-index; //Number of characters per row before going to next line
//prints the sentence, the letter that is being drawn right now, the number of characters that is left to draw in the word, println(row+” “+letter+” “+numberOfCharacters+” “+index);
x = ( x + letterWidth ); // Update the “letter” position
int endX=x+(letterWidth*numberOfCharacters); //x location of the last character/letter of the word

// Wrap horizontally
if (endX > width – letterWidth -62) { //-80 controls right white space
x = 10; //changes white space on left of sentence
y+= maxHeight+20;
}

// Wrap vertically
if ( y > height – letterHeight) {
y = 20; // reset y to 20 if it hits the bottom
}
}

void mousePressed() {
endRecord();
exit();
}

Three.js – Spinning Planets

After being inspired to do a space themed threeJs final, I learnt how to add in textures, control different functions and modify them to do what I want them to do as well as take something and put my own spin on it.

After deciding that I wanted my main focus to be on Earth and finding that just using the snippets felt like I wasn’t learning code and what threeJs can do, I decided to push it a little further. I did this by adding two meshes, one a jpg and one a png on top of each other to create layers. From there I wanted to have them spin at different speeds to make it clear that they were two different elements. I decided to have Earth spin slower than the clouds but still visible that it is rotating. Having the different meshes rotate at different speeds created a visually appealing loop. 

The next element I wanted to add were some stars which I created using the particles snippet. However, instead of having them spin around screen, I wanted them to stay in one spot and then I wanted them to twinkle. In the particles snippet you can have the particles change colour but I decided that having one colour worked well and then having the particles slightly smaller and then fade in and out of brightness created a nice twinkle effect and that added another layer to the final output and tied the space theme together.

I wanted to add in one more element as it was becoming more obvious that this was based in space with a black background, stars and Earth, I thought that having a moon would also be a cool idea. It took a while to play with the code to get the positioning of the moon correct but once it was it was easy to create the rotation.

A lot of the struggles I had with this program Tim was able to help me with. I struggled with adding two meshes on top of each other but Tim suggested making the cloud layer slightly bigger would fix the problem and it did just that. He also came up with the math code to create the brightening and fading for my stars. Thank you Tim.

You can view it here – //threejsplaygnd.brangerbriz.com/s/?id=8238 and I believe I managed to get the moon working.

Understanding the code –

Below is the code. There are image which has my notes explaining what it does and then my actual code and the images I used.

Code –

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<style>

body {

background-color: #ffffff; 

margin: 0;

overflow: hidden;

}

</style>

</head>

<body>

http://threejsplaygnd.brangerbriz.net/js/three.min.js

http://threejsplaygnd.brangerbriz.net/js/Detector.js

<script>

​

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var camera, scene, renderer; 

var geometry, material, mesh; //the different variables that are used. These also control the differnt aspects so I can do different things with them individually 

var cloud_geometry, cloud_material, cloud_mesh;

var moon_geometry, moon_material, moon_mesh;

​

function setup() {

​

var W = window.innerWidth, H = window.innerHeight;

renderer = new THREE.WebGLRenderer();

renderer.setSize( W, H );

document.body.appendChild( renderer.domElement );

​

camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );

camera.position.z = 500;

​

scene = new THREE.Scene();

//moon

                map = THREE.ImageUtils.loadTexture(‘https://lh3.googleusercontent.com/proxy/Knq3LMr0rgQKzbVDRM_S-f9jUzEqHN8tOWQU59BJNjoIjfYNeTE4mlaMb3wH1ZuVXQfjMoj_vVUtKenJmodYos-h&#8217;); //this loads the image using the imageURL

moon_geometry = new THREE.SphereGeometry(150, 100, 100); //this controls the size

moon_material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, color: 0xdcdcdc, map: map}); //this controls the colour, shading, transparency and opacity (if stated) of the shape

moon_mesh = new THREE.Mesh(moon_geometry, moon_material);

map.wrapS = map.wrapT = THREE.RepeatWrapping;

map.repeat.set( 1, 1 );

moon_mesh.scale.x = moon_mesh.scale.y = moon_mesh.scale.z = 0.39; //this controls the size

moon_mesh.position.y = 150.23; //this controls the X and Y locations

                moon_mesh.position.x = 180.23;

scene.add(moon_mesh); //this loads everything

//Clouds

map = THREE.ImageUtils.loadTexture(‘https://upload.wikimedia.org/wikipedia/commons/d/df/Earth-clouds.png&#8217;); //this loads in the image url to use as a texture for the shape

cloud_geometry = new THREE.SphereGeometry(150, 100, 100);

cloud_material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, color: 0xdcdcdc, map: map, transparent: true, opacity: 1});

cloud_mesh = new THREE.Mesh(cloud_geometry, cloud_material);

map.wrapS = map.wrapT = THREE.RepeatWrapping;

map.repeat.set( 1, 1 );

cloud_mesh.scale.x = cloud_mesh.scale.y = cloud_mesh.scale.z = 1.01;

scene.add(cloud_mesh);

//Earth

map = THREE.ImageUtils.loadTexture(‘https://steamuserimages-a.akamaihd.net/ugc/545263034473954343/68F4AB04814E6E57B78A848CEF3852476F0B00A8/?imw=637&imh=358&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true&#8217;);

geometry = new THREE.SphereGeometry(150, 100, 100);

material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, color: 0xdcdcdc, map: map});

mesh = new THREE.Mesh(geometry, material);

map.wrapS = map.wrapT = THREE.RepeatWrapping;

​

map.repeat.set( 1, 1 );

scene.add(mesh);

//Stars

geometry = new THREE.Geometry();

for ( i = 0; i < 5000; i ++ ) {

var vertex = new THREE.Vector3();

vertex.x = 1000 * Math.random() – 500;

vertex.y = 1000 * Math.random() – 500;

vertex.z = 1000 * Math.random() – 500;

geometry.vertices.push( vertex );

}

material = new THREE.ParticleBasicMaterial( { size: 3, sizeAttenuation: false, transparent: true } );//this mentions the size of the star pixels

material.color.setHex( 0xff00ff );

particles = new THREE.ParticleSystem( geometry, material );

particles.sortParticles = true;

scene.add( particles );

//Background

bg = document.body.style;

bg.background = ‘#000000’;

​

}

​

function draw() {

​

requestAnimationFrame( draw );

//rotation cntrols the speed and the angle of which is rotates

cloud_mesh.rotation.x = Date.now() * 0.0000;

cloud_mesh.rotation.y = Date.now() * 0.0003;

cloud_mesh.rotation.z = Date.now() * 0.00000;

mesh.rotation.x = Date.now() * 0.0000;

mesh.rotation.y = Date.now() * 0.0001;

mesh.rotation.z = Date.now() * 0.0000;

moon_mesh.rotation.x = Date.now() * 0.0000;

moon_mesh.rotation.y = Date.now() * 0.0001;

moon_mesh.rotation.z = Date.now() * 0.0000;

var time = Date.now() * 0.0003; //size of pixel stars

h = (((Math.sin( Date.now() * 0.002 ))+0.75)/4)+.2; //controls the speed at which the star pixels fade and brighten

                console.log(h);

material.color.setHSL( 0.5, 1, h ); //colour of pixel stars

renderer.render( scene, camera );

​

}

​ setup();

draw();

​

</script>

</body>

</html>

Images –

The cloud image won’t show on a white page but you can click here to see the image or go here to the website – https://commons.wikimedia.org/wiki/File:Earth-clouds.png

https://steamuserimages-a.akamaihd.net/ugc/545263034473954343/68F4AB04814E6E57B78A848CEF3852476F0B00A8/?imw=637&imh=358&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true

Earth website – https://steamcommunity.com/sharedfiles/filedetails/?id=348783119

https://lh3.googleusercontent.com/proxy/Knq3LMr0rgQKzbVDRM_S-f9jUzEqHN8tOWQU59BJNjoIjfYNeTE4mlaMb3wH1ZuVXQfjMoj_vVUtKenJmodYos-h

Moon can be seen here – http://solarviews.com/cap/moon/moonmap.htm

Video –

Processing – Ellipse Painting

The ellipse painting, I wanted to be able to create an image in the code 

For my space pixel painting set of code, I dragged and inserted my images to processing so that they are located in the data directory of the current sketch. I set up the screen size to be fullscreen and then I loaded in the different images so that they are ready to use. 

You start by setting up the variable name and tell processing what it is equal to and in this case you tell it to loadImage and then you put in the full name of the filename. For this project I used jpg and png for my different images. I also resized the images so that they fit the screen better. I set the background to black to resemble space. I also decided that I didn’t want the cursor to show unless the mouse is pressed. 

I wanted there to be two different parts to this code. One where people can watch something happen and another where they can take part and play with it a little. When the mouse is released it will show the image that is made out of ellipses in front of you. It will continue to add ellipses to the image creating a twinkling effect until the mouse is pressed. This has two functions. One it restarts the code so you can see it from the beginning and two it shows the image in full without ellipses and you can move the cursor around which is now a rocket ship. 

Understanding the code –

Below is the code. There is the image which has my notes explaining what it does and then my actual code and the images I used.

Code –

PImage galaxySpace3;
PImage rocketFire;
PImage spaceAlone2;

void setup() {
fullScreen();
galaxySpace3 = loadImage(“galaxySpace3.jpg”);
spaceAlone2 = loadImage(“spaceAlone2.jpg”);
spaceAlone2.resize(displayWidth, displayHeight);
rocketFire = loadImage(“rocketFire.png”);
rocketFire.resize(0, 500);
background(0);
noCursor();

}

void mouseReleased() {
background(0);
noCursor();
}

void draw() {
for (int i = 0; i < 75; i++) {
float x = random(width);
float y = random(height);
color c = galaxySpace3.get(int(x), int(y));
fill(c);
noStroke();
ellipse(x, y, 10, 10);
}

if (mousePressed) {
background(spaceAlone2);
cursor(rocketFire);
}
}

Images –

Video –

Conditional Design – Constellations

Constellations 

  1. Take turns placing a dot in the most empty space on the paper as quick as possible, using your chosen colour. For 3-5 minutes
  2. Connect the dots you made with a line that doesn’t cross the lines of another player. 
  3. These lines must be straight. Try complete this is in under 5 minutes
  4. Pay attention as you can have up to 2 lines coming off of one dot
  5. Each dot must have at least one line coming off of it
  6. You don’t have to only draw off your own lines and dots

This code gets people to think quickly about where to put the dots in the most empty space of the page. The lines which can be difficult to quickly add onto the dots gets people to think more about where they are going to place their next line. The end result makes up what looks like a constellations. 

The bright colours mimic the colourfulness of my other sets of code. I decided on white paper as the colours didn’t show on black paper and white makes the colours and the end result stand out. 

Final
In the exhibition
Feedback

Week 6

I was nervous for class and that maybe my code wouldn’t work but it all went really well and people seemed to like what I had made. It was impressive to see what people had made and how we had further developed the same skills in class and all came up with outcomes. I loved the ones where you can interact with the sketch. I didn’t take a lot of photos at this but it all went really well.

My feedback sheet