CODING FOR CREATIVE PRACTICE

[tinaiscoding-blog]

~ COASTERS ~

* FINAL POST *

To sum up my final project:

I created coasters using Processing and the mathematical equation of the rose.

Input: my own data source: Steps documented with Google Fit

Output: laser cutting

Technology:  software: Processing hardware: laser-cutter

My Workflow:

Write Code

fill in the Data: Steps and Distance (recorded with Google Fit)

click “play” and render the code

click on the result to save a .pdf-file

open the generated .pdf-file (which has vector graphics) in Adobe Illustrator

click on the path

click object –> path –> outline –> stroke

choose no fill and set an 0.01pt red outline for the laser-cutter/vinyl cutter

safe

Final Coasters:

~ ~  EXHIBITION-TIME

POSTER @ EXHIBITION:

Following you will find my Final Code:

import processing.pdf.*;

final int drawingWidth = 1200; final int drawingHeight = 1200; float size = 500;

void setup() {  size(1200, 1200);

 background(255, 255, 255);

// Only once noLoop(); }

void draw() {

 // Begin saving the PDF  beginRecord(PDF, "01.09.2.pdf");

 // We only want the outline of the shape  noFill();

 // Width of the line. Make it THICC in order to get a good laser cutting result..  strokeWeight(40);

 // Don't add joins  strokeJoin(MITER);

 // Now we can finally draw the shape  beginShape();

 // Center point in the drawing  float centerX = drawingWidth/2;  float centerY = drawingWidth/2;

 // Shape of the rose; See Wikipedia  float k = 10.0;  

 float dis = 1.0;  float step = 6.0;

 k = dis/step;

 float maxTheta = 12*PI;

 // How many points do we want? 100 seems to work fine  int iters = 100;  for (int i = 0; i < iters+3; i++) {    int realI = i % iters;    float theta = realI*(maxTheta/(float)iters);    float x = size*cos(k*theta)*cos(theta);    float y = size*cos(k*theta)*sin(theta);

   curveVertex(x+centerX, y+centerY);  }

 // Finish the shape  endShape();

 // Store the PDF  endRecord(); }

[tinaiscoding-blog]

// COMPARE: OLD CODE vs. NEW CODE

Because of the problems I’ve had with the outline I came up and googled some ideas how to fix the code. I tried different things until it finally worked by combining this four functions: (if you click on the functions you will be forwarded to the documentation-website of processing)

strokeWeight()

strokeJoin()

beginShape()

curveVertex() 

Following you will find the code of my first trial as well as my final one:

OLD CODE

boolean saveOneFrame = false; import processing.pdf.*;

final int drawingWidth = 600; final int drawingHeight = 600; float d_step = 0.001; float size = 200; float k = 10;

void setup() {  size(600, 600); }

void draw() {

 if (saveOneFrame == true) {    beginRecord(PDF, "01.09.pdf");  }

 background(255, 255, 255);  float centerX = drawingWidth/2;  float centerY = drawingWidth/2;

 k = 1.0/6.0;  for (float i = 0; i < frameCount*PI; i += d_step) {    float x = size*cos(k*i)*cos(i);    float y = size*cos(k*i)*sin(i);

   point(x+centerX, y+centerY);  }

 if (saveOneFrame == true) {    endRecord();    saveOneFrame = false;  } }

void mousePressed() {  saveOneFrame = true; }

NEW CODE > with the outline of the shape

import processing.pdf.*;

final int drawingWidth = 1200; final int drawingHeight = 1200; float size = 500;

void setup() {  size(1200, 1200);

 background(255, 255, 255);

 // Only once  noLoop(); }

void draw() {

 // Begin saving the PDF  beginRecord(PDF, "01.09.2.pdf");

 // We only want the outline of the shape  noFill();

 // Width of the line. Make it THICC in order to get a good laser cutting result..  strokeWeight(50);

 // Don't add joins  strokeJoin(MITER);

 // Now we can finally draw the shape  beginShape();

 // Center point in the drawing  float centerX = drawingWidth/2;  float centerY = drawingWidth/2;

 // Shape of the rose; See Wikipedia  float k = 10.0;  

 float dis = 1.0;  float step = 6.0;

 k = dis/step;

 float maxTheta = 12*PI;

 // How many points do we want? 100 seems to work fine  int iters = 100;  for (int i = 0; i < iters+3; i++) {    int realI = i % iters;    float theta = realI*(maxTheta/(float)iters);    float x = size*cos(k*theta)*cos(theta);    float y = size*cos(k*theta)*sin(theta);

   curveVertex(x+centerX, y+centerY);  }

 // Finish the shape  endShape();

 // Store the PDF  endRecord(); }

[tinaiscoding-blog]

// Trial and Error -> SOLUTION

I’ve thought a lot about the problem with circles and the outline.

Finally I managed to edit the code that I have outlines instead of circles. So, because I just want the Outline of the shape I set a noFill with a really thick line (so get a good result for the laser cutter). I also don’t want the joins to add so I set a strokeJoin(MITER) and then I finally draw the shape.

My Workflow is now: 

Open my Code 

fill in the Data: Steps and Distance (recorded with Google Fit)

click “play” and render the code 

click on the result to save a .pdf-file

open the generated .pdf-file (which has vector graphics) in Adobe Illustrator

click on the path

click object --> path --> outline --> stroke

choose no fill and set an 0.01pt red outline for the laser-cutter/vinyl cutter

safe

[tinaiscoding-blog]

// Trial and Error

To create a file which I can use for Laser-Cutter/Vinyl-Cutter was harder than imagined. Because of the equation I don’t have a simple outline, I’ve a a lot of circles.. So I try to figure out what’s happening and how I can improve my code to get a simple, clean outline which I can cut.

a lot of circles.. no outline.

changed the code-line “point” [ point(x+centerX, y+centerY); ] to “line” [ line(lastX+centerX, lastY+centerY, x+centerX, y+centerY); ] But still, I need to get rid of the circles.

Stay tuned. ;)

[tinaiscoding-blog]

Entourage _ Context

// Week 10

[tinaiscoding-blog]

LECTURE 8

// WEEK 8

HOW TO USE: FOR LOOP

[tinaiscoding-blog]

// WEEK 9 - WORKING ON ASSIGNMENT II

I have done the “Fab Lab About”-Tour to learn something about our fablab and to be able to use it. Now I’m waiting for a Lasercutter-Workshop that I can start cutting out examples.

I have also created an excel document and transferred my made steps from Google Fi to it. So I can use it as my data source for my code.

For example:

My steps on the 30. September 2017 = 14.000 steps  And the Distance was about 12 Kilometers. This is the result:

My steps on the 01. October 2017 = 6.000 steps The Distance was about 4 kilometers. This looks like that:

Workflow:

Input: My own data source: Steps documented with Google Fit

Output: print (and maybe laser cutting)

Technology:  software: Processing hardware: printer (and maybe laser-cutter)

[tinaiscoding-blog]

// WEEK 8 - WORKING ON ASSIGNMENT II

trying some to bring some equations into code.

ROSE

“In mathematics, a rose or rhodonea curve is a sinusoid plotted in polar coordinates.” Wikipedia

https://en.wikipedia.org/wiki/Rose_(mathematics)

http://mathworld.wolfram.com/Rose.html

I’d like to experiment with the equation of the “rose”

MY TRIAL:

[tinaiscoding-blog]

TASK FOR ASSIGNMENT II

// WEEK 7

Use Code to create something that happens outside of the computer -> 3D-Elements for 3D-Printer, Lasercutter, Print, Installation

Print-Output: Use Processing to print something out

Select a design what will drive your creative output: contrast, movement, balance, scale, perspective, rhythm

„HE_Mesh“ (https://github.com/wblut/HE_Mesh) or

„Toxiclibs“ (http://toxiclibs.org/)

MousePress: Saves one PDF of the contents of the display window each time the mouse is pressed.

import processing.pdf.*;

boolean saveOneFrame = false;

void setup() {

 size(600, 600);

 frameRate(24);

}

void draw() {

 if(saveOneFrame == true) {

   beginRecord(PDF, "Line.pdf");

 }

 background(255);

 stroke(0, 20);

 strokeWeight(20.0);

 line(mouseX, 0, width-mouseY, height);

 if(saveOneFrame == true) {

   endRecord();

   saveOneFrame = false;

 }

}

void mousePressed() {

 saveOneFrame = true;

}

RandomBook save many pages at once/creates a five page book of random lines

import processing.pdf.*;

PGraphicsPDF pdf;

void setup() {

 size(594, 842);

 // randomSeed(0);  // Uncomment to make the same book each time

 pdf = (PGraphicsPDF)beginRecord(PDF, "RandomBook.pdf");

 beginRecord(pdf);

}

void draw() {  

// insert/create what you want to print out

 if(frameCount == 5) {  // Number for how many pages

   endRecord();

   exit();  // Quit

 } else {

   pdf.nextPage();  // Tell it to go to the next page

 }

}

I’d like to create a 2D picture to print and which can also be cut out in a laser cutter.

// Research // Examples in Processing // 

Generative Flower

Metamorphosis

The Jewel in the Heart of the Lotus

create your own font

simple examples

parametric curves / Butterfly

Paths to Wholeness: Fifty-Two Flower Mandalas

Flower of Life (with Minim Library)

Generative Art

Generative Design

Generative Design (OpenProcessing)

Simple Generative Design with Processing

[tinaiscoding-blog]

LABYRINTH

// FINAL WORK IV: UNITY

I created a Labyrinth Game where you can walk through and find your way to the ball in the middle. For the walls I used several 3D Objects (“Cube”) and I gave them a nature bush Texture. For the ball in the middle I used a Sphere which by collision switch from red to green. I also created a 3D Text to signalize the Start. I wanted the Start-Sign to slide up and disappear. To implement this I created a empty “GameObject”, which reacts with by a Script called “MoveStart” and it will be triggered by walking into the “GameObject”. First, the Script is searching for the “startText”-Object. If it finds that Object and will be triggered, it will let the “startText” move upward until the distance is more than 100. If it’s more than 100 it will destroy itself - what means, it will disappear.  At the Finish I placed a Spotlight as well as a checkered flag.

[tinaiscoding-blog]

VERTICAL EQUALIZER

// FINAL WORK III: QUARTZ COMPOSER

With the 3D Transformation Patch and the Iterator is duplicated a cube ten times. To get this 3D Effect I played with the colours of the Cube. The Cubes are changing their size (width and height) through moving the mouse in different directions.

[tinaiscoding-blog]

ORIGAMI CRANE

// FINAL WORK II: PROCESSING

First I set a window size and drew a background. As sun I created a ellipse. I wanted the sun going red, so I let the green decreases with time. And to create a slow sunset I let the ellipse move in y-direction slower than in x-direction by using a frameCount. To create the water I drew a quadrat with a filling. For the crane I create various triangle. So that the crane moves with the mouse movement, I calculate a rotation angle depending on the mouse x-position.

[tinaiscoding-blog]

INSECT

// FINAL WORK I: THREE JS

I created two TorusKnot as a Basic with a MeshBasic Material which has a flat shading and shows the wireframe with different sized. I let the TourKnots move with the mesh.render in y- and x-direction with different speed. I also set different red-tones to the Scene.

CODE THREE JS

[tinaiscoding-blog]

// LABYRINTH GAME

week 4 / trial 3

I created a Labyrinth Game where you can walk through and find your way to the ball in the middle. For the walls I used Cubes and for the ball in the middle I used a Sphere. I also created a 3D Text to signalize the Start. If you touches the Sphere in the middle it switches from red to green.

[tinaiscoding-blog]

// BUBBLESTARS

week 4 / trial 2

The name “Bubblestars” combines “Bubble” and “Stars”. Because, if a Bubble pop yellow particles, which look like Stars, emerge. To create the Bubbles I used a Sphere with the “Bubble” Material. I duplicated the Sphere with the “Duplicator” and I let the Bubbles move & rotate random with the “Move Random” as well as the “Rotate Random” Script. To have different sized Bubbles I used the “Size Random” Script. I also added a Audio Source to the whole Scene as well as a Sound to signalize when a Bubble explode. And a “Pop Collision” Script which created the Particle, when you touch the Bubbles.

[tinaiscoding-blog]

// SPACE RACE

week 4 / trial 1

In this Example I created a sphere and duplicated it with the “Duplicator”. To the Sphere itself I added a Scrip called “Move Random” which I used to let the duplicated Spheres move in different directions. I also added a “Trail Renderer” which I used to display a trail by motion of the spheres. To make it more interesting I set the Material of the Mesh Renderer transparent.

[tinaiscoding-blog]

// LECTURE 4

Unity

Unity is a gaming engine which is primarily used to develop video games and simulations for computers, consoles and mobile devices.

> Examples <

It is nice because you can walk around & discover the world!

Hierarchy (Objects)

Scene (3D-World)

Inspector (Object Settings)

dopple-click on list-object will zoom to the object middle-mouse-button allows you to look around escape you can move the mouse again & come back to the editor mode

Box-collider = turn off to run through objects

Collision-Script = something happen, when I touch it

Distance Rotate Reaction = reacting to the distance to the object

w = forwards s = backwards a = left d = right

Behaving of player game object?

sphere should: roll around, bump into walls, stay on the ground & not fly into the space, collide and pick them up if needed —> rigidbody component =

„Add Component“ -> „Physics“ -> „Rigidbody“