This is a studio-based course that introduces students to computer programming with an emphasis on using creative practices to formulate new ideas. No previous programming experience is required. Students will develop a technical aptitude for generating dynamic and data-driven visual projects, and through a socio-historical analysis of computation, art and philosophy, contextualize their projects with an understanding of how computation has augmented how we make meaning from our visual environment. Composing a series of projects throughout the semester, students will experiment and develop their own strategies to develop and evaluate project rubrics and goals. Students will complete the class with a foundation of technical skills to pursue individual learning of more advanced programming, scripting, and web development. There are no prerequisites for this course.
The class will be taught as a series of lectures, discussions, tutorials, project work, and student critiques.
You will earn the majority of your grade from your sustained and considered engagement with three projects. Each project will ask you to integrate fundamental technical and artistic creative coding techniques into a polished art work for a collective classroom critique.
Using p5*js, create a drawing machine. We are drawing on the legacy of artists working in the branch of creative coding called generative art, including artists such as Vera Molnar, Casey Reas, Joan Truckenbrod, Rafael Rozendaal, and Zach Lieberman.
Your drawing machine is a compositional system built using the foundational technical elements of this semester.
For loops are a fundamental structure of create code that allow us to repeat a process like drawing a shape, but vary its position or color. We do this by using the structuring variable inside the for loop inside of drawing functions like rect() or fill(). A standard and reliable way to use a for loop is to nest one for loop inside another to create a grid of shapes. This provides you with a regular structure into which you will introduce variation.
Global variables are declared variables at the top of your sketch which allow you to tune your drawing machine. Think of this like your artist control panel. These variables must be integrated into your code in the draw loop to create significant and meaningful visual changes in how your drawing machine operates. noiseScale will control the effect of the noise() function. spacing may control the distance in pixels between each shape. numShapes may control the number of shapes in each row and column of a nested for loop drawing a grid. sizeMin and sizeMax might work together with the random variable to assign different size values to a shape with a range (e.g. let w = random(sizeMin,sizeMax); circle(x,y,w);).
Randomness will use the random() and/or noise() function to introduce non-linear or unexpected variation into how your shapes are drawn. You may randomize the color palette by declaring a variable let r = random(100,150) and using that as the red value in fill (e.g. fill(r,100,0)). You may offset the x position of each shape in your grid by declaring a variable let xOffset = random(-10,10) and adding that to the x position of each shape your drawing machine draws (e.g. circle(x+xOffset,y,w)).
Once you've gotten your drawing machine up and running, tune your drawing machine by experimenting with the global variables you've created. You may be inspired to go back and add other elements to your machine.
Ultimately, you will decide on a single image your drawing machine has created. Use randomSeed() and/or noiseSeed to "lock in" those. The idea here is challenge yourself to make more and more discerning artistic decisions.
for loop. Some A-level projects may use only one, but it's very likely you will need to use two or more for loops, nested or otherwise.noLoop(). In other words, no animation.random() and/or noise()randomSeed() or noiseSeed() and select one final version of your compositionsSubmit both your p5.js URL as well as your exported image using save() at the very bottom of your draw loop. Note, if you use save without noLoop(), p5 will try to export images every frame of video!
We are now composing in time. Using p5*js, use the canvas to create an animated artwork. You may make a gamelike animation, a sketch of a scene of an animated narrative, or a moving composition that continues in the aesthetic of generative art.
When we hear the word "animation", we might think of a scene with a background and foreground which either plays automatically (more scene or narrative adjacent) or is activated by interactivity (more game like).
You should not aim to create an entire narrative or playable game with win and lose conditions. This is what is meant by "tableau". Aim instead to create something that gestures towards that: in the case of the narrative scene, maybe you are setting the scene just before the story starts. In the case of the interactive element, you may aim to have a convincing and satisfying interactive behavior that moves a character along.
You may elect to continue working in a more geometric and visually abstract fashion as we saw in the first project, except this time your work will require motion. This time you should not use noLoop() as we want for your composition to change over time. In this approach, you may any and all of the techniques described above to create movement, including interactivity, changing variables linearly (+,-, for example), animation loops, LFOs, sine wave or circular movement, translate, rotate, etc. The difference is primarily that you are not trying to render a scene, but working with shapes (or images!) to create a more abstract visual.
In our tutorials, we have seen two different ways of approaching animation and movement in p5. Many of you will find it convenient to choose one or the other, but both approaches can be combined in interesting ways as well.
In both cases, you should aim to use coding elements which support your artistic vision, integrating elements from this module with the previous module. You do not need to use all of these, but you will likely use three or four from each module. What I am most interested in is that you have created a compelling animated sketch that evidences two weeks of work. As a review:
beginShape(), endShape(), and vertex()random()noise()if/else conditional statements+=, ++, etc.noise() with frameCount to fluidly change the outputtint() and filter()
-- sprite animations or characterstranslate()
-- rotate()
-- scale()sin() and cos()
-- drawing in a spiral fashion with sin() and cos() and a changing radius
-- moving elements in a sine wave fashion with sin() and a changing angle inputlet easing = 0.01; let x = 100; let targetX = 200; let dx= targetX - x; x = dx * easing;)let x = 0; x++; if (x>255){x=0;})
-- if/else loops with "bounce" (e.g. 0->255->0);key(), function keyPressed())
-- from mouse input (mouseX,mouseY, function mousePressed())In this project, we will bring our p5 compositions into the artist-built platform New Art City, an online 3D virtual reality environment. Now, we are not only in time, but in 3D space. Each student will have their own space in our collaborative world. In your space, you are tasked with designing an environment for your work to be viewed. You will need to produce at least one new p5 sketch that is displayed in your space.
How can you make use of this 3D space? Will your space be everyday or fantastical? Will it resemble a gallery, or be otherworldly? How can you use sound or images in order to create a sense of immersion?
The following had been carefully written by the faculty of the UIC Art Department and is used in all art classes.
This is a studio course built on active participation, making together, thinking together, and learning from one another. If you are not in class, then you cannot participate. Therefore, students are expected to attend all scheduled classes for the full duration of the course. Three unexcused absences will lower your final grade by one full letter. Excessive absences would be considered four or more and may be cause for failure in the course. Two tardies, or leaving class early, or stepping out for long durations during class time (20 minutes or more) constitutes one absence. Any absence beyond two, that is not an excused absence, will affect your grade. Excused absences are only missed classes due to the death of an immediate family member, observation of a religious holiday, hospitalization, contagious sickness, or a victim of a crime, all of which should be accompanied by appropriate documentation provided to your professor within a week of the absence. All other reasons for missing class are considered unexcused.
*Please note that if you communicate with your professor in advance about a class to which you will be absent or tardy, that does not mean the absence or tardy is excused. Only the reasons written above, with documentation, yield an absence as excused. Also, if you have a friend in the same class who is, on your behalf, letting your professor know that you are running late, you will still be marked tardy.
*Please also note that it is your responsibility to track your attendance, to remain aware of it, and to communicate with your professor if you become concerned. Your professor will be taking attendance every class period, but it is not their obligation to communicate with you if your grade is being affected by your attendance.
You are responsible for looking at the website and working through the textbook in order to familiarize yourself with what was missed in class. You might also be in touch with a peer in the class to learn what was covered in the course you have missed. It is your responsibility to ask questions about subject matter you may have missed in class. I assume you are in conversation with your peers about course material regularly. Indeed I encourage the class to self-organize; take collective notes in a GoogleDoc, start a Discord, and so on, to share and learn from each other. I am happy to boost these efforts if that is helpful to you.
>UIC is committed to full inclusion and participation of people with disabilities in all aspects of university life. If you face or anticipate disability-related barriers while at UIC, please connect with the Disability Resource Center (DRC) at drc.uic.edu, via email at drc@uic.edu, or call (312) 413-2183 to create a plan for reasonable accommodations. In order to receive accommodations, you will need to disclose the disability to the DRC, complete an interactive registration process with the DRC, and provide me with a Letter of Accommodation (LOA). Upon receipt of an LOA, I will gladly work with you and the DRC to implement approved accommodations.
“UIC values diversity and inclusion. Regardless of age, disability, ethnicity, race, gender, gender identity, sexual orientation, socioeconomic status, geographic background, religion, political ideology, language, or culture, we expect all members of this class to contribute to a respectful, welcoming, and inclusive environment for every other member of our class. If there are aspects of the instruction or design of this course that result in barriers to your inclusion, engagement, accurate assessment or achievement, please notify me or your TA as soon as possible.”
In accordance with Illinois state laws and with respect for cultural diversity, we will make every effort to avoid scheduling examinations or requiring student projects be turned in or completed on religious holidays. Students who wish to observe their religious holidays must notify the instructor by the tenth day of the term that they will be absent unless their religious holiday is observed on or before the tenth day, in such case students must notify instructor at least five days in advance of the date when he or she will be absent. UIC’s Policy on religious holidays and Religious Calendar
The UIC School of Art & Art History is committed to creating a safe space in our classrooms that is a welcoming, supportive, and safe environment for lesbian, gay, bisexual, transgender, and queer (LGBTQ) students. See also: UIC’s Nondiscrimination Policy, Open Expressions Policy, and SAAH’s Allyship Booklet.
Images of projects created in this course may be used for educational purposes, including instruction in future courses and promotion of the School, College or University. If you have concerns about sharing or distributing any of your work for these purposes, please discuss these with your instructor.
In accordance with UIC policies, any student caught copying homework, plagiarizing a paper, or any copying visual material without giving appropriate credit will:
The College of Architecture, Design, and the Arts (CADA) strives to safeguard the privacy of its faculty, students, prospective students, and employees in online learning environments and other online events and activities hosted or sponsored by the College.
The College may record online events for internal use and faculty may record and post live online lectures on Blackboard, UIC's internal Content Management System; those recordings are permitted under these guidelines. However, the meeting host should endeavor to give notice whenever an online class or event is being recorded. If any student is identifiable in an image or recording from an online class, distributing that content publicly (i.e., outside of password protected Blackboard) may constitute a violation of the educational record protections provided under FERPA.
Individuals who suspect a violation has occurred should report that matter to Assistant Dean Dina Taylor (dltaylor@uic.edu) or Associate Dean Cheryl Towler Weese (cheryltw@uic.edu).
Occasionally, class sessions may be recorded via Zoom (or a similar platform) for the purposes of study / review or for students who are unable to attend an in-class session. Your instructor will inform you if they plan to record the lecture. The “record” feature for students will be disabled so that no one may be able to record the session without your knowledge. Recording in-class lectures without the permission of the instructor is not permitted.
If you have privacy concerns and do not wish to appear in lecture recordings, you may turn OFF your video and notify the instructor. If you prefer to use a pseudonym on screen instead of your name, please let the instructor know what name you will be using, so that they can identify you during the class session. If you wish to ask a question but don’t want your name to appear in the chat, you may direct-message the instructor through the chat feature. If you have questions or concerns about this video recording policy, please contact the instructor before the end of the first week of class.
These guidelines do not restrict a student's right to record lectures or download content pursuant to the assistive technology accommodations outlined by the UIC Disability Resource Center.
It is also important to maintain a learning environment where everyone feels comfortable participating. To protect these interests, students and other participants may not copy, record, reproduce, screenshot, photograph, or distribute the following content:
Any attempt to disrupt an online course or event (e.g., "Zoombombing") or to use the College's online platforms to introduce malware or gain unpermitted access to files or networks is prohibited and may violate other University policies depending on the nature of manner of the conduct. Students who violate this policy may be subject to disciplinary action under the UIC Student Disciplinary Policy.
The Student Disciplinary Policy is the University's process to handle allegations of misconduct by UIC Students. The Student Disciplinary Policy addresses both academic misconduct (such as plagiarism, cheating, or grade tampering) and behavioral misconduct (such as theft, assault, under-age drinking, and drug-use.) See also: Guidelines for Academic Integrity