justscoding
justscoding
Coding for Creative Practice
65 posts
Justine Ledesma 
Don't wanna be here? Send us removal request.
justscoding · 8 years ago
Photo
Tumblr media Tumblr media
WEEK 12 PRESENTATION + FEEDBACK 
It was really cool to see what everyone had come up with and some outputs even gave me ideas to try out for myself. I read through my feedback sheet and I appreciate all the positive feedback I received. There’s definitely room for improvement with this output. I wasn’t 100% keen on what I put forward for the presentations as I felt that I could’ve done it a lot better if I had more time, nonetheless, I was still quite happy that I managed to get a graphic on a longboard. Never thought that I'd be designing something for a longboard so this was a really cool experience. 
0 notes
justscoding · 8 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
FINAL OUTPUT IN INTENDED CONTEXT + CODE
import ddf.minim.*; Minim minim; AudioPlayer player; void setup() { size(900, 950, P3D); minim = new Minim(this); player = minim.loadFile("Justine.mp3"); //can use other audio files  } void draw() { background(0); stroke(255);  for (int i = 0; i < player.bufferSize() -1; i++)  {  float x1 = map( i, 400, player.bufferSize(), 0, width ); fill(255,35,40); strokeWeight(6); point(x1, 200, player.left.get(i)*600); strokeWeight(4); point(x1, 200, player.right.get(i)*600); strokeWeight(9); point(x1, 200, player.left.get(i)*600); player.play(); }   saveFrame("Justine###.jpg");   } 
Above are pictures of the code generated as a longboard graphic. I specifically chose to put my name on the longboard because it was my board that we took, however, if it was another person’s board then they would have their name as the sound pattern. I guess this post serves as both entourage that shows my code in context as well as the documentation of the final product. *Credit to Symone R. and Ryan G. for taking Fig 6 and Fig 8 photos.
0 notes
justscoding · 8 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
FROM COMPUTER TO BOARD PROCESS
These are a series of steps I took while transferring the sound wave from an Illustrator file to the board as a graphic. I used the 3D workshop’s vinyl cutter to cut the sound pattern and peeled that off to get a a clean pattern. At first I thought that it was too thin (sound wave) and would have to go back and make it thick but once I set it beside the board, I thought that it was actually a nice size and fits really well, lengthwise. I had to purchase a white vinyl to use as a base as the wood from the board would show and I wanted a black and white graphic. I also disassembled the trucks and wheels from the board to make it easier to stick the vinyl on. One thing I didn’t really like was the fact that towards the end of the deck, the sound wave steers off to the left a little bit which makes it look wonky. It was my fault because I thought that it was going straight until I looked at it when I finished sticking the vinyl on. I tried to remove the black vinyl to fix it but it made creases on the vinyl and I thought that it would impact the overall aesthetic so I left it. I told my friends that it was a bit wonky at the tail of the deck but they said it was hardly noticeable and it kinda works out so I just left it like that.
0 notes
justscoding · 8 years ago
Photo
Tumblr media Tumblr media
BFORE AND AFTER COMPARISON 
The first image is a screenshot of the original longboard graphic (sourced from The Warehouse website) and the second image is my name in sound waves. 
0 notes
justscoding · 8 years ago
Audio
The previous posts (and this one) are examples of audio that I used to generate a sound wave unique to the tone, length, and speed of the people saying their names.
0 notes
justscoding · 8 years ago
Audio
0 notes
justscoding · 8 years ago
Audio
0 notes
justscoding · 8 years ago
Audio
0 notes
justscoding · 8 years ago
Video
tumblr
This screen recording shows how saveFrame() works. This shows that there are a lot of unnecessary frames that I didn’t include for the final output pattern (mainly the straight, horizontal lines) because they were irrelevant. I was more interested where the circles that make up the sound wave split apart and then come back together. 
0 notes
justscoding · 8 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media
FINAL WORK  The images above are just refined versions of the last post similar to this one that shows each person’s name as a sound wave. I used saveFrame() within my code (at the very end) to capture each sound wave because using a screenshot was too slow and I couldn’t capture each section. I then chose the frames that had something going on and compiled them on Photoshop as one big line (similar to running the code but static). I really like how they all have different variations and I think that it will look really cool as a longboard design. I could even put their actual name with this pattern so people know who’s board it is. 
0 notes
justscoding · 8 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
ENTOURAGE: CREATIVE CODE IN DIFFERENT CONTEXTS Above are some examples of different ways how my code can become more than just a sound visualisation. I tried to think of ways of where it would be best to put my code on. Fig 1 - It can be a design for a debit/credit card. Some banks offer own personalisation for cards and this can be a cool way to identify the card. Fig 2 - Book cover. It can be used as a design for a book cover maybe with their name above it so that the sound wave has some meaning instead of just being a random squiggly line. Fig 3 - Phone case. A neat way to customise your phone. I like how its looks real minimal on the back, nothing too fancy. Fig 4 - Keychain. The code suits being on a keychain because everyone has a keychain somewhere and it’s a cool way to identify who’s set of keys are who’s.
Fig 5 - Longboard graphic. This is what my I intended the code to be used for. I thought that a lot of longboard designs on the underside have no meaning and I thought that by customising the design to suit the rider, the board might have a bit more of a connection to the rider. It’s also a unique way to identify which board is who’s.
0 notes
justscoding · 8 years ago
Photo
Tumblr media Tumblr media Tumblr media
 RESEARCH: ANNA MARINENKO  
https://creators.vice.com/en_uk/article/wnp5zm/artist-morphs-natural-imagery-into-sound-waves  Anna Marinenko created a series of these images, half nature photographs and half sound visuals. This gave me an idea of using my own files for something similar to this and create a poster for a musical or concert or something. My output is very versatile and can be paired up with anything, whether it be longboard graphic (which is my set output), book cover, key chain, car sticker (like the stick family ones), laptop skin etc. In this series, Marinenko looked at the pattern made by the middle ground objects such as tree lines and skyscrapers and matched them up with sound waves. This goes real deep but it raises the question of what if there’s a connection with every single thing on the earth in a nanoscopic level? The series look as if the sound waves are actually the tree line and the city since they’re so similar in shape. 
0 notes
justscoding · 8 years ago
Photo
Tumblr media Tumblr media Tumblr media
RESEARCH: DB LONGBOARDS 
https://dblongboards.com  They make and design longboards since 2003. The company is a US brand and are based in Washington. It was founded by Richard Docter, Bryce Hermansen, and Tim Mackey. Some of the tools they use to make the decks are CNC Machines, 3D printers, CAD design. I like how they make their own longboards and are conscious of what off cuts and scraps they have left over and make a way to use them again in the future. I like how they paid a lot of attention to detail while designing the boards, the top as well as the bottom deck looks really clean and neat. 
0 notes
justscoding · 8 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
INTERIM PRESENTATION 
Feedback from the interim presentation and the images for my concept. I think I will continue to do more iterations to see if I can come up with better versions. If I don't then I will keep this version and use them for my final outcome. At this point, I think I am close to ready to get the graphic on the deck. I’m still tossing between either spray painting or using the vinyl cutter or use both. At some point this week, I ‘m gonna take the deck into the 3D workshop and ask the technicians what the best option would be and also get an induction on vinyl cutting.
0 notes
justscoding · 8 years ago
Text
RESEARCH: M4a to MP3 Conversion
Tumblr media
https://www.digitaltrends.com/computing/how-to-convert-m4a-files-to-mp3-format/  The default format of the voice recordings that were taken in my iPhone had the .M4a/AAC format. In order to use those recordings I had to convert them to MP3 files so that Processing would be able to read them. I followed the instructions on the website on how to convert them through iTunes. 
0 notes
justscoding · 8 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media
Above are frames from Processing that were compiled together on Photoshop. I had people say their name on a voice memo on my iPhone and then transferred them onto my laptop. I had to convert the voice recordings from M4a to Mp3 in order for Processing to recognised the format. As you can see, there’s no same pattern/sound wave which is the cool thing about using these as a longboard design. The issue that will be occurring when I go forward with this will be how do I go about using this as a stencil, either spray paint or vinyl to get the right scale and proportion onto the longboard deck because on screen the circles look really tight and small so I’m gonna have to print them and if they are too tight then I’m gonna have to more iterations.  Code:  import ddf.minim.*; Minim minim; AudioPlayer player; void setup() {  size(900, 950, P3D);  minim = new Minim(this);  player = minim.loadFile("SYMONE.mp3"); } void draw() {  background(0);  stroke(255);  for (int i = 0; i < player.bufferSize() -1; i++)  {    float x1 = map( i, 400, player.bufferSize(), 0, width );    fill(255,35,40);    strokeWeight(6);    point(x1, 200, player.left.get(i)*600);     //strokeWeight(4);    //point(x1, 200, player.right.get(i)*600);     //strokeWeight(9);     //point(x1, 200, player.left.get(i)*600);  player.play();}   saveFrame(”Symone##.jpg”);  }
0 notes
justscoding · 8 years ago
Video
tumblr
Here, I’m getting closer to what sketch 2 looks like. I managed to get the circles further apart so that there’s a clear separation between each one of them. The only problem now is that when sound is being played, there’s hardly any movement from the circles, I have a feeling that I just changed the code to zoom up on the circles. I also added a saveFrame at the very end to capture each frame as the sound wave moves too fast to screenshot. Having a saveFrame enables me to get particular shots and compile them on Photoshop. Code: import ddf.minim.*; Minim minim; AudioPlayer player; void setup() {  size(500, 150, P3D);  minim = new Minim(this);  player = minim.loadFile("Fake Love.mp3"); } void draw() {  background(0);  stroke(255);  for (int i = 0; i < player.bufferSize() -1; i++)  {    float x1 = map( i*2, 0, player.bufferSize(), 0, width );    //float x2 = map( i+5, 0, player.bufferSize(), 0, width );    fill(255,35,40);    strokeWeight(3);    point(x1, 100, player.left.get(i)*600);  player.play(); { saveFrame(Fake Love###.jpg);   }}
0 notes