Coding Challenge #76: 10PRINT in p5.js

I'm very excited about this coding challenge this coding challenge is inspired by the book called 10 prints which is all about this line of code 10 print chr dollar sign 205.50 m 1 go to 10 so this is a line of code for the commodore 64 and this book which is written by by a collaboration of many authors i'll put a link to information about this book the book is available for free as a PDF online I'm looking at the website right now and it's a beautiful book I have two copies of it downstairs I wish I had my one copy to hold up here right now but it really looks at the history of creative computing sort of through the lens of this one line of code for an old Commodore 64 computer so what does this line of code do so here's a nice youtube video I'll link to this as well I'm gonna make this full screen here where you can see it emulator now typing out this line of codes and let's see what we get run run it oh there we go look at this we get this interesting maze pattern so let me pause this for a second and let's try to figure out why is this happening so this is the basic programming language I think that's right that's actually one of the first programming languages I ever used when I was probably when I was in I think about third grade on an apple to see I think you remember back with basic programming language lines of code had a line number like the line 10 print says print something out to the screen to the is really just only a text console and then this is print the character either and I'm assuming here that the character 205 in ASCII code is a forward slash and the character 206 in ASCII code is a backward slash so randomly pick up would make this math problem between 2 or 5 point 5 plus 1 I'm either gonna get 2 or 6 or 205 so print out either forward slash or back slash slash and then go to 10 so I want to recreate this and I'm not the there's examples already been made and processing I'm really just redoing what's already been done from the the publication of this book but I want to do it as a coding challenge and see what kind of creative possibilities emerge because you could diss system which has a shape Touche and probability think of what you could do if you change the way the probability works if you allow it to be controlled if you think about the shapes creatively now that we have canvas and the browser there's a lot of possibilities here so let me and again if I say anything wrong about the converse 64 basic and ASCII code oh sure somebody will correct me in the chat and then I'll come back at the end of this video and correct that ok so let's look let's I need to write a setup function and I'm gonna make a canvas that's 400 by 400 and I'm going to say background 0 just so we can see it easily and I'm going to go to the browser and I'm gonna unfold screen this and I'm gonna go here and now i have my canvas there we go so what do I want to do first let's figure out how do I draw a forward slash or a backward slash so I could draw it as a line line 0 0 10 10 this is I know that's like a backward slash like that right now I could say line now what do I want if I want to go from the bottom to the top like a forward slash I'm gonna go from 0 10 to 10 zero right forward slash now I've drawn them both there so now what I want to do is I want to say ah maybe how do i do probability so I've done this in a lot of videos and I'm just typing it out and I probably I so let's think about just type this out here this is a way of applying a probabilistic function I don't know so a good way to say it this is probability in my code because I'm gonna pick a random number between 0 and 1 half the time it's gonna be greater than 0.5 half the time it's gonna be less than 0.5 so half the time we learn to draw a backward slash half the time I'm going to draw a forward slash now of course it's just doing this over and over again in the same space on top of each other so what I want to do is move forward as if I were a console printing out forward slash backward slash so what I need is some global variables like let X equal 0 let y equal 0 so I'm gonna draw these at X why X + 10 y + 10 I could use a translate or something but let me just do it with offsets at y plus 10 sorry and X + 10 + y so just to make sure it's still sort of the same thing but now what could I what do I need to do what if I increase X x equals x plus 10 so every frame I'm gonna move to the next spot there we go one line now it's hard to see that all the way across one line all the way across and uh I lost my train of thought oh you know what's important here I should think of the ten as some sort of like spate I'm gonna call that spacing so because we might want to change that so I should really use a variable for that and then if X gets to the end if it's greater than width I should reset X back to zero and have Y increased by spacing so let's look at that there we go I now have ten print in p5.js in the chat I just was told I left the ten here by accident so let me fix that so now here's the thing what's kind of amazing is that simple code created this suddenly quite elaborate beautiful maize pattern and I've you know thank you to the authors of the ten print book for inspiring me when the book came out to like really try this and use this in my teaching I often give this as an assignment to look at the book and try to like invent your own ten print design so how would you invent your own ten print design well what are the parameters of the system one thing is just the spacing so you know I can make space thing equal fifty and that's gonna change things quite a bit let me put it back at twenty just so we can sort of see it a little bit bigger and moves a little bit more quickly but one thing I could do is change the probability so what if I say you know what there's a 90% chance of drawing a backward slash or a forward slash I don't know which ones which a 10% of the other one now we get a pattern that has a certain quality to it because almost all the slashes are back slashes except for every once in a while forward-slash that probability could be adjusted with a slider over time I could also think about color you know the other thing here is like what if I just did something like draw a rectangle or not you know even just this idea of each cell on this grid either placing a rectangle there or not I've already got some type of generative comps so this is really what I guess what this is is this is an example of computational designer procedural design I have an algorithm that specifies the design you have Salda width wall drawings I'll try to put some linked links to information about the artist Sol LeWitt and his wall drawings is a nice example of this the rules are generating the design and that design could be the same every time but with probability it could be different every time so I hope I don't want to go much further with this and change too much more because I would like to see what you do and you could also think by the way you could other thing you could change is the way that I'm drawing this is I'm animating at one line at a time without changing the background but you could think about displaying it all at once or animating it in a different way from the center so there's a lot of possibilities there too so I hope that you will create your own 10 print design you will share it with me on Twitter or in the comments and then you can also submit it as a pull request to the readme file that's associated with this sketches code and I'll include a link to that also in this video's description so hold on one second did I mess anything up about my Commodore 64 and explaining the basic programming language important important correction it turns out that the Commodore 64 did not use the ASCII table as we know it today it has its own character set that's why because the ASCII code for a backslash is like 42 or 92 or 97 that's not that you I could look it up in an ASCII table but it doesn't match 205 and 206 so I did get that wrong in my earlier explanation I'm singing the chance the extended ASCII table so I didn't see any other Corrections I think I mostly got everything else right in this video and so please share with me your 10 print designs check out the book ten print thank the authors of the book for the great work that they did to talk about the history of this line of code and how it relates to creative code computing composing goodbye and I'll see you in another coding challenge Thanks [Music]

Channel: The Coding Train

Views: 77,519

Keywords: JavaScript (Programming Language), programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, challenge, javascript, p5.js, p5.js tutorial, programming challenge, 10 PRINT, BASIC 10 PRINT, Commodore 64 10 print, 10 PRINT Javascript, 10 PRINT JS, 10 PRINT p5.js, retro 10 Print, p5 js

Id: bEyTZ5ZZxZs

Length: 9min 8sec (548 seconds)

Published: Tue Sep 26 2017