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

Embed Size (px)

TRANSCRIPT

<p>PowerPoint Presentation</p> <p>Creative Coding 101 - Abhik Biswas </p> <p>The KODERUNNERS Community</p> <p>Creative Coding 101Introduction to ProcessingBy : Abhik Biswas &amp; Soumik Rakshit, CSE</p> <p>The KODERUNNERS Community</p> <p>Hands on : Creative Coding ; Perlin Noise : MineCraft , Data Analysis : Bar Graph, 2</p> <p>What is Creative codingCreative coding is a type of computer programming in which the goal is to create something expressive instead of something functional.</p> <p> Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>The 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 </p> <p>The KODERUNNERS Community</p> <p>Computers are useless. They can only give you answers.- Pablo Picasso Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p> Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Turning a code into creative code. How? Code is more than a tool Code is mathematical --&gt; Beauty, Complexity Code can be surprising --&gt; Emergence Code can be interactive --&gt; Playfulness Code can be Creative Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Creative Coding+Sensors=Creative Technology Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Possibilities of Creative CodingData VisualizationGenerative ArtAudio-Visual installationProjection MappingInteractive environments Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Processing Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Introduction 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 </p> <p>The KODERUNNERS Community</p> <p>Creative Coding 101 - Abhik Biswas </p> <p>The KODERUNNERS Community</p> <p>Why 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 </p> <p>The KODERUNNERS Community</p> <p>Creative Coding 101 - Abhik Biswas </p> <p> ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Cartesian Plotting in ProcessingThink about graph paperHow would you draw a line between (0, 0) and (5,5)? Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>EX : 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 -&gt; Run Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>line(10, 10, 90, 90);</p> <p>X and Y coordinates of the first pointX and Y coordinates of the second point Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Why such an output? Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>EX : 01 Cartesian Map in Processing </p> <p>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 </p> <p>The KODERUNNERS Community</p> <p>Basic ShapesPoints, Rectangles, Triangles, Quadrilaterals etc.Eg: point (10,10) represents a point at (10,10) Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>rectangle(20, 20, 50, 50);</p> <p>X and Y coordinates of the first pointLength and Width of the rectangle Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>quad(38,31,86,20,69,63,30,76);</p> <p>X and Y coordinates of the 1st point</p> <p>X 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 </p> <p>The KODERUNNERS Community</p> <p>triangle(13,75,28,20,26,75);</p> <p>X and Y coordinates of the 1st point</p> <p>X and Y coordinates of the 2nd pointX and Y coordinates of the 3rd point Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Ellipses 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 </p> <p>The KODERUNNERS Community</p> <p>Representing 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 </p> <p>The KODERUNNERS Community</p> <p>Experiment 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 </p> <p>The KODERUNNERS Community</p> <p>Opacity / TransparencyOpacity/Transparency also defined separately in the fill function0 = completely transparent255 = completely opaque Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>fill(255, 0, 0);rect(5, 5, 70, 30);</p> <p>fill(0, 255, 0);rect(25, 25, 40, 60);</p> <p> Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>fill(255, 0, 0);rect(5, 5, 70, 30);</p> <p>fill(0, 255, 0, 127);rect(25, 25, 40, 60);</p> <p>Transparency Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Stroke 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);</p> <p> Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Stroke Colorstroke(color);*Could be a single value (to specify gray scale)*Could be 3 values for RGB</p> <p> Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Hands on Demo - 1CREATE AN ALIEN FIGURE Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Practice Problem:CREATE A SNOWMAN Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>THANK YOU Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p> Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p> <p>Back Creative Coding 101 - Abhik Biswas ; Soumik Rakshit </p> <p>The KODERUNNERS Community</p>