#flcreativecoding

Had a go at writing my hex code in p5js on codepen, pretty painless: codepen.io/revdancatt/pen/rOMMMw/ will use p5js from now on. See if I can get the audio part tied in too.

Good luck!

//Made with ProcessingLyon Tumblrify: //http://p5lyon.tumblr.com/ProcessingJSTumblr //English Version: //http://p5lyon.tumblr.com/ProcessingJSTumblrEn /* * Creative Coding * Week 2, 03 - n squares * by Indae Hwang and Jon McCormack * Copyright (c) 2014 Monash University * * In the next iteration of the square drawing sketch, this version selects a random number of squares * and a random gap between them. From this it calculates the width of each square then draws the squares * using two nested for loops. * * A simple drop shadow is also drawn to give the illusion of depth. * */ // repurposed "any" code by lemonde 2015 int i; //pointer int[] backgroundcolors = {2,2,1,2,2,2,2,1,2,1,1,2,1,2,2,2,2,1,1,1,2,2,2,1,2,2,1,2,2,1,2,2,2,1,2,1,2,2,1,2,1,2,2,1,2,1,2,2,2,2,2,2,1,2,1,1,1,2,1,2,1,2,2,1,2,1,1,2,1,2,1,2,1,2,2,1,1,2,2,1,1,2,1,1,2,1,1,2,1,2,1,2,1,2,2,2,2,1,1,2,1,2,2,2,2,2,2,1,2,2,1,2,1,2,2,2,1,2,1,1,2,2,2,2,2,1,2,1,2,1,2,1,2,1,2,2,2,1,2,1,2,2,1,2,2,1,2,2,2,2,2,2,2,2,1,2,1,1,2,2,1,2,2,1,2,1,1,1,2,1,1,1,2,1,2,2,1,2,1,2,2,1,2,1,1,2,2,2,2,1,1,1,1,1,2,1,2,1,2,1,1,2,1,2,1,1,1,1,1,2,2,1,2,2,1,2,1,2,2,2,1,2,1,2,2,1,1,1,1,1,2,1,2,1,2,1,2,1,1,2,1,2,1,1,2,2,2,2,2,1,2,2,1,2,1,2,2,1,1,1,2,1,2,1,2,1,2,1,2,1,2,1,1,2,2,1,2,2,1,2,1,2,1,2,1,2,1,2,1,1,2,2,1,1,2,1,2,1,2,1,2,2,1,1,2,1,2,1,1,2,2,2,1,1,2,1,1,2,1,1,2,1,2,2,1,1,1,2,2,1,2,1,2,2,2,1,2,1,1,2,2,1,2,2,1,1,1,1,1,2,2,2,2,2,2,1,2,2,2,2,1,2,1,1,1,1,1,2}; int[] colors = {#5936ef,#bdd516,#250c02,#70fc13,#04d37b,#cac574,#cdc475,#cdc475,#7c9931,#7c9931,#dcdf84,#dcdf84,#7e262c,#7e262c,#7ba110,#fe2a0f,#fe2a0f,#30a00f,#832ec8,#832ec8,#586ab4,#57bfb0,#57bfb0,#6dcc0e,#c8dcd0,#c8dcd0,#9bc528,#9bc528,#635bf1,#635bf1,#2f855d,#28589a,#28589a,#a34a62,#9609e5,#36436f,#36436f,#23549d,#0a04d4,#411a1c,#411a1c,#500138,#9b6c82,#9b6c82,#f559af,#f559af,#b1f078,#0994fa,#d81ce9,#5a14a4,#5a14a4,#cba284,#d5be16,#c74502,#da2cb8,#da2cb8,#917f0b,#917f0b,#9a41f0,#fcdfd8,#fcdfd8,#9c424d,#c198d7,#c198d7,#a1d7a4,#a1d7a4,#3e9cf9,#7337b3,#7337b3,#e67d8d,#a7212b,#a9daf6,#a9daf6,#b9488f,#eca7f9,#7ffdaf,#7ffdaf,#d435b7,#7c9931,#e9d0d8,#e9d0d8,#adf5a6,#250c02,#250c02,#a3bea3,#a3bea3,#d98bf2,#d98bf2,#250c02,#70fc13,#643a03,#643a03,#c7aba5,#c7aba5,#567c7b,#567c7b,#e5cb1a,#e5cb1a,#cdc475,#cdc475,#745f7e,#745f7e,#8e74e4,#0bf2f4,#891768,#2b1d7e,#2b1d7e,#ca4653,#23549d,#20fb9b,#20fb9b,#d240c8,#36436f,#23549d,#23549d,#20fb9b,#643a03,#643a03,#0a2eba,#0a2eba,#41b9f3,#41b9f3,#bf04bd,#bf04bd,#784cad,#8f3b30,#8f3b30,#1986de,#c198d7,#19edba,#9c424d,#9c424d,#ea0da3,#ea0da3,#c74502,#c74502,#2cd7af,#4aa838,#4aa838,#2a35d9,#bb7786,#bb7786,#ba0473,#ba0473,#7337b3,#e67d8d,#e67d8d,#79d11a,#97b3fc,#97b3fc,#da2cb8,#da2cb8,#f559af,#f559af,#250c02,#250c02,#e86fcc,#e86fcc,#9b41af,#9b41af,#ba0473,#9609e5,#9609e5,#36436f,#39f0b6,#39f0b6,#9b41af,#9b41af,#752267,#752267,#9a41f0,#9a41f0,#fcdfd8,#fcdfd8,#7e262c,#2ed1aa,#2ed1aa,#ffa09c,#643a03,#643a03,#b52248,#6d72e0,#6d72e0,#a4a565,#04d37b,#cac574,#ad3ef0,#4db857,#4877a6,#4877a6,#41b9f3,#41b9f3,#a8bfe2,#a8bfe2,#68f954,#9b6c82,#68f954,#68f954,#8a7b13,#8a7b13,#f7ce94,#f7ce94,#572883,#572883,#1986de,#897681,#897681,#469c91,#745f7e,#745f7e,#ea0da3,#038de1,#038de1,#b3c04a,#b9c1f3,#b9c1f3,#68f954,#9b6c82,#917f0b,#917f0b,#f591cc,#f591cc,#bdd516,#bdd516,#cdc475,#cdc475,#7c9931,#7c9931,#9a41f0,#9a41f0,#fcdfd8,#fcdfd8,#a496bc,#b52248,#b52248,#6d72e0,#88924f,#88924f,#97b3fc,#97b3fc,#5884db,#250c02,#250c02,#70fc13}; int[] sizes = {315,80,410,495,466,149,247,444,130,178,270,347,95,462,481,223,75,343,142,88,285,309,147,280,466,478,70,133,185,354,356,75,495,466,149,204,71,485,338,410,466,149,204,489,185,354,356,75,232,255,340,353,133,222,301,358,374,349,53,341,280,95,280,157,210,355,121,398,485,302,142,88,285,309,59,271,484,280,95,462,70,133,222,301,72,315,55,471,307,331,474,247,338,410,495,466,298,185,354,356,485,261,261,281,190,474,485,261,251,286,498,457,375,130,178,270,95,462,271,484,280,157,358,59,271,484,498,457,298,185,455,369,307,331,413,138,349,53,341,82,338,410,495,466,250,455,247,444,298,185,354,356,307,331,95,462,455,369,72,315,301,358,59,271,455,369,309,261,178,234,234,374,349,53,210,355,251,286,315,80,55,471,369,55,410,495,466,149,444,481,444,481,80,485,210,355,251,286,232,113,375,130,281,143,484,280,157,210,355,251,286,498,393,71,485,338,281,143,285,309,261,178,353,360,255,307,478,70,133,222,82,121,398,485,466,478,70,133,353,360,344,452,168,342,216,436,343,431,76,440,314,242,472,85,176,424,490,295,439,61,366,166,244,76,495,152,464,186,56,237,345,318,295,169,264,118,206,443,271,377,110,472,258,346,350,336,275,424,479,85,418,431,169,224,220,351,236,136,405,184,412,84,415,340,216,463,447,495,152,464,85,496,392,400,237,216,65,310,256,83,76,440,147,412,196,153,371,341,194,494,244,76,318,295,169,224,310,392,349,487,293,217,493,490,452,168,342,207,148,92,389,192,457,245,96,454,400,405,132,65,418,269,330,481,367,236,389,71,147,412,110,472,492,61,153,490,236,136,405,184,153,389,495,152,464,186,296,210,487,293,217,337,328,273,169,224,220,351,199,216,100,264,118,206,455,379,192,198,143,66,300,90,149,300,436,232,477,374,392,280,343,431,439,244,92,389,192,198,237,216,280,500,350,196,198,115,431,194,115,365,243,428,168,459,141,116,479,85,472,85,176,424,302,431,187,453,461,343,144,314,440,118,65,310,256,83}; void setup() { size(500, 500); rectMode(CORNER); noStroke(); frameRate(30); // set the frame rate to 30 draw() calls per second } void draw() { /* background(#dfdee7); // clear the screen to grey randomSeed(millis()); int num = (int) random(3, 12); // select a random number of squares each frame int gap = (int) random(5, 50); // select a random gap between each square // calculate the size of each square for the given number of squares and gap between them float cellsize = ( width - (num + 1) * gap ) / (float)num; */ // print out the size of each square //println("i, backgroundcolors, colors, sizes = " + i + ", " + backgroundcolors.length + ", " + colors.length + ", " + sizes.length); //println("i walk, i walk, colors, sizes, colors, sizes= " + 2*i + ", " + ((2*i)+1) + ", " + sizes [2*i] + ", "+ colors [2*i] + ", " + sizes [((2*i)+1)] + ", " + colors [((2*i)+1)]); /* if (i>=int((colors.length-2)/2)) { //exit(); if (looping) { noLoop(); } } */ if (backgroundcolors[i]==1) { background(#ffffff); // clear the screen to white } else if (backgroundcolors[i]==2) { background(#000000); // clear the screen to black } else { println("check error condition at backgroundcolors"); noLoop(); } if (sizes[2*i] <= sizes[((2*i)+1)]) { // /* //println("case 1: i walk, i walk, colors, sizes, colors, sizes= " + 2*i + ", " + ((2*i)+1) + ", " + sizes [2*i] + ", "+ colors [2*i] + ", " + sizes [((2*i)+1)] + ", " + colors [((2*i)+1)]); fill (colors[((2*i)+1)]); //fill(#636361); rect ((width/2) - (sizes[((2*i)+1)]/2), (height/2) - (sizes[((2*i)+1)]/2), sizes[((2*i)+1)], sizes[((2*i)+1)]); fill (colors[2*i]); //fill(#a4a4a3); rect ((width/2) - (sizes[2*i]/2), (height/2) - (sizes[2*i]/2), sizes[2*i], sizes[2*i]); // */ } else if (sizes[2*i] > sizes[((2*i)+1)]) { // /* //println("case 2: i walk, i walk, colors, sizes, colors, sizes= " + 2*i + ", " + ((2*i)+1) + ", " + sizes [2*i] + ", "+ colors [2*i] + ", " + sizes [((2*i)+1)] + ", " + colors [((2*i)+1)]); fill (colors[2*i]); //fill (#525f5f); rect ((width/2) - (sizes[2*i]/2), (height/2) - (sizes[2*i]/2), sizes[2*i], sizes[2*i]); fill (colors[((2*i)+1)]); //fill(#8c9b9c); rect ((width/2) - (sizes[((2*i)+1)]/2), (height/2) - (sizes[((2*i)+1)]/2), sizes[((2*i)+1)], sizes[((2*i)+1)]); // */ } else { println("check error condition at sizes, colors"); noLoop(); } // saveFrame("colors_markovized_###.png"); /* println("cellsize = " + cellsize); // calculate shadow offset float offsetX = cellsize/16.0; float offsetY = cellsize/16.0; for (int i=0; i<num; i++) { for (int j=0; j<num; j++) { fill(#692e24); // shadow rect(gap * (i+1) + cellsize * i + offsetX, gap * (j+1) + cellsize * j + offsetY, cellsize, cellsize); fill(#88433a); // rectangle rect(gap * (i+1) + cellsize * i, gap * (j+1) + cellsize * j, cellsize, cellsize); } } */ if (i>=int((colors.length-2)/2)) { i = 0; } else { i++; // increment the pointer } } //end of draw

bouncing balls + falling rects + in specific distance between rects and balls draw line + pick color from nasa image.

# Cutting hexagons, work in progress. Hexagon code from Processing being sent to a craft card cutter.

Getting the hang of 3D transformations and rotations (I think)