{"id":16147426,"url":"https://github.com/edap/udk-creative-coding-processing","last_synced_at":"2025-04-06T20:48:03.912Z","repository":{"id":145594178,"uuid":"254126352","full_name":"edap/udk-creative-coding-processing","owner":"edap","description":"Creative Coding Course in Processing","archived":false,"fork":false,"pushed_at":"2021-06-30T08:19:22.000Z","size":771,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-13T02:51:13.754Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Processing","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-08T15:26:25.000Z","updated_at":"2024-11-24T20:38:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"5aab18ce-ec68-4ebc-ad5d-074c4910c2f3","html_url":"https://github.com/edap/udk-creative-coding-processing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edap%2Fudk-creative-coding-processing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edap%2Fudk-creative-coding-processing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edap%2Fudk-creative-coding-processing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edap%2Fudk-creative-coding-processing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edap","download_url":"https://codeload.github.com/edap/udk-creative-coding-processing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247550646,"owners_count":20956985,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T00:25:15.390Z","updated_at":"2025-04-06T20:48:03.905Z","avatar_url":"https://github.com/edap.png","language":"Processing","funding_links":[],"categories":[],"sub_categories":[],"readme":"# udk-creative-coding-processing\nIn this course we are going to explore computational thinking through coding. We will start from scratch, learning how to represent colors, line, shapes and 2D text. We will then learn about logical operators, arrays, vectors, forces and and how to use them to create our own drawing algorithms. The course will use Processing as programming language and it is addressed to beginners.\n\n\n## Intro to Creative Coding\nSlides about computer graphic, intro to Processing and the IDE.\n\n## Shapes\n\nDescription: Learn how to draw 2D geometric shapes. Learn how to read the [reference page](https://processing.org/reference/).\n\nKeywords: `cartesian plane`,  `circle`, `rect`, `variables`,`local variables`, `global variables`, `size`, `noLoop`, `60 FPS`\n\nApplications: `first`\n\n### Exercises:\n- Draw your initials with primitive shapes and lines.\n- Choose a painting from Mondrian, try to replicate it. If it feels too easy, try to replicate \"On White II, 1923\", by Kandinsky. Use a program as GIMP or photoshop to pick exactly the color\n- Take a picture with your phone, try to simplify its content, try to draw it using the primitive shapes you have learned.\n\n\n### References\n\n- [Environment](https://processing.org/reference/environment/)\n- [Overview](https://processing.org/tutorials/overview/)\n- [Getting Started](https://processing.org/tutorials/gettingstarted/)\n- [2D Drawing](https://processing.org/tutorials/drawing/)\n\n## Colors\n\nDescription: Learn how to create colors and and how to change them. Joseph Albers introduction, introduction to color RGB and HSB color spaces.\n\nKeywords: `background()`, `stroke()`, `fill()`, `noStroke()`, `noFill()`, `colorMode`, `HSB`, `RGB`,`transparency and alpha channels`,\n\nApplication: `colors`, `colors-blendMode`, \n\n\n\n### Exercise(s)\n- Create and display your own palette. Create a custom function that draw a particular shape using a particular color.\n\nNotes for the theacher: \n- Exercises \"Color\" at page 88 of \"Code as Creative Medium\"\n\n### References\nRune Madsen's serie about color:\n\n- [A short history of color theory](https://programmingdesignsystems.com/color/a-short-history-of-color-theory/index.html)\n- [Color spaces](https://programmingdesignsystems.com/color/color-models-and-color-spaces/index.html)\n- [Color schemes](https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/index.html)\n- [Perceptually uniform color spaces](https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/index.html)\n\n- [The Interaction of Colors](https://www.goodreads.com/book/show/111113.Interaction_of_Color) by Joseph Albers.\n- [Color's tutorial](https://processing.org/tutorials/color/)\n- [Jamie Wong post, technical](http://jamie-wong.com/post/color/)\n\n## Interact with mouse and keyboard\n\nDescription: Add interactivity to your sketches reading the mouse position or getting events from your keyboard.\n\n### Exercises\n- Make an application with the function `noLoop()` in the setup method. Re draw something on screen everytime a key on your keyboard is pressed. Everytime you draw, the composition should be slightly different.\n- Draw a square in the screen, change its color when the mouse is over it.\n- Make an applications that draw line on the screen\n\n### Reference\n[Interactivity](https://processing.org/tutorials/interactivity/)\n\n## Logical operators, comparison operator and conditions\n\nDescription: Learn how to compare two variables, how to make a branch condition, how to make a loop.\n\nKeywords: `||`, `\u0026\u0026`, `\u003e`, `\u003c`, `\u003e=`. \n\nExercises:\n\n- Make a sketch where the value of a variable is changing continuosly and you compare this value with a fixed variable. Use comparison operator or logical operator to change the visual output of your sketch.\n- Make an application and draw a square. Change the background color when the mouse is over the square.\n\nNotes for the teacher:\n- Exercises \"Conditional testing\" at pag. 90 of \"Code as Creative Medium\"\n\nApplications: `logicalOperators`, `comparisonOperators`\n\n### References\nSections Relational Operators, Logical Operators, Iteration and Conditional of the [processing reference page](https://processing.org/reference/)\n\n## Iteration.\n\nDescription: get confident creating loops. Learn how to use the modulo operator. Learn about the scope of a variable.\n\nKeywords: `for`, `while`,`%`\n\nExercises:\n\n- Make a grid where the color of the cells depends on some calculation that involves the modulo operator.\n\nNotes for the teacher:\n- Exercises \"Iteration\", pag 86 of \"Code as creative Medium\"\n\nApplications: `iteration`, `moduloOperator`, `aSimpleGrid`\n\n## Matrices\n\nDescription: Learn how to move and rotate your shapes. A short introduction to the random() function\n\nKeywords:\n\n```cpp\npushMatrix()\npopMatrix()\ntranslate()\nscale()\nrotate()\nradians()\n```\n\nApplication: `introToMatrices`, `rotateMatrix`, `matrixTranslateGrid`, `rotateInTime`, `translateRandomFunctionFace`, `print10`\n\nExercise: Re-code \"Schotter\", by Georg Ness, 1965.\n\n### Reference\n[Transformation in 2D](https://processing.org/tutorials/transform2d/)\n\n\n## Unit cirlce, sine wave\n\nDescription:\n\n- Understanding waves, frequency and amplitude.\n- Understanding sin of time, plotting the sin(time) on the x axis.\n- Understanding the unit circle [gif](https://commons.wikimedia.org/wiki/File:Circle_cos_sin.gif).\n- How to represent a point in cartesian and in polar space, how to convert from one space to the other.\n\nKeywords:\n\nSOHCAHTOA, sine and cosine waves, `millis()`, `map`.\n\nApplications: `sineWaveLoop`, `sineWave`, `sineWaveMouse`, `polarCoord`\n\nHomeworks:\n- Make an application that draws a spiral.\n- Make an application that uses 3 different sine waves with different amplitude and frequency.\n\n### References\n[Trigonometry Primer](https://processing.org/tutorials/trig/)\n\n\n## Arrays\n\nWe will first introduce PVector to draw a point on a screen. We will then create an array of points.\n\nDescription: What is an array? what is an item? what does it mean to iterate through the items of an array? Learn how to use array to store many data of the same type into one datastructure, how to iterate through the elements of an array. Learn how to use PVector to save a point(x,y).\n\n\nThere are two ways to work with array in processing, using traditional arrays and using ArrayList. I suggest to use ArrayList because they are easier to use, but in this repository you can find both.\n\nKeywords: container, item, index, to iterate.\n\n### ArrayList\n\nadd(item)\n\nsize()\n\nremove(index)\n\nget(index)\n\n\nSee, in order these app: `pvectorPrimer`, `arrayListIntro`,`arrayListVector`,`arrayListVectorDelete`\n\n\n### Traditional Arrays\n\nappend()\n\nshorten()\n\nsplice()\n\narrayCopy(source, destination)\n\nlength\n\n\nSee, in order these app: `arrayPrimer`,`arrayReading`,`arraySaving`\n\n\n\n### Exercise(s)\n\n\nNotes for the teacher:\n- Exercises \"Arrays\" at pag. 91 of \"Code as Creative Medium\".\n\n\nWrite a program that draws straight lines when\nthe user clicks and drags. Color the longest line\nred.\n\n### References\n\n[Arrays](https://processing.org/tutorials/arrays/)\n\n[ArrayList](https://happycoding.io/tutorials/processing/arraylists#removing-from-an-arraylist)\n\n[ArrayList Video Tutorial by Daniel Shiffman](https://www.youtube.com/watch?v=HnSJZ4qTcwY)\n\n\n\n## Noise and Random\n\nDescription: What is randomness and what is noise, and how those are generated in the computer. Kevin Perlin and the Perlin noise in Tron.\n\nKeywords: `noiseSeed`,`randomSeed`,`random`, `noise`, `noiseDetail`\n\nNotes for the teacher:\nExercises \"Unpredictability\" pag. 106 of \"Code as Creative Medium\".\n\nApplications `noiseExample`, `randomExample`, `noiseSeed`, `randomGaussian`, `noiseAndShape`\n\nReferences: \n- [A Million Random Digits](https://en.wikipedia.org/wiki/A_Million_Random_Digits_with_100,000_Normal_Deviates)\n- [History of randomness](https://en.wikipedia.org/wiki/History_of_randomness)\n- [Random Number generators](https://en.wikipedia.org/wiki/Random_number_generation)\n- Paragraph \"random\" in the [processing reference](https://processing.org/reference/)\n- Processing documentation about [Perlin noise](https://processing.org/reference/noise_.html)\n\n\n\n## Path, lines, shapes, curves.\n\nDescription: How to create shapes and lines connecting points.\n\nKeywords: `PShape`, shapes.\n\nApplication: `shapeCurve`, `shapeCurveSimple`, `shapeBlob`, `curve`, `curveBezier`, `curveArc`\n\nNotes for the teacher:\nExercises \"Curves\" pag. 93 of \"Code as Creative Medium\". \n\n\n\n\n### Exercises\n- Create your own shapes changing the algorithm that we have used to draw the circles\n- Move from polar coordinates to cartesian coordinates and viceversa. Have a look to the previous exercise about the unit circle.\n- Draw a landscape using Pshape and the noise function\n\n\n\n### References\n[PShape](https://processing.org/tutorials/pshape/)\n[Curves](https://processing.org/tutorials/curves/)\n\n\n## Typography\n\nDescription: How to add text to your sketch\n\nKeywords: `text()`, `textSize()`, `String s;` , `String[] fontList = PFont.list();`, `createFont`, `textFont`, `loadFont()`.\n\n\nNotes for the teacher:\n- Exercises \"Typography\" at pag. 105 of \"Code as Creative Medium\".\n\nApplications: `fontString`, `fontInstalled`, `fontAnimated`.\n\n\n### References\n[Text](https://processing.org/tutorials/text/)\n[Typography](https://processing.org/tutorials/typography/)\n[Custom Fonts](https://processing.org/reference/loadFont_.html)\n\n\n## Images\n\nDescription: How to manipulate pixels one by one and save the result in an image.\n\nKeywords: `pixels[]`, `set()`, `updatePixels()`, `loadPixels()`, `get()`, `filter()`, `copy()`, `save()`,`saveFrame()`, `loadImage`, `tint()`\n\nApplications: `ImageLoad`,`ImageMouseGrid` `ImageRandomPixel`\n\n\nNotes for the teacher:\n- Exercises \"Image\" at pag. 101 of \"Code as Creative Medium\".\n\nCredits:\n- Images in the exercises by [Johny Goerend](https://unsplash.com/photos/XQmOwiH1fiE) and [Milos Tonchevski](https://unsplash.com/photos/zVH_KLQWWM8)\n\n### References\n- [Processing website](https://processing.org/tutorials/pixels/)\n\n## Vectors and Forces\n\nDescription: move things around using vectors.\nTopics: Acceleration, mass, multiple forces interaction.\n\nKeywords: `PVector`\n\nReferences\n- [Pvector](https://processing.org/reference/PVector.html)\n- [Nature of Code](https://natureofcode.com/book/chapter-1-vectors/). \n\n\nApplications: `Mover`.\n\n\n## Arduino\n\nDescription: Build an image distorsion tool using arduino.\n\nKeywords: `Serial`\n\nReference:\n- [Arduino](https://processing.org/tutorials/electronics/)\n\n\n\n### Appendice\n\nCommon (core) data types\n\n```\nchar\nint\nfloat\nbool\nstring\n```\n\nSigned vs unsigned, # bits, etc.\n\nType casting/conversions (float to int, etc.)\n\nData Storage\n\nControl \n\n```\nif (myVar == 1) {\n  // then to something\n} else {\n  // otherwise do something else\n}\n\nfor (int i = 0; i\u003c 10; i++) {\n  // do something 10 times\n\n}\n\nwhile(myVar == 1){\n  // keep looping until myVar is different from 1\n} \n```\n\n\narithmetic operators \n\n```\n+\n-\n*\n/\n%\n++\n-- \n```\n\ncomparison operators\n\n```\n==\n!=\n\u003e\n\u003e=\n\u003c\n\u003c=\n```\n\nlogical operators\n\n```\n\u0026\u0026\n||\n!\n```\n\n\n### Credits\nSome of the exercises in this repository come from [Daniel Shiffman's repositories](https://github.com/shiffman) and from the book \"Code As Creative Medium\", by [Golan Levin](http://www.flong.com/).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedap%2Fudk-creative-coding-processing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedap%2Fudk-creative-coding-processing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedap%2Fudk-creative-coding-processing/lists"}