Exploring Physical Forms of Generative Art
Learn Something New: JavaScript, HTML, CSS & p5.js
Final Results:
Section1: Summary:
The original main purpose of this driven learning project for me is to use p5.js proficiently and understand the programming language JavaScript. Therefore, trying more different small-scale artworks helps me achieve my goal. I choose to make a series of generative art. They will not be complex but easy to interact with, and full of magic & fun. I’ll explore different physical forms of generative art.
I'll show my artworks on a web designed like this (also the purpose for learning something about HTML and CSS). ;)
(The images arranged like this are beautiful.)
(Though later, I spent lots of time on HTML and CSS. I didn't have enough time to produce so many pieces of works, but only 5 in total. So I just list them in a verticle column.)
Section 2: Inspiration
Why to Choose:
p5.js is a library with many tools that make it easy for programming enthusiasts, artists, and designers to use the JavaScript language for creative programming. The advantage is that JavaScript's broad availability and ubiquitous support-every web browser has a built-in JavaScript interpreter, which means that p5.js programs can usually run in any web browser. As a simple and friendly environment, p5.js provides a way to learn programming by creating interactive graphics, which also greatly reduces the difficulty of learning JavaScript. Some people think of it as the web version of Processing. This is not unreasonable. They all have irreplaceable advantages in building sketches and prototypes, which are fun and convenient, allowing us to explore more ideas in a short period of time. Though I have no background in Processing neither, I still love to try p5.js!
Because I just want to explore the possibilities of different expressions of generative art in p5.js, maybe I can distinguish them from some elements (such as color, shape, point, line, space, type, image, noise, combination, etc.). I want to create several works in each component, and use as many JavaScript's functions and syntaxes as possible, so that I can practice more technical skills. I’ll as well as include adding external images and setting up some interactive experiences and finally come out some gif. In terms of the theme, I think it is “TIME & SPACE - Exploring Physical Forms of Generative Art”.
p5.js is a library with many tools that make it easy for programming enthusiasts, artists, and designers to use the JavaScript language for creative programming. The advantage is that JavaScript's broad availability and ubiquitous support-every web browser has a built-in JavaScript interpreter, which means that p5.js programs can usually run in any web browser. As a simple and friendly environment, p5.js provides a way to learn programming by creating interactive graphics, which also greatly reduces the difficulty of learning JavaScript. Some people think of it as the web version of Processing. This is not unreasonable. They all have irreplaceable advantages in building sketches and prototypes, which are fun and convenient, allowing us to explore more ideas in a short period of time. Though I have no background in Processing neither, I still love to try p5.js!
Because I just want to explore the possibilities of different expressions of generative art in p5.js, maybe I can distinguish them from some elements (such as color, shape, point, line, space, type, image, noise, combination, etc.). I want to create several works in each component, and use as many JavaScript's functions and syntaxes as possible, so that I can practice more technical skills. I’ll as well as include adding external images and setting up some interactive experiences and finally come out some gif. In terms of the theme, I think it is “TIME & SPACE - Exploring Physical Forms of Generative Art”.
Our world is composed of time and space. For me, Generative Art, is also such a magical existence. Time can be an abstract linear time. If you change the time, the work will have different growth directions/changes. When time is fixed, we can still control the spatial form of Generative Art, such as points, lines, and surfaces, I will try more forms.
So here are some artists’ works from Openprocessing.
Though later I found they were too fancy for me. My visual design is largely constrained by the limitations of my coding skills, so I basically adopt an aesthetic that includes simple elements. All these elements below can be used in my artworks.
Section 3: Research
Shiffman's tutorials
(https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)
Head First JavaScript Programming-Eric Freeman, Elisabeth Robson
(https: // www.programmer-books.com/wp-content/uploads/2018/08/Head_First_JavaScript_Programming_SampleChapter.pdf)
A free 11-sessions online course about p5.js
http://www.unodeoliveira.com
http://openprocessing.org
Section 4: Process
Until April 6, 2020, I have completed the teaching video of Shiffman on YouTube.
I just found a good book Head First JavaScript Programming-Eric Freeman, Elisabeth Robson, and I plan to finish it in a week and a half.
I also signed up for an 11-sessions online course and it just started yesterday.
Two projects have been made for the trial. Now I need more creative art form ideas to use my code to achieve, as well as, more and more JavaScript knowledge. With the help of the guidebook and online courses. I would learn more about this language and try to achieve what I said before about my ideas. The very next step for me is to come up with more sketches about different components.
04/21
I've learned something about basic HTML and CSS, to visually present my p5.js artworks. The basic format is as below, but it's still the very simple frame of the first page. I still need to develop the inner links and other detailed pages.
04/21
I've learned something about basic HTML and CSS, to visually present my p5.js artworks. The basic format is as below, but it's still the very simple frame of the first page. I still need to develop the inner links and other detailed pages.
BTW, I've tried many code editors and I think this app called CodeRunner is the easiest to use. Though it's not free, but for further learning, I believe it's worthy. ;)
04/24
I’m excited I’ve figured that work out (combine the grids’ change with API “noise”). And I’ve uploaded it to GitHub. BTW, thanks to my friend’s help, I’ve learned how to use my Mac’s terminal to change the files on my GitHub, which is also amazing for me.https://github.com/FanyueShan/html-project/blob/a637412632d500b68422fae0c74eb50812b2eb29/sketch.js#L34
04/24
I’m excited I’ve figured that work out (combine the grids’ change with API “noise”). And I’ve uploaded it to GitHub. BTW, thanks to my friend’s help, I’ve learned how to use my Mac’s terminal to change the files on my GitHub, which is also amazing for me.https://github.com/FanyueShan/html-project/blob/a637412632d500b68422fae0c74eb50812b2eb29/sketch.js#L34
(Rederences: https://github.com/generative-design/Code-Package-p5.js/blob/master/01_P/P_1_2_1_01/sketch.js
https://p5js.org/zh-Hans/reference/#/p5/noise)
05/06
I worked on it almost everyday and generated my final 2 works: Trigonometric Rect and Glitch Rect. And I've rearranged my web and develop it well with detailed links. Because I found it was difficult for me to produce so many artworks to fill the whole page full with such thumbnail images, I rearrange my web show as a verticle column. I also upload it to AWS, so everyone can browse it. http://vaiyo.s3-website.us-east-2.amazonaws.com. All the codes have been uploaded on GitHub https://github.com/FanyueShan/Final-HTML. Feel free to check them. ;)
1. HTML is the carrier of web content. The content is the information that the web page creator puts on the page that the user wants to browse, and can include text, pictures, videos, etc.
2. CSS is performance (appearance control). Just like the outerwear of the web. For example, the change of the font and color, or adding a background picture and border to the title. All these things used to change the appearance of the content are called representations.
3. JavaScript is used to achieve special effects on web pages. For example, the changes in the background color when the mouse over the table, or the rotation of focus news (news pictures). It can be understood that animations and interactions are generally implemented with JavaScript.
I summarized some important JavaScript learning nodes:
The first is the usage of variables. Variables are empty containers in computer memory, from which programs can save and retrieve data. Using variables, the program can remember the value of a given element and attribute in the entire work.
Conditional logic, which is important, produces different results based on the state or value of a given variable. It is close to English grammar (if ... then ... else), so it can be easily absorbed by beginners.
Functions are a set of related lines of code, and you can call and reuse them at will. Through functions, the code becomes more modular and helps reduce errors.
An array is a list used to group similar types of variables.
A loop is a code structure designed to repeat a piece of code for a certain number of times, like sorting an array of variables.
Also some essential HTML nodes:
The first tag of this file is <html>, this tag tells your browser that this is the header of the HTML file. The last tag of the file is </ html>, which means the end of the HTML file.
The content between <head> and </ head> is Head information. Head information is not displayed, you can not see it in the browser. But this does not mean that the information is useless. For example, you can add some keywords to the Head information to help the search engine to search your web page.
The content between <title> and </ title> is the title. You can see this title in the title bar at the top of the browser.
The information between <body> and </ body> is the text.
The text between <b> and </ b> is bold. <b> As the name suggests, it means bold.
The HTML file looks similar to normal text, but it has more tags than normal text, such as <html>, <b>, etc. Through these tags, you can tell the browser how to display this file.
HTML Elements
The HTML Element is used to mark the text and represent the content of the text. For example, body, p, title are HTML elements.
HTML elements are represented by tags, which begin with <, and end with >.
Tags usually appear in pairs, such as <body> </ body>. The beginning is called Opening Tag, and the end is called Closing Tag.
Currently HTML tags are not case sensitive. For example, <HTML> and <html> are actually the same.
HTML Element Attributes
HTML elements can have properties. Attributes can extend the capabilities of HTML elements.
For example, you can use a bgcolor attributes to make the background color of the page red, like this:
<body bgcolor = "red">
As another example, you can use the border attribute to set a table to a borderless table. as follows:
<table border = "0">
Properties usually appear in pairs of names and values, like this: name = "value". In the above example, bgcolor, border is name, and red and 0 are value. Attribute values are generally marked with double quotes.
The attribute is usually an Opening Tag attached to HTML, not a Closing Tag.
Again, my visual design is largely constrained by the limitations of my coding skills, so I basically adopt an aesthetic that includes simple elements. Even if it is simple, being able to express yourself with these new skills is still very satisfying. Coding is like my drawing tool, used to implement my ideas, and I often need to play math and logic games with it.
The leap from absorbing programming fundamentals to becoming a creative coder is a complex process.
Similar to natural language literacy, this is a two-step process. We first learn to read and then learn to write. Most art students can take the first step to understand the basics of programming by decomposing and modifying short code examples. But to succeed in the second step (writing part), it is very difficult to convert ideas into code.
I have little programming experience, so the purpose of my driven learning project is to develop computing literacy and experience various programming environments and scripting languages. This project has brought me a lot of gains. In addition to the basic knowledge of JavaScript, HTML, CSS, I also learned to use many technological tools, such as p5.js, GitHub, CodeRunner, AWS, etc. By the way, I’d like to make some recommendations.
Learning p5 and JavaScript. I think Shiffman ’s tutorials and Head First JavaScript Programming by Eric Freeman, Elisabeth Robson are really good and easy for a beginner. Code editor, I recommend CodeRunner, which can code and see the visual results at the same time. AWS can help you publish your website for free without the need to separately register a paid domain name for 12 months.
Artwork Attachments:
05/06
I worked on it almost everyday and generated my final 2 works: Trigonometric Rect and Glitch Rect. And I've rearranged my web and develop it well with detailed links. Because I found it was difficult for me to produce so many artworks to fill the whole page full with such thumbnail images, I rearrange my web show as a verticle column. I also upload it to AWS, so everyone can browse it. http://vaiyo.s3-website.us-east-2.amazonaws.com. All the codes have been uploaded on GitHub https://github.com/FanyueShan/Final-HTML. Feel free to check them. ;)
Section 5: Some Essential Knowledge Points
To learn the basic technologies of web front-end development, I need to master: HTML, CSS, JavaScript. These three technologies are used to achieve:1. HTML is the carrier of web content. The content is the information that the web page creator puts on the page that the user wants to browse, and can include text, pictures, videos, etc.
2. CSS is performance (appearance control). Just like the outerwear of the web. For example, the change of the font and color, or adding a background picture and border to the title. All these things used to change the appearance of the content are called representations.
3. JavaScript is used to achieve special effects on web pages. For example, the changes in the background color when the mouse over the table, or the rotation of focus news (news pictures). It can be understood that animations and interactions are generally implemented with JavaScript.
I summarized some important JavaScript learning nodes:
The first is the usage of variables. Variables are empty containers in computer memory, from which programs can save and retrieve data. Using variables, the program can remember the value of a given element and attribute in the entire work.
Conditional logic, which is important, produces different results based on the state or value of a given variable. It is close to English grammar (if ... then ... else), so it can be easily absorbed by beginners.
Functions are a set of related lines of code, and you can call and reuse them at will. Through functions, the code becomes more modular and helps reduce errors.
An array is a list used to group similar types of variables.
A loop is a code structure designed to repeat a piece of code for a certain number of times, like sorting an array of variables.
Also some essential HTML nodes:
The first tag of this file is <html>, this tag tells your browser that this is the header of the HTML file. The last tag of the file is </ html>, which means the end of the HTML file.
The content between <head> and </ head> is Head information. Head information is not displayed, you can not see it in the browser. But this does not mean that the information is useless. For example, you can add some keywords to the Head information to help the search engine to search your web page.
The content between <title> and </ title> is the title. You can see this title in the title bar at the top of the browser.
The information between <body> and </ body> is the text.
The text between <b> and </ b> is bold. <b> As the name suggests, it means bold.
The HTML file looks similar to normal text, but it has more tags than normal text, such as <html>, <b>, etc. Through these tags, you can tell the browser how to display this file.
HTML Elements
The HTML Element is used to mark the text and represent the content of the text. For example, body, p, title are HTML elements.
HTML elements are represented by tags, which begin with <, and end with >.
Tags usually appear in pairs, such as <body> </ body>. The beginning is called Opening Tag, and the end is called Closing Tag.
Currently HTML tags are not case sensitive. For example, <HTML> and <html> are actually the same.
HTML Element Attributes
HTML elements can have properties. Attributes can extend the capabilities of HTML elements.
For example, you can use a bgcolor attributes to make the background color of the page red, like this:
<body bgcolor = "red">
As another example, you can use the border attribute to set a table to a borderless table. as follows:
<table border = "0">
Properties usually appear in pairs of names and values, like this: name = "value". In the above example, bgcolor, border is name, and red and 0 are value. Attribute values are generally marked with double quotes.
The attribute is usually an Opening Tag attached to HTML, not a Closing Tag.
Summing Up:
Again, my visual design is largely constrained by the limitations of my coding skills, so I basically adopt an aesthetic that includes simple elements. Even if it is simple, being able to express yourself with these new skills is still very satisfying. Coding is like my drawing tool, used to implement my ideas, and I often need to play math and logic games with it.
The leap from absorbing programming fundamentals to becoming a creative coder is a complex process.
Similar to natural language literacy, this is a two-step process. We first learn to read and then learn to write. Most art students can take the first step to understand the basics of programming by decomposing and modifying short code examples. But to succeed in the second step (writing part), it is very difficult to convert ideas into code.
I have little programming experience, so the purpose of my driven learning project is to develop computing literacy and experience various programming environments and scripting languages. This project has brought me a lot of gains. In addition to the basic knowledge of JavaScript, HTML, CSS, I also learned to use many technological tools, such as p5.js, GitHub, CodeRunner, AWS, etc. By the way, I’d like to make some recommendations.
Learning p5 and JavaScript. I think Shiffman ’s tutorials and Head First JavaScript Programming by Eric Freeman, Elisabeth Robson are really good and easy for a beginner. Code editor, I recommend CodeRunner, which can code and see the visual results at the same time. AWS can help you publish your website for free without the need to separately register a paid domain name for 12 months.
Artwork Attachments:
Random Spots
Although it is random spots, the production of these spots has strict logic and rules. Try to move your mouse up, down, left, and right to observe their changes. When you move the mouse up, the transparency of the spots will increase, and you can’t even see them; when you move the mouse down, they appear and become more solid; when you move the mouse to the left, the spots will be redder; otherwise, it will be greener. This is my first attempt to use the map function to switch the mouse movement range to the color range, which is very interesting!
Color Grid + Noise
With the last attempt of Random Spots, I want to continue to develop this logic of using the mouse to change the generation of each image. After referring to some materials, I think it is a good idea to change the aspect ratio of each grid. At the same time, I think the function "noise" is very interesting. I combine the grids ’change with API “noise” to make the work show changes like mountains’ line. And each mouse click will bring a new set of colors, including the color mode conversion between HSB and RGB, making the colors softer and harmonious. New colors and shapes seem to be constantly emerging in space.
Trigonometric Rect
I gradually discovered that when you want to form good-looking inerratic graphic changes in computer-generated art, you usually need to use some mathematical techniques. Understanding and applying sine and cosine in p5 is not an easy task. I made the size change and position of each square be based on trigonometric function. And dotted with random flashing spots. Did you see the fluidity of time and the randomness of space?
Random Maze
Continue to explore some simple mathematical applications, this is a good example. You only need to randomly set the slash to the left or right to form an interesting random maze.
Glitch Rect
I thought about the content of Glitch Art, but how to illustrate in p5.js? The key of this piece depends on the random glitch pixel length, and then edit the pixels array. It is not complicated but the random effects produced are unique in time and space.
Comments
Post a Comment