This week in Internet Art, I was introduced to the programs Visual Studio Code and GitHub. We began the early stages of coding for our very own websites. I learned how to create a repositry through visual studio code and upload that to my very own GitHub account. From there, we looked at an introductory into the very basics of coding and the language and writing of coding in order to build our websites. One of the most important takeaways I learned this week, was that when coding you must be tedious and precise when typing out your code language for example, the slightest error can throw the entire code off. Like when using the a tag code you must rember to close the tag with > in order for the code to work.
In addition to basic coding langague this week, we also learned how to add visual style and aesthetics to our website pages. We created a style.css page and connected it to our repositories in order to insert visual aethteics into our coding langague. Through websites, like w3schools.com and stackoverflow.com, I was able to play around creating my own Frankenstein website page. Using these tools, I learned how to make a button and edit text colors. This week we also learned how to insert images into our code using the coding langague < img src = "" />
This week in Internet Art, we leanred how to position certain elements within our webpage. We specifically looked at how to create codes for several CSS postioning properties including: relative, absolute, sticky, fixed, and static. Relative positioning is positioned relative to its normal position. The absolute position is positioned relative to the nearest preexisting element. The sticky positioning is positioned based on the scrolling position of the webpage. The fixed positoning is positioned relative to the viewpoint, in which the positoning remains in the same place even if the webpage is scrolled. The positioning of the static positioning element is not affected by the top, bottom, left, or right properties.
This week we also learned how to add more visual elements and aesthetics to our page utilizing various CSS style sheet codes. In the CSS styling sheet, I learned how to create borders around my text. When making border elements, I learned how I can apply color to the background of my border and manipulate the border to appear as a dashed or solid line in order to create more visual aethetics and elements within my code and html webpage.
This week in Internet Art, we learned how to code a jQuery.
jQuery is a lightweight JavaScript library for coders to use on their websites that require less written coding.
jQuery is a very helpful tool for coders, for it simplifies coding from JavaScript such as CSS manipulation, effects, animations, and AJAX.
What would normally take multiple lines of complicated drawn out coding language, jQuery allows coders to code for specific utilities within a single line of coding language.
This week in Internet Art, I also began working on bulding my class portfolio website. Working on my portfolio website, I also learned how to create CSS coding langauge in order to bring in font styles from third party resources such as Adobe Fonts. In creating my portfolio site, I hope to adopt a sort of vintage newspaper aesthetic in my website design. To create this vintage newspaper aesthetic, I learned the necessary coding language required in order to organize my text into columns. In order to organize my texts into columns, the correct CSS styling code is simply newspaper1. {columns: 100px 2}.
This week in Internet Art, I was introduced to JavaScript. We specifically looked at the various ways in which you can utillize JavaScript code in order to draw on your html page. In order to start coding with JavaScript, code we brought the p5.js library into our html page from the p5 Foundation website. From there, we created out app.js page on Visual Studio Code and sourced that script into our html page in order to begin drawing with code.
The app.js page contains all the code for our drawings. Within the p5 Foundation website, we played around with various tutorials in order to discover various tools and techniques we can utilize in order to draw two-dimensional images. We started by drawing our own canvas with the code function setup (){ createCanvas; } within our app.js coding sheet in order to have a canvas we can draw our shapes on. Within the app.js page we can manipulate many variables within our code in order to draw complex two-dimensional shapes and build various forms. There are lots of various variabbles we can manipulate as well as variables we can even create code for ourselves in order to manipulate and draw complex two-dimensional shapes and forms with code.
This week in Internet Art, I experimented more with JavaScript and drawing with html code. For our upcoming Exercise 4 assignment, Drawing Shapes, I experimented with tools and code sourced in the p5js.org website as an introduction to creating my very own parametric design. In experimenting, I learned the tools and codes to create visual effects such as how to draw a shape and bring various text into my parametric design. In utilizing the random math tool randomGaussian, I was able to create a sunburst like distribution that rotates on my canvas every time I refresh my html page.
This week in Internet Art, we learned how to positon our canvas in a specific position within our webpage. In order to do so the canvas must be situated within a container, including this code in your app.js page like so: myCanvas.parent('myContainer'). From there you can then go into the desired location in your html page and insert the contianer within a specified div container. In Internet Art, this week we also learned how to utilize math tools within p5js in order to create movement in our Exercise 4 assignment without using any for loops.
This week in Internet Art, we learned a collection of various functions, arguments, and iterations. In our previous Exercise 4 assignment, Drawing Shapes, we utilized code in order to draw a specific object. However, this week, we began to learn and experiment various functions, arguments, and iterations in order to draw with code a collection of objects controlled by parameters. In creating a parametric design with parameters, the design is all built from the same set of digital code, however, the size, color, and relationship of the parametric design can vary from object to object.
In experimenting with functions, arguments, and iterations, one of the new functions we were introduced to this week was the drawTarget function. The drawTarget function allows coders to easily draw many distinct targets. We also learned about functions that can be used in order to create repition such as, simpleLoops, nesting, and embedding. This week, we also touched on noise again, which allows us to create reproducible random variables for animated frames.
This week in Internet Art, we learned some basic interactivity functions that we can add to our JavaScript coding language. We specifically looked at coding for specific mouse functions that allow users to interact with the website through the mouse. With coding, website deisgners can mnipulate the function of the computer mouse to create interactive experiences with the mouse through functions such as the mouseIsPressed, mouseMoved, and mouseReleased functions. The mouse function codes are a great means to create an interactive component for viewers as they brwose through your website container and parametric design.
This week in Internet Art, we also learned how to create coding language for arrays. Array functions hold a collection or array of data points in their coding langauge. We also learned about the random element coding function, which coders can manipulate in an array in order to return a random element from that array. Array functions can be very helpful to coders in creating more ellaborate design wih reduced lighter coding language.
This week in Internet Art, we explored some more new JavaScript coding langauge to build our vast library of coding knowledge and skills. We specifically looked at several object oriented programming examples that we could potentially utlize in our upcoming final project. With the object oriented programming language, we were able to create simple visual objects with attributes and create various instances of a specific object using different property values. We also touched on inheritance, in which an object or class can inherit fields and methods from another object or class. Although we did not dive deep into inheritance, it is important to be able to recognize inheritance object oriented programming for when you may see it used in coding language.
This week in Internet Art, we also began to work on our upcoming final projects. For my final project, I hope to call upon the movement and bold color schemes I chose in my Project One and Exercise 4 and 5 assignments. In calling upon these components of my work, I want to create a parametric design that communicates my identity as an artist and programmer. In my deisgn I hope to communicate a vinatge aesthetic through my work.
This week in Internet Art, as we near towards the end of the semester I continued my work that I collectively learned from our course this semester and translated it into my Final Project. Wokring in visual studio code and JavaScript I utilized my programming skills to create a parametric design that signifies motion, noise, and movement. This week I utilized what I learned in regards from object oriented programming last week, in order to create a Jitter class, instantiate multiple objects, and move them around the screen, within my canvas. Utilizing the jitter class function, I was able to create constant fluid motion amongst the objects within my parametric design.
In working on my final project this week in Internet Art, I also utilized the random() element in order to create continuously moving horizontal lines, coming from the center of my canvas. In creating my final project, I drew from my previos assignments and utilized my retro color shceme. I had a lot of fun experiementing with different things such as object oriented programming. In finishing my final project, I worked to create a parametric design that calls upon the noise, movement, and retro color pallete in order to resmeble an old vintage television set.
As my time this semester in Internet Art comes to an end, this week I reflect on my experience through the course and take a deep dive into all the things I learned and had the opportunity to create this semester! Internet Art has taught me so much this semester and allowed me to further engage in the relationship between art and technology. This semester I was introduced to the software, Visul Studio Code as a means to write coding langauge and programming. Utilizing coding langauge and programming software, we learned to create and structure our very own html websites from scratch. In creating, my website, I utilized visual studio code and coding language in order to create a seamless and easy-to-navigate portfolio site that showcased the work I made from the Internet Art course. We also learned how to create css style pages in order to add more complex design and style to our html pages.
This semester in Internet Art, I learned how to create parametric designs with JavaScript coding. Utilizing JavaScript, I was able to create a digital canvas and utilize my coding language and programming in order to create interactive parametric designs, that users could interact with while visiting my site. As a future art educator, I hope to take the extensive knowledge I learned from this course and utilize it in my own future practices. This summer, I hope to build another site utilizing what I learned through programming and visual studio code in order to create a teacher portfolio site. As I begin my last year of undergrad and start applying for jobs, the site will be a great tool that I can utilize to showcase my work as an artist and programmer.