CREATIVE CODING

13 August

The course has ended, but I’m still working with string of words, following the the tutorial of John Park

String []verses = {“All those ships that never sailed”, “The ones with their seacocks open”,
“That were scuttled in their stalls”, “Today I bring them back”, “Huge and intransitory”,
“And let them sail”, “Forever”,”Bob Kaufman”};
String textHolder = “test”;

void setup() {
size(900, 600);
PImage img;
img = loadImage(“bobkaufman.jpg”);
background (img);
println(verses.length);
textSize(30);
}

void draw() {
//for(int i=0; i< verses.length; i++){
// }
}
void mousePressed() {
textSize(random(10,50));
textHolder =verses[int(random(verses.length))];
text(textHolder, mouseX, mouseY);
}

The result in – https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/123714122 

 

11 August

Sometime ago as I explored painting techniques and collage I found some interesting tutorials using calligraphy – https://youtu.be/WZ5ConE6kgM.
I still remember how the old accounting books used «french calligraphy»and «english calligraphy» . I myself have learnt, in my youth, these types of calligraphy.
Some languages have very artisitic type like the Chinese calligraphy – https://youtu.be/MEN0CzGv5-Y or the Thay – https://youtu.be/LzGQCR8iDMw, or arabic – https://youtu.be/K7e4QBxtCl8. It’s a true art!

10 August

PostSpectacular – http://postspectacular.com/

Genotyp (2004) – http://www.genotyp.com/

Text Rain instalation (1999) – http://camilleutterback.com/projects/text-rain/

Tokyo director – http://tdctokyo.org/eng/?post_type=award

Motion design film – http://www.artofthetitle.com/titles/ http://www.artofthetitle.com/titles/

An animation on the History of Typography

8 August

A 10 minute video about the History of Type

5 August

Peers’ exercises over typography and sketch W5_05

Typewriter_TextAgents_withSound (Converted)
Crazy Character Claque
1950crazyclock3

w5_05_vowels

text
My Name
letters_Abdullah Al-Sabbagh

text3

text1

text

35. Funprogramming rotating objects – wave of rectangles – http://funprogramming.org/35-A-grid-of-rotating-objects-creates-a-wave-of-rectangles.html – TEST

 

loat rot = 0;

void setup() {
size(400, 400);
background(#0DE5FF);
smooth();
noStroke();
}
void draw_rotating_rectangle(float x, float y, float rect_size, float r) {
translate(x, y);
rotate(r);

rect(0, 0, rect_size, rect_size);
resetMatrix();
}
void draw() {
background(#0DE5FF);

float x = 0;
while (x <10) {
float y = 0;
while (y < 10) {
// we give a unique rotation amount to each rectangle, depending
// on which column and row the rectangle is located (x and y)
draw_rotating_rectangle(30 + x * 50, 50 + y * 30, 16, rot + x + y);
y = y + 1;
}
x = x + 1;
}
rot = rot + 0.1;
}

31 August 2016

Funprogramming – 76. Slowly morphing bezier curves – http://funprogramming.org/76-Slowly-morphing-bezier-curves.html. Variation in Padlet – https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/120784550

void setup() {
size(500, 400);
smooth();
fill(#B360C6);
stroke(#F7D6FF);
strokeWeight(5.0);
strokeCap(ROUND);
}
void draw() {
background(#3F2F43);
float t = frameCount / 100.0;
for (int i = 0; i < 10; i++) {
bezier(
width/1, height,
width/1, noise(100, i, t)*height,
noise(200, i, t)*width, noise(400, i, t)*height,
noise(300, i, t)*width, noise(500, i, t)*height
);

bezier(
width/-100, height,
width/-100, noise(100, i, t)*height,
noise(200, i, t)*width, noise(400, i, t)*height,
noise(300, i, t)*width, noise(500, i, t)*height
);
}
}

30 August 2016

W5_04 – Class (variation – https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/120590831

/*
* Creative Coding
* Week 5, 04 – Moving balls 2
* by Indae Hwang and Jon McCormack
* Updated 2016
* Copyright (c) 2014-2016 Monash University
*
* This sketch shows the basics of classes and objects in Processing
* It defines a class called “Ball” with one member function: “display()”
*
*/
MovingBall centre;
MovingBall[] arounds;

int numOfBalls;

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

numOfBalls = 1000;

centre = new MovingBall(width/2, height/2);

arounds = new MovingBall[numOfBalls];

for (int i=0; i < arounds.length; i++ ) {
arounds[i] = new MovingBall(random(width), random(height) );
}

background(#5F1212);
}

void draw() {
// background(#5F1212);

centre.run();

for (int i=0; i < arounds.length; i++ ) {
arounds[i].run();
}
}

W5_03 – Class Ball (variation) – https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/120585049

/*
* Creative Coding
* Week 5, 03 – Moving balls
* by Indae Hwang and Jon McCormack
* Updated 2016
* Copyright (c) 2014-2016 Monash University
*
* This sketch shows the basics of classes and objects in Processing
* It defines a class called “Ball” with member functions that move and display
*
*/

// declare array of Balls
Ball theBalls[];
int numBalls = 50;

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

// initialise array and fill it with balls
theBalls = new Ball[numBalls];

for (int i = 0; i < numBalls; ++i) {
float ballSize = constrain(5 + (randomGaussian() * 1000), 50, 100);
theBalls[i] = new Ball(random(width), random(height), ballSize);
theBalls[i].randomiseDirection();
background(#0803A5);}
}

void draw() {
background(#0803A5);
for (int i = 0; i < numBalls; ++i) {
theBalls[i].move();
theBalls[i].display();

}
}

Processing examples – Words and my variaton in – https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/120519158

/**
* Words.
*
* The text() function is used for writing words to the screen.
* The letters can be aligned left, center, or right with the
* textAlign() function.
//variation with gradient background, animation with curtain
of colourful vertical lines and portuguese words
*/

PFont f;

void setup() {
size(640, 360);
noStroke();
colorMode(RGB, 640);
for (int i = 0; i < 640; i++) {
for (int j = 0; j < 360; j++) {
stroke(i, j, 0);
point(i, j);
}
}

// Create the font
printArray(PFont.list());
f = createFont(“SourceCodePro-Regular.ttf”, 24);
textFont(f);
}

void draw() {
textAlign(RIGHT);
drawType(width * 0.25);
textAlign(CENTER);
drawType(width * 0.5);
textAlign(LEFT);
drawType(width * 0.75);
}

void drawType(float x) {
line(x, 0, x, 65);
line(x, 220, x, height);
fill(#FEFFDB);
text(“palavras”, x, 95);
fill(#FEFFDB);
text(“poemas”, x, 130);
fill(#FEFFDB);
text(“romances”, x, 165);
fill(#FEFFDB);
text(“sonhos”, x, 210);

stroke(random(200, 256), random(100, 156), random(50, 100));

float distance_left = random(640);

line(distance_left, 0, distance_left, 360);
}

Peers’ works:

Russell’s clock – https://www.flickr.com/photos/ruskin51/29293261245/

clocks

My string of words – a verse by portuguese poet Fernando Pessoa
https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/120337300

void setup() {
size(500, 542);
PImage img;
img = loadImage(“fernando_pessoa.jpg”);
background(img);
textSize(40);
fill (#FFFFA2);
text (“«Tenho em mim”, 80, 100);
text (“todos os”, 80, 200);
text (“sonhos do mundo»”, 80, 300);
text (“Fernando Pessoa”, 150, 500);

}

void draw() {
stroke(random (249), random(250), random (199)); // R, G, B

// the screen is 500 pixels wide and 542 pixels tall
// lines start at the middle of the screen (50, 50)
line(50, 50, random(500), random(542) );
}

My clock using Funprogramming code –https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/120316554

setup() {
size(400, 400);
PImage img;
img = loadImage(“eyeclock.jpg”);
background(img);
frameRate(1);
textSize(25);
fill (255, 0, 0);
}
void draw() {
PImage img;
img = loadImage(“eyeclock.jpg”);
background(img);

String message = “Date: ” + day() + “.” + month() + “.” + year();
text(message, 100, 30);

message = “Time: ” + nf(hour(), 2) + “:” + nf(minute(), 2) + “:” + nf(second(), 2) ;
text(message, 100, 380);

message = “A simple sentence”;

println(message.charAt(0)); // print one character from a string

println(message.indexOf(“t”)); // find the position of letter “t” inside a string
}

(http://funprogramming.org/87-Playing-with-strings.html)

Links shared in the discussion:

Why should children program – a review of Seymor Paperts Mindstorms – https://dannas.github.io/2016/08/27/review-of-seymor-paperts-mindstorms.html

Tutorial to export Processing video with WMM – https://youtu.be/ud1WQgQzFWU

Code shared by a peer for – https://www.flickr.com/photos/49835639@N05/28963771670/in/dateposted/

void setup(){
size (750, 750);
smooth ();

fill(0);
frameRate(5);
}

void draw (){
background (255);
stroke (250,0,10);
strokeWeight(random (7, 10));

rect (random (10, 15), random (10, 15), 730, 730);

fill(0);
quad (
random (100, 150), random (100, 150),
random (400, 450), random (100, 150),
random (400, 450), random (400, 450),
random (100, 150), random (400, 450));

ellipse (random (550, 590), random (550, 590), random (270, 300), random (270, 300));

fill (255);
quad (
random (160, 200), random (160, 200),
random (340, 390), random (160, 200),
random (340, 390), random (340, 390),
random (160, 200), random (350, 390));

ellipse (random (550, 600), random (550, 600), random (120, 140), random (120, 140));

}

Many works shared :

Corbett work

https://flic.kr/p/KBkZ5H

https://b76.ch/9470

http://www.itsnicethat.com/articles/henning-m-lederer-animated-covers

Examples on smart cities – https://padlet.com/OUSmartCities/Projects3

Adobe colour wheel – https://color.adobe.com/pt/create/color-wheel/

Peer code shared in – https://github.com/birdy1976/creative-coding/

http://solar-center.stanford.edu/art/

Gallery Week 4 – works from peers

Aster

Colours strikes

w3_03.01

dotshapes_2016821_201059

spacerave

spiningTop-884

29 August 2016

A nice short video on randomness. David Kaplan explains how the law of increasing entropy could drive random bits of matter into the stable, orderly structures of life.

A TED Talk about algorithms in architecture – http://www.ted.com/talks/michael_hansmeyer_building_unimaginable_shapes

Processing projects with code source in:

http://p5p.cecinestpasparis.net/

http://p5art.tumblr.com/

http://www.complexification.net/gallery/

A short documentary on Generative Art

«An intriguing combination of programmers, artists, and philosophers, these creators embrace a process that delegates essential decisions to computers, data sets, or even random variables. This allows important metaphors to arise in their work, calling attention to the relationship between humans and the computers that surround us, the mountains of information we generate, and the powerful impact that technology has on our relationships with each other.»

28 August 2016

Generative sound with Brian Eno

The Generative Music and Procedural Sound Design of Sim Cell

Testing sound

/*
*
* —————————————-
* PORTED TO THE MINIM LIBRARY
* Install the Minim library instead of Prosessing Sound
* —————————————-
*
* Creative Coding
* Week 4, 04 – sound toy
* by Indae Hwang and Jon McCormack
* Copyright (c) 2014-2016 Monash University
*
* This sketch is a simple generative sound toy.
* It shows how to read and play sound samples in a sketch
* using the Processing sound library. Note that you must have installed
* the Processing sound library for this sketch to work.
* You can install libraries via the “Sketch -> Import Library… -> Add Library…” menu.
*
*/

// setup the Minim sound library and audio player
import ddf.minim.*; // import the sound libraries into Processing
Minim minim;
AudioPlayer[] soundFiles;

float x, y, dx, size, gap;
int selectSound;

void setup() {
size(1000, 500);

// Start Minim
minim = new Minim(this);

// load samples from the “Data” directory
soundFiles = new AudioPlayer[3]; // 3 SoundFiles – 1 for each sound
soundFiles[0] = minim.loadFile(“sound01.wav”);
soundFiles[1] = minim.loadFile(“sound02.wav”);
soundFiles[2] = minim.loadFile(“sound03.wav”);

// randomly select a sound and play it
selectSound = (int) random(3);
soundFiles[selectSound].play();

gap = 0.8;
x = random(width);
y = 0;
size = random(10, 500);
dx = size;

background(0);
smooth(8);
}

void draw() {

if (frameCount%10 == 0) {
// every 10 frames
y = y + dx * gap;
size *= 0.5; // same as: size = size / 2;
dx = size;
noStroke();
fill(0, 10);
rect(0, 0, width, height);
}

if (size < 1) {
// if the size has become too small, remap gap between 0.1 and 2, based on the frame number
gap = map(frameCount%100, 0, 100, 0.1, 2 );
x = random(width);
y = 0;
size = random(10, 500);
dx = size;
selectSound = (int) random(3);
soundFiles[selectSound].rewind(); // rewind the cue point to the begining of the sound
soundFiles[selectSound].play();
}

// draw the shapes associated with the sound
noFill();
stroke(255, 50);
ellipse(x, y, size, size);
stroke(255, 10);
line(x, y, x, height);
}

/*
* stop
* Stop audio playback and cleanup
*/
void stop() {
for(int i = 0; i< soundFiles.length;i++){
soundFiles[i].close();
minim.stop();
}
super.stop();
}

W4_05 – Variation – https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/120608339

/*
* Creative Coding
* Week 4, 05 – noise-based spinning top
* by Indae Hwang and Jon McCormack
* Updated 2016
* Copyright (c) 2014-2016 Monash University
*
* This sketch is a different cut of the spinning top example from week 3
* It uses the noise function to change the direction of the path
*
*/

// the two variables below shift the position in the noise field,
// allowing the value returned by the noise() function to change.
float noiseOffX = 0;
float noiseOffY = 0;
void setup(){
size(500,500);
background(#FFB905);
}

void draw() {

// add a small increment to the offsets
// (change these numbers and look at the visual results)
noiseOffX += 0.010;
noiseOffY += 0.008;

// location of the ellipse
float x = width * noise(noiseOffY * 0.5);
float y = height * noise(noiseOffX * 0.5);

ellipse(x, y, 2, 2);

// angle changes with time
float angle = radians(frameCount);

// radius changes with noise
float radius = 300 * noise(noiseOffX);

// calculate positions at the rotation point
float rotateX = x + radius * cos(angle);
float rotateY = y + radius * sin(angle);

stroke(#892C2C);
line(x, y, rotateX, rotateY);
ellipse(rotateX, rotateY, 10, 10);

stroke(#FFEDBF);
line(x, y, rotateX, rotateY);
ellipse(rotateX, rotateY, 5, 5);

}

27 August 2016

Testing «One pixel cinema»: Padlet

/*
* Creative Coding
* Week 4, 03 – one pixel cinema
* by Indae Hwang and Jon McCormack
* Updated 2016
* Copyright (c) 2014-2016 Monash University
*
* This simple sketch demonstrates how to read pixel values from an image
* It simulates a 10 pixel “scanner” that moves from the top to the bottom of the image
* reading the colour values for 10 equally spaced points, then displaying those colours
* as vertical bars on the left half of the screen.
*
*/

PImage myImg;
color[] pixelColors;
int scanLine; // vertical position

void setup() {
size(700, 622);
myImg = loadImage(“mosaic.jpg”);
pixelColors = new color[10];
scanLine = 0;
smooth(4);
}

void draw() {
background(0);

// read the colours for the current scanLine
for (int i=0; i<10; i++) {
pixelColors[i] = myImg.get(17+i*35, scanLine);
}

// draw the sampled pixels as verticle bars
for (int i=0; i< 10; i++) {
noStroke();
fill(pixelColors[i]);
rect(i*35, 0, 35, 622);
}

// draw the image
image(myImg, width/2, 0);

// increment scan line position every second frame
if (frameCount % 2 == 0) {
scanLine ++;
}

if (scanLine > height) {
scanLine = 0;
}

// draw circles over where the “scanner” is currently reading pixel values
for (int i=0; i<10; i++) {
stroke(255, 0, 0);
fill(255,0,0);
ellipse(width/2 + 17 + i*35, scanLine, 10, 10 );
}
}

26 August 2016

More tests turned into animated GIFs

https://giphy.com/gifs/rxNBtfs55vVVm
https://giphy.com/gifs/UkhoDYfVSmJVK
https://giphy.com/gifs/XoqegPiL8zZXW

https://giphy.com/gifs/YZJrmSLfmhqIU 

23 August 2016

Week 4 started to return to colour, image, sound and noise.

Issues like randomness and noise are going to be addressed

«Randomness is the lack of pattern or predictability in events. A random sequence of events, symbols or steps has no order and does not follow an intelligible pattern or combination. Individual random events are by definition unpredictable, but in many cases the frequency of different outcomes over a large number of events (or “trials”) is predictable. For example, when throwing two dice, the outcome of any particular roll is unpredictable, but a sum of 7 will occur twice as often as 4. In this view, randomness is a measure of uncertainty of an outcome, rather than haphazardness, and applies to concepts of chance, probability, and information entropy.» (https://en.wikipedia.org/wiki/Randomness)

A good article about the quest for randomness – http://www.americanscientist.org/issues/pub/the-quest-for-randomness

When we think of computers that work based on programmes based on rules, how random is randdomness?

« In computer security, it’s crucial that the keys used for encryption be generated randomly—or at least, randomly enough that a potential eavesdropper can’t guess them. Day-to-day fluctuations in the stock market might look random—but to whatever extent they can be predicted, the practical implications are obvious. Casinos, lotteries, auditors, and polling firms all get challenged about whether their allegedly random choices are really random, and all might want ways to reassure skeptics that they are.»

A good article about the aesthetics of noise – http://www.ubu.com/papers/noise.html

Many names of musicians experimenting with noises are mentioned in this article, such as:

Gottfried Michael Koenig – Funktion Blau (1969)

The poliphonic music of Karlheinz Stockhausen Kurzwellen

György Ligeti: Lux Aeterna

In the rock music field, Jimi Hendrix – Freedom «constructed a whole catalogue of noise effects, using them with virtuosity in his blues-inspired rock compositions.»

The Velvet Underground – European Son , «with their minimal, lo-fi, sinister music and disillusioned texts.»

Lou Reed – Metal Machine Music

Einstürzende Neubauten (Paris 2010) [01]. The Garden

22 August 2016

Bloom Project of Jon McCormack

«bloom was created using software that simulates the growth processes of natural organisms. This software works in a way that parallels nature: digital ‘genes’ encode the process of construction and development of an organism (referred to as ‘morphogenesis’ by biologists). The computer software then grows representations of organisms in simulation as determined by the genes and the environment in which the organism develops.»

http://www.csse.monash.edu.au/~jonmc/projects/Bloom/Bloom/bloom_images.html

A Tech Talk on Generative Art –

One of the projects presented in the talk is Box – https://vimeo.com/75361102

«Box is the culmination of multiple technologies, including large-scale robotics, projection mapping, and software
engineering. Bot & Dolly’s technology is an integrated software/ hardware platform providing innovative control of 6-axis industrial robots.»

Google magenta Project – https://magenta.tensorflow.org/welcome-to-magenta and a great remix based on the 4 note generated music

21 August 2016

A great documentary about the birth of electronic music in Britain

20 August 2016

Always learning and looking for Edgard Varèse – (https://en.wikipedia.org/wiki/Edgard_Var%C3%A8se) and a piece from the 50’s –

Looking also for Leon Theremin (https://en.wikipedia.org/wiki/L%C3%A9on_Theremin) and his machine invention «Theramin”, which was commercialized by late 20’s


Wonderful relics!

The creativity to invent instruments never stops. I love Blue Man Group’s performances – https://youtu.be/uHUXAcKdeaQ

19 August 2016

A tutorial on Array of words

FunProgramming – 57. A random sentence generator writes nonsense– code variation, changing words into portuguese – https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/118779262

int y = 50;

String[] art = {
“o”, “meu”, “teu”, “nosso”, “isso”, “isto”, “tudo”, “um”, “o único”, “seu”, “sua”
};
String[] adj = {
“feliz”, “rodopiando”, “vermelho”, “rápido”, “elástico”, “sorridente”, “inacreditável”, “infinito”, “surpreendente”, “misterioso”, “brilhante”, “verdejante”, “raro”, “normal”, “típico”, “vivendo”, “claro”, “glamoroso”, “belo”, “bonito”, “lento”, “assustador”, “impotente”, “magro”, “melódico”, “louco”, “gentil”, “bravo”, “bem”, “antigo”, “moderno”, “jovem”, “doce”, “molhado”, “frio”, “seco”, “pesado”, “industrial”, “complexo”, “preciso”, “maravilhoso”, “incandescente”, “cool”, “brilhante”, “falso”, “irreal”, “nu”, “inteligente”, “esperto”, “curioso”, “estranho”, “unico”, “vazio”,
“grisalho”, “saturado”, “desfocado”
};
String[] nou = {
“floresta”, “árvore”, “flor”, “céu”, “erva”, “montanha”, “carro”, “computador”, “homem”, “mulher”, “cão”, “elefante”, “formiga”, “estrada”, “borboleta”, “telefone”, “programa”, “avó”, “escola”, “cama”, “rato”, “teclado”, “bicicleta”, “massa”, “bebida”, “gato”, “t-shirt”, “carpete”, “muro”, “poster”, “aeroporto”, “ponte”, “estrada”, “rio”, “praia”, “escultura”, “piano”, “guitarra”, “fruta”, “banana”, “maça”, “morango”, “elástico”, “saxofone”, “janela”, “computador”, “mar”, “papel”, “fotografia”, “pintura”, “estrela”, “sspaço”, “faca”, “missão”, “fim”, “desejo”, “liberdade”, “moinho”, “luz”, “som”, “ruído”, “sussurro”, “espada”
};
String[] pre = {
“sob”, “em frente de”, “sobre”, “atrás”, “junto a”, “a seguir”, “dentro”, “ao lado”,
“além de”, “tal”, “por baixo”, “contra”, “para dentro”, “além do mais”, “considerando”, “sem”, “com”, “contra”
};
String[] ver = {
“canta”, “dança”, “rodopiava”, “corre”, “correrá”, “anda”, “voa”, “move-se”, “comovida”, “irá”, “brilha”, “brilhava”, “gira”, “prometida”, “abraça”, “traída”, “espera”, “desejava”, “planeava”, “nada”, “viaja”, “percorria”, “jogava”, “desempenhava”, “agradava”, “amava”, “ilumina”, “surge”, “devora”, “bebe”, “calcula”, “beija”, “desaparece”, “escuta”, “navega”, “responde”, “sorri”, “chora”, “sucede”, “deambula”, “pensa”, “é”, “era”, “será”, “virá a ser”, “nunca foi”
};

void write_word(String[] words) {
int n = int(random(words.length));
textSize(random(20, 40));
text(words[n], random(50, 150), y);
y = y + 30;
}
void new_sentence() {
background(255);
y = 50;

write_word(art);
write_word(adj);
write_word(nou);

write_word(ver);
write_word(pre);

write_word(art);
write_word(adj);
write_word(nou);
}

void setup() {
size(500, 400);
background(255);
fill(#258FBF);
new_sentence();
}
void draw() {
}
void mousePressed() {
new_sentence();
}
void keyPressed() {
int random_number = int(random(1000000));
save(random_number + “.png”);
}



FunProgramming – 53. Create a pattern by drawing 150000 pixels – code variation

size(500, 300);
colorMode(HSB, 8);

float x = 0;
while(x < width) {

float y = 0;
while(y < height) {
float v = sin(x/10 + y/25) * sin(x/10 – y/40);
float h = map(v, -1, 1, 0, 10);
stroke(h, 8, 8);
point(x, y);
y = y + 1;
}

x = x + 1;
}

int rnd = int(random(1000000));
save(rnd + “.png”);

Funprogramming_53_pattern

 

 

 

 

 

 

 

 

18 August 2016

Several useful foldouts have been delivered along the course:

  • advanced graphics
  • graphics drawing
  • graphics shapes and drawing order
  • conditions and drawing
  • conditions and branching
  • arrays and lists
  • interaction – mouse and keyboard
  • processing functions

Entering  week 3, more exercises have been tried the examples given: https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/118607743

I’ve been sharing some of them in Twitter –

W3_02_test 2 – introducing background image and changing no. circles to 10 – https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/118746084

/*
* Creative Coding
* Week 3, 02 – array with sin()
* by Indae Hwang and Jon McCormack
* Updated 2016
* Copyright (c) 2014-2016 Monash University
*
* This program demonstrates the use of arrays.
* It creates three arrays that store the y-position, speed and phase of some oscillating circles.
* You can change the number of circles by changing the value of num in setup()
* You can change the background colour by holding the left mouse button and dragging.
*
*/

int     noCircles;    // the number of items in the array (# of circles)
float[] y;      // y-position of each circle (fixed)
float[] speed;  // speed of each circle
float[] phase;  // phase of each circle

float red = 120;
float green = 120;
float blue = 120;

void setup() {
size(500, 500);
PImage img;
img = loadImage(“wallpaper500x500.jpg”);
background (img);
noCircles = 10;

// allocate space for each array
y = new float[noCircles];
speed = new float[noCircles];
phase = new float[noCircles];

// calculate the vertical gap between each circle based on the total number of circles
float gap = height / (noCircles + 1);

//setup an initial value for each item in the array
for (int i=0; i<noCircles; i++) {
y[i] = gap * (i + 1);      // y is constant for each so can be calculated once
speed[i] = random(10);
phase[i] = random(TWO_PI);
}
}
void draw() {
for (int i=0; i<noCircles; i++) {
// calculate the x-position of each ball based on the speed, phase and current frame
float x = width/2 + sin(radians(frameCount*speed[i] ) + phase[i])* 200;
ellipse(x, y[i], 20, 20);
}
}

Testing Funprogramming – about functions – Tweak the Bar Code – variation of line colours and screen position  –   https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/118712576

float x = 0;

void setup() {
size(400, 400);
background(255);
stroke(255,0,0);
}

void change_line_color() {
stroke(0, 0, 255);
line(x, -100, x, 200);
// now we decide if to use black or white
if(random(100) > 50) {
stroke(255,0,0);
} else {
stroke(0,255,0);
}
}

void draw() {
// draw black or white line
line(x, -100, x, 200);

// sometimes we decide to change the line color
if(random(100) > 90) {
change_line_color();
}
x = x + 1;
if(x > width) {
x = 0;
}

}

A tutorial by John Park on For-Loops

 

Testing Funprogramming-  Animate the ocean surface using noise() – code variation –  https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/118719652

float time = 0;

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

void draw() {
background(99,209,238);

float x = 0;

while (x < width) {
line(x, 50 + 300 * noise(x / 500, time), x, height);
x = x + 5;
}

time = time + 0.05;
}

Testing FunProgramming – Animate using sin(). Less math thanks to map() – code variation –

float a = 0;

void setup() {
size(400, 400);
background(#0815FC);
fill(#FC08C0);
stroke(#FFDEF7);
smooth();

}
void draw() {
background(#0815FC);

float x = map(sin(a), -1, 1, 1, 400);

ellipse(x, 200, 30, 30);

a = a + 0.06;
}

Testing FunProgramming – 46. Create beautiful curves with lots of sin() calls – – code variation – https://padlet.com/ida_m_brandao/7nza86xzvmyu/wish/118727506 

float a = 0;

void setup() {
size(500, 300);
background(0);
colorMode(HSB, 75);
noStroke();
}

void draw() {
float x = map(sin(a)*sin(a*0.8), -1, 1, 0, width);
float y = map(sin(a*1.1+1.5)*sin(a*3.1), -1, 1, 0, height);
float co = map(sin(a*0.03), -1, 1, 0, 100);
float sz = map(sin(a*1.7)*sin(a*2.3), -1, 1, 5, 30);
float bri = map(sin(a*1.3)*sin(a*4.1), -1, 1, 10, 60);

fill(co, 100, bri);
ellipse(x, y, sz, sz);

a = a + 0.05;
}

Testing Funprogramming – 48. Load and animate an image of Rick code variation

float x;
PImage photo;

void setup() {
size(400, 300);
x = width;
photo = loadImage(“idastampcollage.jpg”);
}
void draw() {
background(0);

image(photo, x, 0);

if(x > 0) {
x = x – 1;
}
}

Finally I was able to load na image as background, but it has to be exactly the same size of the defined screen

Background_image

A tutorial on PImage

17 August 2016

A Simulator for calculating «functions», conceived by a peer – https://b76.ch/wp-content/uploads/trigon.swf

A list of links of websites with tutorials on Processing – http://p5art.tumblr.com/tutorials

16 August 2016

A  flashback on computer interaction as well as latest art interaction installations:

The Wooden Mirror explained:

A  programm with poligons by a peer (with code)  – great previous works in Flickr https://www.flickr.com/photos/145779063@N02/28302503134/

Daniel Shiffman Youtube channel – https://www.youtube.com/user/shiffman

15 August 2016

A great link for beginners with short tutorials was shared Fun Programming – http://funprogramming.org/

Fun_Programming

Several tests over the creative code folder examples have been made along the week and uploaded in Padlet – https://padlet.com/ida_m_brandao/7nza86xzvmyu – some are static images, other are animated images:

Padlet_W2_03---W2_04

 

Padlet_W1_02---W1_03

 

9 August 2016

W1_FirstSketchSlides_myname analysing code of sketches

Processing Cheatsheet – https://learn.sparkfun.com/resources/88

Processing Cheatsheets – http://assets.surattack.com/files/processing_cheat_sheet_english.pdf

8 August 2016

A first sketch coding was provided to know how to save in a folder of Processing in our Documents.

firstsketch

The sound library of processing was imported, downloading a file from dropbox. Several sketches organized by week were transferred. Some are blank screens to doodle over. My first was to write my name

 

Mural to show images of Processing sketches in Padlet – https://padlet.com/ida_m_brandao/7nza86xzvmyu

 

5 August 2016

The programming language for this course is free and can be downloaded from – https://processing.orghttps://processing.org/reference/libraries/

Instructions are given in files to download

Installing Processing – instructions_InstallProcessing

processing FAQ – https://github.com/processing/processing/wiki/FAQ

Generative art with Processing

 

An interactive app – http://teropa.info/chime/app/

 

More resources to explore from the course:

3 August 2016

I’m particularly enthusiastic about interactive installations that react to body movement
https://youtu.be/xgCPZaq6DJ0
https://youtu.be/KXFFvIo7R3g
https://youtu.be/-yy5Rc4jMDI

2 August 2016

The course introduced the concept of generative art:«Creating a generative artwork is much more than just creating a visually attractive pattern.»

It presented interesting links related to the issue:

 

 

29 May 2016

Creative Coding is a MOOC promoted by Monash University that starts on the 1st August.

https://www.futurelearn.com/courses/creative-coding/

The course will use Processing Language – https://processing.org/

It was recommended prior to the beginning of the course to explore Fun Programming – http://funprogramming.org/  – this website provides many examples of simple programming.

It was also recommended to watch Khan Academy videos on Trigonometry – https://www.khanacademy.org/math/trigonometry  and Geometry – https://www.khanacademy.org/math/geometry

Examples of pictures created in previous courses – https://www.flickr.com/groups/2615752@N24/

 

 

 

ugust