Categories
Dechreuwr Lliwiau Java Mae prosesu Prosiect Enfys

Gosod yr amgylchedd codio

Mae'r gweithgaredd hwn yn eich cychwyn gyda Phrosesu. Lawrlwythwch, rhedwch a lluniwch rhai llinellau lliw. Mae'r iaith rhaglennu gyfrifiadurol Prosesu, yn ffordd wych o ddechrau codio. Rydych chi'n cael canlyniad gweledol cyflym o ychydig o linellau o god.

Mae prosesu yn ffordd wych i ddechrau codio, a hyd yn oed i barhau efo godio! Mae'n rhyngwyneb syml ar gyfer brasluniau, sy'n Amgylchedd Datblygu Integredig (Integrated Development Environment - IDE), lle rydych chi'n teipio'r Cod. Gallwch chi greu lluniau gweledol yn gyflym. Fel y gwelwn, pa mor cŵl yw gweld canlyniadau eich rhaglennu eich hun, drwy ddim ond o ychydig linellau o god! Hefyd, pan fyddwch chi'n defnyddio Prosesu, rydych chi mewn gwirionedd yn datblygu cod mewn Java, felly rydych chi hefyd yn dysgu Java.

Ychydig o hanes

Mae prosesu was started in 2001, by Ben Fry and Casey Reas, who were both previously at the Aesthetics and Computation Group at the MIT Media Lab. And then in 2012, with Dan Shiffman, they started the Processing Foundation. Processing is more than one language; it is more about developing software literacy, with a focus on visual arts and technology. Consequently, there are several different versions to choose, including: p5.js sef llyfrgell JavaScript lle gellir datblygu brasluniau prosesu ar gyfer porwr. Mae Processing.py yn galluogi prosesu i gael ei godio mewn Python. Hefyd mae Processing for Android, a Prosesu ar gyfer Pi yn eich galluogi i godio ar y Raspberry Pi. Yn ogystal, mae Dan Shiffman wedi ysgrifennu llyfr gan ddefnyddio prosesu, a elwir yn Natur y Cod, sy'n canolbwyntio ar fodelu priodweddau esblygiadol ac ymddangosol natur.

Mae dysgu Prosesu yn fuddsoddiad da o'ch amser. Yn wir, rydym wedi bod yn defnyddio Prosesu, i addysgu egwyddorion cyfrifiadureg, mewn rhai o'n modiwlau yn y Brifysgol. Mae'r rhain yn cynnwys modiwl Graffeg Gyfrifiadurol yn yr 2il flwyddyn, a'r modiwl delweddu gwybodaeth lefel Meistr. Mae'r montage uchod yn dangos peth o waith ein myfyrwyr. Yn ogystal, rydym wedi ei ddefnyddio i ddatblygu rhaglenni cyfrifiadurol mwy datblygedig. Datblygwyd y llun isod gan ddefnyddio'r llyfrgelloedd Prosesu, fel cyfraniad i Ddoethuriaeth mewn Athroniaeth (PhD). Mae'r teclyn, o'r enw Vinca1,2, yn delweddu cludo dŵr a gwaddod ar hyd aberoedd.

Cam 1. Lawrlwytho a gosod

Download Processing. Available for Windows, MacOS, Linux.

First, you need to download and install Processing. Go to http://processing.org/download/

Rhedeg Prosesu, i wneud yn siŵr ei fod wedi'i osod yn iawn. Dylai ffenestr ymddangos. Bydd ganddo fotwm chwarae Processing play button a botwm stopProcessing stop button ar y brig. Bydd Prosesu yn creu enw ffeil rhagosodedig (y gallwch ei newid yn ddiweddarach). Gallwch deipio cod yn y rhanbarth braslun, a bydd unrhyw allbwn testun yn ymddangos yn y tab Consol, neu wallau yn y tab gwallau.

Nawr pwyswch chwarae Processing play button. Dylai ffenestr fach ymddangos. Dyma le bydd eich lluniau yn ymddangos. Ar hyn o bryd, oherwydd nad oes gennym unrhyw god, bydd yn dangos blwch llwyd yn unig mewn ffenestr fach wedi'i labelu "braslun ..." Processing - first sketch output (it is a blank page of grey colour).

Cam 2. Dechreuwch drwy dynnu llinell

I dynnu llinell mewn Prosesu rydym yn defnyddio'r gorchymyn line. Dechreuwch ar eich siwrnai codio drwy ysgrifennu'r canlynol: line(15,25,70,90);

Nawr, chwaraewch y cod. Bydd hyn yn creu un llinell.

Gan fod Prosesu yn glyfar, mae ganddo set gyfan o werthoedd rhagosodedig. Mae maint y sgrin, lliw'r llinell, a'r lliw cefndir eisoes wedi eu gosod ar eich cyfer. Gallwn eu newid yn ddiweddarach, ond ar hyn o bryd: lliw'r llinell yw du, lliw'r cefndir yn llwyd, a'r maint yn 100 gan 100.

Mae'r llinell wedi ei thynnu rhwng y cyfesurynnau x a y (15, 25) a'r ail x, y gyda chyfesurynnau o (70, 90). Gallwn feddwl am y ffwythiant line yn derbyn pedwar paramedr (X1, Y1, X2, Y2) a thynnu'r llinell gyda'r lliw cyfredol ar y dudalen. Cofiwch, dywedasom ei fod yn defnyddio set rhagosodedig o werthoedd, ac mae'r dudalen eisoes wedi'i osod ar 100 wrth 100. Gwelwn o'n llun fod y safle (0, 0) ar y gornel uchaf ochr chwith.

Mae'n bosib tynnu pethau oddi ar y sgrin, felly byddwch yn ofalus pa werthoedd rydych chi'n eu teipio! Beth am drio'r llinellau cod canlynol.

line(-15, -10, 100, 100);
line(-15, -25, -70, -90);

Bydd y cod yn rhedeg, heb broblemau. Ond mae'r llinell gyntaf yn hanner oddi ar y dudalen, tra bod yr ail yn cael ei dynnu oddi ar y sgrin, ac felly nid yw'n cael ei weld gyda maint y sgrin a'r safle presennol.

Processing result: thee lines making an arrow shape.

Nawr, gadewch i ni dynnu tair llinell, i wneud symbol saeth. Gallwn hyd yn oed newid lled y llinell. Rydym yn rheoli hyn drwy newid strokeWeight.

strokeWeight(10);
line(10, 10, 80, 10);
strokeWeight(5);
line(10, 10, 80, 80);
strokeWeight(10);
line(10, 10, 10, 80);

Cam 3. Ychwanegu rhywfaint o liw

Os nad ydych yn gwybod am liw RGB, yna rwy'n awgrymu eich bod yn cymryd golwg ar y gweithgaredd blaenorol ar lliwiau RGB.

Mewn Prosesu, mae lliwiau RGB yn cael eu diffinio gan werthoedd rhwng 0 a 255. I newid lliw'r llinell, mae angen i ni addasu'r gwerth lliw sy'n cael ei osod yn 'stroke'.

Gadewch i ni newid lliw'r llinell. I'w newid i coch rydym yn ysgrifennu stroke(255,0,0).

strokeWeight(10);
stroke(255,0,0);
line(10, 10, 80, 10);
strokeWeight(5);
line(10, 10, 80, 80);
strokeWeight(10);
line(10, 10, 10, 80);

Cyntefigion a Phriodoleddau

Gadewch i ni nodi ychydig o bethau gyda'r cod hyd yn hyn:

Yn gyntaf, 'stroke' (fel llawer o'r gorchmynion eraill) mae ganddo werth rhagosodedig. Mae lliw rhagosodedig 'stroke' yn ddu.

Yn ail, mae dau fath gwahanol o bethau. Mae gennym orchymyn line sy'n diffinio siâp y gwrthrych yr ydym yn ei osod, a strokeWeight a 'stroke' sy'n disgrifio sut y bydd yn ymddangos. Mewn termau graffeg gyfrifiadurol, enwir y rhain yn gyntefigion a priodoleddau, yn eu tro. Cyntefigion yw'r gwrthrychau geometrig. Siapiau sylfaenol ydynt. Mae Priodoleddau'n disgrifio sut mae'r siapiau hynny'n ymddangos.

Yn drydydd, rydym yn sylwi bod trefn i'n llinellau cod. Rydym yn gyntaf yn newid gwerthoedd rhai priodoleddau, megis 'strokeWeight', a lliw 'stroke' (nid yw drefn y ddau yma yn bwysig), ond yna rydym yn tynnu'r llinell. Mewn geiriau eraill, mae angen i ni ddiffinio sut y bydd yn ymddangos yn gyntaf (drwy ddiffinio ei briodoleddau) cyn esbonio'r hyn y byddwn yn ei dynnu.

Yn bedwerydd, nid oes angen i ni barhau i newid lliw y 'stroke' , os bydd pob llinell yr un lliw. Yr hyn a wnawn yw gosod gwerth y priodoleddau unwaith ac yna mae'r llyfrgell graffeg yn cofio'r gwerth.

Yn bumed, pan fydd gwerth priodoledd wedi'i osod, bydd yn effeithio ar bob cyntefig sy'n defnyddio'r priodoledd hwnnw. Felly, er enghraifft, os byddwch yn diffinio lliw'r 'stroke', byddai unrhyw wrthrychau sy'n dilyn (boed yn elips, yn betryalau neu beth bynnag) yn cael eu heffeithio.

Cam 4. Newid priodoleddau gwahanol

Gadewch i ni hefyd newid ychydig o briodoleddau gwahanol.

Yn gyntaf, byddwn yn newid maint y ffenestr gan ddefnyddio size. I newid maint y ffenestr, defnyddiwn y ffwythiant size. Y maint rhagosodedig yw 100 gan 100. Mae'n sgwâr bach. Byddwn yn ei wneud yn fwy. Gadewch i ni ei wneud yn 200 wrth 200.

size(200,200);

Nawr gadewch i ni newid lliw ycefndir. Lliw llwyd golau yw lliw rhagosodedig y cefndir. Cofiwch o'r gweithgaredd lliwiau RGB , mae angen defnyddio'r gwerth uchafswm i gael gwyn. Felly, bydd background(255)yn newid lliw'r cefndir i wyn, a bydd cefndir (45) yn ei gwneud yn llwyd tywyll, a chefndir (0, 0, 255) yn las, a bydd y cefndir (160, 255, 160) yn newid y cefndir i wyrdd golau iawn. (Dylech roi cynnig ar liwiau cefndir gwahanol). Am rwan, gadewch i ni gadw at wyn.

background(255);

Cam 5. Llinellau lliw gwahanol

Yn y dasg olaf, rydym yn edrych ar gynhyrchu nifer o linellau lliw. (Byddwn yn archwilio dulliau i wneud y cod hwn yn well yn y dyfodol, ond am nawr, byddwn yn copïo llinellau i lawr y dudalen).

Yn yr ymarfer hwn, byddwn yn defnyddio ar hap. Mae'r swyddogaeth hon yn gwneud yr hyn y mae'n ei ddweud: mae'n dychwelyd gwerthoedd annisgwyl! Felly os ydyn ni'n ysgrifennu random(10) bydd yn rhoi gwerth newydd, ac annisgwyl, i ni rywle rhwng 0 a 1. Mae hyn yn ddefnyddiol iawn. Gallwn ei ddefnyddio i newid y lliwiau i un annisgwyl! Gallwn hefyd ei ddefnyddio i newid y llinell i safleoedd x, y ar hap.

Gadewch i ni gymryd yr hyn yr ydym wedi'i ddysgu hyd yn hyn, a thynnu tair llinell, gyda strokeWeight o 2, pob un o'r gyfesurynnau'r llinell (X1, Y1, X2, Y2) â safleoedd ar hap , a phob un â lliwiau ar hap. Mae'r cyfan wedi'u gosod mewn ffenestr 200 wrth 200 o faint, gyda chefndir gwyn.

size(200,200);
background(255);
strokeWeight(2);
stroke(random(255),random(255),random(255));
line(random(200), random(200), random(200), random(200));
stroke(random(255),random(255),random(255));
line(random(200), random(200), random(200), random(200));
stroke(random(255),random(255),random(255));
line(random(200), random(200), random(200), random(200));
Image produced with Processing, describing three randomly positioned lines, with random colours.

Bob tro y byddwch yn pwyso chwarae, bydd yn creu allbwn gwahanol. Ewch amdani!

Hefyd, sylwch ein bod wedi gosod rhai gwerthoedd, o'r mewnbwn i ar hap, i 200, ac eraill i 255. Mae'r gorchymyn random(255), fel y dangosir ar linell 4, 6 ac 8 (uchod) yn cael eu defnyddio oherwydd bod lliw RGB wedi'i ddiffinio rhwng 0 a 255, tra bod random(200) wedi'i hysgrifennu oherwydd ein bod wedi gosod y size o'r ffenestr allbwn i 200 wrth 200.

Cam 6. Ymarferion ychwanegol

  • Ceisiwch newid y lliwiau i ymddangos mewn lliwiau llwyd ar hap.
  • Gwnewch faint y ffenest yn fwy (i ddweud) 300 wrth 300, ac addaswch weddill y cod yn briodol. Sylwch ar yr hyn rydych wedi'i newid.
  • Ychwanegwch 10 llinell ar hap arall (yn yr achos hwn defnyddiwch gopi a gludo!) a meddyliwch sut y gallech chi wneud y cod hwn yn well.

CYFEIRIADAU.

  1. R. L. S. F. George, P. E. Robins, A. G. Davies, P. D. Ritsos, and J. C. Roberts, “Interactive visual analytics of hydrodynamic flux for the coastal zone,” Environmental Earth Sciences, vol. 72, no. 10, pp. 3753–3766, Nov. 2014. 
  2. R. L. S. F. George, P. D. Ritsos, and J. C. Roberts, “Interactive Oceanographic Visualization using spatially-aggregated Parallel Coordinate Plots,” in Posters presented at EuroVis 2014, June 9-13 , Swansea, Wales, UK, 2014. 

By Jonathan

Mae Jonathan yn gyson yn dylunio pethau, yn addysgu pobl, ac yn dysgu drwy'r amser. Mae'n athro delweddu yn yr Ysgol Cyfrifiadureg a Pheirianneg Electronig, Prifysgol Bangor, y DU. Mae'n arwain y grwpiau Delweddu, Data, Modelu a Graffeg (VDMG), yn arwain prosiect enfys ac mae'n un o awduron y llyfr Springer "Five Design-sheets ", dull dylunio braslunio.

6 replies on “Set up the coding environment”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.