Session 1 (Creative coding and Processing basics)

Download Session 1 (Creative coding and Processing basics)

Post on 15-Apr-2017

104 views

Category:

Education

1 download

TRANSCRIPT

PowerPoint PresentationCreative Coding 101 - Abhik Biswas The KODERUNNERS CommunityCreative Coding 101Introduction to ProcessingBy : Abhik Biswas & Soumik Rakshit, CSEThe KODERUNNERS CommunityHands on : Creative Coding ; Perlin Noise : MineCraft , Data Analysis : Bar Graph, 2What is Creative codingCreative coding is a type of computer programming in which the goal is to create something expressive instead of something functional. Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityThe Myth behind Programmers and Designers.Logic + Algorithms + Procedure= Code= Mechanical Fantasy + Imagination + Impulse= Creativity= ArtTherefore Code can not be Creative Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityComputers are useless. They can only give you answers.- Pablo Picasso Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS Community Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityTurning a code into creative code. How? Code is more than a tool Code is mathematical --> Beauty, Complexity Code can be surprising --> Emergence Code can be interactive --> Playfulness Code can be Creative Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityCreative Coding+Sensors=Creative Technology Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityPossibilities of Creative CodingData VisualizationGenerative ArtAudio-Visual installationProjection MappingInteractive environments Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityProcessing Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityIntroduction to ProcessingProcessing is a Java dialect specifically designed for generating visual art, animation and any kind of graphic applicationDeveloped by artists to artistsDeveloped from 2001 at the MIT by Casey Reas and Ben Fry. Inspired in John Maedas DBN (Design By Numbers) Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityCreative Coding 101 - Abhik Biswas The KODERUNNERS CommunityWhy Processing? Prototyping is done in the form of a sketch Visual feedback feeds the curiosity that is inherent in new programmersIt has its own IDE (very easy)Faster learning than OpenGL + GLUT or other alternativesPowerful, very powerful. It allows to develop from very simple to very complex applicationsScalable. It is possible to combine processing with pure Java and with Java libraries. A pure Java application can use processing libraries as well.. Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityCreative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityCartesian Plotting in ProcessingThink about graph paperHow would you draw a line between (0, 0) and (5,5)? Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityEX : 01 Draw a Line in Processingline(10, 10, 90, 90);This is your first programType it in and click on the Triangle (Play button) in the top menu or select Sketch -> Run Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS Communityline(10, 10, 90, 90);X and Y coordinates of the first pointX and Y coordinates of the second point Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityWhy such an output? Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityEX : 01 Cartesian Map in Processing On a computer screen, the origin (0, 0) is always at the top left location of the screen Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityBasic ShapesPoints, Rectangles, Triangles, Quadrilaterals etc.Eg: point (10,10) represents a point at (10,10) Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS Communityrectangle(20, 20, 50, 50);X and Y coordinates of the first pointLength and Width of the rectangle Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS Communityquad(38,31,86,20,69,63,30,76);X and Y coordinates of the 1st pointX and Y coordinates of the 2nd pointX and Y coordinates of the 3rd pointX and Y coordinates of the 4th point Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS Communitytriangle(13,75,28,20,26,75);X and Y coordinates of the 1st pointX and Y coordinates of the 2nd pointX and Y coordinates of the 3rd point Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityEllipses and CirclesEllipse can be represented by specifying the1. The coordinates of the center of the ellipse2. The radius of the ellipse in the X-direction3. The radius of the ellipse in the Y-directionellipse(xc, yc, xrad, yrad);A circle is an ellipse with the same value for the x-radius and y-radius Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityRepresenting ColorsColors in Processing are represented as a combination of Red, Green and Blue values0 = no contribution of a particular color255 = maximum contribution of a particular colorPure Red = 255, 0, 0Pure Green = 0, 255, 0 Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityExperiment with Colors// Set fill color to Redfill(255, 0, 0);rect(5, 5, 70, 30);// Set fill color to Greenfill(0, 255, 0);ellipse(20, 60, 25, 35);// Set fill color to a shade of Greenfill(0, 127, 0);triangle(50, 50, 70, 70, 90, 30);Red, Green, Blue combinationsBlack = 0, 0, 0Yellow = 255, 255, 0Orange = 255, 102, 0Brown = 165, 42, 42Fuchsia = 255, 0, 255Olive = 128, 128, 0White = 255, 255, 255 Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityOpacity / TransparencyOpacity/Transparency also defined separately in the fill function0 = completely transparent255 = completely opaque Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS Communityfill(255, 0, 0);rect(5, 5, 70, 30);fill(0, 255, 0);rect(25, 25, 40, 60); Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS Communityfill(255, 0, 0);rect(5, 5, 70, 30);fill(0, 255, 0, 127);rect(25, 25, 40, 60);Transparency Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityStroke WeightstrokeWeight(value);size(480, 120);smooth();ellipse(75, 60, 90, 90);strokeWeight(8); // weight = 8 pixellipse(175, 60, 90, 90);ellipse(279, 60, 90, 90);strokeWeight(20); // weight = 20 pixellipse(389, 60, 90, 90); Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityStroke Colorstroke(color);*Could be a single value (to specify gray scale)*Could be 3 values for RGB Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityHands on Demo - 1CREATE AN ALIEN FIGURE Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityPractice Problem:CREATE A SNOWMAN Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityTHANK YOU Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS Community Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS CommunityBack Creative Coding 101 - Abhik Biswas ; Soumik Rakshit The KODERUNNERS Community