srenorg (8) Making drawings with code | Drawing basics | nro to JS: Drawing & Animation | Computer programming | Computing | Khan Academy Iv) Khan Academy Computing » Computer < Drawing basics programming » Intro to JS: . . . Drawing & Animation Making drawings with Drawing basics Drawing basics code - 2 ellipse(2i2, 208, 283, 318); 59 Making drawings with 2 pe Mex 3 eltépse(222, 250, 198, 72)5 5 ellipse(ise, 150, 38, 38); _ , é [B) Stick tee number 7 eutpse(a8, 89, 3, 205 3 Challenge: Simple snowman Drawing more shapes with code Challenge: Waving snowman Next tutorial Coloring > About Documentation Spin- Transcript offs ProcessingJS Shapes rect(x, ys wh) ellipse, ys ws hy triangle(xt, y2, Bine(xt, yt, x2, x2, y2, 383, y3) yay htps:wwkhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code we.point(x, y) bezier(x, yt, ox, gy, 2, cy, 22, y2) image(image, x, y, width*, height*) See also: «11 pselode, rectMode, imag (8) Making drawings with code | Drawing basics | nro to JS: Drawing & Animation | Computer programming | Computing | Khan Academy arc(x, yy wy hy start, stop) quad(x1, yl, x2, Y2, 33, YB, x4, ya) eode, strokecap, berierPoint, bezierTangent, curve, curvePoint, curveTangent, curveTightness, Complex Shapes beginshape() / endshape() / vertex() beziervertex() See also: strotezoin, curverigntness Colors bbackground(r, g, b) Set the background color noFi11() Turn off fill for shapes strokeweight(thickness) Change the thickness of lines and outlines color(r, g, b) Store a color ina variable lerpcolor(ct, ¢2, amount) Find color between 2 colors See also: colertiode, rea, green, blue, Text text(text, x, y) Draw some text htpsswwKhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code curvevertex() FAlL(r, @, 0) Set the fill color for shapes stroke(r, g, b) Set the outline color for shapes nostrake() ‘Tum off outlines for shapes blendcolor(ct, ¢2, ODE) Blend two colors together ipa, hue, saturation, brightness textFont(font, size*) Changes the font of text aesrenorg (8) Making drawings with code | Drawing basics | nro to JS: Drawing & Animation | Computer programming | Computing | Khan Academy textSize(size) Change the size of text See also: textwidth, textascent, textBescent,textLeading, textAlign Transform rotate(angle) scale(anount) Rotate shapes by an angle Scale shapes in both dimensions translate(x, y) ‘Translate shapes by an offset See also: pushtistrix/poptatrix, resettatrx, préntvatrix Environment width / height draw = function(){ } ‘The size of the canvas Called repeatedly during program execution playSound(sound) Plays one of the allowed sounds See also: Progran.assertequal, Program. restart, franetate( fps), ‘ranecount, 100p,naLoop Mouse mmouseX, mouseY Pmousex, pmouseY Current coordinates of the Past coordinates of the mouse mouse rmouseButton rousesPressed Which button is pressed Whether mouse is being pressed mouseClicked = function(){ } mousePressed = function(){ } Called when mouse is clicked Called when mouse is pressed mouseReleased = function(){ }nouseMoved = function(){ } Called when mouse is released Called when mouse is moved hitps:wwKhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code anemousebragged (8) Making drawings with code | Drawing basics | nro to JS: Drawing & Animation | Computer programming | Computing | Khan Academy function(){ } mouseover = function(){ } Called when mouse is dragged Called when mouse moves mousedut = funetion(){ } over canvas Called when mouse moves out of canvas Keyboard key Number representing which key is pressed keyIsPressea True if a key is being pressed, false otherwise keyReleased = function(){ } Called when a key is released Math random(low, high) Generate a random number constrain(value, min, max) Constrain value between min and max mmax(numt, nun2) Return the maximum of two numbers Log(nun) Take the logarithm of a number sq(nun) ‘Square a number round (num) htps:wwKhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code keycode Represents when a special key is pressed keyPressed = function(){ ) Called when a key is pressed keytyped Called when a key is typed function(){ } dist(xa, yl, 22, y2) Calculates the distance between two points vin(nund, num2) Return the minimum of two numbers abs (nun) Take the absolute value of a number ow(nun, exponent) Raise a number to an exponent sart(num) ‘Take the square root of a number ceil(num) anasrenorg (8) Making drawings with code | Drawing basics | nro to JS: Drawing & Animation | Computer programming | Computing | Khan Academy Return nearest integer Return nearest integer of greater/equal value oor (num) Pvector(x, y) Return nearest integer of An object that describes a 2- lesser/equal value dimensional vector See also: nag, exp, map, nora, Lerp, noise, noiseDeratl, Trigonometry cos (degrees) sin(degrees) Take the cosine of an angle Take the sine of an angle tan(degrees) ‘Take the tangent of an angle See also: acos, asin, atan, atan2, radians, degrees, aneletode Date & Time day() / wonth() / year) hour() / minute() / second() Current date Current time s11is() Milliseconds elapsed since program start Debugging debug(argt, arg2, ..)_printin(¢ata) Print to your browser's Print a new line to the canvas developer console console print(data) Print to the canvas console JavaScript var érawwinston = function(){var array = [@, 1, 2, 3, 4] ? Make an array of 5 numbers Define a new function if (x © 29) Only run code ifacertain for (var i= htps:wwKhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code siesrenorg (8) Making drawings with code | Drawing basics | nro to JS: Drawing & Animation | Computer programming | Computing | Khan Academy condition is true Repeat code a fixed number of times while (x < 250)( } ‘Only run code while a certain condition is true Our documentation does not cover the many ways to use JavaScript. Learn more at: Mozilla Developer Network: JavaScript Guide W3Schools JavaScript Tutorial Based on: ProcessingJS reference. Licensed under: CC BY- NC-SA 2.0 license, Sort by: Top Voted v Questions — Tips & Thanks Question @ Ask a question... eg 3years ©@O greenlanturn ago how do you draw on the right side of the code 17 a comments votes 4 Urvote 7 Downvote Reply years Alexa Tamburrino 2go You don't. You have to use hitps:wwKhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code enesrenorg (8) Making drawings with code | Drawing basics | nro to JS: Drawing & Animation | Computer programming | Computing | Khan Academy the coding on the left hand side to alter the picture on the right. (oo tev Down comments wes) 4 Ute V7 Dowrvate See 64 more replies nfskrish 2 months ago iam 300 years old is it late to study this? 5 0 pve ve Reply» comments vetes) 2 Uevete WV Downvote 2 © 6 months Dalendrion 2g0 It depends. What is the average life expectancy of your species? comaents Qos A Upwtev 7 Dowrvote See 11 more replies Sheryl Hilt 5 months ego How do you know where the center of any screen is? Is it always 200? 2 6 comments votes) 5 g mont Evan Silverman ago Reply A Unote WV Dowmate The default canvas size for Khan Academy is 400x400 so most of the time the center is located at 200x200. Khan Academy htpsswwKhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code m251222019 (3) Making rawings with code | Drawing basis | nro to JS: Drawing & Animation | Comper programming | Computing | Khan Academy also allows you to change the canvas size have a 500 oF 600 pixel length or width. This would change the center to either 250 or 300 respectively. 2 ° Upvotev 7 Downe comments votes) Army “ See 4 more replies ¥ Godieinahole 2 years ago how do u change the colr of something 6 6 Reply» comments votes) 4 Uevete YW Downvote 2 a months’ Mehran Sultani ago background( Correct Number // RGB 2 comments. votes) A Uovotev VY Dowrvote See 8 more replies 7 2 months Rakshaa Viswanathan 220 How do you know which is the centre of the screen? Reply © comment vete) 4 Uavete J Downvote f 7months @ Tazal ago simple. use the width and height hitps:wwKhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code anasrenorg (8) Making drawings with code | Drawing basics | nro to JS: Drawing & Animation | Computer programming | Computing | Khan Academy variables heres an example var middle_x = width/2; var middle_y = height/2 1 (13 comment votes) Av e WV Downvote See 4 more replies 2 years © Victoria Ragbeer ago Why do you have to type ellipse at first? Why can't you type circle or face? Reply 2 2 A upwte J Dowmete | comments vat) ° a © f year nichokwok15 ago If you type "face", the computer won't recognise the program unless you type a progran which starts with "to face’. The first sentence may be incorrect. Though if you want to create a circle, which is a type of ellipse, make the third and fourth numbers the same, like the example below: ellipse( 200, 200, 300 , 300); Don't forget the semi-colon. Hoped this helped! 3 (4 comments votes). A Uvotev 7 Dowrvote See 7 more replies hitps:wwKhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code ene51222019 (3) Making rawings with code | Drawing basis | nro to JS: Drawing & Animation | Computer programming | Computing | Khan Academy Nicholas a year ago In the hot list, and in the top list, | see many amazing programs. Did the people who made those programs gain all that programming knowledge from Khan Academy, or did they also take some other course, like Code Academy, for instance? 1 4 Reply ® comment votes) A Uowie J Don a year Larry Serflaten 2g0 Experience is not usually from ‘other courses' as it is from years of effort. You simply have to put forth the time and effort to gain skills. If you "learn something new every day" (on average) you will be considerably more knowledgeable after 3 years, than after 3 months. If you notice, people on the hot list often have a project page full of other programs they have written, Not all of them are games or applications, some are simple tests and demos. The idea is you keep creating, you become prolific, and after a while you will be writing hot programs too. Of course it helps if you have a group of classmates to vote your game up, right away! :-) Comment 7... A UowteVY Dowrvate htpsswwKhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code sonesrenorg {@)Moking drawings wth code | Drawing basics | Into to JS: Drawing & Animation | Computer programming | Computing| Khan Academy See 5 more replies 0 Levi 3 years ago how do i save my drawing , Reply » Comment 2. A g years Blaze Runner™ ago ate 87 Dowrvate | There's a save button in the right hand corner. Comment © votes) 4 Uovotev7 Dowrvate See 1 more reply o zhash 2 year ago Hi, | have been practising to make circles with parameters, but it takes me long and i keep forgetting, so managed to do well, but than how can i save my work. 1 @ Reply © comment votes A Uowie J Downvete f a year WD supersanic 2g0 That's great that you're spending time to learn it! :D If you're on an official program press the "spin-off" button, if you're on your ‘own, press the "save" button. :) 1 6 comment votes) A Urvate W7 Downvote htpsswwKhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code sesrenorg (3) Making drawings with code | Drawing basics | Inro to JS: Drawing & Animation | Computer programming | Computing | Khan Academy See 3 more replies prietoc2022 3 years ago how did you make the x and y axis at © 2:33? (2 Reply » Comment e420) A Upwote SJ Downvete | 3 e years Jadah Collins ago its only the first quadrant so y js at tbe top xis on the bottom Comment 8...) A UowteVV Dowrvote See 1 more reply Show more... All code is owned by its respective author and made available under the following license: MIT All non-code (such as writing, drawings, images, etc.) are also ‘owned by their respective author and made available under the following license: Creative Commons Attribution License For more information please see: Terms of Service nse Quick tip: number scrubbing > htps:wwKhanacademy orglcomputinglcomputer-programmingiprogrammingldrawing-basics/pUmaking-drawings-wih-code vane